|
|
@@ -1,446 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="container">
|
|
|
- <!-- 建议放在外层 -->
|
|
|
- <u-navbar
|
|
|
- title="设备监测"
|
|
|
- @leftClick="devicemenuShow"
|
|
|
- :safeAreaInsetTop="true"
|
|
|
- >
|
|
|
- <view class="u-nav-slot" slot="left">
|
|
|
- <u-icon name="list" size="20"> </u-icon>
|
|
|
- </view>
|
|
|
- </u-navbar>
|
|
|
-
|
|
|
- <view v-show="menushow" class="menupage">
|
|
|
- <DeviceMenu @menuClick="menuClick"></DeviceMenu>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view v-show="!menushow" class="main">
|
|
|
- <view class="u-page">
|
|
|
- <u-list>
|
|
|
- <u-list-item
|
|
|
- class="itemback"
|
|
|
- v-for="(item, index) in curlist"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
- <div @tap="openNewPage(item)">
|
|
|
- <u-row gutter="5" customStyle="margin-bottom: 10px">
|
|
|
- <u-col span="24">
|
|
|
-
|
|
|
- <img style="position: absolute;width: 35rpx;height:35ropx;" class="icon" :src="getIcon(TabCur)" alt="Icon" />
|
|
|
- <span class="title">{{item.strinstallpos}}</span>
|
|
|
- </u-col>
|
|
|
- </u-row>
|
|
|
- <u-row gutter="5" customStyle="margin-bottom: 10px">
|
|
|
- <u-col span="3" style="margin-right: 5rpx">
|
|
|
- <div v-if="item.netStatus == 0" class="error-tag1">
|
|
|
- <img
|
|
|
- src="'../../../../static/model/connectFalse.svg "
|
|
|
- alt=""
|
|
|
- class="icon-style"
|
|
|
- />
|
|
|
- <span style="float: right">断开</span>
|
|
|
- </div>
|
|
|
- <div v-else class="success-tag">
|
|
|
- <img
|
|
|
- src="'../../../../static/model/connectTrue.svg "
|
|
|
- alt=""
|
|
|
- class="icon-style"
|
|
|
- />
|
|
|
- <span style="float: right">连接</span>
|
|
|
- </div>
|
|
|
- </u-col>
|
|
|
- <u-col span="4">
|
|
|
- <div v-if="item.warnFlag == 0" class="success-tag">
|
|
|
- <img
|
|
|
- src="'../../../../static/model/alarmTrue.svg "
|
|
|
- alt=""
|
|
|
- class="icon-style"
|
|
|
- />
|
|
|
- <span style="float: right">{{ item.warnLevel_str }}</span>
|
|
|
- </div>
|
|
|
- <div v-else class="error-tag">
|
|
|
- <img
|
|
|
- src="'../../../../static/model/alarmFalse.svg "
|
|
|
- alt=""
|
|
|
- class="icon-style"
|
|
|
- />
|
|
|
- <span style="float: right">{{ item.warnDes }}</span>
|
|
|
- </div>
|
|
|
- </u-col>
|
|
|
- <u-col span="5">
|
|
|
- <u--text class="timetext" :text="item.readTime"></u--text>
|
|
|
- </u-col>
|
|
|
- </u-row>
|
|
|
- <view v-if="colums[TabCur + '_monitor'] != null">
|
|
|
- <view
|
|
|
- class="datacard"
|
|
|
- v-for="(showitem, index) in colums[TabCur + '_monitor']"
|
|
|
-<<<<<<< Updated upstream
|
|
|
- :key="index"
|
|
|
- v-show="showitem.appShow == 1"
|
|
|
- >
|
|
|
- <view
|
|
|
- class="content"
|
|
|
- :style="{
|
|
|
- backgroundImage:
|
|
|
- showitem.monitorcode === 'frontRearDP' ||
|
|
|
- showitem.monitorcode === 'frontRearDifference'
|
|
|
- ? 'url(\'../../../../static/model/Pa.png\')'
|
|
|
- : showitem.monitorcode === 'sourcePressure'
|
|
|
- ? 'url(\'../../../../static/model/MPa.png\')'
|
|
|
- : showitem.monitorcode === 'frontGateOpen'
|
|
|
- ? 'url(\'../../../../static/model/doorNet.png\')'
|
|
|
- : showitem.monitorcode === 'rearGateOpen'
|
|
|
- ? 'url(\'../../../../static/model/doorNet.png\')'
|
|
|
- : showitem.monitorcode === 'warnFlag'
|
|
|
- ? 'url(\'../../../../static/model/9432.png\')'
|
|
|
- : showitem.monitorcode === 'netStatus'
|
|
|
- ? 'url(\'../../../../static/model/9431.png\')'
|
|
|
- : showitem.monitorcode === 'm3'
|
|
|
- ? 'url(\'../../../../static/model/windM3.png\')'
|
|
|
- : showitem.monitorcode === 'fsectarea'
|
|
|
- ? 'url(\'../../../../static/model/duanArea.png\')'
|
|
|
- : showitem.monitorcode === 'incipientWindSpeed1' ||
|
|
|
- showitem.monitorcode === 'incipientWindSpeed2' ||
|
|
|
- showitem.monitorcode === 'incipientWindSpeed3' ||
|
|
|
- showitem.monitorcode === 'va'
|
|
|
- ? 'url(\'../../../../static/model/fengsu.png\')'
|
|
|
- : 'url(\'\')',
|
|
|
- backgroundSize: '100% 100%',
|
|
|
- }"
|
|
|
- >
|
|
|
- <view
|
|
|
- v-show="
|
|
|
-=======
|
|
|
- v-show="showitem.appShow == 1 &&
|
|
|
->>>>>>> Stashed changes
|
|
|
- showitem.monitorcode != 'strinstallpos' &&
|
|
|
- showitem.monitorcode != 'netStatus' &&
|
|
|
- showitem.monitorcode != 'warnFlag' &&
|
|
|
- showitem.monitorcode != 'readTime' &&
|
|
|
-<<<<<<< Updated upstream
|
|
|
- showitem.monitorcode != ''
|
|
|
- "
|
|
|
- >
|
|
|
- <view
|
|
|
- v-if="
|
|
|
- showitem.datatype == 1 &&
|
|
|
- item.readData[showitem.monitorcode] !== undefined &&
|
|
|
- item.readData[showitem.monitorcode] !== null
|
|
|
- "
|
|
|
-=======
|
|
|
- showitem.monitorcode != '' &&
|
|
|
- showitem.monitorcode != null"
|
|
|
- >
|
|
|
- <view :class="TabCur">
|
|
|
- <view style="padding-top:10rpx;padding-bottom: 10rpx;">
|
|
|
- <view v-if="showitem.datatype == 1 && showitem.monitorcode == 'doorUse'"
|
|
|
->>>>>>> Stashed changes
|
|
|
- class="demo-layout bg-purple-light"
|
|
|
- style="margin-top: 10rpx; color: #3787fe;font-size: 30rpx;margin-top: 5rpx;"
|
|
|
- >
|
|
|
- {{ item[showitem.monitorcode] == '2'?'行人':item[showitem.monitorcode] == '1'?'行车':'-' }}
|
|
|
- </view>
|
|
|
- <view v-else-if="showitem.datatype == 1"
|
|
|
- class="demo-layout bg-purple-light"
|
|
|
- style="margin-top: 10rpx; color: #3787fe;font-size: 30rpx;margin-top: 5rpx;"
|
|
|
- >
|
|
|
- {{ item[showitem.monitorcode] == null || item[showitem.monitorcode] == ''?'-':item[showitem.monitorcode]}}
|
|
|
- </view>
|
|
|
- <view
|
|
|
- v-else-if="
|
|
|
- showitem.datatype == 2 &&
|
|
|
- item.readData[showitem.monitorcode] !== undefined &&
|
|
|
- item.readData[showitem.monitorcode] !== null
|
|
|
- "
|
|
|
- class="demo-layout bg-purple-light"
|
|
|
- style="color: #3787fe;font-size: 30rpx;margin-top: 5rpx;"
|
|
|
- >{{ item.readData[showitem.monitorcode]==null || item.readData[showitem.monitorcode] == ''?'-':item.readData[showitem.monitorcode] }}</view
|
|
|
- >
|
|
|
- <view
|
|
|
- v-else
|
|
|
- class="demo-layout bg-purple-light"
|
|
|
- style="color: #3787fe"
|
|
|
- >--</view
|
|
|
- >
|
|
|
- <view
|
|
|
- class="demo-layout bg-purple-light"
|
|
|
- style="margin-top: 6rpx; color: #677799;margin-bottom: 5rpx;"
|
|
|
- >{{ showitem.des }}</view
|
|
|
- >
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </div>
|
|
|
- </u-list-item>
|
|
|
- </u-list>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import DeviceMenu from "./devicemenu/devicemenu.vue";
|
|
|
-import api from "@/api/api";
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- menushow: false,
|
|
|
- TabCur: "gate",
|
|
|
- curlist: [],
|
|
|
- deviceList: {},
|
|
|
- scrollLeft: 0,
|
|
|
- currentTab: 0,
|
|
|
- colums: {},
|
|
|
- };
|
|
|
- },
|
|
|
- components: {
|
|
|
- DeviceMenu,
|
|
|
- },
|
|
|
- props: ["showColum"],
|
|
|
- watch: {
|
|
|
- showColum(data) {
|
|
|
- this.colums = data;
|
|
|
- console.log(this.colums);
|
|
|
- },
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.colums = this.showColum;
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.startTimer();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- startTimer() {
|
|
|
- // 每隔一段时间执行某个操作
|
|
|
- this.timer = setInterval(() => {
|
|
|
- // 执行定时任务
|
|
|
- this.loadData(this.TabCur);
|
|
|
- console.log("定时任务执行中...");
|
|
|
- }, 5000);
|
|
|
- },
|
|
|
- stopTimer() {
|
|
|
- // 停止定时器
|
|
|
- clearInterval(this.timer);
|
|
|
- },
|
|
|
- getIcon(itemValue) {
|
|
|
- // 根据itemValue获取对应的图标路径，如果找不到对应关系则返回默认图标
|
|
|
- return '/static/sidebar/'+itemValue+".svg";
|
|
|
- },
|
|
|
- getValueIcon(itemValue) {
|
|
|
- // 根据itemValue获取对应的图标路径，如果找不到对应关系则返回默认图标
|
|
|
- return '/static/sidebar/'+itemValue+".svg";
|
|
|
- },
|
|
|
- loadData(type) {
|
|
|
- new Promise((resolve, reject) => {
|
|
|
- api
|
|
|
- .getDeviceMonitor({
|
|
|
- devicetype: type,
|
|
|
- pagetype: "normal",
|
|
|
- filterParams: {},
|
|
|
- })
|
|
|
- .then((response) => {
|
|
|
- if (response.data.code == 200) {
|
|
|
- this.deviceList[type] = response.data.result.msgTxt[0].datalist;
|
|
|
- this.curlist = this.deviceList[type];
|
|
|
- this.curlist.forEach((item) => {
|
|
|
- if (item.readData.frontGateOpen == 1) {
|
|
|
- item.readData.frontGateOpen = "打开";
|
|
|
- } else {
|
|
|
- item.readData.frontGateOpen = "关闭";
|
|
|
- }
|
|
|
- if (item.readData.midGateOpen == 1) {
|
|
|
- item.readData.midGateOpen = "打开";
|
|
|
- } else {
|
|
|
- item.readData.midGateOpen = "关闭";
|
|
|
- }
|
|
|
- if (item.readData.rearGateOpen == 1) {
|
|
|
- item.readData.rearGateOpen = "打开";
|
|
|
- } else {
|
|
|
- item.readData.rearGateOpen = "关闭";
|
|
|
- }
|
|
|
- if (item.readData.midGateOpen == 1) {
|
|
|
- item.readData.midGateOpen = "打开";
|
|
|
- } else {
|
|
|
- item.readData.midGateOpen = "关闭";
|
|
|
- }
|
|
|
- });
|
|
|
- } else {
|
|
|
- resolve(response);
|
|
|
- }
|
|
|
- })
|
|
|
- .catch((error) => {
|
|
|
- console.log("catch===>response", response);
|
|
|
- reject(error);
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- tabSelect(e) {
|
|
|
- this.currentTab = e.currentTarget.dataset.id;
|
|
|
- this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
|
|
|
- },
|
|
|
- devicemenuShow(e) {
|
|
|
- this.menushow = true;
|
|
|
- },
|
|
|
- menuClick(id) {
|
|
|
- this.TabCur = id;
|
|
|
- // 显示该分类的数据
|
|
|
- this.curlist = this.deviceList[this.TabCur];
|
|
|
-
|
|
|
- if (this.curlist == null) {
|
|
|
- this.curlist = [];
|
|
|
- }
|
|
|
- // 选择设备分类，重新获取数据
|
|
|
- this.loadData(this.TabCur);
|
|
|
- this.menushow = false;
|
|
|
- },
|
|
|
- openNewPage(params) {
|
|
|
- this.$destroy();
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages/home/detail/autodoor/autodoor?id=${params.deviceID}&name=${params.strinstallpos}&type=${this.TabCur}`,
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
- destroyed() {
|
|
|
- // 停止定时器
|
|
|
- this.stopTimer();
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style>
|
|
|
-.top-nav {
|
|
|
- height: 100rpx;
|
|
|
- line-height: 100rpx;
|
|
|
- background-color: #2aa9f3;
|
|
|
- color: #daaaa;
|
|
|
-}
|
|
|
-.top-nav2 {
|
|
|
- background-color: #ffffff;
|
|
|
-}
|
|
|
-.main {
|
|
|
- margin-top: 100rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-}
|
|
|
-.card {
|
|
|
- background-color: #ffffff;
|
|
|
- margin: auto;
|
|
|
- margin-top: 20rpx;
|
|
|
- width: 10%;
|
|
|
- height: 280rpx;
|
|
|
- border: 1rpx solid #000000;
|
|
|
- border-radius: 20rpx;
|
|
|
-}
|
|
|
-.menupage {
|
|
|
- position: absolute;
|
|
|
- z-index: 2;
|
|
|
- top: 40rpx;
|
|
|
- height: calc(100% - 40rpx);
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-.timetext {
|
|
|
- text-align: right;
|
|
|
- float: right;
|
|
|
-}
|
|
|
-.itemback {
|
|
|
- padding: 20rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- margin-bottom: 5rpx;
|
|
|
-}
|
|
|
-.datacard .content{
|
|
|
- width: 30rpx;
|
|
|
- height: 30rpx;
|
|
|
- left: 0rpx;
|
|
|
- top:0rpx;
|
|
|
- position: absolute;
|
|
|
-}
|
|
|
-.datacard {
|
|
|
- border-radius: 10rpx;
|
|
|
- border: rgba(55, 135, 254, 0.28);
|
|
|
- width: 30%;
|
|
|
- margin: 1%;
|
|
|
- float: left;
|
|
|
- height: 105rpx;
|
|
|
- text-align: center;
|
|
|
- background: linear-gradient(
|
|
|
- to right,
|
|
|
- rgba(55, 135, 254, 0.08),
|
|
|
- rgba(4, 184, 255, 0.08),
|
|
|
- rgba(60, 161, 237, 0.08)
|
|
|
- );
|
|
|
-}
|
|
|
-.datacard .gate{
|
|
|
- background: linear-gradient(
|
|
|
- to right,
|
|
|
- rgba(75, 135, 254, 0.08),
|
|
|
- rgba(24, 184, 255, 0.08),
|
|
|
- rgba(80, 161, 237, 0.08)
|
|
|
- );
|
|
|
-}
|
|
|
-.datacard .window{
|
|
|
- background: linear-gradient(
|
|
|
- to right,
|
|
|
- rgba(55, 125, 254, 0.08),
|
|
|
- rgba(4, 164, 255, 0.08),
|
|
|
- rgba(60, 131, 237, 0.08)
|
|
|
- );
|
|
|
-}
|
|
|
-.datacard .windrect{
|
|
|
- background: linear-gradient(
|
|
|
- to right,
|
|
|
- rgba(85, 125, 254, 0.08),
|
|
|
- rgba(34, 164, 255, 0.08),
|
|
|
- rgba(90, 131, 237, 0.08)
|
|
|
- );
|
|
|
-}
|
|
|
-.error-tag {
|
|
|
- border-radius: 10%;
|
|
|
- display: inline-block;
|
|
|
- color: #e90000;
|
|
|
- line-height: 50rpx;
|
|
|
- font-size: 14px;
|
|
|
- text-align: center;
|
|
|
- float: left;
|
|
|
- width: 180rpx;
|
|
|
- height: 50rpx;
|
|
|
- padding-right:30rpx;
|
|
|
- background-color: rgba(233, 0, 0, 0.2);
|
|
|
-}
|
|
|
-.error-tag1 {
|
|
|
- border-radius: 10%;
|
|
|
- display: inline-block;
|
|
|
- color: #696969;
|
|
|
- line-height: 50rpx;
|
|
|
- font-size: 14px;
|
|
|
- text-align: center;
|
|
|
- margin-top: 10rpx;
|
|
|
- float: left;
|
|
|
- width: 120rpx;
|
|
|
- height: 50rpx;
|
|
|
- background-color: rgba(105, 105, 105, 0.2);
|
|
|
-}
|
|
|
-.success-tag {
|
|
|
- border-radius: 10%;
|
|
|
- color: #42c000;
|
|
|
- line-height: 50rpx;
|
|
|
- font-size: 14px;
|
|
|
- width: 120rpx;
|
|
|
- height: 50rpx;
|
|
|
- padding-right:30rpx;
|
|
|
- background-color: rgba(226, 250, 214);
|
|
|
-}
|
|
|
-.icon-style {
|
|
|
- margin: 15rpx;
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
-}
|
|
|
-.title{
|
|
|
- margin-left: 40rpx;
|
|
|
- float: left;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: 400;
|
|
|
-}
|
|
|
-</style>
|
