tj

src/pages/ol/kanban/index copy.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.stationName:item.stationName +' - '+item.name" :value="item.id")
+  el-main.box_main
+
+    div( style="margin-bottom: 20px")
+        el-row()
+            el-col(:span='24'  v-for="child in dataList")
+                card-warp(:title="child.name", height="35px")
+                    div(slot="content")
+                        el-row(type='flex' justify='start' :gutter="10"   )
+                            el-col(:span='3*item.children.length' v-for="item in child.list")
+                                card-warp(:title="item.resourceName", height="35px")
+                                    div(slot="content")
+                                        el-row(type='flex' :gutter="10"   v-for="it in item.children")
+                                            el-col(:span='24')
+                                                card-warp(:title="it.rightName", height="35px")
+                                                    div(slot="content")
+                                                        .content_warp
+                                                            div(:class="it.type")
+                                                            div.value(:style="{color:it.over?'red':'#10cc2e'}") {{ it.value }}
+                                                            .scope {{ it.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.mapList.unshift({ name: '', id: '', stationName: '全部' })
+            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: []
+            }
+
+            e.list.forEach((el) => {
+              let list = []
+              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
+                })
+              })
+              el.children = list
+              console.log('list:', list)
+            })
+            item.id = e.id
+            item.name = e.name
+            item.list = e.list
+            if (
+              item.id !== 'b6af764f2a6e454490a6b1b3c9057e57' &&
+              item.id !== 'ece0b8b2db27411886254e81134988a3'
+            ) {
+              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: 2px;
+  }
+  .scope {
+    color: #a0a0a0;
+    font-size: 12px;
+  }
+  .co2 {
+    width: 108px;
+    height: 76px;
+    background: url('~@/assets/images/imgs/co2.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .co2h {
+    width: 108px;
+    height: 76px;
+    background: url('~@/assets/images/imgs/co2h.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .co {
+    width: 108px;
+    height: 76px;
+    background: url('~@/assets/images/imgs/co.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .coh {
+    width: 108px;
+    height: 76px;
+    background: url('~@/assets/images/imgs/coh.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .swgd {
+    width: 95px;
+    height: 74px;
+    background: url('~@/assets/images/imgs/swgd.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .swgdh {
+    width: 95px;
+    height: 74px;
+    background: url('~@/assets/images/imgs/swgdh.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .wd {
+    width: 35px;
+    height: 75px;
+    background: url('~@/assets/images/imgs/wd.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .wdh {
+    width: 35px;
+    height: 75px;
+    background: url('~@/assets/images/imgs/wdh.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .slll {
+    width: 95px;
+    height: 74px;
+    background: url('~@/assets/images/imgs/slll.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .slllh {
+    width: 95px;
+    height: 74px;
+    background: url('~@/assets/images/imgs/slllh.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .slyl {
+    width: 147px;
+    height: 74px;
+    background: url('~@/assets/images/imgs/slyl.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .slylh {
+    width: 147px;
+    height: 74px;
+    background: url('~@/assets/images/imgs/slylh.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .sd {
+    width: 71px;
+    height: 75px;
+    background: url('~@/assets/images/imgs/sd.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .sdh {
+    width: 71px;
+    height: 75px;
+    background: url('~@/assets/images/imgs/sdh.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .fs {
+    width: 147px;
+    height: 74px;
+    background: url('~@/assets/images/imgs/fs.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .fsh {
+    width: 147px;
+    height: 74px;
+    background: url('~@/assets/images/imgs/fsh.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .fy {
+    width: 147px;
+    height: 74px;
+    background: url('~@/assets/images/imgs/fy.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .fyh {
+    width: 147px;
+    height: 74px;
+    background: url('~@/assets/images/imgs/fyh.png') no-repeat;
+    background-size: 100% 100%;
+  }
+}
+</style>

src/pages/ol/kanban/index.vue

@@ -8,22 +8,255 @@ el-container(style="padding: 0px; height: 77.6vh")
       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
 
-    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(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 }}
-
+    div( style="margin-bottom: 20px")
+        el-row(v-if="this.mapId==''" )
+            el-col(:span='24'  v-if='dataList[0]' style="margin-bottom: 20px")
+                card-warp(:title="dataList[0].name", height="35px")
+                    div(slot="content")
+                        el-row(type='flex' justify='start' )
+                            el-col(:span='3' v-for="item in dataList[0].list")
+                                card-warp(:title="item.resourceName", height="35px")
+                                    div(slot="content")
+                                        el-row(type='flex'    )
+                                            el-col(:span='24' v-for="children in item.children")
+                                                card-warp(:title="children.rightName", height="35px")
+                                                    div(slot="content")
+                                                        .content_warp
+                                                            div(:class="children.type")
+                                                            div.value(:style="{color:children.over?'red':'#10cc2e'}") {{ children.value }}
+                                                            .scope {{ children.scope }}
+            el-col(:span='24'  v-if='dataList[1]' style="margin-bottom: 20px")
+                card-warp(:title="dataList[1].name", height="35px")
+                    div(slot="content")
+                        el-row(type='flex' justify='start' )
+                            el-col(:span='12' v-for="item in dataList[1].list")
+                                card-warp(:title="item.resourceName", height="35px")
+                                    div(slot="content")
+                                        el-row(type='flex'    )
+                                            el-col(:span='24' v-for="children in item.children")
+                                                card-warp(:title="children.rightName", height="35px")
+                                                    div(slot="content")
+                                                        .content_warp
+                                                            div(:class="children.type")
+                                                            div.value(:style="{color:children.over?'red':'#10cc2e'}") {{ children.value }}
+                                                            .scope {{ children.scope }}
+            el-col(:span='6'  v-if='dataList[2]' style="margin-bottom: 20px")
+                card-warp(:title="dataList[2].name", height="35px")
+                    div(slot="content")
+                        el-row(type='flex' justify='start' )
+                            el-col(:span='12' v-for="item in dataList[2].list")
+                                card-warp(:title="item.resourceName", height="35px")
+                                    div(slot="content")
+                                        el-row(type='flex'    )
+                                            el-col(:span='24' v-for="children in item.children")
+                                                card-warp(:title="children.rightName", height="35px")
+                                                    div(slot="content")
+                                                        .content_warp
+                                                            div(:class="children.type")
+                                                            div.value(:style="{color:children.over?'red':'#10cc2e'}") {{ children.value }}
+                                                            .scope {{ children.scope }}
+            el-col(:span='9'  v-if='dataList[3]' style="margin-bottom: 20px")
+                card-warp(:title="dataList[3].name", height="35px")
+                    div(slot="content")
+                        el-row(type='flex' justify='start' )
+                            el-col(:span='24' v-for="item in dataList[3].list")
+                                card-warp(:title="item.resourceName", height="35px")
+                                    div(slot="content")
+                                        el-row(type='flex'    )
+                                            el-col(:span='24' v-for="children in item.children")
+                                                card-warp(:title="children.rightName", height="35px")
+                                                    div(slot="content")
+                                                        .content_warp
+                                                            div(:class="children.type")
+                                                            div.value(:style="{color:children.over?'red':'#10cc2e'}") {{ children.value }}
+                                                            .scope {{ children.scope }}
+            el-col(:span='3'  v-if='dataList[4]' style="margin-bottom: 20px")
+                card-warp(:title="dataList[4].name", height="35px")
+                    div(slot="content")
+                        el-row(type='flex' justify='start' )
+                            el-col(:span='24' v-for="item in dataList[4].list")
+                                card-warp(:title="item.resourceName", height="35px")
+                                    div(slot="content")
+                                        el-row(type='flex'    )
+                                            el-col(:span='24' v-for="children in item.children")
+                                                card-warp(:title="children.rightName", height="35px")
+                                                    div(slot="content")
+                                                        .content_warp
+                                                            div(:class="children.type")
+                                                            div.value(:style="{color:children.over?'red':'#10cc2e'}") {{ children.value }}
+                                                            .scope {{ children.scope }}
+            el-col(:span='3'  v-if='dataList[5]' style="margin-bottom: 20px")
+                card-warp(:title="dataList[5].name", height="35px")
+                    div(slot="content")
+                        el-row(type='flex' justify='start' )
+                            el-col(:span='24' v-for="item in dataList[5].list")
+                                card-warp(:title="item.resourceName", height="35px")
+                                    div(slot="content")
+                                        el-row(type='flex'    )
+                                            el-col(:span='24' v-for="children in item.children")
+                                                card-warp(:title="children.rightName", height="35px")
+                                                    div(slot="content")
+                                                        .content_warp
+                                                            div(:class="children.type")
+                                                            div.value(:style="{color:children.over?'red':'#10cc2e'}") {{ children.value }}
+                                                            .scope {{ children.scope }}
+        el-row(v-if="mapId=='a417aed5969149eab43e56d18f75fd23'" :gutter='10')
+            el-col(:span='4'  v-if='dataList[0]' style="margin-bottom: 20px")
+                card-warp(:title="dataList[0].name", height="35px")
+                    div(slot="content")
+                        el-row(type='flex' justify='start' )
+                            el-col(:span='24' v-for="item in dataList[0].list")
+                                card-warp(:title="item.resourceName", height="35px")
+                                    div(slot="content")
+                                        el-row(type='flex'    )
+                                            el-col(:span='24' v-for="children in item.children")
+                                                card-warp(:title="children.rightName", height="35px")
+                                                    div(slot="content")
+                                                        .content_warp
+                                                            div(:class="children.type")
+                                                            div.value(:style="{color:children.over?'red':'#10cc2e'}") {{ children.value }}
+                                                            .scope {{ children.scope }}
+            el-col(:span='4'  v-if='dataList[1]' style="margin-bottom: 20px")
+                card-warp(:title="dataList[1].name", height="35px")
+                    div(slot="content")
+                        el-row(type='flex' justify='start' )
+                            el-col(:span='24' v-for="item in dataList[0].list")
+                                card-warp(:title="item.resourceName", height="35px")
+                                    div(slot="content")
+                                        el-row(type='flex'    )
+                                            el-col(:span='24' v-for="children in item.children")
+                                                card-warp(:title="children.rightName", height="35px")
+                                                    div(slot="content")
+                                                        .content_warp
+                                                            div(:class="children.type")
+                                                            div.value(:style="{color:children.over?'red':'#10cc2e'}") {{ children.value }}
+                                                            .scope {{ children.scope }}
+        //- 1
+        el-row(v-if="mapId=='91a248516bbb47f7913cd1672dca1da0' || mapId=='98f9baed5a7747ca808d69272f149e67'" )
+            el-col(:span='4'  v-if='dataList[0]' style="margin-bottom: 20px")
+                card-warp(:title="dataList[0].name", height="35px")
+                    div(slot="content")
+                        el-row(type='flex' justify='start' )
+                            el-col(:span='24' v-for="item in dataList[0].list")
+                                card-warp(:title="item.resourceName", height="35px")
+                                    div(slot="content")
+                                        el-row(type='flex'    )
+                                            el-col(:span='24' v-for="children in item.children")
+                                                card-warp(:title="children.rightName", height="35px")
+                                                    div(slot="content")
+                                                        .content_warp
+                                                            div(:class="children.type")
+                                                            div.value(:style="{color:children.over?'red':'#10cc2e'}") {{ children.value }}
+                                                            .scope {{ children.scope }}
+        el-row(v-if="mapId=='1cfdb9eaaeda4204a40b072406f07b19'" :gutter='10')
+            el-col(:span='16'  v-if='dataList[0]' style="margin-bottom: 20px")
+                card-warp(:title="dataList[0].name", height="35px")
+                    div(slot="content")
+                        el-row(type='flex' justify='start' :gutter='10')
+                            el-col(:span='24' v-for="item in dataList[0].list" )
+                                card-warp(:title="item.resourceName", height="35px")
+                                    div(slot="content")
+                                        el-row(type='flex'    )
+                                            el-col(:span='24' v-for="children in item.children")
+                                                card-warp(:title="children.rightName", height="35px")
+                                                    div(slot="content")
+                                                        .content_warp
+                                                            div(:class="children.type")
+                                                            div.value(:style="{color:children.over?'red':'#10cc2e'}") {{ children.value }}
+                                                            .scope {{ children.scope }}
+            el-col(:span='8'  v-if='dataList[1]' style="margin-bottom: 20px")
+                card-warp(:title="dataList[1].name", height="35px")
+                    div(slot="content")
+                        el-row(type='flex' justify='start' :gutter='10')
+                            el-col(:span='24' v-for="item in dataList[1].list")
+                                card-warp(:title="item.resourceName", height="35px")
+                                    div(slot="content")
+                                        el-row(type='flex'  :gutter='10'  )
+                                            el-col(:span='24' v-for="children in item.children")
+                                                card-warp(:title="children.rightName", height="35px")
+                                                    div(slot="content")
+                                                        .content_warp
+                                                            div(:class="children.type")
+                                                            div.value(:style="{color:children.over?'red':'#10cc2e'}") {{ children.value }}
+                                                            .scope {{ children.scope }}
+            el-col(:span='8'  v-if='dataList[2]' style="margin-bottom: 20px")
+                card-warp(:title="dataList[2].name", height="35px")
+                    div(slot="content")
+                        el-row(type='flex' justify='start' :gutter='10')
+                            el-col(:span='12' v-for="item in dataList[2].list")
+                                card-warp(:title="item.resourceName", height="35px")
+                                    div(slot="content")
+                                        el-row(type='flex'    )
+                                            el-col(:span='24' v-for="children in item.children")
+                                                card-warp(:title="children.rightName", height="35px")
+                                                    div(slot="content")
+                                                        .content_warp
+                                                            div(:class="children.type")
+                                                            div.value(:style="{color:children.over?'red':'#10cc2e'}") {{ children.value }}
+                                                            .scope {{ children.scope }}
+        el-row(v-if="mapId=='019826466e324c64a8e34d575c709883'" )
+            el-col(:span='12'  v-if='dataList[0]' style="margin-bottom: 20px")
+                card-warp(:title="dataList[0].name", height="35px")
+                    div(slot="content")
+                        el-row(type='flex' justify='start' :gutter='10')
+                            el-col(:span='24' v-for="item in dataList[0].list")
+                                card-warp(:title="item.resourceName", height="35px")
+                                    div(slot="content")
+                                        el-row(type='flex'   :gutter='10' )
+                                            el-col(:span='24' v-for="children in item.children")
+                                                card-warp(:title="children.rightName", height="35px")
+                                                    div(slot="content")
+                                                        .content_warp
+                                                            div(:class="children.type")
+                                                            div.value(:style="{color:children.over?'red':'#10cc2e'}") {{ children.value }}
+                                                            .scope {{ children.scope }}
+        el-row(v-if="mapId=='a3324eec06b14e889a7f1aa429bedf21'" )
+            el-col(:span='12'  v-if='dataList[0]' style="margin-bottom: 20px")
+                card-warp(:title="dataList[0].name", height="35px")
+                    div(slot="content")
+                        el-row(type='flex' justify='start' :gutter='10')
+                            el-col(:span='24' v-for="item in dataList[0].list")
+                                card-warp(:title="item.resourceName", height="35px")
+                                    div(slot="content")
+                                        el-row(type='flex'   :gutter='10' )
+                                            el-col(:span='24' v-for="children in item.children")
+                                                card-warp(:title="children.rightName", height="35px")
+                                                    div(slot="content")
+                                                        .content_warp
+                                                            div(:class="children.type")
+                                                            div.value(:style="{color:children.over?'red':'#10cc2e'}") {{ children.value }}
+                                                            .scope {{ children.scope }}
+        el-row(v-if="mapId=='1ba71eca3bbf499c98380d240f28f9eb'" :gutter='10')
+            el-col(:span='4'  v-if='dataList[0]' style="margin-bottom: 20px")
+                card-warp(:title="dataList[0].name", height="35px")
+                    div(slot="content")
+                        el-row(type='flex' justify='start' )
+                            el-col(:span='24' v-for="item in dataList[0].list")
+                                card-warp(:title="item.resourceName", height="35px")
+                                    div(slot="content")
+                                        el-row(type='flex'    )
+                                            el-col(:span='24' v-for="children in item.children")
+                                                card-warp(:title="children.rightName", height="35px")
+                                                    div(slot="content")
+                                                        .content_warp
+                                                            div(:class="children.type")
+                                                            div.value(:style="{color:children.over?'red':'#10cc2e'}") {{ children.value }}
+                                                            .scope {{ children.scope }}
+            el-col(:span='4'  v-if='dataList[1]' style="margin-bottom: 20px")
+                card-warp(:title="dataList[1].name", height="35px")
+                    div(slot="content")
+                        el-row(type='flex' justify='start' )
+                            el-col(:span='24' v-for="item in dataList[1].list")
+                                card-warp(:title="item.resourceName", height="35px")
+                                    div(slot="content")
+                                        el-row(type='flex'    )
+                                            el-col(:span='24' v-for="children in item.children")
+                                                card-warp(:title="children.rightName", height="35px")
+                                                    div(slot="content")
+                                                        .content_warp
+                                                            div(:class="children.type")
+                                                            div.value(:style="{color:children.over?'red':'#10cc2e'}") {{ children.value }}
+                                                            .scope {{ children.scope }}
 </template>
 
 <script>
@@ -325,117 +558,117 @@ export default {
   flex-direction: column;
   align-items: center;
   .value {
-    margin: 5px;
+    margin: 2px;
   }
   .scope {
     color: #a0a0a0;
-    font-size: 13px;
+    font-size: 12px;
   }
   .co2 {
-    width: 100px;
-    height: 75px;
+    width: 108px;
+    height: 76px;
     background: url('~@/assets/images/imgs/co2.png') no-repeat;
     background-size: 100% 100%;
   }
   .co2h {
-    width: 100px;
-    height: 75px;
+    width: 108px;
+    height: 76px;
     background: url('~@/assets/images/imgs/co2h.png') no-repeat;
     background-size: 100% 100%;
   }
   .co {
-    width: 73px;
-    height: 75px;
+    width: 108px;
+    height: 76px;
     background: url('~@/assets/images/imgs/co.png') no-repeat;
     background-size: 100% 100%;
   }
   .coh {
-    width: 73px;
-    height: 75px;
+    width: 108px;
+    height: 76px;
     background: url('~@/assets/images/imgs/coh.png') no-repeat;
     background-size: 100% 100%;
   }
   .swgd {
-    width: 65px;
-    height: 75px;
+    width: 95px;
+    height: 74px;
     background: url('~@/assets/images/imgs/swgd.png') no-repeat;
     background-size: 100% 100%;
   }
   .swgdh {
-    width: 65px;
-    height: 75px;
+    width: 95px;
+    height: 74px;
     background: url('~@/assets/images/imgs/swgdh.png') no-repeat;
     background-size: 100% 100%;
   }
   .wd {
-    width: 57px;
+    width: 35px;
     height: 75px;
     background: url('~@/assets/images/imgs/wd.png') no-repeat;
     background-size: 100% 100%;
   }
   .wdh {
-    width: 57px;
+    width: 35px;
     height: 75px;
     background: url('~@/assets/images/imgs/wdh.png') no-repeat;
     background-size: 100% 100%;
   }
   .slll {
-    width: 65px;
-    height: 75px;
+    width: 95px;
+    height: 74px;
     background: url('~@/assets/images/imgs/slll.png') no-repeat;
     background-size: 100% 100%;
   }
   .slllh {
-    width: 65px;
-    height: 75px;
+    width: 95px;
+    height: 74px;
     background: url('~@/assets/images/imgs/slllh.png') no-repeat;
     background-size: 100% 100%;
   }
   .slyl {
-    width: 65px;
-    height: 75px;
+    width: 147px;
+    height: 74px;
     background: url('~@/assets/images/imgs/slyl.png') no-repeat;
     background-size: 100% 100%;
   }
   .slylh {
-    width: 65px;
-    height: 75px;
+    width: 147px;
+    height: 74px;
     background: url('~@/assets/images/imgs/slylh.png') no-repeat;
     background-size: 100% 100%;
   }
   .sd {
-    width: 65px;
+    width: 71px;
     height: 75px;
     background: url('~@/assets/images/imgs/sd.png') no-repeat;
     background-size: 100% 100%;
   }
   .sdh {
-    width: 65px;
+    width: 71px;
     height: 75px;
     background: url('~@/assets/images/imgs/sdh.png') no-repeat;
     background-size: 100% 100%;
   }
   .fs {
-    width: 61px;
-    height: 75px;
+    width: 147px;
+    height: 74px;
     background: url('~@/assets/images/imgs/fs.png') no-repeat;
     background-size: 100% 100%;
   }
   .fsh {
-    width: 61px;
-    height: 75px;
+    width: 147px;
+    height: 74px;
     background: url('~@/assets/images/imgs/fsh.png') no-repeat;
     background-size: 100% 100%;
   }
   .fy {
-    width: 72px;
-    height: 75px;
+    width: 147px;
+    height: 74px;
     background: url('~@/assets/images/imgs/fy.png') no-repeat;
     background-size: 100% 100%;
   }
   .fyh {
-    width: 72px;
-    height: 75px;
+    width: 147px;
+    height: 74px;
     background: url('~@/assets/images/imgs/fyh.png') no-repeat;
     background-size: 100% 100%;
   }