评估页面、页面完善

src/utils/request.ts

@@ -29,7 +29,8 @@ declare module 'axios' {
 }
 
 // 创建axios实例
-export const IP = 'http://192.168.2.235:7081' // 开发2
+// export const IP = 'http://192.168.2.235:7081' // 开发2
+export const IP = 'http://221.182.8.141:7081' // 开发2
 
 // 暴露IP地址
 export const baseAddress = IP

src/views/spectrum/common/historyCurve/index.vue

@@ -5,40 +5,40 @@
       <div class="top">
         <el-form ref="form" :model="form" label-width="auto" size="small">
           <el-row :gutter="24">
-            <el-col :span="14">
+            <el-col :span="16">
               <el-form-item label="监测站点：" style="padding:0">
-                <el-select v-model="form.siteId" filterable placeholder="选择站点">
+                <el-select v-model="form.siteId" filterable placeholder="选择站点" style="width:100%">
                   <el-option v-for="(item,index) in siteOption" :key="index" :label="item.siteName" :value="item.id">
                   </el-option>
                 </el-select>
               </el-form-item>
             </el-col>
-            <el-col :span="10">
-              <el-form-item label-width="0">
+            <el-col :span="8">
+              <el-form-item label-width="0" style="text-align: right;">
                 <el-button type="primary" size="small" style="width:85px">图上选点</el-button>
-                <el-button type="primary" size="small" style="width:85px" @click="query()">查询</el-button>
               </el-form-item>
             </el-col>
-            <el-col :span="13" style="padding-right:0">
+            <el-col :span="16">
               <el-form-item label="日期范围：" style="padding:0">
-                <el-date-picker v-model="form.date" type="daterange" align="right" unlink-panels range-separator="-"
-                                start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd"
-                                format="yyyy/MM/dd" style="width:100%" :clearable="false">
+                <el-date-picker v-model="form.date" type="daterange" align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd" format="yyyy/MM/dd" style="width:100%" :clearable="false">
                 </el-date-picker>
               </el-form-item>
             </el-col>
-            <el-col :span="11" style="padding-right:0">
-              <el-form-item label-width="0">
-                <el-radio-group v-model="radio">
-                  <el-radio :label="1">实时</el-radio>
-                  <el-radio :label="2">每小时均值</el-radio>
-                  <el-radio :label="3">每日均值</el-radio>
-                </el-radio-group>
+            <el-col :span="8">
+              <el-form-item label-width="0" style="text-align: right;">
+                <el-button type="primary" size="small" style="width:85px" @click="query()">查询</el-button>
               </el-form-item>
             </el-col>
           </el-row>
         </el-form>
       </div>
+      <div class="time-select">
+        <el-radio-group v-model="radio">
+          <el-radio :label="1">实时</el-radio>
+          <el-radio :label="2">每小时均值</el-radio>
+          <el-radio :label="3">每日均值</el-radio>
+        </el-radio-group>
+      </div>
       <!-- 标签页 -->
       <el-tabs v-model="activeName" type="card" style="height:500px">
         <el-tab-pane label="图表" name="first">
@@ -48,8 +48,7 @@
           </div>
         </el-tab-pane>
         <el-tab-pane label="列表" name="second" style="height:100%">
-          <el-table :data="tableData" stripe height="100%"
-                    :header-cell-style="{background:'#e0eafb',color:'rgb(50,59,65)',height:'39px',textAlign:'center',fontWeight:'600'}">
+          <el-table :data="tableData" stripe height="100%" :header-cell-style="{background:'#e0eafb',color:'rgb(50,59,65)',height:'39px',textAlign:'center',fontWeight:'600'}">
             <template slot="empty">
               <img src="@/assets/icon/null.png" alt="" />
               <p style="margin-top: -7px">暂无数据</p>
@@ -57,10 +56,9 @@
             <el-table-column prop="date" label="序号" width="50" align="center">
               <template slot-scope="scope">{{scope.$index+1}}</template>
             </el-table-column>
-            <el-table-column v-for="(item,index) in targetData" :key="index" :prop="item.targetCode+'s'" :label="item.targetName"
-                             width="100" align="center">
-            </el-table-column>
             <el-table-column prop="collectionDates" label="采集时间" width="200" align="center"></el-table-column>
+            <el-table-column v-for="(item,index) in targetData" :key="index" :prop="item.targetCode+'s'" :label="item.targetName" width="100" align="center">
+            </el-table-column>
           </el-table>
         </el-tab-pane>
       </el-tabs>
@@ -71,9 +69,9 @@
 <script>
 import { getHistoryCurve, getSites } from '@/views/spectrum/dynamicMonitor/api/api'
 
