|
@@ -1,109 +1,126 @@
|
|
<template>
|
|
<template>
|
|
<u-sticky class="shadow-default" bgColor="#fff" style="top: 0">
|
|
<u-sticky class="shadow-default" bgColor="#fff" style="top: 0">
|
|
<u-tabs
|
|
<u-tabs
|
|
- :list="list"
|
|
|
|
- :current="current"
|
|
|
|
|
|
+ :list="tabsList"
|
|
|
|
+ :current="tabsCurrent"
|
|
@click="tabsClick"
|
|
@click="tabsClick"
|
|
- :scrollable="list.length >= 5 ? true : false"
|
|
|
|
|
|
+ :scrollable="tabsList.length >= 5 ? true : false"
|
|
lineColor="#333"
|
|
lineColor="#333"
|
|
:activeStyle="{ color: '#333' }"
|
|
:activeStyle="{ color: '#333' }"
|
|
:inactiveStyle="{ color: '#909399' }"
|
|
:inactiveStyle="{ color: '#909399' }"
|
|
></u-tabs>
|
|
></u-tabs>
|
|
</u-sticky>
|
|
</u-sticky>
|
|
|
|
|
|
- <scroll-view class="scroll-height" :scroll-y="true" :data-theme="'theme-' + proxy.$settingStore.themeColor.name" style="padding-bottom: 44px">
|
|
|
|
- <oa-touch class="deviceManage" @change="touchChange">
|
|
|
|
- <template #content>
|
|
|
|
- <uni-swipe-action>
|
|
|
|
- <uni-swipe-action-item class="bg-white">
|
|
|
|
- <view class="content">
|
|
|
|
- <view class="block p10">
|
|
|
|
- <u-input v-model="dataInput" placeholder="请输入设备编号" @blur="blur" shape="circle" prefixIcon="search" prefixIconStyle="color: #0c7bf9"> </u-input>
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
- <u-empty v-if="dataList.length <= 0" text="暂无数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"> </u-empty>
|
|
|
|
-
|
|
|
|
- <u-collapse @change="change" @close="close" @open="open" accordion v-else>
|
|
|
|
- <u-collapse-item class="uCollapseItem" v-for="da in dataList" :key="da">
|
|
|
|
- <template #title>
|
|
|
|
- <view class="flex">
|
|
|
|
- <view class="cu-avatar lg" style="margin: 0 10px auto 0; background-color: rgba(0, 0, 0, 0)">
|
|
|
|
- <image class="image-bg" style="width: 80rpx; height: 80rpx" src="@/static/images/deviceManage/1.png"></image>
|
|
|
|
- </view>
|
|
|
|
- <view style="width: 100%">
|
|
|
|
- <view class="flex" style="color: #000000">
|
|
|
|
- <view>设备编号:{{ da.deviceCode }}</view>
|
|
|
|
- <view class="deviceStatus" v-if="da.deviceStatus == 0" style="background-color: #aeaeae"> 离线 </view>
|
|
|
|
- <view class="deviceStatus" v-else-if="da.deviceStatus == 1" style="background-color: #12c100"> 正常 </view>
|
|
|
|
- <view class="deviceStatus" v-else-if="da.deviceStatus == 2" style="background-color: #ff1313"> 故障 </view>
|
|
|
|
- <view class="deviceStatus" v-else style="background-color: #0d88f0"> 告警 </view>
|
|
|
|
- </view>
|
|
|
|
- <view style="display: flex; font-size: 14px; color: #666666; margin: 10px 0">
|
|
|
|
- <view style="width: 50%; word-break: break-all">监测对象:{{ da.installAddress }}</view>
|
|
|
|
- <view style="width: 50%; word-break: break-all; padding-left: 10px">所属单位:{{ da.companyName }}</view>
|
|
|
|
|
|
+ <oa-scroll
|
|
|
|
+ customClass="bg-white scroll-height"
|
|
|
|
+ :isSticky="true"
|
|
|
|
+ :refresherLoad="false"
|
|
|
|
+ :refresherLoadTitle="false"
|
|
|
|
+ :refresherEnabled="false"
|
|
|
|
+ :refresherEnabledTitle="false"
|
|
|
|
+ :refresherDefaultStyle="'none'"
|
|
|
|
+ :refresherThreshold="44"
|
|
|
|
+ :refresherBackground="'#f5f6f7'"
|
|
|
|
+ :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
|
|
|
|
+ >
|
|
|
|
+ <template #default>
|
|
|
|
+ <oa-touch class="deviceManage" @change="touchChange">
|
|
|
|
+ <template #content>
|
|
|
|
+ <uni-swipe-action>
|
|
|
|
+ <uni-swipe-action-item class="bg-white">
|
|
|
|
+ <view class="content">
|
|
|
|
+ <view class="block p10">
|
|
|
|
+ <u-input v-model="deviceCode" placeholder="请输入设备编号" @blur="blur" shape="circle" prefixIcon="search" prefixIconStyle="color: #0c7bf9"> </u-input>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <u-empty v-if="dataList.length <= 0" text="暂无数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"> </u-empty>
|
|
|
|
+
|
|
|
|
+ <u-collapse @change="change" @close="close" @open="open" accordion v-else>
|
|
|
|
+ <u-collapse-item class="uCollapseItem" v-for="da in dataList" :key="da">
|
|
|
|
+ <template #title>
|
|
|
|
+ <view class="flex">
|
|
|
|
+ <view class="cu-avatar lg" style="margin: 0 10px auto 0; background-color: rgba(0, 0, 0, 0)">
|
|
|
|
+ <image class="image-bg" style="width: 80rpx; height: 80rpx" src="@/static/images/deviceManage/1.png"></image>
|
|
</view>
|
|
</view>
|
|
- <view style="display: flex; font-size: 14px; color: #666666">
|
|
|
|
- <view style="width: 50%; word-break: break-all">负责人:{{ da.linkPerson }}</view>
|
|
|
|
- <view style="width: 50%; word-break: break-all; padding-left: 10px">联系电话:{{ da.linkPhone }}</view>
|
|
|
|
|
|
+ <view style="width: 100%">
|
|
|
|
+ <view class="flex" style="color: #000000">
|
|
|
|
+ <view>设备编号:{{ da.deviceCode }}</view>
|
|
|
|
+ <view class="deviceStatus" v-if="da.deviceStatus == 0" style="background-color: #aeaeae"> 离线 </view>
|
|
|
|
+ <view class="deviceStatus" v-else-if="da.deviceStatus == 1" style="background-color: #12c100"> 正常 </view>
|
|
|
|
+ <view class="deviceStatus" v-else-if="da.deviceStatus == 2" style="background-color: #ff1313"> 故障 </view>
|
|
|
|
+ <view class="deviceStatus" v-else style="background-color: #0d88f0"> 告警 </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view style="display: flex; font-size: 14px; color: #666666; margin: 10px 0">
|
|
|
|
+ <view style="width: 50%; word-break: break-all">监测对象:{{ da.installAddress }}</view>
|
|
|
|
+ <view style="width: 50%; word-break: break-all; padding-left: 10px">所属单位:{{ da.companyName }}</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view style="display: flex; font-size: 14px; color: #666666">
|
|
|
|
+ <view style="width: 50%; word-break: break-all">负责人:{{ da.linkPerson }}</view>
|
|
|
|
+ <view style="width: 50%; word-break: break-all; padding-left: 10px">联系电话:{{ da.linkPhone }}</view>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- </view>
|
|
|
|
- </template>
|
|
|
|
|
|
+ </template>
|
|
|
|
|
|
- <view class="u-collapse-content">
|
|
|
|
- <!-- <view style="display: flex; flex-wrap: wrap; margin-left: 5%">
|
|
|
|
|
|
+ <view class="u-collapse-content">
|
|
|
|
+ <!-- <view style="display: flex; flex-wrap: wrap; margin-left: 5%">
|
|
<view style="width: 50%; height: 30px; line-height: 30px" v-for="ch in da.dataList" :key="ch">
|
|
<view style="width: 50%; height: 30px; line-height: 30px" v-for="ch in da.dataList" :key="ch">
|
|
<span>{{ ch.label }}:</span>
|
|
<span>{{ ch.label }}:</span>
|
|
<span :style="ch.value === '正常' ? 'color:#12C100' : 'color:#FF0101'">{{ ch.value }}</span>
|
|
<span :style="ch.value === '正常' ? 'color:#12C100' : 'color:#FF0101'">{{ ch.value }}</span>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
</view> -->
|
|
- <view style="display: flex; flex-wrap: wrap; margin-left: 5%">
|
|
|
|
- <view style="width: 50%; height: 30px; line-height: 30px" v-for="ch in da.dataList" :key="ch">
|
|
|
|
- <span>{{ ch.portName }}:</span>
|
|
|
|
- <span>{{ ch.portData }}</span>
|
|
|
|
|
|
+ <view style="display: flex; flex-wrap: wrap; margin-left: 5%">
|
|
|
|
+ <view style="width: 50%; height: 30px; line-height: 30px" v-for="ch in da.dataList" :key="ch">
|
|
|
|
+ <span>{{ ch.portName }}:</span>
|
|
|
|
+ <span>{{ ch.portData }}</span>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- </view>
|
|
|
|
- </u-collapse-item>
|
|
|
|
- </u-collapse>
|
|
|
|
- </view>
|
|
|
|
- </uni-swipe-action-item>
|
|
|
|
- </uni-swipe-action>
|
|
|
|
- </template>
|
|
|
|
- </oa-touch>
|
|
|
|
- </scroll-view>
|
|
|
|
|
|
+ </u-collapse-item>
|
|
|
|
+ </u-collapse>
|
|
|
|
+ </view>
|
|
|
|
+ </uni-swipe-action-item>
|
|
|
|
+ </uni-swipe-action>
|
|
|
|
+ </template>
|
|
|
|
+ </oa-touch>
|
|
|
|
+ </template>
|
|
|
|
+ </oa-scroll>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
|
+/*----------------------------------依赖引入-----------------------------------*/
|
|
import { onReady, onLoad, onShow, onNavigationBarButtonTap } from "@dcloudio/uni-app";
|
|
import { onReady, onLoad, onShow, onNavigationBarButtonTap } from "@dcloudio/uni-app";
|
|
import { ref, onMounted, inject, shallowRef, reactive, watchEffect, getCurrentInstance, toRefs } from "vue";
|
|
import { ref, onMounted, inject, shallowRef, reactive, watchEffect, getCurrentInstance, toRefs } from "vue";
|
|
-import { useStores, commonStores } from "@/store/modules/index";
|
|
|
|
-
|
|
|
|
|
|
+/*----------------------------------接口引入-----------------------------------*/
|
|
import { dataRtList } from "@/api/business/mhxf/deviceManage";
|
|
import { dataRtList } from "@/api/business/mhxf/deviceManage";
|
|
-
|
|
|
|
-const commonStore = commonStores(); //全局公共Store
|
|
|
|
-
|
|
|
|
|
|
+/*----------------------------------组件引入-----------------------------------*/
|
|
|
|
+/*----------------------------------store引入-----------------------------------*/
|
|
|
|
+import { useStores, commonStores } from "@/store/modules/index";
|
|
|
|
+/*----------------------------------公共方法引入-----------------------------------*/
|
|
|
|
+/*----------------------------------公共变量-----------------------------------*/
|
|
const { proxy } = getCurrentInstance();
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
+const commonStore = commonStores(); //全局公共Store
|
|
|
|
+/*----------------------------------变量声明-----------------------------------*/
|
|
|
|
+const state = reactive({
|
|
|
|
+ deviceCode: "",
|
|
|
|
+ systemTypeNo: 5,
|
|
|
|
+ dataList: [],
|
|
|
|
+ tabsCurrent: 0,
|
|
|
|
+ tabsList: [
|
|
|
|
+ { id: 5, name: "电气火灾" },
|
|
|
|
+ { id: 4, name: "烟感" },
|
|
|
|
+ { id: 3, name: "水系统" },
|
|
|
|
+ ], //设备管理数据存储
|
|
|
|
+});
|
|
|
|
|
|
-const dataInput = ref("");
|
|
|
|
-
|
|
|
|
-const dataRes = ref(0);
|
|
|
|
-const systemTypeNo = ref(5);
|
|
|
|
-const dataList = ref([]); //设备管理数据存储
|
|
|
|
-
|
|
|
|
-const current = ref(0);
|
|
|
|
-const list = ref([
|
|
|
|
- { id: 5, name: "电气火灾" },
|
|
|
|
- { id: 4, name: "烟感" },
|
|
|
|
- { id: 3, name: "水系统" },
|
|
|
|
-]);
|
|
|
|
|
|
+const { deviceCode, systemTypeNo, dataList, tabsCurrent, tabsList } = toRefs(state);
|
|
|
|
|
|
/**
|
|
/**
|
|
* @tabs点击事件
|
|
* @tabs点击事件
|
|
*/
|
|
*/
|
|
function tabsClick(e) {
|
|
function tabsClick(e) {
|
|
- current.value = e.index;
|
|
|
|
- dataInput.value = "";
|
|
|
|
|
|
+ state.tabsCurrent = e.index;
|
|
|
|
+ state.deviceCode = "";
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
/**
|
|
@@ -111,50 +128,42 @@ function tabsClick(e) {
|
|
*/
|
|
*/
|
|
function touchChange(e) {
|
|
function touchChange(e) {
|
|
if (e == "右滑") {
|
|
if (e == "右滑") {
|
|
- if (current.value >= 1) {
|
|
|
|
- current.value--;
|
|
|
|
|
|
+ if (state.tabsCurrent >= 1) {
|
|
|
|
+ state.tabsCurrent--;
|
|
} else {
|
|
} else {
|
|
- current.value = list.value.length - 1;
|
|
|
|
|
|
+ state.tabsCurrent = state.tabsList.length - 1;
|
|
}
|
|
}
|
|
} else if (e == "左滑") {
|
|
} else if (e == "左滑") {
|
|
- if (current.value < list.value.length - 1) {
|
|
|
|
- current.value++;
|
|
|
|
|
|
+ if (state.tabsCurrent < state.tabsList.length - 1) {
|
|
|
|
+ state.tabsCurrent++;
|
|
} else {
|
|
} else {
|
|
- current.value = 0;
|
|
|
|
|
|
+ state.tabsCurrent = 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
function blur(e) {
|
|
function blur(e) {
|
|
- if (dataInput.value) {
|
|
|
|
- classifySearch({ systemType: 5, deviceCode: dataInput.value });
|
|
|
|
|
|
+ if (state.deviceCode) {
|
|
|
|
+ classifySearch({ systemType: 5, deviceCode: state.deviceCode });
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//分类信息查询 start
|
|
//分类信息查询 start
|
|
function classifySearch(params) {
|
|
function classifySearch(params) {
|
|
- // classifyData.value = []
|
|
|
|
-
|
|
|
|
dataRtList(params).then((res) => {
|
|
dataRtList(params).then((res) => {
|
|
- console.log("------");
|
|
|
|
- console.log(res.data.records);
|
|
|
|
-
|
|
|
|
- dataList.value = res.data.records;
|
|
|
|
|
|
+ state.dataList = res.data.records;
|
|
});
|
|
});
|
|
}
|
|
}
|
|
// end
|
|
// end
|
|
function goSearch() {
|
|
function goSearch() {
|
|
- if (current.value == 0) {
|
|
|
|
- console.log(current.value);
|
|
|
|
|
|
+ if (state.tabsCurrent == 0) {
|
|
systemTypeNo.value = 5;
|
|
systemTypeNo.value = 5;
|
|
- } else if (current.value == 1) {
|
|
|
|
|
|
+ } else if (state.tabsCurrent == 1) {
|
|
systemTypeNo.value = 1;
|
|
systemTypeNo.value = 1;
|
|
- console.log(current.value);
|
|
|
|
- } else if (current.value == 2) {
|
|
|
|
|
|
+ } else if (state.tabsCurrent == 2) {
|
|
systemTypeNo.value = 2;
|
|
systemTypeNo.value = 2;
|
|
- console.log(current.value);
|
|
|
|
}
|
|
}
|
|
- classifySearch({ systemType: systemTypeNo.value, deviceCode: dataInput.value, pageNum: "", pageSize: "" });
|
|
|
|
|
|
+ classifySearch({ systemType: systemTypeNo.value, deviceCode: state.deviceCode, pageNum: "", pageSize: "" });
|
|
}
|
|
}
|
|
|
|
|
|
watchEffect(() => {
|
|
watchEffect(() => {
|
|
@@ -174,15 +183,13 @@ function change(e) {
|
|
// 自定义导航事件
|
|
// 自定义导航事件
|
|
onNavigationBarButtonTap((e) => {
|
|
onNavigationBarButtonTap((e) => {
|
|
if (e.float == "right") {
|
|
if (e.float == "right") {
|
|
- uni.navigateTo({
|
|
|
|
- url: "/pages/business/zhaf/xunJian/collect/components/collectRecord",
|
|
|
|
- });
|
|
|
|
|
|
+ proxy.$tab.navigateTo("/pages/business/zhaf/xunJian/collect/components/collectRecord");
|
|
} else {
|
|
} else {
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
onLoad((options) => {
|
|
onLoad((options) => {
|
|
- // classifySearch({systemType:5,deviceCode:dataInput.value})
|
|
|
|
|
|
+ // classifySearch({systemType:5,deviceCode:state.deviceCode})
|
|
});
|
|
});
|
|
|
|
|
|
onShow(() => {
|
|
onShow(() => {
|