d

src/views/spectrum/statisticalAnalysis/api/api.ts

@@ -10,11 +10,12 @@ export function getSiteManyCurve(data) {
 }
 
 // 获取监测指标
-export function getDevicetargetp(params) {
+export function getDevicetargetp(data) {
     return request({
-        url: '/survey/devicetargetp/page',
-        method: 'get',
-        params
+        // url: '/survey/devicetargetp/page',
+        url: '/survey/surveysite/siteTarget',
+        method: 'post',
+        data
     })
 }
 

src/views/spectrum/statisticalAnalysis/wqMultipleSites/css.scss

@@ -16,9 +16,11 @@
     margin-right: 5px;
   }
 }
-.page-panel{
+
+.page-panel {
   overflow-y: auto;
 }
+
 .params-seting {
   .data-container {
     width: 100%;
@@ -28,22 +30,37 @@
     background-color: #f7f7f7;
     border-radius: 2px;
     display: block;
+
     .empty {
       box-sizing: border-box;
       padding: 0 5px;
       color: #333333;
     }
+
     ul {
       list-style: none;
+
       li {
         padding: 0 5px;
         height: 25px;
-        >>> .el-checkbox {
+
+        >>>.el-checkbox {
           width: 100%;
           height: 25px;
+
           .el-checkbox__label {
             width: calc(100% - 20px);
+
             span {
+              &:nth-child(1) {
+                display: inline-block;
+                width: 150px;
+                overflow: hidden;
+                vertical-align: bottom;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+
               &:nth-child(2) {
                 float: right;
               }
@@ -53,19 +70,22 @@
       }
     }
   }
+
   .el-form {
-    >>> .el-form-item.block-item {
+    >>>.el-form-item.block-item {
       .el-form-item__content {
         margin-left: 0 !important;
         display: block;
       }
     }
   }
-  .el-table >>>.el-table__cell {
+
+  .el-table>>>.el-table__cell {
     padding: 3px 0;
   }
 }
-.btn-div{
+
+.btn-div {
   margin-top: 10px;
   text-align: right;
-}
+}

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

@@ -3,16 +3,7 @@
     <div class="head-title">{{title}}</div>
     <div>
       <span style="margin-left:10px;color:#606266">时间轴：</span>
-      <el-slider
-        v-model="value1"
-        class="time-slider"
-        :show-tooltip="false"
-        :step="1"
-        :min="0"
-        :max="sliderMax"
-        :disabled="sliderMax==0||!checked"
-        @change="sliderChange"
-      ></el-slider>
+      <el-slider v-model="value1" class="time-slider" :show-tooltip="false" :step="1" :min="0" :max="sliderMax" :disabled="sliderMax==0||!checked" @change="sliderChange"></el-slider>
       <el-checkbox v-model="checked" style="margin-left:20px">实时监测信息地图标注</el-checkbox>
       <div class="an-type">
         <span style="margin-left:100px;color:#606266">统计方式：</span>
@@ -23,20 +14,14 @@
       </div>
     </div>
     <div class="chart-box">
-      <div class="chart-item" id="chart1">
+      <div class="chart-item" ref="chart1">
         <div class="empty"></div>
       </div>
-      <div class="chart-item" id="chart2">
+      <div class="chart-item" ref="chart2">
         <div class="empty"></div>
       </div>
     </div>
-    <el-table
-      :data="tableData"
-      stripe
-      style="width: 100%"
-      :header-cell-style="{backgroundColor:'#eaf1fd',height:'39px',textAlign:'center',fontWeight:600}"
-      max-height="350px"
-    >
+    <el-table :data="tableData" stripe style="width: 100%" :header-cell-style="{backgroundColor:'#eaf1fd',height:'39px',textAlign:'center',fontWeight:600}" max-height="350px">
       <template slot="empty">
         <img src="@/assets/icon/null.png" alt />
       </template>
@@ -54,6 +39,7 @@
 import { getManySiteCurv } from '@/views/spectrum/statisticalAnalysis/api/api'
 import { getSiteIcon } from '@/views/spectrum/common/siteIcon/siteIcon' // 站点图标
 import { MapPopup } from '@/views/spectrum/common/mapPopup/mapPopup'
+import * as echarts from 'echarts'
 export default {
   name: 'sitesanalysisResult',
   data() {
@@ -169,8 +155,8 @@ export default {
      * 加载图表
      */
     loadChart(chartData, domId) {
-      let chartDom = document.getElementById(domId)
-      let myChart = this.$echarts.init(chartDom)
+      let chartDom = this.$refs[domId]
+      let myChart = echarts.init(chartDom)
       let colorAry = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
       let option = {
         tooltip: {
@@ -196,7 +182,7 @@ export default {
       }
       myChart.clear()
       option && myChart.setOption(option)
-      window.addEventListener('resize', function() {
+      window.addEventListener('resize', function () {
         myChart.resize()
       })
     },
@@ -215,7 +201,8 @@ export default {
         viewer: viewer,
         title: site.siteName,
         cureBtn: false,
-        html: _site? `
+        html: _site
+          ? `
           <span>${this.dateCollection[index] ? this.dateCollection[index] : '/'}</span>
           <span>${this.param.targetName}：${_site.values[index] ? _site.values[index] : '/'}</span>`
           : `<span>暂无数据</span>`

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

@@ -4,18 +4,18 @@
     <div class="params-seting">
       <el-form :model="form" size="small" label-width="auto">
         <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-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>
         <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-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-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-select>
         </el-form-item>
         <el-form-item :label="'上游站点：('+upper.length+'/'+checkedUppers.length+')'" class="block-item">
@@ -25,8 +25,8 @@
               <ul>
                 <li v-for="(item,index) in upper" :key="index">
                   <el-checkbox :label="item.id" :key="item.id">
-                    <span>{{item.siteName}}</span>
-                    <span>距离：{{item.distance}}KM</span>
+                    <span :title="item.siteName">{{item.siteName}}</span>
+                    <span>距离：{{item.distance}}km</span>
                   </el-checkbox>
                 </li>
               </ul>
@@ -40,8 +40,8 @@
               <ul>
                 <li v-for="(item,index) in lower" :key="index">
                   <el-checkbox :label="item.id" :key="item.id">
-                    <span>{{item.siteName}}</span>
-                    <span>距离：{{item.distance}}KM</span>
+                    <span :title="item.siteName">{{item.siteName}}</span>
+                    <span>距离：{{item.distance}}km</span>
                   </el-checkbox>
                 </li>
               </ul>
@@ -55,8 +55,8 @@
               <ul>
                 <li v-for="(item,index) in other" :key="index">
                   <el-checkbox :label="item.id" :key="item.id">
-                    <span>{{item.siteName}}</span>
-                    <span>距离：{{item.distance}}KM</span>
+                    <span :title="item.siteName">{{item.siteName}}</span>
+                    <span>距离：{{item.distance}}km</span>
                   </el-checkbox>
                 </li>
               </ul>
@@ -65,11 +65,11 @@
         </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-column label="统计顺序" align="center" width="50">
+        <el-table-column label="顺序" align="center" width="50">
           <template slot-scope="scope">{{scope.$index+1}}</template>
         </el-table-column>
-        <el-table-column prop="siteName" label="检测站点名称" align="center" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="drainageType" label="设备类型" align="center" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="siteName" label="名称" align="center" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="drainageType" label="类型" align="center" show-overflow-tooltip></el-table-column>
         <el-table-column label="操作" width="100" align="center">
           <template slot-scope="scope">
             <el-button type="text" style="padding:0" @click="moveUp(scope)">上移</el-button>
@@ -145,7 +145,7 @@ export default {
     }
   },
   mounted() {
-    this.getDevicetargetp()
+    // this.getDevicetargetp()
     this.getSites()
   },
   destroyed() {
@@ -156,10 +156,12 @@ export default {
     /**
      * 获取监测指标
      */
-    getDevicetargetp() {
-      getDevicetargetp({ size: 100000, current: 1 }).then((res) => {
+    getDevicetargetp(sectionId) {
+      let formData = new FormData()
+      formData.append('sectionId', sectionId)
+      getDevicetargetp(formData).then((res) => {
         if (res.code == 1 && res.result) {
-          let result = res.result.records
+          let result = res.result.showVos
           this.paramsOPtion = result
         }
       })
@@ -198,6 +200,8 @@ export default {
       let currentSite = this.siteOption.find((item) => {
         return item.id == val
       })
+      this.$set(this.form, 'targetName', undefined)
+      this.getDevicetargetp(currentSite.sectionId)
       this.tableData = [currentSite]
     },
     /**