-import * as echarts from 'echarts';
+import * as echarts from 'echarts'
 export default {
-  name: "historyCurve",
+  name: 'historyCurve',
   data() {
     return {
       pickerOptions: {
@@ -81,35 +79,39 @@ export default {
           {
             text: '今天',
             onClick(picker) {
-              const start = new Date();
-              const end = new Date();
-              picker.$emit('pick', [start, end]);
+              const start = new Date()
+              const end = new Date()
+              picker.$emit('pick', [start, end])
             }
-          }, {
+          },
+          {
             text: '最近一周',
             onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', [start, end]);
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+              picker.$emit('pick', [start, end])
             }
-          }, {
+          },
+          {
             text: '最近一个月',
             onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-              picker.$emit('pick', [start, end]);
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+              picker.$emit('pick', [start, end])
             }
-          }, {
+          },
+          {
             text: '最近一年',
             onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
-              picker.$emit('pick', [start, end]);
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
+              picker.$emit('pick', [start, end])
             }
-          }]
+          }
+        ]
       },
       areaColor: [
         ['rgba(126, 215, 243)', 'rgba(250, 253, 254)'],
@@ -124,27 +126,21 @@ export default {
       dialogVisible: false,
       siteOption: [],
       form: {
-        date: [
-          this.$moment().format('YYYY-MM-DD 00:00:00'),
-          this.$moment().format('YYYY-MM-DD 23:59:59')
-        ]
+        date: [this.$moment().format('YYYY-MM-DD 00:00:00'), this.$moment().format('YYYY-MM-DD 23:59:59')]
       },
       radio: 1,
       activeName: 'first',
       targetData: [], // 图表类型
-      tableData: [], // 列表数据
+      tableData: [] // 列表数据
     }
   },
