评估

src/views/spectrum/reform/afterAssess/style.scss

@@ -0,0 +1,76 @@
+.page-panel {
+  width: 100%;
+  height: 100%;
+  background-color: #eff0f5 !important;
+  box-sizing: border-box;
+  padding: 10px;
+  .head-title {
+    font-size: 16px;
+    color: #333333;
+    line-height: 18px;
+    padding: 10px 0;
+    font-weight: 500;
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 3px;
+      height: 16px;
+      background: #2a77f7;
+      vertical-align: bottom;
+      margin-right: 5px;
+    }
+    &.line {
+      border-bottom: 1px solid #eaeaea;
+    }
+  }
+  .left-panel {
+    float: left;
+    width: 40%;
+    height: 100%;
+    background-color: #fff;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    box-sizing: border-box;
+    padding: 20px 20px;
+    overflow-y: auto;
+    position: relative;
+    overflow: hidden;
+  }
+  .right-panel {
+    float: left;
+    width: 60%;
+    height: 100%;
+    background-color: #fff;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    box-sizing: border-box;
+    padding: 10px 20px;
+    overflow-y: auto;
+    .top-box {
+      .el-form {
+        >>> .el-form-item {
+          margin-bottom: 0 !important;
+        }
+      }
+      padding: 15px 0;
+      border-bottom: 1px solid #e5e5e5;
+    }
+    .el-table {
+      >>> .el-table__cell {
+        padding: 5px 0 !important;
+      }
+      &::before {
+        height: 0 !important;
+      }
+    }
+    .middle-box {
+      clear: both;
+      width: 100%;
+      height: 260px;
+      padding-top: 10px;
+    }
+    .bottom-box {
+      height: calc(100% - 529px);
+    }
+  }
+}

