tj

src/pages/ol/kanban/index.vue

@@ -7,29 +7,23 @@ el-container(style="padding: 0px; height: 77.6vh")
     el-select(v-model="mapId" size="mini"  @change="handleChange")
       el-option(v-for="(item,index) in mapList" :key="index" :label="item.stationName=='全部'?item.stationName:item.stationName +' - '+item.name" :value="item.id")
   el-main.box_main
-    el-row(:gutter="20")
-      el-col(
-        :span="3 * item.list.length",
-        v-for="(item, index) in dataList",
-        :key="index",
-        style="margin-bottom: 20px"
-      )
+
+    div(v-for="(item, index) in dataList" :key="index" style="margin-bottom: 20px")
         card-warp(:title="item.name", height="35px")
-          div(slot="content")
-            el-row(typr="flex", justify="center", :gutter="20")
-              el-col(:span="24 / item.list.length", v-for="child in item.list")
-                card-warp(
-                  :title="child.leftName",
-                  height="35px",
-                  bgcolor="#f5f5f5"
-                )
-                  div(slot="right")
-                    | {{ child.rightName }}
-                  div(slot="content")
-                    .content_warp
+          div(slot="content"  )
+            el-row(type='flex' :gutter="20"  v-for="child in item.list")
+                el-col(:span='24' )
+                    card-warp(:title="child.resourceName" height="35px" )
+                        div(slot="content" )
+                            el-row(typr="flex",  :gutter="20" )
+                                el-col(:span="4"   v-for="child in child.children" )
+                                    card-warp(:title="child.rightName" height="35px"  )
+                                        div(slot="content" )
+                                                    .content_warp()
                                                         div(:class="child.type")
                                                         div.value(:style="{color:child.over?'red':'#10cc2e'}") {{ child.value }}
                                                         .scope {{ child.scope }}
+
 </template>
 
 <script>

src/pages/ol/kanban/index11.vue

