数据关联分析

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

@@ -0,0 +1,46 @@
+<template>
+  <div id="map"></div>
+</template>
+
+<script>
+import 'ol/ol.css'
+import { Map, View } from 'ol'
+import TileLayer from 'ol/layer/Tile'
+import OSM from 'ol/source/OSM'
+export default {
+  data() {
+    return {
+      map: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initMap()
+    })
+  },
+  methods: {
+    initMap() {
+      this.map = new Map({
+        target: 'map',
+        layers: [
+          new TileLayer({
+            source: new OSM()
+          })
+        ],
+        view: new View({
+          projection: 'EPSG:4326',
+          center: [113.132855, 29.37029],
+          zoom: 11
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#map {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/spectrum/reform/connectivity/css.scss

@@ -18,6 +18,13 @@
       vertical-align: bottom;
       margin-right: 5px;
     }
+
+    .link-btn {
+      float: right;
+      color: #2d74e7;
+      font-size: 12px;
+      cursor: pointer;
+    }
   }
 
   .params-panel {

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

@@ -47,11 +47,14 @@
       <div class="chart-box" id="facilityChart">
 
       </div>
-      <div class="head-title">监测设备</div>
+      <div class="head-title">
+        <span>监测设备</span>
+        <span type="text" class="link-btn" @click="monitorView()">监测查看</span>
+      </div>
       <el-table :data="tableData" style="width: 100%" :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"/>
+          <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>
@@ -178,6 +181,19 @@ export default {
         ]
       }
       option && myChart.setOption(option)
+    },
+    /**
+     * 监测查看
+     */
+    monitorView() {
+      const data = {
+        pathId: '/spectrum/reform/monitorView',
+        widgetid: 'FullPanel',
+        label: '监测查看',
+        param: {}
+      }
+      this.$store.dispatch('map/handelClose', data)
+      this.$store.dispatch('map/changeMethod', data)
     }
   }
 }

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

@@ -0,0 +1,264 @@
+<template>
+  <div class="page-panel">
+    <div class="left-panel">
+      <div class="head-title">查看设置</div>
+      <el-form ref="form" :model="form" size="small" label-width="auto">
+        <el-form-item label="监测站点">
+          <el-select v-model="form.site" placeholder="选择监测站点" filterable clearable style="width:calc(100% - 85px)">
+            <el-option v-for="(item,index) in []" :key="index" :label="item.label" :value="item.value"></el-option>
+          </el-select>
+          <el-button type="warning">图上选点</el-button>
+        </el-form-item>
+        <el-form-item label="指标参数">
+          <el-input v-model="form.param" placeholder="输入指标参数" style="width:100%"></el-input>
+        </el-form-item>
+        <el-form-item label="采集时间">
+          <el-date-picker v-model="form.date" align="right" type="date" placeholder="选择日期" value-format="yyyy/MM/dd" :picker-options="pickerOptions" style="width:100%"></el-date-picker>
+        </el-form-item>
+        <el-form-item label="统计方式">
+          <el-radio-group v-model="form.radio">
+            <el-radio :label="3">实时监测</el-radio>
+            <el-radio :label="6">按每15分钟均值</el-radio>
+            <el-radio :label="9">按每小时均值</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="统计图剔除">
+          <el-button type="warning" icon="el-icon-plus" class="add-btn"></el-button>
+          <div class="reject-list">
+            <div v-for="(item,index) in [{checked:true,value:''},{checked:true,value:''}]" :key="index" class="reject-item">
+              <el-checkbox v-model="item.checked"></el-checkbox>
+              <el-input v-model="item.value" style="width:60px"></el-input>
+              <span>~</span>
+              <el-input v-model="item.value" style="width:60px"></el-input>
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item label-width="0">
+          <el-button type="primary" style="width:100%">查询</el-button>
+        </el-form-item>
+      </el-form>
+      <div class="head-title">
+        <span style="margin-right:10px">监测站点</span>
+        <el-checkbox v-model="form.checked1">显示首页监测站点</el-checkbox>
+        <el-checkbox v-model="form.checked2">显示选中监测站点</el-checkbox>
+      </div>
+      <div class="map-box">
+        <ol-map ref="map"></ol-map>
+      </div>
+    </div>
+    <div class="right-panel">
+      <div class="head-title">
+        <span style="margin-right:10px">监测曲线</span>
+        <el-checkbox v-model="form.checked1">按监测点融合展示</el-checkbox>
+        <el-checkbox v-model="form.checked2">按指标融合展示</el-checkbox>
+      </div>
+      <div class="right-chart-box" id="main-chart1"></div>
+      <div class="right-chart-box" id="main-chart2"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import olMap from '@/views/spectrum/common/olMap/index.vue'
+import * as echarts from 'echarts'
+export default {
+  components: {
+    olMap
+  },
+  data() {
+    return {
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() > Date.now()
+        },
+        shortcuts: [
+          {
+            text: '今天',
+            onClick(picker) {
+              picker.$emit('pick', new Date())
+            }
+          },
+          {
+            text: '昨天',
+            onClick(picker) {
+              const date = new Date()
+              date.setTime(date.getTime() - 3600 * 1000 * 24)
+              picker.$emit('pick', date)
+            }
+          },
+          {
+            text: '一周前',
+            onClick(picker) {
+              const date = new Date()
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
+              picker.$emit('pick', date)
+            }
+          }
+        ]
+      },
+      form: {}
+    }
+  },
+  mounted() {
+    this.loadChart('main-chart1', '化学需氧量（单位：mg/L）')
+    this.loadChart('main-chart2', '电导率（单位：ms/m）')
+  },
+  methods: {
+    loadChart(domId, text) {
+      var chartDom = document.getElementById(domId)
+      var myChart = echarts.init(chartDom)
+      var option = {
+        title: {
+          show: 'true',
+          text: text,
+          padding: [20, 20, 100, 30],
+          textStyle: {
+            color: '#3b82ea',
+            fontSize: 14
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: [
+          {
+            name: 'Email',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgba(115, 136, 244, 0.8)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(140, 76, 228, 0.9)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          }
+        ]
+      }
+      option && myChart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page-panel {
+  width: 100%;
+  height: 100%;
+  background-color: #eff0f5 !important;
+  box-sizing: border-box;
+  padding: 10px;
+  .head-title {
+    font-size: 16px;
+    // font-family: '宋体';
+    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;
+    }
+  }
+  .left-panel {
+    float: left;
+    width: 30%;
+    height: 100%;
+    background-color: #fff;
+    border-radius: 5px;
+    box-sizing: border-box;
+    padding: 0 20px;
+    padding-bottom: 20px;
+    padding-top: 10px;
+    overflow-y: auto;
+    .add-btn {
+      width: 20px;
+      height: 20px;
+      padding: 0;
+      vertical-align: top;
+      margin-top: 5px;
+    }
+    .reject-list {
+      display: inline-block;
+      width: calc(100% - 25px);
+      .reject-item {
+        display: inline-block;
+        margin-left: 15px;
+        margin-bottom: 5px;
+      }
+    }
+    .map-box {
+      width: 100%;
+      height: 440px;
+      border: 1px solid #ccc;
+      margin-top: 10px;
+    }
+  }
+  .right-panel {
+    float: left;
+    width: calc(70% - 20px);
+    margin-left: 20px;
+    height: 100%;
+    background-color: #fff;
+    border-radius: 5px;
+    box-sizing: border-box;
+    padding: 20px;
+    .right-chart-box {
+      width: 100%;
+      height: calc(50% - 25px);
+      //   background-color: rgb(158, 135, 135);
+      &:first-child {
+        margin-bottom: 5px;
+      }
+      &:last-child {
+        margin-top: 5px;
+      }
+    }
+  }
+}
+</style>

src/views/spectrum/reform/relevance/css.scss

@@ -0,0 +1,88 @@
+.page-panel {
+  overflow-y: auto;
+  overflow-x: hidden;
+  .head-title {
+    font-size: 16px;
+    // font-family: '宋体';
+    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;
+    }
+
+    .link-btn {
+      // float: right;
+      margin-left: 10px;
+      color: #2d74e7;
+      font-size: 12px;
+      cursor: pointer;
+      text-decoration:underline;
+    }
+  }
+
+  .params-panel {
+    .extent-item {
+      margin-bottom: 10px;
+      .el-radio {
+        margin-right: 10px !important;
+      }
+    }
+  }
+
+  .result-box {
+    .res-items {
+      font-size: 0;
+      margin: 20px 0;
+      .res-item {
+        position: relative;
+        display: inline-block;
+        width: calc(33% - 10px);
+        height: 52px;
+        border-radius: 2px;
+        font-size: 14px;
+        &:nth-child(1) {
+          background-color: #5790ec;
+          margin-right: 10px;
+        }
+        &:nth-child(2) {
+          background-color: #38c570;
+          margin: 0 5px;
+        }
+        &:nth-child(3) {
+          background-color: #ebb563;
+          margin-left: 10px;
+        }
+        > span {
+          display: block;
+          width: 100%;
+          color: #ffff;
+          text-align: center;
+          &:first-child {
+            height: 30px;
+            line-height: 30px;
+          }
+          &:last-child {
+            height: 22px;
+            line-height: 12px;
+            font-size: 12px;
+          }
+        }
+      }
+    }
+
+    .chart-box {
+      width: 100%;
+      height: 180px;
+      margin-bottom: 10px;
+    }
+  }
+}

src/views/spectrum/reform/relevance/defect/widget.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="page-panel">
+    <div class="p-top">
+      <el-form :model="form" :inline="true" label-width="auto" size="small">
+        <el-form-item label="关键字">
+          <el-input v-model="form.model" placeholder="请输入内容" style="width:200px"></el-input>
+        </el-form-item>
+        <el-form-item label-width="0">
+          <el-button type="primary" icon="el-icon-search">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="p-table">
+      <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: 'rgba(45, 116, 231,0.2)', 
+      color: '#333333', height: '40px', textAlign: 'center' }" height="100%">
+        <template slot="empty">
+          <img src="@/assets/icon/null.png" alt="暂无数据" />
+        </template>
+        <el-table-column align="center" type="selection"></el-table-column>
+        <el-table-column prop="address" label="数据源" align="center"></el-table-column>
+        <el-table-column prop="address" label="竣工时间" align="center"></el-table-column>
+        <el-table-column prop="address" label="工程名称" align="center"></el-table-column>
+        <el-table-column prop="address" label="管段编号" align="center"></el-table-column>
+        <el-table-column prop="address" label="管网类型" align="center"></el-table-column>
+        <el-table-column prop="address" label="所在道路" align="center"></el-table-column>
+        <el-table-column prop="address" label="管径" align="center"></el-table-column>
+        <el-table-column prop="address" label="管材" align="center"></el-table-column>
+        <el-table-column prop="address" label="缺陷类型" align="center"></el-table-column>
+        <el-table-column prop="address" label="缺陷等级" align="center"></el-table-column>
+        <el-table-column prop="address" label="检测时间" align="center"></el-table-column>
+      </el-table>
+    </div>
+    <div class="p-pagination">
+      <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>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {},
+      tableData: []
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page-panel {
+  box-sizing: border-box;
+  padding: 0 20px;
+  .p-top {
+    padding: 20px 0;
+    .el-form-item {
+      margin-bottom: 0;
+    }
+  }
+  .p-table{
+    height: calc(100% - 145px);
+  }
+  .p-pagination{
+    padding: 20px 0;
+  }
+}
+</style>

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

@@ -1,14 +1,275 @@
 <template>
-  <div class="widget">
-    数据关联性
+  <div class="page-panel">
+    <div class="params-panel">
+      <div class="head-title">显示设置</div>
+      <el-form ref="form" :model="form" label-width="auto" size="small">
+        <el-form-item label="分析范围" label-width="68px">
+          <el-radio-group v-model="form.radio">
+            <div class="extent-item" style="margin-bottom:15px;margin-top: 10px;">
+              <el-radio :label="1">地图范围</el-radio>
+            </div>
+            <div class="extent-item">
+              <el-radio :label="2">自定义范围</el-radio>
+              <el-button type="text" class="iconfont icontyhz1" title="圆"></el-button>
+              <el-button type="text" class="iconfont iconjx" title="矩形"></el-button>
+              <el-button type="text" class="iconfont icondbxhz" title="多边形"></el-button>
+            </div>
+            <div class="extent-item">
+              <el-radio :label="3">
+                <el-dropdown>
+                  <span class="el-dropdown-link">
+                    排水分区
+                    <i class="el-icon-arrow-down el-icon--right"></i>
+                  </span>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item command="a">排水分区</el-dropdown-item>
+                    <el-dropdown-item command="b">行政区</el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+              </el-radio>
+              <el-select v-model="model" placeholder="" style="width:125px">
+                <el-option v-for="item in []" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="监测站点">
+          <el-select v-model="form.siteId" filterable placeholder="选择站点" style="width:158px">
+            <el-option v-for="(item,index) in siteOption" :key="index" :label="item.siteName" :value="item.id"></el-option>
+          </el-select>
+          <el-button type="warning">图上选择</el-button>
+        </el-form-item>
+        <el-form-item label-width="0">
+          <el-button type="primary" style="width:100%">分析</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- 结果 -->
+    <div class="result-box">
+      <div class="head-title">分析结果概览</div>
+      <div class="res-items">
+        <div class="res-item">
+          <span>历史管网</span>
+          <span>10.89km|32个</span>
+        </div>
+        <div class="res-item">
+          <span>现状管网</span>
+          <span>13.24km|32个</span>
+        </div>
+        <div class="res-item">
+          <span>新建管网</span>
+          <span>1.29km|18个</span>
+        </div>
+      </div>
+      <el-table :data="tableData" style="width: 100%" :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" width="70">
+          <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="address" label="竣工时间" align="center"></el-table-column>
+      </el-table>
+      <div class="head-title">
+        <span>缺陷数量统计</span>
+        <span type="text" class="link-btn" @click="defectView()">查看详情</span>
+      </div>
+      <div class="chart-box" id="pipeChart"></div>
+      <div class="head-title">
+        <span>水质监测情况</span>
+        <span type="text" class="link-btn" @click="monitorView()">查看详情</span>
+      </div>
+      <div class="chart-box" id="facilityChart"></div>
+    </div>
   </div>
 </template>
 
-<script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator'
+<script>
+import historyCurve from '@/views/spectrum/common/historyCurve/index'
 
-@Component({})
-export default class Widget extends Vue {}
+import * as echarts from 'echarts'
+export default {
+  components: {
+    historyCurve
+  },
+  data() {
+    return {
+      form: {
+        num: 200
+      }
+    }
+  },
+  created() {},
+  mounted() {
+    this.loadPipeLineChart()
+    this.loadFacilityChart()
+  },
+  destroyed() {},
+  methods: {
+    loadPipeLineChart() {
+      let chartDom = document.getElementById('pipeChart')
+      let myChart = echarts.init(chartDom)
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          data: ['jgqx', 'gnqx'],
+          orient: 'horizontal',
+          left: 'center',
+          itemWidth: 10,
+          itemHeight: 10,
+          bottom: 0,
+          textStyle: {
+            color: '#959595',
+            fontSize: 11,
+            fontWeight: '500'
+          }
+        },
+        grid: {
+          top: '8%',
+          left: '3%',
+          right: '4%',
+          bottom: '15%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['历史管网', '现状管网', '新建管网'],
+            axisTick: {
+              alignWithLabel: true
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: [
+          {
+            name: 'jgqx',
+            type: 'bar',
+            barWidth: '30%',
+            data: [90, 160, 20],
+            itemStyle: {
+              color: '#3aa1ff'
+            }
+          },
+          {
+            name: 'gnqx',
+            type: 'bar',
+            barWidth: '30%',
+            data: [20, 80, 9],
+            itemStyle: {
+              color: '#4ecb73'
+            }
+          }
+        ]
+      }
+      option && myChart.setOption(option)
+    },
+    loadFacilityChart() {
+      let chartDom = document.getElementById('facilityChart')
+      let myChart = echarts.init(chartDom)
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          data: ['jgqx', 'gnqx'],
+          orient: 'horizontal',
+          left: 'center',
+          itemHeight: 10,
+          bottom: 0,
+          textStyle: {
+            color: '#959595',
+            fontSize: 11,
+            fontWeight: '500'
+          }
+        },
+        grid: {
+          top: '8%',
+          left: '3%',
+          right: '4%',
+          bottom: '15%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+            axisTick: {
+              alignWithLabel: true
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: [
+          {
+            name: 'jgqx',
+            type: 'line',
+            data: [90, 160, 200, 334, 390, 330, 220, 90, 160, 200, 334, 390],
+            itemStyle: {
+              color: '#3aa1ff'
+            }
+          },
+          {
+            name: 'gnqx',
+            type: 'line',
+            data: [60, 130, 150, 256, 300, 290, 140, 50, 110, 140, 264, 300],
+            itemStyle: {
+              color: '#4ecb73'
+            }
+          }
+        ]
+      }
+      option && myChart.setOption(option)
+    },
+    /**
+     * 缺陷查看
+     */
+    defectView() {
+      const data = {
+        pathId: '/spectrum/reform/relevance/defect',
+        widgetid: 'FullPanel',
+        label: '管网缺陷信息',
+        param: {}
+      }
+      this.$store.dispatch('map/handelClose', data)
+      this.$store.dispatch('map/changeMethod', data)
+    },
+    /**
+     * 监测查看
+     */
+    monitorView() {
+      const data = {
+        pathId: '/spectrum/reform/monitorView',
+        widgetid: 'FullPanel',
+        label: '监测查看',
+        param: {}
+      }
+      this.$store.dispatch('map/handelClose', data)
+      this.$store.dispatch('map/changeMethod', data)
+    }
+  }
+}
 </script>
 