src/views/spectrum/reform/afterAssess/widget.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="page-panel">
+    <div class="left-panel">
+      <mini-map layerControl projectList partsCheck>
+        <template slot="topBar">
+          <div @click="viewCurve()">监测查看</div>
+          <div>
+            <thematic-map></thematic-map>
+          </div>
+        </template>
+      </mini-map>
+      <transition name="el-zoom-in-bottom">
+        <moniter-see ref="moniterSee" v-show="moniterVisible" @close="moniterClose()"></moniter-see>
+      </transition>
+    </div>
+    <div class="right-panel">
+      <div class="top-box">
+        <el-form ref="form" :model="form" :inline="true" size="small">
+          <el-form-item label="监测点" label-width="60px">
+            <el-select v-model="form.model" placeholder="请选择">
+              <el-option v-for="item in []" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="日期范围" label-width="80px">
+            <el-select v-model="form.model" placeholder="请选择">
+              <el-option v-for="item in []" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label-width="0" style="float: right;">
+            <el-button type="primary">开始评估</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="middle-box">
+        <div class="head-title">评估结果</div>
+        <el-table :data="tableData" style="width: 100%" stripe :header-cell-style="{ background: 'rgba(45, 116, 231,0.2)', 
+      color: '#333333', height: '40px', textAlign: 'center' }" height="200px">
+          <template slot="empty">
+            <img src="@/assets/icon/null.png" alt="暂无数据" style="width:100px" />
+          </template>
+          <el-table-column prop="name1" label="水质指标" align="center"></el-table-column>
+          <el-table-column prop="name2" label="改造后实际值" align="center"></el-table-column>
+          <el-table-column prop="name3" label="改造前均值" align="center"></el-table-column>
+          <el-table-column prop="name4" label="较改造前" align="center">
+            <template slot-scope="{row}">
+              <span style="color:#36c46e">{{row.name4}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="name5" label="改造后目标值" align="center"></el-table-column>
+          <el-table-column prop="name6" label="较目标值" align="center">
+            <template slot-scope="{row}">
+              <span :style="{color:row.name7=='达标'?'#36c46e':'#f33d48'}">{{row.name6}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="name7" label="结论" align="center">
+            <template slot-scope="{row}"> 
+              <span :style="{color:row.name7=='达标'?'#36c46e':'#f33d48'}">{{row.name7}}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="bottom-box">
+        <div class="zb-item">
+          <div class=""></div>
+          <div class=""></div>
+          <div class=""></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import miniMap from '@/views/widgets/miniMap/index.vue'
+import moniterSee from '@/views/spectrum/reform/monitorSee/index.vue'
+import thematicMap from '@/views/widgets/thematicMap/index.vue'
+import * as echarts from 'echarts'
+export default {
+  components: {
+    miniMap,
+    moniterSee,
+    thematicMap
+  },
+  data() {
+    return {
+      form: {},
+      tableData: [
+        {
+          name1: 'COD',
+          name2: '110mg/L',
+          name3: '50mg/L',
+          name4: '60mg/L ↓ ',
+          name5: '100mg/L',
+          name6: '10mg/L ↑',
+          name7: '达标'
+        },
+        {
+          name1: 'COD',
+          name2: '110mg/L',
+          name3: '50mg/L',
+          name4: '60mg/L ↓ ',
+          name5: '100mg/L',
+          name6: '10mg/L ↑',
+          name7: '有改善，但未达标'
+        },
+        {
+          name1: 'COD',
+          name2: '110mg/L',
+          name3: '50mg/L',
+          name4: '60mg/L ↓ ',
+          name5: '100mg/L',
+          name6: '10mg/L ↑',
+          name7: '达标'
+        }
+      ],
+      moniterVisible: false
+    }
+  },
+  mounted() {},
+  methods: {
+    viewCurve(row = null) {
+      this.moniterVisible = true
+      if (row) {
+        this.$refs.moniterSee.open()
+      }
+    },
+    moniterClose() {
+      this.moniterVisible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './style.scss';
+</style>

src/views/spectrum/reform/assessReport/widget.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>评估报告</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/spectrum/reform/monitorSee/index.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="monitor-panel" v-show="visible">
+    <div class="top-div head-title">
+      <span>监测查看</span>
+      <span class="closer el-icon-close" @click="handClose"></span>
+    </div>
+    <div class="body-div">
+      <el-form ref="form" :model="form" label-width="auto" size="small" :inline="true">
+        <el-form-item label="监测点">
+          <el-select v-model="form.model" placeholder="请选择" style="width:120px">
+            <el-option v-for="item in []" :key="item.value" :label="item.label" :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="指标" label-width="40px">
+          <el-select v-model="form.model" placeholder="请选择" style="width:100px">
+            <el-option v-for="item in []" :key="item.value" :label="item.label" :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="日期范围">
+          <el-select v-model="form.model" placeholder="请选择" style="width:130px">
+            <el-option v-for="item in []" :key="item.value" :label="item.label" :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label-width="0">
+          <el-button type="primary" @click="query()">查询</el-button>
+        </el-form-item>
+      </el-form>
+      <div class="chart-box" v-for="(item,index) in [1,2]" :key="index" :id="'m-chart'+index"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+  data() {
+    return {
+      form: {}
+    }
+  },
+  mounted() {},
+  watch: {
+    visible(val) {
+
+    }
+  },
+  methods: {
+    query() {
+      this.open()
+    },
+    open() {
+      this.$nextTick(() => {
+        this.loadChart('m-chart0')
+        this.loadChart('m-chart1')
+      })
+    },
+    loadChart(domId) {
+      var chartDom = document.getElementById(domId)
+      var myChart = echarts.init(chartDom)
+      var option = {
+        // title: {
+        //   text: 'Stacked Line'
+        // },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: ['COD', '雨量']
+        },
+        grid: {
+          top: '15%',
+          left: '10%',
+          right: '10%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: [
+            '2022-6-12 \n 12:30:30',
+            '2022-6-12 \n 12:30:30',
+            '2022-6-12 \n 12:30:30',
+            '2022-6-12 \n 12:30:30',
+            '2022-6-12 \n 12:30:30',
+            '2022-6-12 \n 12:30:30',
+            '2022-6-12 \n 12:30:30'
+          ]
+        },
+        yAxis: [
+          {
+            type: 'value'
+          },
+          {
+            type: 'value',
+            inverse: true
+          }
+        ],
+        series: [
+          {
+            showSymbol: false,
+            name: 'COD',
+            type: 'line',
+            data: [0, 0, 10, 6, 13, 0, 0]
+          },
+          {
+            showSymbol: false,
+            yAxisIndex: 1,
+            name: '雨量',
+            type: 'line',
+            data: [80, 70, 91, 74, 90, 80, 80]
+          }
+        ]
+      }
+      myChart.clear()
+      option && myChart.setOption(option)
+    },
+    /**
+     * 关闭
+     */
+    handClose() {
+      this.$emit('close')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.monitor-panel {
+  width: calc(100% - 50px);
+  height: 310px;
+  background-color: #fff;
+  border-radius: 3px;
+  position: absolute;
+  bottom: 25px;
+  margin-left: 5px;
+  .head-title {
+    font-size: 16px;
+    color: #333333;
+    line-height: 18px;
+    margin: 10px 0;
+    font-weight: 500;
+
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 3px;
+      height: 16px;
+      background: #2a77f7;
+      vertical-align: bottom;
+      margin-right: 5px;
+    }
+  }
+  .top-div {
+    width: 100%;
+    height: 32px;
+    box-sizing: border-box;
+    border-bottom: 1px solid #dbdbdb;
+    padding: 0 10px;
+    .closer {
+      position: absolute;
+      right: 10px;
+      top: 15px;
+      cursor: pointer;
+      color: #858585;
+    }
+  }
+  .body-div {
+    width: 100%;
+    height: calc(100% - 102px);
+    .chart-box {
+      width: calc(50% - 5px);
+      height: 200px;
+      float: left;
+      &:nth-child(2n + 1) {
+        margin-left: 5px;
+      }
+      &:nth-child(2n) {
+        margin-right: 5px;
+      }
+    }
+  }
+}
+</style>

src/views/spectrum/reform/preAssess/style.scss

@@ -0,0 +1,108 @@
+.page-panel {
+  width: 100%;
+  height: 100%;
+  background-color: #eff0f5 !important;
+  box-sizing: border-box;
+  padding: 10px;
+  .head-title {
+    font-size: 16px;
+    color: #333333;
+    line-height: 18px;
+    padding: 10px 0;
+    font-weight: 500;
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 3px;
+      height: 16px;
+      background: #2a77f7;
+      vertical-align: bottom;
+      margin-right: 5px;
+    }
+    &.line {
+      border-bottom: 1px solid #eaeaea;
+    }
+  }
+  .left-panel {
+    float: left;
+    width: 40%;
+    height: 100%;
+    background-color: #fff;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    box-sizing: border-box;
+    padding: 20px 20px;
+    overflow-y: auto;
+    position: relative;
+    overflow: hidden;
+  }
+  .right-panel {
+    float: left;
+    width: 60%;
+    height: 100%;
+    background-color: #fff;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    box-sizing: border-box;
+    padding: 10px 20px;
+    overflow-y: auto;
+    .chart-panel {
+      font-size: 0;
+      .chart-box {
+        display: inline-block;
+        width: 50%;
+        height: 220px;
+        .chart-title {
+          padding: 20px 0;
+          font-size: 12px;
+        }
+        .chart {
+          width: 100%;
+          height: 168px;
+          position: relative;
+          > img {
+            position: absolute;
+            display: block;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+          }
+        }
+      }
+    }
+    .el-table >>> .el-table__cell {
+      padding: 5px 0 !important;
+    }
+    .middle-box {
+      clear: both;
+      width: 100%;
+      height: 260px;
+      padding-top: 10px;
+    }
+    .bottom-box {
+      height: calc(100% - 529px);
+      .el-tabs {
+        height: 100%;
+        >>> .el-tabs__header {
+          background: none;
+          color: black;
+          margin-bottom: 0px;
+        }
+        >>> .el-tabs__nav .el-tabs__item {
+          margin: 8px 0 0 0 !important;
+          background-color: unset !important;
+          padding: 0 13px !important;
+        }
+        >>> .el-tab-pane {
+          height: calc(100% - 20px);
+          width: 100%;
+        }
+      }
+      .cust-table {
+        >>> .el-table__body-wrapper {
+          height: calc(100% - 68px);
+        }
+      }
+    }
+  }
+}

src/views/spectrum/reform/preAssess/widget.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="page-panel">
+    <div class="left-panel">
+      <mini-map layerControl projectList partsCheck>
+        <template slot="topBar">
+          <div @click="viewCurve()">监测查看</div>
+          <div>
+            <thematic-map></thematic-map>
+          </div>
+        </template>
+      </mini-map>
+      <transition name="el-zoom-in-bottom">
+        <moniter-see ref="moniterSee" v-show="moniterVisible" @close="moniterClose()"></moniter-see>
+      </transition>
+    </div>
+    <div class="right-panel">
+      <div class="head-title line">评估结果</div>
+      <div class="chart-panel">
+        <div class="chart-box" style="padding-right:20px">
+          <div class="chart-title"><span style="color:#2d74e7">管网破损：</span><span style="color:#f59421">8</span>个监测点发现<span style="color:#f59421">10.02km</span>公里排水管网存在此隐患</div>
+          <div class="chart" id="chart1"></div>
+        </div>
+        <div class="chart-box" style="padding-left:20px">
+          <div class="chart-title"><span style="color:#2d74e7">雨污混接：</span>暂未发现</div>
+          <div class="chart" id="chart2">
+            <img src="@/assets/icon/null.png" alt="暂无数据" style="width:100px;" />
+          </div>
+        </div>
+      </div>
+      <div class="middle-box">
+        <div class="head-title">
+          <span>监测点</span>
+          <span style="float: right;">
+            <el-checkbox v-model="form.checked">发现管网破损（2）</el-checkbox>
+            <el-checkbox v-model="form.checked">发现雨污混接（2）</el-checkbox>
+            <el-checkbox v-model="form.checked">其他监测点（5）</el-checkbox>
+          </span>
+        </div>
+        <el-table :data="tableData1" style="width: 100%" stripe :header-cell-style="{ background: 'rgba(45, 116, 231,0.2)', 
+      color: '#333333', height: '40px', textAlign: 'center' }" height="200px">
+          <template slot="empty">
+            <img src="@/assets/icon/null.png" alt="暂无数据" style="width:100px" />
+          </template>
+          <el-table-column label="序号" align="center">
+            <template slot-scope="scope">{{scope.$index+1}}</template>
+          </el-table-column>
+          <el-table-column prop="name1" label="监测类型" align="center"></el-table-column>
+          <el-table-column prop="name2" label="监测点" align="center"></el-table-column>
+          <el-table-column prop="name3" label="上游监测点" align="center"></el-table-column>
+          <el-table-column prop="name4" label="关联检查井" align="center"></el-table-column>
+          <el-table-column prop="name5" label="发现管网破损" align="center"></el-table-column>
+          <el-table-column prop="name6" label="发现雨污混接" align="center"></el-table-column>
+          <el-table-column prop="name7" label="关联管网" align="center">
+            <template slot-scope="{row}">
+              <el-button type="text" style="padding:0">{{row.name7}}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="bottom-box">
+        <el-tabs v-model="activeName">
+          <el-tab-pane label="改造工作量" name="first">
+            <el-table :data="tableData2" class="cust-table" style="width: 100%;margin-top:20px" :header-cell-style="{ background: '#f5f5f5', 
+      color: '#333333', height: '30px',padding:'6px 0', textAlign: 'center' }" height="100%">
+              <template slot="empty">
+                <img src="@/assets/icon/null.png" alt="暂无数据" style="width:100px" />
+              </template>
+              <el-table-column prop="address1" label="工作优先级" align="center"></el-table-column>
+              <el-table-column prop="address2" label="排水类型" align="center"></el-table-column>
+              <el-table-column prop="address3" label="管网等级" align="center"></el-table-column>
+              <el-table-column label="路径" align="center">
+                <el-table-column prop="address4" label="小于DN400" align="center"></el-table-column>
+                <el-table-column prop="address5" label="DN400~DN800" align="center"></el-table-column>
+                <el-table-column prop="address6" label="大于DN800" align="center"></el-table-column>
+              </el-table-column>
+            </el-table>
+          </el-tab-pane>
+          <el-tab-pane label="监测点告警情况" name="second">
+            <el-form ref="form" :model="form" :inline="true" label-width="auto" size="small" style="margin:10px 0">
+              <el-form-item label="监测点" label-width="60px" style="margin:0">
+                <el-select v-model="form.site" placeholder="请选择">
+                  <el-option v-for="(item,index) in []" :key="index" :label="item" :value="item"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="指标" label-width="40px" style="margin:0">
+                <el-select v-model="form.site" placeholder="请选择">
+                  <el-option v-for="(item,index) in []" :key="index" :label="item" :value="item"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="日期范围" style="margin:0">
+                <el-date-picker v-model="form.value1" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" style="width:280px">
+                </el-date-picker>
+              </el-form-item>
+              <el-form-item label-width="20px" style="margin:0">
+                <el-button type="primary">查询</el-button>
+              </el-form-item>
+            </el-form>
+            <el-table :data="tableData3" style="width: 100%" :header-cell-style="{ background: 'rgba(45, 116, 231,0.2)', 
+      color: '#333333', height: '40px', textAlign: 'center' }" height="calc(100% - 32px)">
+              <template slot="empty">
+                <img src="@/assets/icon/null.png" alt="暂无数据" style="width:100px;" />
+              </template>
+              <el-table-column label="序号" align="center">
+                <template slot-scope="scope">{{scope.$index+1}}</template>
+              </el-table-column>
+              <el-table-column prop="address1" label="监测日期" align="center"></el-table-column>
+              <el-table-column prop="address2" label="监测点" align="center"></el-table-column>
+              <el-table-column prop="address3" label="日降雨量" align="center"></el-table-column>
+              <el-table-column prop="address4" label="告警原因" align="center"></el-table-column>
+              <el-table-column prop="address5" label="监测曲线" align="center">
+                <template slot-scope="{row}">
+                  <el-button type="text" style="padding:0" @click="viewCurve(row)">查看</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import miniMap from '@/views/widgets/miniMap/index.vue'
+import moniterSee from '@/views/spectrum/reform/monitorSee/index.vue'
+import thematicMap from '@/views/widgets/thematicMap/index.vue'
+import * as echarts from 'echarts'
+export default {
+  components: {
+    miniMap,
+    moniterSee,
+    thematicMap
+  },
+  data() {
+    return {
+      form: {},
+      tableData: [],
+      tableData1: [],
+      tableData2: [],
+      tableData3: [],
+      activeName: 'first',
+      moniterVisible: false
+    }
+  },
+  mounted() {
+    for (let index = 0; index < 10; index++) {
+      this.tableData1.push({
+        name1: '管网水质检测仪',
+        name2: '青羊区6号',
+        name3: '青年之南',
+        name4: '污水W01',
+        name5: '2022-6-18',
+        name6: '2022-6-19',
+        name7: '10个 1593km'
+      })
+      this.tableData2.push({
+        address1: '立即处理',
+        address2: '雨水',
+        address3: '主干管网',
+        address4: '2563km',
+        address5: '5563km',
+        address6: '63km'
+      })
+      this.tableData3.push({
+        address1: '2022-3-12',
+        address2: '青羊区6号',
+        address3: '0.418mm',
+        address4: '警告原因内容'
+      })
+    }
+    this.loadChart()
+  },
+  methods: {
+    loadChart() {
+      let chartDom = document.getElementById('chart1')
+      let myChart = echarts.init(chartDom)
+      let option = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: {
+          top: '8%',
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['雨水', '污水'],
+            axisTick: {
+              alignWithLabel: true
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: [
+          {
+            name: '管网破损',
+            type: 'bar',
+            data: [2.0, 2.3],
+            barWidth: 20,
+            itemStyle: {
+              normal: {
+                color: (params) => {
+                  var colorList = ['#2d74e7', '#02bdc9', '#cca272', '#74608f', '#d7a02b', '#c8ba23']
+                  return colorList[params.dataIndex]
+                }
+              }
+            }
+          }
+        ]
+      }
+      myChart.clear()
+      option && myChart.setOption(option)
+    },
+    viewCurve(row = null) {
+      this.moniterVisible = true
+      if (row) {
+        this.$refs.moniterSee.open()
+      }
+    },
+    moniterClose() {
+      this.moniterVisible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './style.scss';
+</style>

src/views/spectrum/reform/sewageDirect/style.scss

@@ -0,0 +1,94 @@
+.page-panel {
+  width: 100%;
+  height: 100%;
+  background-color: #eff0f5 !important;
+  box-sizing: border-box;
+  padding: 10px;
+  .head-title {
+    font-size: 16px;
+    color: #333333;
+    line-height: 18px;
+    padding: 10px 0;
+    font-weight: 500;
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 3px;
+      height: 16px;
+      background: #2a77f7;
+      vertical-align: bottom;
+      margin-right: 5px;
+    }
+    &.line {
+      border-bottom: 1px solid #eaeaea;
+    }
+  }
+  .left-panel {
+    float: left;
+    width: 40%;
+    height: 100%;
+    background-color: #fff;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    box-sizing: border-box;
+    padding: 20px 20px;
+    overflow-y: auto;
+    position: relative;
+    overflow: hidden;
+  }
+  .right-panel {
+    float: left;
+    width: 60%;
+    height: 100%;
+    background-color: #fff;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    box-sizing: border-box;
+    padding: 10px 20px;
+    overflow-y: auto;
+    .chart-panel {
+      font-size: 0;
+      .chart-box {
+        display: inline-block;
+        width: 50%;
+        height: 160px;
+        font-size: 14px;
+        overflow: hidden;
+      }
+    }
+    .el-table >>> .el-table__cell {
+      padding: 5px 0 !important;
+    }
+    .middle-box {
+      clear: both;
+      width: 100%;
+      height: 260px;
+      padding-top: 10px;
+    }
+    .bottom-box {
+      height: calc(100% - 548px);
+      .el-tabs {
+        height: 100%;
+        >>> .el-tabs__header {
+          background: none;
+          color: black;
+          margin-bottom: 0px;
+        }
+        >>> .el-tabs__nav .el-tabs__item {
+          margin: 8px 0 0 0 !important;
+          background-color: unset !important;
+          padding: 0 13px !important;
+        }
+        >>> .el-tab-pane {
+          height: calc(100% - 20px);
+          width: 100%;
+        }
+      }
+      .cust-table {
+        >>> .el-table__body-wrapper {
+          height: calc(100% - 68px);
+        }
+      }
+    }
+  }
+}

src/views/spectrum/reform/sewageDirect/widget.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="page-panel">
+    <div class="left-panel">
+      <mini-map layerControl projectList partsCheck>
+        <template slot="topBar">
+          <div @click="viewCurve()">监测查看</div>
+          <div>
+            <thematic-map></thematic-map>
+          </div>
+        </template>
+      </mini-map>
+      <transition name="el-zoom-in-bottom">
+        <moniter-see ref="moniterSee" v-show="moniterVisible" @close="moniterClose()"></moniter-see>
+      </transition>
+    </div>
+    <div class="right-panel">
+      <div class="head-title">评估结果</div>
+      <div class="chart-panel">
+        <div class="chart-box" style="padding:0 20px 0 10px;">
+          <div style="width:100%;height:100%;background-color:#f9f9f9;overflow:hidden;padding:10px">
+            <p style="margin:10px 0;color:#2d74e7;margin-top:50px">污水直排：</p>
+            <p style="margin:10px 0;color:#3f3f3f">雨水管网共布设4个监测点位，其中2个监测点位发现污水直排隐患</p>
+          </div>
+        </div>
+        <div class="chart-box" style="padding-left:20px" id="chart1"></div>
+      </div>
+      <div class="middle-box">
+        <div class="head-title">
+          <span>监测点</span>
+          <span style="float: right;">
+            <el-checkbox v-model="form.checked">发现污水直排监测点（2）</el-checkbox>
+            <el-checkbox v-model="form.checked">其他相关监测点（5）</el-checkbox>
+          </span>
+        </div>
+        <el-table :data="tableData1" style="width: 100%" stripe :header-cell-style="{ background: 'rgba(45, 116, 231,0.2)', 
+      color: '#333333', height: '40px', textAlign: 'center' }" height="200px">
+          <template slot="empty">
+            <img src="@/assets/icon/null.png" alt="暂无数据" style="width:100px" />
+          </template>
+          <el-table-column label="序号" align="center">
+            <template slot-scope="scope">{{scope.$index+1}}</template>
+          </el-table-column>
+          <el-table-column prop="name1" label="监测类型" align="center"></el-table-column>
+          <el-table-column prop="name2" label="监测点" align="center"></el-table-column>
+          <el-table-column prop="name3" label="上游监测点" align="center"></el-table-column>
+          <el-table-column prop="name4" label="关联检查井" align="center"></el-table-column>
+          <el-table-column prop="name5" label="发现管网破损" align="center"></el-table-column>
+          <el-table-column prop="name6" label="发现雨污混接" align="center"></el-table-column>
+          <el-table-column prop="name7" label="关联管网" align="center">
+            <template slot-scope="{row}">
+              <el-button type="text" style="padding:0">{{row.name7}}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="bottom-box">
+        <div class="head-title line">监测点告警情况</div>
+        <el-form ref="form" :model="form" :inline="true" label-width="auto" size="small" style="margin:10px 0">
+          <el-form-item label="监测点" label-width="60px" style="margin:0">
+            <el-select v-model="form.site" placeholder="请选择">
+              <el-option v-for="(item,index) in []" :key="index" :label="item" :value="item"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="指标" label-width="40px" style="margin:0">
+            <el-select v-model="form.site" placeholder="请选择">
+              <el-option v-for="(item,index) in []" :key="index" :label="item" :value="item"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="日期范围" style="margin:0">
+            <el-date-picker v-model="form.value1" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" style="width:280px">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label-width="20px" style="margin:0">
+            <el-button type="primary">查询</el-button>
+          </el-form-item>
+        </el-form>
+        <el-table :data="tableData3" style="width: 100%" :header-cell-style="{ background: 'rgba(45, 116, 231,0.2)', 
+      color: '#333333', height: '40px', textAlign: 'center' }" height="calc(100% - 51px)">
+          <template slot="empty">
+            <img src="@/assets/icon/null.png" alt="暂无数据" style="width:100px;" />
+          </template>
+          <el-table-column label="序号" align="center">
+            <template slot-scope="scope">{{scope.$index+1}}</template>
+          </el-table-column>
+          <el-table-column prop="address1" label="监测日期" align="center"></el-table-column>
+          <el-table-column prop="address2" label="监测点" align="center"></el-table-column>
+          <el-table-column prop="address3" label="日降雨量" align="center"></el-table-column>
+          <el-table-column prop="address4" label="告警原因" align="center"></el-table-column>
+          <el-table-column prop="address5" label="监测曲线" align="center">
+            <template slot-scope="{row}">
+              <el-button type="text" style="padding:0" @click="viewCurve(row)">查看</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="pagination" style="padding-top:10px">
+          <el-pagination :current-page="1" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import miniMap from '@/views/widgets/miniMap/index.vue'
+import moniterSee from '@/views/spectrum/reform/monitorSee/index.vue'
+import thematicMap from '@/views/widgets/thematicMap/index.vue'
+import * as echarts from 'echarts'
+export default {
+  components: {
+    miniMap,
+    moniterSee,
+    thematicMap
+  },
+  data() {
+    return {
+      form: {},
+      tableData: [],
+      tableData1: [],
+      tableData2: [],
+      tableData3: [],
+      activeName: 'first',
+      moniterVisible: false
+    }
+  },
+  mounted() {
+    for (let index = 0; index < 10; index++) {
+      this.tableData1.push({
+        name1: '管网水质检测仪',
+        name2: '青羊区6号',
+        name3: '青年之南',
+        name4: '污水W01',
+        name5: '2022-6-18',
+        name6: '2022-6-19',
+        name7: '10个 1593km'
+      })
+      this.tableData2.push({
+        address1: '立即处理',
+        address2: '雨水',
+        address3: '主干管网',
+        address4: '2563km',
+        address5: '5563km',
+        address6: '63km'
+      })
+      this.tableData3.push({
+        address1: '2022-3-12',
+        address2: '青羊区6号',
+        address3: '0.418mm',
+        address4: '警告原因内容'
+      })
+    }
+    this.loadChart()
+  },
+  methods: {
+    loadChart() {
+      let chartDom = document.getElementById('chart1')
+      let myChart = echarts.init(chartDom)
+      let option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        // legend: {
+        //   orient: 'vertical',
+        //   left: 'left'
+        // },
+        color: ['#15d0ea', '#f6b638'],
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: '80%',
+            data: [
+              { value: 1048, name: 'Search Engine' },
+              { value: 735, name: 'Direct' }
+            ],
+            label: {
+              formatter: '{b}\n{d}%',
+              fontSize: 14,
+              fontWeight: 500
+            },
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      }
+      myChart.clear()
+      option && myChart.setOption(option)
+    },
+    viewCurve(row = null) {
+      this.moniterVisible = true
+      if (row) {
+        this.$refs.moniterSee.open()
+      }
+    },
+    moniterClose() {
+      this.moniterVisible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './style.scss';
+</style>

src/views/widgets/miniMap/index.vue

@@ -0,0 +1,428 @@
+<template>
+  <div id="miniMap-container" class="miniMap_container">
+    <div class="top-bar">
+      <div v-show="layerControl">图层控制</div>
+      <div v-show="projectList">工程列表</div>
+      <slot name="topBar" />
+      <div v-show="partsCheck">部件查看</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'minMap',
+  props: {
+    layerControl: {
+      type: Boolean,
+      default: false
+    },
+    projectList: {
+      type: Boolean,
+      default: false
+    },
+    partsCheck: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      footer_height: '0%',
+      mapService: ['img', 'theme'],
+      baseScene: 'scenes',
+      baseTerrain: 'terrain',
+      terrain: 'dixing',
+      isInit: false, //当前的地图容器对象
+      baselayer: [],
+      _viewer: null
+    }
+  },
+  computed: {
+    AppX: function () {
+      return this.$store.getters.AppX
+    }
+  },
+  methods: {
+    initData() {
+      return this.$store.dispatch('cesiumMap/initGISResource')
+    },
+    /**
+     * 加载地图
+     */
+    addToMap() {
+      var configItem = this.AppX.appConfig.gisResource[this.baseTerrain]
+      var url = configItem.config[this.terrain].url
+      var layerTitle = configItem.config[this.terrain].name
+      // var url =
+      //   "https://yeepms.yeec.com.cn/iserver/services/3D-sxgk_dem/rest/realspace/datas/TF_PAPN_DEM@sxgk_base";
+      // var layerTitle = "dixing";
+      this._viewer = new Cesium.Viewer('miniMap-container', {
+        terrainProvider: new Cesium.CesiumTerrainProvider({
+          url: url,
+          requestWaterMask: true,
+          requestVertexNormals: true,
+          credit: layerTitle,
+          isSct: true
+        }),
+        navigation: true,
+        contextOptions: {
+          webgl: {
+            alpha: false,
+            depth: true,
+            stencil: true,
+            antialias: true,
+            premultipliedAlpha: true,
+            preserveDrawingBuffer: true, //通过canvas.toDataURL()实现截图需要将该项设置为true
+            failIfMajorPerformanceCaveat: false
+          },
+          allowTextureFilterAnisotropic: true
+        },
+        timeline: false,
+        animation: false,
+        infoBox: false,
+        selectionIndicator: false //设置绿色框框不可见
+      })
+      this._viewer._cesiumWidget._creditContainer.style.display = 'none' //去掉logo
+      this.isInit = true
+
+      this.initCesiumStatus()
+      //this._viewer.scene.logarithmicDepthBuffer = false;
+      //高动态范围渲染
+      //this._viewer.scene.highDynamicRange = false;
+
+      this.initBaseMap()
+      this.initTianditu()
+      const initPosition = this.AppX.appConfig.initPosition
+      const carto = Cesium.Cartographic.fromDegrees(
+        parseFloat(initPosition.lon),
+        parseFloat(initPosition.lat),
+        parseFloat(initPosition.height)
+      )
+      const cartes3 = Cesium.Cartographic.toCartesian(carto)
+
+      // const cartes3 = new Cesium.Cartesian3(
+      //   -2204482.2366905585,
+      //   5150077.372278957,
+      //   3152769.164041396
+      // );
+      const camera = cartes3
+      this._viewer.camera.setView({
+        destination: new Cesium.Cartesian3(camera.x, camera.y, camera.z),
+        orientation: {
+          heading: 0,
+          pitch: Cesium.Math.toRadians(-90),
+          roll: 0
+        }
+      })
+      setTimeout(
+        function () {
+          this.addInitScene()
+        }.bind(this),
+        5000
+      )
+    },
+    /**初始化基础底图*/
+    initBaseMap() {
+      this.baseMapConfig()
+      let layerInfo = this.baselayer
+      layerInfo.forEach((item) => {
+        if (item.show) {
+          const gisItem = this.AppX.appConfig.gisResource[item.type].config[item.name]
+          if (!gisItem) {
+            return true
+          }
+          const url = gisItem.url
+          if (this.mapService.indexOf(item.type) > -1) {
+            this._viewer.imageryLayers.addImageryProvider(
+              new Cesium.SuperMapImageryProvider({
+                url: url,
+                credit: item.name
+              })
+            )
+          } else if ((item.type = 'mvt')) {
+            this._viewer.scene.addVectorTilesMap({
+              url: url,
+              name: item.name
+            })
+          }
+        }
+      })
+
+      // this._viewer.imageryLayers.addImageryProvider(
+      //   new Cesium.SuperMapImageryProvider({
+      //     url: "https://yeepms.yeec.com.cn/iserver/services/map-sxgk/rest/maps/hnyy_type",
+      //     credit: "typetheme",
+      //   })
+      // );
+    },
+    /**
+     * 地图服务配置
+     */
+    baseMapConfig() {
+      const source = this.AppX.appConfig.gisResource
+      const mapList = this.mapService
+      const baseLayer = []
+      for (let name in source) {
+        if (mapList.indexOf(name) > -1) {
+          const config = source[name].config
+          for (let key in config) {
+            const item = config[key]
+            baseLayer.push({
+              name: key,
+              type: name,
+              show: item.isDisplay === '0' ? false : true
+            })
+          }
+          // for (let i = 0; i < config.length; i++) {
+          //   const item = config[i];
+          //   baseLayer.push({
+          //     name: item.key,
+          //     type: name,
+          //     show: item.isDisplay === "0" ? false : true,
+          //   });
+          // }
+        }
+      }
+      this.baselayer = baseLayer
+    },
+    /**
+     * 加载初始化场景
+     */
+    addInitScene() {
+      var scenes = this.AppX.appConfig.gisResource[this.baseScene]
+      if (scenes && scenes.config) {
+        this.scenesIndex = 0
+        Object.keys(scenes.config).forEach(
+          function (keyName, index) {
+            const item = scenes.config[keyName]
+            var promise = this._viewer.scene.open(item.url, undefined, {
+              autoSetView: false
+            })
+            Cesium.when(
+              promise,
+              function (layers) {
+                this.scenesIndex += 1
+                for (var i = 0; i < layers.length; i++) {
+                  var ly = layers[i]
+                  ly.selectEnabled = false
+                  ly.clearMemoryImmediately = false
+                  ly.cullEnabled = false
+                  //ly.lodRangeScale=0.01
+                  var model = BaseConfig.layers[ly.name]
+                  if (BaseConfig.sjpipeLayers.indexOf(ly.name) > -1) {
+                    let style3d = new Cesium.Style3D()
+                    style3d.altitudeMode = 0
+                    style3d.bottomAltitude = 0 - AppX.appConfig.downDepth
+                    ly.style3D = style3d
+                    //ly.visibleDistanceMax=800;
+                    ly.maxVisibleAltitude = BaseConfig.pipeMaxVisibel
+                  }
+                  //普查管线初始隐藏
+                  if (BaseConfig.pcpipeLayers.indexOf(ly.name) > -1) {
+                    let style3d = new Cesium.Style3D()
+                    style3d.altitudeMode = 0
+                    style3d.bottomAltitude = 0 - AppX.appConfig.downDepth
+                    ly.style3D = style3d
+                    ly.visible = false
+                    ly.maxVisibleAltitude = BaseConfig.pipeMaxVisibel
+                  }
+                  if (BaseConfig.pipeSelectLayers.indexOf(ly.name) > -1) {
+                    ly.selectedColor = Cesium.Color.DARKRED
+                    ly.selectColorType = 1
+                  }
+                  if (BaseConfig.pipeLineLayer.indexOf(ly.name) > -1) {
+                    ly.lodRangeScale = 20
+                  }
+                  if (model) {
+                    let style3d = new Cesium.Style3D()
+                    style3d.altitudeMode = 0
+                    style3d.bottomAltitude = model.bottomAltitude
+                    ly.visible = model.visible
+                    ly.style3D = style3d
+                    //ly.brightness = model.brightness;
+                    //ly.contrast = model.contrast;
+                    //ly.hue = model.hue;
+                    //ly.saturation = model.saturation;
+                    //ly.gamma = model.gamma;
+                    //if (Cesium.defined(model.maxVisibleAltitude)) ly.maxVisibleAltitude = model.maxVisibleAltitude;
+                    //if(Cesium.defined(model.maxVisibleDistance)) ly.visibleDistanceMax=model.maxVisibleDistance;
+                  }
+                  ly.refresh()
+                }
+                if (!this.AppX.runtimeConfig.activeView.scene.pickPositionSupported) {
+                  console.error('不支持深度纹理,无法拾取位置！')
+                }
+              }.bind(this),
+              function (e) {
+                console.error('加载SCP失败，请检查网络连接状态或者url地址是否正确？')
+              }
+            )
+          }.bind(this)
+        )
+      }
+    },
+    /**
+     * 该方法用于初始化cesium属性
+     */
+    initCesiumStatus() {
+      //开启地形深度测试
+      this._viewer.scene.globe.depthTestAgainstTerrain = true
+      //关闭灯光
+      this._viewer.scene.globe.enableLighting = false
+      //globeAlpha导致月球始终可见
+      this._viewer.scene.moon.show = false
+      //地球表面双面显示
+      this._viewer.scene.globe.backFaceCulling = false
+      //开启地下模式
+      this._viewer.scene.undergroundMode = true
+      this._viewer.scene.screenSpaceCameraController.minimumZoomDistance = -1000
+      this._viewer.terrainProvider.isCreateSkirt = false //关闭地形裙边
+      //设置地球表面颜色
+      this._viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 1)
+      //帧率工具
+      this._viewer.scene.debugShowFramesPerSecond = false
+      const nowDate = new Date(Date.now())
+      nowDate.setHours(16) //设置系统时间为12点,时差12小时
+      nowDate.setMinutes(0)
+      this._viewer.clock.currentTime = Cesium.JulianDate.fromDate(nowDate)
+      this._viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
+    },
+    /**
+     * 系统初始化加载天地图
+     */
+    initTianditu() {
+      const layerType = 'vec_w'
+      const poiType = 'cva_w'
+      const layerName = layerType.split('_')[0]
+      const poiName = poiType.split('_')[0]
+      const token = this.$store.state.cesiumMap.tdttoken
+      const url =
+        'https://t{s}.tianditu.gov.cn/' +
+        layerType +
+        '/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=' +
+        layerName +
+        '&TILEMATRIXSET=w&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&STYLE=default&FORMAT=tiles&tk=' +
+        token
+      const poiurl =
+        'https://t{s}.tianditu.gov.cn/' +
+        poiType +
+        '/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=' +
+        poiName +
+        '&TILEMATRIXSET=w&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&STYLE=default&FORMAT=tiles&tk=' +
+        token
+      const imagelayers = this._viewer.imageryLayers
+      const layerlen = imagelayers.length
+      const subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']
+      //中台
+      const imglayer = new Cesium.WebMapTileServiceImageryProvider({
+        //影像底图
+        url: new Cesium.Resource({
+          url: url,
+          headers: {
+            Accept: 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8'
+          }
+        }),
+        subdomains,
+        subdomains,
+        credit: 'tianditu_base',
+        layer: 'tdtVecLayer',
+        style: 'default',
+        maximumLevel: 17,
+        format: 'image/jpeg',
+        tileMatrixSetID: 'GoogleMapsCompatible', //使用谷歌的瓦片切片方式
+        show: true
+      })
+
+      const poilayer = new Cesium.WebMapTileServiceImageryProvider({
+        //影像底图
+        url: new Cesium.Resource({
+          url: poiurl,
+          headers: {
+            Accept: 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8'
+          }
+        }),
+        subdomains: subdomains,
+        credit: 'tianditu_poi',
+        layer: 'tdtCvaLayer',
+        style: 'default',
+        format: 'image/jpeg',
+        maximumLevel: 17,
+        tileMatrixSetID: 'GoogleMapsCompatible', //使用谷歌的瓦片切片方式
+        show: true
+      })
+      imagelayers.addImageryProvider(imglayer, 1)
+
+      imagelayers.addImageryProvider(poilayer, 2)
+    },
+    handelClose() {}
+  },
+  mounted() {
+    this.initData().then((result) => {
+      this.addToMap()
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.miniMap_container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  canvas {
+    width: 100% !important;
+    height: 100% !important;
+    touch-action: none;
+  }
+  .cesium-viewer-bottom,
+  .cesium-viewer-selectionIndicatorContainer,
+  .cesium-viewer-infoBoxContainer,
+  .cesium-viewer-toolbar,
+  .cesium-viewer-zoomIndicatorContainer {
+    display: none !important;
+  }
+  >>> .cesium-viewer-navigationContainer {
+    right: unset !important;
+    left: 0 !important;
+  }
+  .top-bar {
+    position: absolute;
+    z-index: 990;
+    top: 13px;
+    right: 17px;
+    display: block;
+    border-radius: 4px;
+    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.4);
+    background-color: #fff;
+    > div {
+      width: 82px;
+      height: 38px;
+      line-height: 38px;
+      text-align: center;
+      float: left;
+      font-size: 14px;
+      cursor: pointer;
+      color: #606266;
+      position: relative;
+      &:hover {
+        color: #409eff;
+      }
+      &:nth-child(n+2){
+        &::before{
+          content: "";
+          display: block;
+          width: 1px;
+          height: 20px;
+          position: absolute;
+          top: 9px;
+          background-color: #d1d4da;
+          left: -0.5px;
+          color: #606266;
+          font-size: 18px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/widgets/thematicMap/index.vue

@@ -0,0 +1,133 @@
+<template>
+  <el-dropdown trigger="hover">
+    <span class="el-dropdown-link">
+      专题图<i class="el-icon-arrow-down el-icon--right"></i>
+    </span>
+    <el-dropdown-menu slot="dropdown">
+      <div class="dropdown-div">
+        <el-tree :data="data" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false">
+          <span class="custom-tree-node" slot-scope="{ node, data }">
+            <span v-if="node.level==1">{{ node.label }}</span>
+            <span v-else :class="data.icon">{{ node.label }}</span>
+          </span>
+        </el-tree>
+      </div>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      data: [
+        {
+          id: 1,
+          label: '管网破损专题图',
+          children: [
+            {
+              id: 4,
+              icon: 'iconfont iconguanwang2',
+              label: '管道（13个）'
+            },
+            {
+              id: 5,
+              icon: 'iconfont iconzhongdian11',
+              label: '监测点（2个）'
+            }
+          ]
+        },
+        {
+          id: 2,
+          label: '雨污混接专题图',
+          children: [
+            {
+              id: 5,
+              icon: 'iconfont iconguanwang2',
+              label: '管道（13个）'
+            },
+            {
+              id: 6,
+              icon: 'iconfont iconzhongdian11',
+              label: '监测点（2个）'
+            }
+          ]
+        },
+        {
+          id: 3,
+          label: '监测点',
+          children: [
+            {
+              id: 7,
+              icon: 'iconfont iconqingshuishuizhiyibiao',
+              label: '管网水质监测仪（25台）'
+            },
+            {
+              id: 8,
+              icon: 'iconfont iconyeweiji',
+              label: '液位计（15台）'
+            },
+            {
+              id: 9,
+              icon: 'iconfont icondibiaoshuizhijianceyi',
+              label: '地表水水质监测仪（10台）'
+            }
+          ]
+        },
+        {
+          id: 4,
+          label: '人工检测专题图',
+          children: [
+            {
+              id: 10,
+              icon: 'iconfont iconguanwang',
+              label: '人工检测管线（13个）'
+            },
+            {
+              id: 11,
+              icon: 'iconfont iconjiancebaojingguanli',
+              label: '缺陷（2）'
+            }
+          ]
+        }
+      ]
+    }
+  },
+  methods: {
+    aa(node, data) {
+      console.log(node, data)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-dropdown {
+  >>> .el-dropdown-link {
+    color: #606266;
+    &:hover {
+      color: #409eff;
+    }
+  }
+}
+.dropdown-div {
+  width: 300px;
+  height: auto;
+  box-sizing: border-box;
+  padding: 10px;
+  .el-tree {
+    >>> .el-tree-node__content {
+      margin-bottom: 6px;
+    }
+    .custom-tree-node {
+      > span {
+        font-size: 14px !important;
+        &::before{
+            margin: 0 5px;
+            color: #999999;
+        }
+      }
+    }
+  }
+}
+</style>