+<template lang="pug">
+el-container(style="padding: 0px; height: 77.6vh")
+  el-header(
+    style="height: 42px; line-height: 42px; border: 1px solid rgba(195, 195, 195, 1); background: #f4f4f4"
+  )
+    span.title-bold
+    el-select(v-model="mapId" size="mini"  @change="handleChange")
+      el-option(v-for="(item,index) in mapList" :key="index" :label="item.stationName +'-'+item.name" :value="item.id")
+  el-main.box_main
+    el-row(:gutter="20")
+      el-col(
+        :span="3 * item.list.length",
+        v-for="(item, index) in dataList",
+        :key="index",
+        style="margin-bottom: 20px"
+      )
+        card-warp(:title="item.name", height="35px")
+          div(slot="content")
+            el-row(typr="flex", justify="center", :gutter="20")
+              el-col(:span="24 / item.list.length", v-for="child in item.list")
+                card-warp(
+                  :title="child.leftName",
+                  height="35px",
+                  bgcolor="#f5f5f5"
+                )
+                  div(slot="right")
+                    | {{ child.rightName }}
+                  div(slot="content")
+                    .content_warp
+                      div(:class="child.type")
+                      div.value(:style="{color:child.over?'red':'#10cc2e'}") {{ child.value }}
+                      .scope {{ child.scope }}
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      mapId: '',
+      mapList: [],
+      thresholdList: [],
+      dataList: []
+    }
+  },
+  computed: {
+    // 类型列表
+    // typeList() {
+    //   return this.$store.state.d2admin.typeList
+    // },
+    fsyList() {
+      return this.$store.state.d2admin.typeList.typeList.fsyList
+    },
+    fyyList() {
+      return this.$store.state.d2admin.typeList.typeList.fyyList
+    },
+    hjtcqList() {
+      return this.$store.state.d2admin.typeList.typeList.hjtcqList
+    },
+    lljList() {
+      return this.$store.state.d2admin.typeList.typeList.lljList
+    },
+    wxyljList() {
+      return this.$store.state.d2admin.typeList.typeList.wxyljList
+    },
+    wxywyList() {
+      return this.$store.state.d2admin.typeList.typeList.wxywyList
+    }
+  },
+  watch: {
+    fsyList: {
+      handler(n, o) {
+        if (n) {
+          this.setDataList()
+        }
+      },
+      deep: true
+    },
+    fyyList: {
+      handler(n, o) {
+        if (n) {
+          this.setDataList()
+        }
+      },
+      deep: true
+    },
+    hjtcqList: {
+      handler(n, o) {
+        if (n) {
+          this.setDataList()
+        }
+      },
+      deep: true
+    },
+    lljList: {
+      handler(n, o) {
+        if (n) {
+          this.setDataList()
+        }
+      },
+      deep: true
+    },
+    wxyljList: {
+      handler(n, o) {
+        if (n) {
+          this.setDataList()
+        }
+      },
+      deep: true
+    },
+    wxywyList: {
+      handler(n, o) {
+        if (n) {
+          this.setDataList()
+        }
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.getThresholdList()
+    this.getMapList()
+  },
+  methods: {
+    getMapList() {
+      this.$http({
+        url: this.$http.adornUrl(`/liStationMap/list`),
+        method: 'post',
+        data: {}
+      })
+        .then((data) => {
+          if (data && data.code === 0) {
+            this.mapList = data.list
+            console.log('111111---', this.mapList)
+            this.mapId = this.mapList[0].id
+            console.log('222222---', this.mapId)
+          }
+        })
+        .then(() => {
+          this.getDataList()
+        })
+    },
+    getThresholdList() {
+      this.$http({
+        url: this.$http.adornUrl(`/sysThreshold/list`),
+        method: 'post',
+        params: this.$http.adornParams({})
+      }).then((data) => {
+        if (data && data.code === 0) {
+          this.thresholdList = data.list
+          this.thresholdList.forEach((element) => {
+            if (element.unit === 1) {
+              element.unit = 'MPa'
+            } else if (element.unit === 2) {
+              element.unit = '%RH'
+            } else if (element.unit === 3) {
+              element.unit = '°C'
+            } else if (element.unit === 4) {
+              element.unit = 'PPM'
+            } else if (element.unit === 5) {
+              element.unit = 'm3/h'
+            } else if (element.unit === 6) {
+              element.unit = 'cm'
+            } else if (element.unit === 7) {
+              element.unit = 'm/s'
+            } else if (element.unit === 8) {
+              element.unit = 'pa'
+            }
+          })
+          console.log('3333333---', this.thresholdList)
+        } else {
+          this.thresholdList = []
+        }
+      })
+    },
+    handleChange(res) {
+      console.log('333333---', res)
+      this.mapId = res
+
+      this.getDataList()
+    },
+    getDataList() {
+      this.dataList = []
+      this.$http({
+        url: this.$http.adornUrl('/liResource/getKanBanList'),
+        method: 'post',
+        data: {
+          tierId: this.mapId //场景id
+        }
+      }).then((data) => {
+        if (data && data.code === 0) {
+          console.log('数据', data)
+          data.list.forEach((e) => {
+            let item = {
+              id: '',
+              name: '',
+              list: []
+            }
+            let list = []
+            e.list.forEach((el) => {
+              let newThresholdList = this.thresholdList.filter(
+                (res) => res.dicId === e.id
+              )
+              newThresholdList.forEach((element) => {
+                list.push({
+                  id: el.id,
+                  leftName: el.resourceName,
+                  rightName: element.typeName,
+                  type: element.code,
+                  value: '无',
+                  scope:
+                    '参考值：' +
+                    element.minValue +
+                    '~' +
+                    element.maxValue +
+                    ' ' +
+                    element.unit
+                })
+              })
+              console.log('list:', list)
+            })
+            item.id = e.id
+            item.name = e.name
+            item.list = list
+            this.dataList.push(item)
+          })
+          console.log('dataList:', this.dataList)
+          this.setDataList()
+        }
+      })
+    },
+    setDataList() {
+      // console.log('wxyljList:', this.wxyljList)
+      // console.log('hjtcqList:', this.hjtcqList)
+      // console.log('lljList:', this.lljList)
+      // console.log('wxywyList:', this.wxywyList)
+      // console.log('fsyList:', this.fsyList)
+      // console.log('fyyList:', this.fyyList)
+      for (var i = 0; i < this.dataList.length; i++) {
+        if (this.dataList[i].id === 'b47661ca1d454f9792ba5369f3cb2bc5') {
+          //无线压力计
+          this.dataList[i].list.forEach((element) => {
+            if (this.wxyljList) {
+              this.wxyljList.forEach((e) => {
+                if (element.id === e.resource_id) {
+                  element.value = e.water_pressure + 'MPa'
+                }
+              })
+            }
+          })
+        } else if (this.dataList[i].id === 'c788ce98c1f248f590434394da485ce4') {
+          //4合1环境探测器
+          this.dataList[i].list.forEach((element) => {
+            if (this.hjtcqList) {
+              this.hjtcqList.forEach((e) => {
+                if (element.id === e.resource_id) {
+                  if (element.rightName === '温度') {
+                    element.value = e.temperature + '°C'
+                  } else if (element.rightName === '湿度') {
+                    element.value = e.humidity + '%RH'
+                  } else if (element.rightName === '一氧化碳') {
+                    element.value = e.carbon_monoxide + 'PPM'
+                  } else if (element.rightName === '二氧化碳') {
+                    element.value = e.carbon_dioxide + 'PPM'
+                  }
+                }
+              })
+            }
+          })
+        } else if (this.dataList[i].id === 'b45827c068254695864ee3c1d42573cb') {
+          //流量计
+          this.dataList[i].list.forEach((element) => {
+            if (this.lljList) {
+              this.lljList.forEach((e) => {
+                if (element.id === e.resource_id) {
+                  element.value = e.flow_rate + 'm3/h'
+                }
+              })
+            }
+          })
+        } else if (this.dataList[i].id === '303310efddb34a2e9bf269bdff8a7dc5') {
+          //无线液位仪
+          this.dataList[i].list.forEach((element) => {
+            if (this.wxywyList) {
+              this.wxywyList.forEach((e) => {
+                if (element.id === e.resource_id) {
+                  element.value = e.gauge_height + 'cm'
+                }
+              })
+            }
+          })
+        } else if (this.dataList[i].id === 'f4c840711eae4bcb9536a890cdfda493') {
+          //风速仪
+          this.dataList[i].list.forEach((element) => {
+            if (this.fsyList) {
+              this.fsyList.forEach((e) => {
+                if (element.id === e.resource_id) {
+                  element.value = e.wind_speed + 'm/s'
+                }
+              })
+            }
+          })
+        } else if (this.dataList[i].id === '5b26f6c8f2a143048bd0e327ca5c186d') {
+          //风压仪
+          this.dataList[i].list.forEach((element) => {
+            if (this.fyyList) {
+              this.fyyList.forEach((e) => {
+                if (element.id === e.resource_id) {
+                  element.value = e.wind_pressure + 'pa'
+                }
+              })
+            }
+          })
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content_warp {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .value {
+    margin: 5px;
+  }
+  .scope {
+    color: #a0a0a0;
+    font-size: 13px;
+  }
+  .co2 {
+    width: 100px;
+    height: 75px;
+    background: url('~@/assets/images/imgs/co2.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .co2h {
+    width: 100px;
+    height: 75px;
+    background: url('~@/assets/images/imgs/co2h.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .co {
+    width: 73px;
+    height: 75px;
+    background: url('~@/assets/images/imgs/co.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .coh {
+    width: 73px;
+    height: 75px;
+    background: url('~@/assets/images/imgs/coh.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .swgd {
+    width: 65px;
+    height: 75px;
+    background: url('~@/assets/images/imgs/swgd.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .swgdh {
+    width: 65px;
+    height: 75px;
+    background: url('~@/assets/images/imgs/swgdh.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .wd {
+    width: 57px;
+    height: 75px;
+    background: url('~@/assets/images/imgs/wd.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .wdh {
+    width: 57px;
+    height: 75px;
+    background: url('~@/assets/images/imgs/wdh.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .slll {
+    width: 65px;
+    height: 75px;
+    background: url('~@/assets/images/imgs/slll.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .slllh {
+    width: 65px;
+    height: 75px;
+    background: url('~@/assets/images/imgs/slllh.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .slyl {
+    width: 65px;
+    height: 75px;
+    background: url('~@/assets/images/imgs/slyl.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .slylh {
+    width: 65px;
+    height: 75px;
+    background: url('~@/assets/images/imgs/slylh.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .sd {
+    width: 65px;
+    height: 75px;
+    background: url('~@/assets/images/imgs/sd.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .sdh {
+    width: 65px;
+    height: 75px;
+    background: url('~@/assets/images/imgs/sdh.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .fs {
+    width: 61px;
+    height: 75px;
+    background: url('~@/assets/images/imgs/fs.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .fsh {
+    width: 61px;
+    height: 75px;
+    background: url('~@/assets/images/imgs/fsh.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .fy {
+    width: 72px;
+    height: 75px;
+    background: url('~@/assets/images/imgs/fy.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .fyh {
+    width: 72px;
+    height: 75px;
+    background: url('~@/assets/images/imgs/fyh.png') no-repeat;
+    background-size: 100% 100%;
+  }
+}
+</style>