-<style lang="scss"></style>
+<style lang="scss" scoped>
+@import './css.scss';
+</style>

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

@@ -6,50 +6,19 @@
         <div class="head-title">参数设置</div>
         <el-form-item label="参数设置：" label-width="90px">
           <el-select placeholder="选择参数" v-model="form.targetName" filterable style="width:100%">
-            <el-option
-              v-for="(item,index) in paramsOPtion"
-              :key="index"
-              :label="item.targetName+' ['+item.targetCode+']'"
-              :value="item.targetCode"
-            ></el-option>
+            <el-option v-for="(item,index) in paramsOPtion" :key="index" :label="item.targetName+' ['+item.targetCode+']'" :value="item.targetCode"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="日期范围：" label-width="90px">
-          <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-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-option
-              v-for="(item,index) in siteOption"
-              :key="index"
-              :label="item.siteName"
-              :value="item.id"
-            ></el-option>
+          <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>
-        <el-form-item
-          :label="'上游站点：('+upper.length+'/'+checkedUppers.length+')'"
-          class="block-item"
-        >
+        <el-form-item :label="'上游站点：('+upper.length+'/'+checkedUppers.length+')'" class="block-item">
           <div class="data-container">
             <div v-if="upper.length==0" class="empty">暂无数据</div>
             <el-checkbox-group v-model="checkedUppers" @change="getSelectedSite()">