-  mounted() {
-
-  },
+  mounted() {},
   watch: {
     radio(val, oldVal) {
       if (val == 3) this.form['date'] = this.getSevenDate()
-      else this.form['date'] = [
-        this.$moment().format('YYYY-MM-DD 00:00:00'),
-        this.$moment().format('YYYY-MM-DD 23:59:59')
-      ]
+      else
+        this.form['date'] = [this.$moment().format('YYYY-MM-DD 00:00:00'), this.$moment().format('YYYY-MM-DD 23:59:59')]
+      this.query()
     }
   },
   methods: {
@@ -157,7 +153,7 @@ export default {
      * 获取站点
      */
     getSites(siteId) {
-      getSites({ projectId: this.$store.state.project.project.id, size: 1000 }).then(res => {
+      getSites({ projectId: this.$store.state.project.project.id, size: 1000 }).then((res) => {
         if (res.code && res.code == 1) {
           this.siteOption = res.result.records
           this.$set(this.form, 'siteId', siteId)
@@ -177,19 +173,20 @@ export default {
       // //   params['beginTime'] = this.$moment(this.form.date[0]).format('YYYY-MM-DD 00:00:00')
       // //   params['endTime'] = this.$moment(this.form.date[1]).format('YYYY-MM-DD 23:59:59')
       // // }
-      getHistoryCurve(params).then(res => {
+      getHistoryCurve(params).then((res) => {
         if (res.code && res.code == 1) {
           if (!res.result || !res.result.list || res.result.list instanceof Array == false) return
-          const result = res.result.list[0];
-          let target = result.targetVos; // 要展示曲线的指标
-          let collectionDates = result.collectionDates.map(item => {
-            if (this.radio == 3) return this.$moment(item).format("MM-DD")
-            else return this.$moment(item).format("DD HH")
-          }); // 选择日期
-          this.targetData = target;
+          const result = res.result.list[0]
+          let target = result.targetVos // 要展示曲线的指标
+          // let collectionDates = result.collectionDates.map((item) => {
+          //   if (this.radio == 3) return this.$moment(item).format('MM-DD')
+          //   else return this.$moment(item).format('DD HH')
+          // }) // 选择日期
+          let collectionDates = result.collectionDates
+          this.targetData = target
           for (let index = 0; index < target.length; index++) {
-            const item = target[index];
-            const yData = result[item.targetCode + "s"]
+            const item = target[index]
+            const yData = result[item.targetCode + 's']
             this.$nextTick(() => {
               this.loadChart(index, collectionDates, yData, this.areaColor[index])
             })
@@ -213,8 +210,8 @@ export default {
      * 加载图表
      */
     loadChart(domIndex, xData, yData, areaColor) {
-      let chartDom = document.getElementById('curve-chart' + domIndex);
-      let myChart = echarts.init(chartDom);
+      let chartDom = document.getElementById('curve-chart' + domIndex)
+      let myChart = echarts.init(chartDom)
       let option = {
         tooltip: {
           trigger: 'axis',
@@ -232,13 +229,16 @@ export default {
           bottom: '2%',
           containLabel: true
         },
-        xAxis: [
-          {
-            type: 'category',
-            boundaryGap: false,
-            data: xData
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: xData,
+          axisLabel: {
+            formatter: (dateTime) => {
+              return this.$moment(dateTime).format('DD日HH时')
+            }
           }
-        ],
+        },
         yAxis: [
           {
             type: 'value'
@@ -276,38 +276,35 @@ export default {
             data: yData
           }
         ]
-      };
+      }
       myChart.clear()
-      option && myChart.setOption(option);
+      option && myChart.setOption(option)
     },
     /**
      * 加载列表
      */
     loadTable(data) {
-      let arr = [];
+      let arr = []
       data.collectionDates.forEach((item, index) => {
-        arr.push({ serialnum: (index + 1) });
+        arr.push({ serialnum: index + 1 })
         data.targetVos.forEach((item1, index1) => {
-          let columnName = item1.targetCode + "s";
-          let columnVal = data[columnName];
+          let columnName = item1.targetCode + 's'
+          let columnVal = data[columnName]
           arr[index][columnName] = columnVal[index] ? columnVal[index] : '/'
-        });
-        arr[index]["collectionDates"] = item;
-      });
+        })
+        arr[index]['collectionDates'] = item
+      })
       this.tableData = arr
     },
     /**
      * 获取近7天时间区间
      */
     getSevenDate() {
-      const end = new Date();
-      const start = new Date();
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-      return [
-        this.$moment(start).format('YYYY-MM-DD 00:00:00'),
-        this.$moment(end).format('YYYY-MM-DD 23:59:59')
-      ]
-    },
+      const end = new Date()
+      const start = new Date()
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+      return [this.$moment(start).format('YYYY-MM-DD 00:00:00'), this.$moment(end).format('YYYY-MM-DD 23:59:59')]
+    }
   }
 }
 </script>
@@ -336,21 +333,29 @@ export default {
         padding: 0;
       }
     }
-    >>> .el-date-editor {
-      .el-input__icon {
-        display: none;
-      }
-      .el-range-input {
-        width: 50%;
-      }
-    }
+    // >>> .el-date-editor {
+    //   .el-input__icon {
+    //     display: none;
+    //   }
+    //   .el-range-input {
+    //     width: 50%;
+    //   }
+    // }
   }
-  .el-radio {
-    margin-right: 4px;
-    >>> .el-radio__label {
-      padding-left: 2px !important;
+  .time-select {
+    position: absolute;
+    right: 15px;
+    top: 20p;
+    margin-top: 15px;
+    z-index: 99;
+    .el-radio {
+      margin-right: 4px;
+      >>> .el-radio__label {
+        padding-left: 2px !important;
+      }
     }
   }
+
   .el-tabs {
     >>> .el-tabs__content {
       height: calc(100% - 55px);

src/views/spectrum/common/mapPopup/style.scss

@@ -28,8 +28,10 @@
 
     .popup-close {
       position: absolute;
-      top: 8px;
+      // top: 8px;
+      top: 50%;
       right: 8px;
+      transform: translateY(-50%);
       font-size: 14px;
       color: #BFBFBF;
       font-weight: 600;
@@ -43,8 +45,10 @@
     .curve-link {
       font-size: 14px;
       position: absolute;
-      bottom: 8px;
+      // bottom: 8px;
+      top: 50%;
       right: 35px;
+      transform: translateY(-50%);
       color: #006ED4;
       cursor: pointer;
 

src/views/spectrum/dynamicMonitor/realTimeMonitor/widget.vue

@@ -29,7 +29,7 @@
     </div>
     <!-- 表格 -->
     <div class="content-body">
-      <tf-table :data="tableData" stripe height="100%" :header-cell-style="{ background: '#eaf1fd', color: 'rgb(50,59,65)', height: '39px', textAlign: 'center' }">
+      <el-table :data="tableData" stripe height="100%" :header-cell-style="{ background: '#eaf1fd', color: 'rgb(50,59,65)', height: '40px', textAlign: 'center' }">
         <template slot="empty">
           <img src="@/assets/icon/null.png" alt="" />
         </template>
@@ -38,7 +38,7 @@
         </el-table-column>
         <el-table-column label="操作" align="center">
           <template slot-scope="{ row }">
-            <el-button type="text" @click="openCurve(row)">监测曲线</el-button>
+            <el-button type="text" @click="openCurve(row)" style="padding:0">监测曲线</el-button>
           </template>
         </el-table-column>
         <el-table-column prop="partitionName" label="排水分区" show-overflow-tooltip width="150" align="center"></el-table-column>
@@ -82,11 +82,11 @@
         <el-table-column prop="liquid" label="液位" show-overflow-tooltip width="150" align="center">
           <template slot-scope="{ row }">{{ row.liquid ? row.liquid : '/' }}</template>
         </el-table-column>
-      </tf-table>
+      </el-table>
     </div>
     <!-- 分页 -->
     <div class="content-footer">
-      <span style="margin-left: 10px; color: #323b41; font-size: 14px">共 {{ tableData.length }} 条</span>
+      <span style="margin-left: 20px; color: #323b41; font-size: 14px">共 {{ tableData.length }} 条</span>
     </div>
     <historyCurve ref="historyCurve"></historyCurve>
   </div>
@@ -174,27 +174,27 @@ export default {
   height: 100%;
   .content-top {
     width: 100%;
-    height: 60px;
-    padding: 10px 0;
+    padding: 20px 20px;
     .el-form {
       >>> .el-form-item {
         margin-bottom: 0 !important;
-        vertical-align: sub !important;
       }
     }
   }
   .content-body {
     width: 100%;
-    height: calc(100% - 100px);
+    height: calc(100% - 112px);
     box-sizing: border-box;
-    padding-bottom: 5px;
+    padding: 0 20px;
+    // padding-bottom: 5px;
     .el-table {
       >>> th > .cell {
         white-space: pre-line;
       }
       >>> .el-table__body {
         td.el-table__cell {
-          height: 48px;
+          padding: 0 !important;
+          height: 34px;
         }
       }
     }

src/views/spectrum/dynamicMonitor/waterQualityLedger/widget.vue

@@ -30,7 +30,7 @@
     <!-- 表格 -->
     <div class="content-body">
       <el-table :data="tableData" stripe height="100%" ref="dTable" @row-dbclick="rowDbclick"
-                :header-cell-style="{background:'#eaf1fd',color:'rgb(50,59,65)',height:'39px',textAlign:'center'}">
+                :header-cell-style="{background:'#eaf1fd',color:'rgb(50,59,65)',height:'40px',textAlign:'center'}">
         <template slot="empty">
           <img src="@/assets/icon/null.png" alt="" />
           <p style="margin-top: -7px">暂无数据</p>
@@ -254,19 +254,18 @@ export default {
   height: 100%;
   .content-top {
     width: 100%;
-    height: 60px;
-    padding: 10px 0;
+    padding: 20px 20px;
     .el-form {
       >>> .el-form-item {
         margin-bottom: 0 !important;
-        vertical-align: sub !important;
       }
     }
   }
   .content-body {
     width: 100%;
-    height: calc(100% - 100px);
+    height: calc(100% - 112px);
     box-sizing: border-box;
+    padding: 0 20px;
     padding-bottom: 5px;
     .el-table {
       >>> th > .cell {
@@ -274,7 +273,8 @@ export default {
       }
       >>> .el-table__body {
         td.el-table__cell {
-          height: 48px;
+          padding: 0 !important;
+          height: 34px;
         }
       }
     }
@@ -283,6 +283,7 @@ export default {
     width: 100%;
     height: 35px;
     line-height: 35px;
+    padding: 0 20px;
   }
 }
 </style>

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

@@ -66,11 +66,72 @@
     .middle-box {
       clear: both;
       width: 100%;
-      height: 260px;
+      // height: 260px;
       padding-top: 10px;
     }
     .bottom-box {
       height: calc(100% - 529px);
+      .zb-item {
+        padding: 30px 0;
+        overflow: hidden;
+        border-bottom: 1px solid #ccc;
+        .zb-item-left {
+          float: left;
+          width: 90px;
+          height: 75px;
+          background-color: #e6eefc;
+          > div {
+            width: 100%;
+            height: 50%;
+            text-align: center;
+            &:first-child {
+              line-height: 280%;
+              font-weight: 600;
+              color: #2d74e7;
+            }
+            &:last-child {
+              line-height: 150%;
+              font-size: 14px;
+              color: #333333;
+            }
+          }
+        }
+        .zb-item-right {
+          float: left;
+          margin-left: 20px;
+          width: calc(100% - 110px);
+          .progress-info {
+            width: 100%;
+            overflow: hidden;
+            .progress-div {
+              float: left;
+              width: calc(100% - 240px);
+              margin-bottom: 15px;
+              .el-progress {
+                >>> .el-progress-bar__outer {
+                  border-radius: 0;
+                  background-color: transparent;
+                  .el-progress-bar__inner {
+                    border-radius: 0;
+                  }
+                }
+              }
+            }
+            &:last-child {
+              .progress-div {
+                margin-bottom: 0px;
+              }
+            }
+            .zb-des {
+              float: left;
+              width: 240px;
+              font-size: 14px;
+              text-align: right;
+              color: #333333;
+            }
+          }
+        }
+      }
     }
   }
 }

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

@@ -4,9 +4,7 @@
       <mini-map layerControl projectList partsCheck>
         <template slot="topBar">
           <div @click="viewCurve()">监测查看</div>
-          <div>
-            <thematic-map></thematic-map>
-          </div>
+          <thematic-map></thematic-map>
         </template>
       </mini-map>
       <transition name="el-zoom-in-bottom">
@@ -36,7 +34,7 @@
       <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">
+      color: '#333333', height: '40px', textAlign: 'center' }" max-height="200px">
           <template slot="empty">
             <img src="@/assets/icon/null.png" alt="暂无数据" style="width:100px" />
           </template>
@@ -55,7 +53,7 @@
             </template>
           </el-table-column>
           <el-table-column prop="name7" label="结论" align="center">
-            <template slot-scope="{row}"> 
+            <template slot-scope="{row}">
               <span :style="{color:row.name7=='达标'?'#36c46e':'#f33d48'}">{{row.name7}}</span>
             </template>
           </el-table-column>
@@ -63,9 +61,70 @@
       </div>
       <div class="bottom-box">
         <div class="zb-item">
-          <div class=""></div>
-          <div class=""></div>
-          <div class=""></div>
+          <div class="zb-item-left">
+            <div>30% ↑</div>
+            <div>COD</div>
+          </div>
+          <div class="zb-item-right">
+            <div class="progress-info">
+              <div class="progress-div">
+                <el-progress :percentage="95" color="#2d74e7" :show-text="false" :stroke-width="15"></el-progress>
+              </div>
+              <div class="zb-des">改造后：<span style="color:#2d74e7">112mg/L</span></div>
+            </div>
+            <div class="progress-info">
+              <div class="progress-div">
+                <el-progress :percentage="70" color="#0cc96e" :show-text="false" :stroke-width="15"></el-progress>
+              </div>
+              <div class="zb-des">预期目标：<span style="color:#0cc96e">100mg/L 达到预期</span></div>
+            </div>
+            <div class="progress-info">
+              <div class="progress-div">
+                <el-progress :percentage="50" color="#05cad7" :show-text="false" :stroke-width="15"></el-progress>
+              </div>
+              <div class="zb-des">改造前：<span style="color:#05cad7">68mg/L</span></div>
+            </div>
+          </div>
+        </div>
+        <div class="zb-item">
+          <div class="zb-item-left">
+            <div>20% ↓</div>
+            <div>电导率</div>
+          </div>
+          <div class="zb-item-right">
+            <div class="progress-info">
+              <div class="progress-div">
+                <el-progress :percentage="95" color="#2d74e7" :show-text="false" :stroke-width="15"></el-progress>
+              </div>
+              <div class="zb-des">改造后：<span style="color:#2d74e7">112mg/L</span></div>
+            </div>
+            <div class="progress-info">
+              <div class="progress-div">
+                <el-progress :percentage="50" color="#05cad7" :show-text="false" :stroke-width="15"></el-progress>
+              </div>
+              <div class="zb-des">改造前：<span style="color:#05cad7">68mg/L</span></div>
+            </div>
+          </div>
+        </div>
+        <div class="zb-item">
+          <div class="zb-item-left">
+            <div>30% ↑</div>
+            <div>溶解氧</div>
+          </div>
+          <div class="zb-item-right">
+            <div class="progress-info">
+              <div class="progress-div">
+                <el-progress :percentage="95" color="#2d74e7" :show-text="false" :stroke-width="15"></el-progress>
+              </div>
+              <div class="zb-des">改造后：<span style="color:#2d74e7">112mg/L</span></div>
+            </div>
+            <div class="progress-info">
+              <div class="progress-div">
+                <el-progress :percentage="50" color="#05cad7" :show-text="false" :stroke-width="15"></el-progress>
+              </div>
+              <div class="zb-des">改造前：<span style="color:#05cad7">68mg/L</span></div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

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

@@ -3,7 +3,7 @@
     <!-- 头部 -->
     <div class="content-top">
       <el-form ref="form" :model="form" :inline="true" label-width="auto" size="small">
-        <el-form-item label="排水分区名称：">
+        <el-form-item label="排水分区名称">
           <el-input v-model="form.name" placeholder="输入排水分区名称" clearable></el-input>
         </el-form-item>
 
@@ -16,14 +16,7 @@
     </div>
     <!-- 表格 -->
     <div class="content-body">
-      <el-table
-        :data="tableData"
-        stripe
-        height="100%"
-        ref="dTable"
-        @row-dbclick="rowDbclick"
-        :header-cell-style="{background:'#eaf1fd',color:'rgb(50,59,65)',height:'39px',textAlign:'center'}"
-      >
+      <el-table :data="tableData" stripe height="100%" ref="dTable" @row-dbclick="rowDbclick" :header-cell-style="{background:'#eaf1fd',color:'rgb(50,59,65)',height:'39px',textAlign:'center'}">
         <template slot="empty">
           <img src="@/assets/icon/null.png" alt />
         </template>
@@ -47,34 +40,14 @@
     </div>
     <!-- 分页 -->
     <div class="content-footer">
-      <el-pagination
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="pagination.current"
-        :page-sizes="[10, 25, 50, 100]"
-        :page-size="pagination.size"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="pagination.total"
-      ></el-pagination>
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.current" :page-sizes="[10, 25, 50, 100]" :page-size="pagination.size" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
     </div>
-    <el-dialog
-      v-dialogDrag
-      :title="opType==1?'新增排水分区':'修改排水分区'"
-      :visible.sync="dialogVisible"
-      :modal="false"
-      :append-to-body="true"
-      width="430px"
-      @close="closeDialog"
-    >
+    <el-dialog v-dialogDrag :title="opType==1?'新增排水分区':'修改排水分区'" :visible.sync="dialogVisible" :modal="false" :append-to-body="true" width="430px" @close="closeDialog">
       <el-form :model="form" :inline="true" label-width="auto" size="small" ref="addForm">
-        <el-form-item
-          label="分区名称："
-          prop="partitionName"
-          :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]"
-        >
+        <el-form-item label="分区名称" prop="partitionName" :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]">
           <el-input v-model="form.partitionName" style="width:265px" placeholder="分区名称"></el-input>
         </el-form-item>
-        <el-form-item label="分区面积：">
+        <el-form-item label="分区面积">
           <el-input v-model="form.partitionArea" style="width:150px" placeholder="分区面积" readonly>
             <span slot="suffix">km²</span>
           </el-input>
@@ -83,10 +56,10 @@
             <el-button type="primary" @click="clearDraw()">清除</el-button>
           </el-button-group>
         </el-form-item>
-        <el-form-item label="备注：">
+        <el-form-item label="备注">
           <el-input v-model="form.remarks" style="width:265px"></el-input>
         </el-form-item>
-        <el-form-item label="关联监测站点：">
+        <el-form-item label="关联监测站点">
           <el-select v-model="form.siteIds" placeholder="选择站点" style="width:265px">
             <el-option v-for="item in []" :key="item.value" :label="item.label" :value="item.value"></el-option>
           </el-select>
@@ -508,7 +481,7 @@ export default {
   .content-top {
     width: 100%;
     height: 60px;
-    padding: 10px 0;
+    padding: 10px 20px;
     .el-form {
       >>> .el-form-item {
         margin-bottom: 0 !important;
@@ -518,8 +491,9 @@ export default {
   }
   .content-body {
     width: 100%;
-    height: calc(100% - 100px);
+    height: calc(100% - 120px);
     box-sizing: border-box;
+    padding: 0 20px;
     padding-bottom: 5px;
     .el-table {
       >>> th > .cell {
@@ -527,15 +501,17 @@ export default {
       }
       >>> .el-table__body {
         td.el-table__cell {
-          height: 48px;
+          padding: 0 !important;
+          height: 34px;
         }
       }
     }
   }
   .content-footer {
     width: 100%;
-    height: 35px;
+    height: 55px;
     line-height: 35px;
+    padding: 10px 20px;
   }
 }
 .el-dialog__wrapper {

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

@@ -0,0 +1,143 @@
+<template>
+  <div class="content">
+    <!-- 头部 -->
+    <div class="content-top">
+      <el-form ref="form" :model="form" :inline="true" label-width="auto" size="small">
+        <el-form-item label="关键字">
+          <el-input v-model="form.name" placeholder="支持搜索管段编号" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="缺陷类型">
+          <el-select v-model="model" placeholder="请选择" style="width:150px">
+            <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="model" placeholder="请选择" style="width:150px">
+            <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="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-checkbox v-model="form.checked1">雨水</el-checkbox>
+          <el-checkbox v-model="form.checked2">污水</el-checkbox>
+        </el-form-item>
+        <el-form-item label="管道级别" style="margin-left:30px;">
+          <el-checkbox v-model="form.checked3">主管道</el-checkbox>
+          <el-checkbox v-model="form.checked4">支管</el-checkbox>
+          <el-checkbox v-model="form.checked5">小区管网</el-checkbox>
+        </el-form-item>
+        <el-form-item label-width="0" style="margin:0;float:right;">
+          <el-button type="primary">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- 表格 -->
+    <div class="content-body">
+      <el-table :data="tableData" stripe height="100%" ref="dTable" @row-dbclick="rowDbclick" :header-cell-style="{background:'#eaf1fd',color:'rgb(50,59,65)',height:'39px',textAlign:'center'}">
+        <template slot="empty">
+          <img src="@/assets/icon/null.png" alt />
+        </template>
+        <el-table-column prop="date" label="序号" align="center">
+          <template slot-scope="scope">{{scope.$index+1}}</template>
+        </el-table-column>
+        <el-table-column prop="name" label="管道编号" align="center"></el-table-column>
+        <el-table-column prop="name" label="所在道路" align="center"></el-table-column>
+        <el-table-column prop="name" label="排水类型" align="center"></el-table-column>
+        <el-table-column prop="name" label="管道级别" align="center"></el-table-column>
+        <el-table-column prop="name" label="管径（mm）" align="center"></el-table-column>
+        <el-table-column prop="name" label="材质" align="center"></el-table-column>
+        <el-table-column prop="name" label="长度（m）" align="center"></el-table-column>
+        <el-table-column prop="name" label="健康等级" align="center"></el-table-column>
+        <el-table-column prop="name" label="管网破损" align="center"></el-table-column>
+        <el-table-column prop="name" label="地下水入侵" align="center"></el-table-column>
+        <el-table-column prop="name" label="污水直排" align="center"></el-table-column>
+        <el-table-column prop="name" label="雨污混接" align="center"></el-table-column>
+      </el-table>
+    </div>
+    <!-- 分页 -->
+    <div class="content-footer">
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.current" :page-sizes="[10, 25, 50, 100]" :page-size="pagination.size" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {},
+      tableData: [],
+      pagination: { current: 1, size: 100, total: 0 },
+      dialogVisible: false,
+      handler: null,
+      polygonDraw: null,
+      opType: 1
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  .content-top {
+    width: 100%;
+    // height: 60px;
+    padding: 20px 20px;
+    .el-form {
+      >>> .el-form-item {
+        margin-bottom: 0 !important;
+      }
+    }
+  }
+  .content-body {
+    width: 100%;
+    height: calc(100% - 132px);
+    box-sizing: border-box;
+    padding: 0 20px;
+    padding-bottom: 5px;
+    .el-table {
+      >>> th > .cell {
+        white-space: pre-line;
+      }
+      >>> .el-table__body {
+        td.el-table__cell {
+          padding: 0 !important;
+          height: 34px;
+        }
+      }
+    }
+  }
+  .content-footer {
+    width: 100%;
+    height: 55px;
+    line-height: 35px;
+    padding: 10px 20px;
+  }
+}
+.el-dialog__wrapper {
+  pointer-events: none;
+  overflow: hidden;
+  >>> .el-dialog {
+    // 弹窗层元素不可穿透点击事件（不影响弹窗层元素的点击事件）
+    pointer-events: auto;
+    .el-dialog__header {
+      background-color: #13479e;
+      .el-dialog__title {
+        color: #ffffff;
+      }
+      .el-dialog__close {
+        color: #ffffff !important;
+      }
+    }
+  }
+}
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="monitor-panel" v-show="visible">
+  <div class="monitor-panel">
     <div class="top-div head-title">
       <span>监测查看</span>
       <span class="closer el-icon-close" @click="handClose"></span>
@@ -42,11 +42,7 @@ export default {
     }
   },
   mounted() {},
-  watch: {
-    visible(val) {
-
-    }
-  },
+  watch: {},
   methods: {
     query() {
       this.open()

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

@@ -4,9 +4,7 @@
       <mini-map layerControl projectList partsCheck>
         <template slot="topBar">
           <div @click="viewCurve()">监测查看</div>
-          <div>
-            <thematic-map></thematic-map>
-          </div>
+          <thematic-map></thematic-map>
         </template>
       </mini-map>
       <transition name="el-zoom-in-bottom">
@@ -18,11 +16,11 @@
       <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 class="chart" ref="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">
+          <div class="chart" ref="chart2">
             <img src="@/assets/icon/null.png" alt="暂无数据" style="width:100px;" />
           </div>
         </div>
@@ -172,7 +170,8 @@ export default {
   },
   methods: {
     loadChart() {
-      let chartDom = document.getElementById('chart1')
+      // let chartDom = document.getElementById('chart1')
+      let chartDom = this.$refs.chart1
       let myChart = echarts.init(chartDom)
       let option = {
         tooltip: {

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

@@ -4,9 +4,7 @@
       <mini-map layerControl projectList partsCheck>
         <template slot="topBar">
           <div @click="viewCurve()">监测查看</div>
-          <div>
-            <thematic-map></thematic-map>
-          </div>
+          <thematic-map></thematic-map>
         </template>
       </mini-map>
       <transition name="el-zoom-in-bottom">
@@ -22,7 +20,7 @@
             <p style="margin:10px 0;color:#3f3f3f">雨水管网共布设4个监测点位，其中2个监测点位发现污水直排隐患</p>
           </div>
         </div>
-        <div class="chart-box" style="padding-left:20px" id="chart1"></div>
+        <div class="chart-box" style="padding-left:20px" ref="chart1"></div>
       </div>
       <div class="middle-box">
         <div class="head-title">
@@ -153,7 +151,8 @@ export default {
   },
   methods: {
     loadChart() {
-      let chartDom = document.getElementById('chart1')
+      // let chartDom = document.getElementById('chart1')
+      let chartDom = this.$refs.chart1
       let myChart = echarts.init(chartDom)
       let option = {
         tooltip: {

src/views/spectrum/statisticalAnalysis/wqMultipleSites/widget.vue

@@ -13,8 +13,8 @@
           <el-date-picker v-model="form.date" type="daterange" align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" value-format="yyyy/MM/dd" format="yyyy/MM/dd" style="width:100%" clearable></el-date-picker>
         </el-form-item>
         <div class="head-title">监测站点设置</div>
-        <el-form-item label="检测站点：" label-width="90px">
-          <el-select placeholder="选择检测站点" v-model="form.targetSite" @change="targetSiteChange" style="width:100%">
+        <el-form-item label="监测站点：" label-width="90px">
+          <el-select placeholder="选择监测站点" v-model="form.targetSite" @change="targetSiteChange" style="width:100%">
             <el-option v-for="(item,index) in siteOption" :key="index" :label="item.siteName" :value="item.id"></el-option>
           </el-select>
         </el-form-item>

src/views/spectrum/statisticalAnalysis/wqSingleSite/widget.vue

@@ -4,19 +4,8 @@
       <div class="head-title">站点设置</div>
       <el-form ref="form" :model="form" label-width="auto" size="small">
         <el-form-item label="监测站点:">
-          <el-select
-            v-model="form.siteId"
-            filterable
-            placeholder="选择站点"
-            style="width:100%"
-            @change="selectSite"
-          >
-            <el-option
-              v-for="(item,index) in siteOption"
-              :key="index"
-              :label="item.siteName"
-              :value="item.id"
-            ></el-option>
+          <el-select v-model="form.siteId" filterable placeholder="选择站点" style="width:100%" @change="selectSite">
+            <el-option v-for="(item,index) in siteOption" :key="index" :label="item.siteName" :value="item.id"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="时间设置:" style="line-height:78px;">
@@ -51,11 +40,15 @@
       <div class="head-title" style="height:32px;line-height:32px;">
         <span>对比结果</span>
         <div style="float:right;font-weight:500">
-          <span>统计方式:</span>
+          <el-radio-group v-model="granularity">
+            <el-radio :label="2">按小时统计</el-radio>
+            <el-radio :label="1">按日统计</el-radio>
+          </el-radio-group>
+          <!-- <span>统计方式:</span>
           <el-select v-model="granularity" size="small" style="width:120px">
             <el-option label="按小时统计" :value="2"></el-option>
             <el-option label="按日统计" :value="1"></el-option>
-          </el-select>
+          </el-select> -->
         </div>
       </div>
       <!-- 结果 -->
@@ -69,19 +62,7 @@
     <el-dialog title="选择统计时间区段" :visible.sync="dialogVisible" width="500px">
       <el-form :inline="true" label-width="80px" size="small">
         <el-form-item label="日期范围">
-          <el-date-picker
-            v-model="date"
-            type="daterange"
-            align="right"
-            unlink-panels
-            range-separator="-"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            :picker-options="pickerOptions"
-            value-format="yyyy/MM/dd"
-            format="yyyy/MM/dd"
-            :clearable="false"
-          ></el-date-picker>
+          <el-date-picker v-model="date" type="daterange" align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" value-format="yyyy/MM/dd" format="yyyy/MM/dd" :clearable="false"></el-date-picker>
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">

src/views/widgets/miniMap/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="miniMap-container" class="miniMap_container">
+  <div ref="miniMap_container" class="miniMap_container">
     <div class="top-bar">
       <div v-show="layerControl">图层控制</div>
       <div v-show="projectList">工程列表</div>
@@ -43,6 +43,15 @@ export default {
       return this.$store.getters.AppX
     }
   },
+  mounted() {
+    this.$nextTick(() => {
+      // this.initData().then((result) => {
+      //   console.log('--->>','666');
+      //   this.addToMap()
+      // })
+      this.addToMap()
+    })
+  },
   methods: {
     initData() {
       return this.$store.dispatch('cesiumMap/initGISResource')
@@ -51,13 +60,14 @@ export default {
      * 加载地图
      */
     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 =
+      let configItem = this.AppX.appConfig.gisResource[this.baseTerrain]
+      let url = configItem.config[this.terrain].url
+      let layerTitle = configItem.config[this.terrain].name
+      // let 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', {
+      // let layerTitle = "dixing";
+      let viewerDiv = this.$refs.miniMap_container
+      this._viewer = new Cesium.Viewer(viewerDiv, {
         terrainProvider: new Cesium.CesiumTerrainProvider({
           url: url,
           requestWaterMask: true,
@@ -83,6 +93,7 @@ export default {
         infoBox: false,
         selectionIndicator: false //设置绿色框框不可见
       })
+      console.log('viewer--->>>', this._viewer)
       this._viewer._cesiumWidget._creditContainer.style.display = 'none' //去掉logo
       this.isInit = true
 
@@ -190,26 +201,26 @@ export default {
      * 加载初始化场景
      */
     addInitScene() {
-      var scenes = this.AppX.appConfig.gisResource[this.baseScene]
+      let 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, {
+            let 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]
+                for (let i = 0; i < layers.length; i++) {
+                  let ly = layers[i]
                   ly.selectEnabled = false
                   ly.clearMemoryImmediately = false
                   ly.cullEnabled = false
                   //ly.lodRangeScale=0.01
-                  var model = BaseConfig.layers[ly.name]
+                  let model = BaseConfig.layers[ly.name]
                   if (BaseConfig.sjpipeLayers.indexOf(ly.name) > -1) {
                     let style3d = new Cesium.Style3D()
                     style3d.altitudeMode = 0
@@ -356,11 +367,6 @@ export default {
       imagelayers.addImageryProvider(poilayer, 2)
     },
     handelClose() {}
-  },
-  mounted() {
-    this.initData().then((result) => {
-      this.addToMap()
-    })
   }
 }
 </script>
@@ -408,9 +414,9 @@ export default {
       &:hover {
         color: #409eff;
       }
-      &:nth-child(n+2){
-        &::before{
-          content: "";
+      &:nth-child(n + 2) {
+        &::before {
+          content: '';
           display: block;
           width: 1px;
           height: 20px;