@@ -64,10 +33,7 @@
             </el-checkbox-group>
           </div>
         </el-form-item>
-        <el-form-item
-          :label="'下游站点：('+lower.length+'/'+checkedLowers.length+')'"
-          class="block-item"
-        >
+        <el-form-item :label="'下游站点：('+lower.length+'/'+checkedLowers.length+')'" class="block-item">
           <div class="data-container">
             <div v-if="lower.length==0" class="empty">暂无数据</div>
             <el-checkbox-group v-model="checkedLowers" @change="getSelectedSite()">
@@ -82,10 +48,7 @@
             </el-checkbox-group>
           </div>
         </el-form-item>
-        <el-form-item
-          :label="'其他站点：('+other.length+'/'+checkedOthers.length+')'"
-          class="block-item"
-        >
+        <el-form-item :label="'其他站点：('+other.length+'/'+checkedOthers.length+')'" class="block-item">
           <div class="data-container" style="height:100px">
             <div v-if="other.length==0" class="empty">暂无数据</div>
             <el-checkbox-group v-model="checkedOthers" @change="getSelectedSite()">
@@ -101,13 +64,7 @@
           </div>
         </el-form-item>
       </el-form>
-      <el-table
-        :data="tableData"
-        border
-        style="width: 100%"
-        :header-cell-style="{backgroundColor:'#eaf1fd',height:'39px',textAlign:'center',fontWeight:600}"
-        max-height="300px"
-      >
+      <el-table :data="tableData" border style="width: 100%" :header-cell-style="{backgroundColor:'#eaf1fd',height:'39px',textAlign:'center',fontWeight:600}" max-height="300px">
         <el-table-column label="统计顺序" align="center" width="50">
           <template slot-scope="scope">{{scope.$index+1}}</template>
         </el-table-column>