监测曲线

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

@@ -5,34 +5,36 @@
       <div class="top">
         <el-form ref="form" :model="form" label-width="auto" size="small">
           <el-row :gutter="24">
-            <el-col :span="6">
+            <el-col :span="7">
               <el-form-item label="监测站点">
-                <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-cascader v-model="form.siteId" :props="customProps" :options="siteOption" :show-all-levels="false" clearable @change="value=>{siteChange(1,value)}" placeholder="选择站点" style="width:100%"></el-cascader>
+              </el-form-item>
+            </el-col>
+            <el-col :span="7">
+              <el-form-item label="监测指标">
+                <el-select v-model="targets" filterable multiple collapse-tags placeholder="选择站点" style="width:100%">
+                  <el-option v-for="(item,index) in targetOptions1" :key="index" :label="item.targetName" :value="item.targetCode">
                   </el-option>
                 </el-select>
               </el-form-item>
             </el-col>
-            <el-col :span="18">
-              <el-form-item label="数据日期范围">
-                <el-radio-group v-model="timeType">
-                  <el-radio :label="1">近24小时</el-radio>
-                  <el-radio :label="2">今天</el-radio>
-                  <el-radio :label="3">昨天</el-radio>
-                  <el-radio :label="4">近7天</el-radio>
-                  <el-radio :label="5">近15天</el-radio>
-                  <el-radio :label="6">近30天</el-radio>
-                  <el-radio :label="7">
-                    <el-date-picker :disabled="timeType!=7" 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:250px" :clearable="false">
-                    </el-date-picker>
-                  </el-radio>
-                </el-radio-group>
+            <el-col :span="10">
+              <el-form-item label="时间范围">
+                <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-row>
+          <el-row :gutter="24">
+            <el-col :span="7">
+              <el-form-item label="对比监测站点">
+                <el-cascader v-model="form.siteId2" :props="customProps" :options="siteOption" :show-all-levels="false" clearable @change="value=>{siteChange(2,value)}" placeholder="选择站点" style="width:100%"></el-cascader>
               </el-form-item>
             </el-col>
             <el-col :span="7">
-              <el-form-item label="站点对比">
-                <el-select v-model="form.siteId2" filterable multiple collapse-tags placeholder="选择站点" style="width:100%">
-                  <el-option v-for="(item,index) in siteOption" :key="index" :label="item.siteName" :value="item.id">
+              <el-form-item label="对比监测指标">
+                <el-select v-model="targets2" filterable multiple collapse-tags placeholder="选择站点" style="width:100%">
+                  <el-option v-for="(item,index) in targetOptions2" :key="index" :label="item.targetName" :value="item.targetCode">
                   </el-option>
                 </el-select>
               </el-form-item>
@@ -94,7 +96,14 @@
 </template>
 
 <script>
-import { getCurve, getHourCurve, getDayCurve, getSites } from '@/views/spectrum/dynamicMonitor/api/api'
+import {
+  getCurve,
+  getHourCurve,
+  getDayCurve,
+  getSites,
+  getGroupSite,
+  getTargetByType
+} from '@/views/spectrum/dynamicMonitor/api/api'
 
 import elementResizeDetectorMaker from 'element-resize-detector'
 
@@ -106,10 +115,12 @@ export default {
       pickerOptions: {
         shortcuts: [
           {
-            text: '今天',
+            text: '昨天',
             onClick(picker) {
               const start = new Date()
               const end = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24)
+              end.setTime(end.getTime() - 3600 * 1000 * 24)
               picker.$emit('pick', [start, end])
             }
           },
@@ -122,6 +133,15 @@ export default {
               picker.$emit('pick', [start, end])
             }
           },
+          {
+            text: '最近半个月',
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 15)
+              picker.$emit('pick', [start, end])
+            }
+          },
           {
             text: '最近一个月',
             onClick(picker) {
@@ -131,6 +151,24 @@ export default {
               picker.$emit('pick', [start, end])
             }
           },
+          {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+              picker.$emit('pick', [start, end])
+            }
+          },
+          {
+            text: '最近半年',
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
+              picker.$emit('pick', [start, end])
+            }
+          },
           {
             text: '最近一年',
             onClick(picker) {
@@ -158,44 +196,140 @@ export default {
         // date: [this.$moment().format('YYYY-MM-DD 00:00:00'), this.$moment().format('YYYY-MM-DD 23:59:59')]
         date: []
       },
+      targets: [],
+      targets2: [],
       radio: 1,
       activeName: 'first',
       targetObj: {},
+      targetOptions1: [],
+      targetOptions2: [],
       targetData: [], // 图表类型
       tableData: [], // 列表数据
       dialogDragWidth: '520px',
-      timeType: 1
+      timeType: 1,
+      customProps: {
+        value: 'id',
+        label: 'name',
+        children: 'data'
+      },
+      totleTargets: []
     }
   },
   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')]
       this.query()
+    },
+    targets(val, oldVal) {
+      this.getQueryTargets()
+    },
+    targets2(val, oldVal) {
+      this.getQueryTargets()
     }
   },
   methods: {
-    maximizing() {
-      this.dialogDragWidth = '50%'
+    /**
+     * 查询指标
+     */
+    getQueryTargets() {
+      let arr = this.targets.concat(this.targets2)
+      this.totleTargets = Array.from(new Set(arr))
+    },
+    /**
+     * 选择主站点
+     */
+    siteChange(type, value) {
+      if (type == 1) {
+        this.targetOptions1 = []
+        this.targets = []
+      } else {
+        this.targetOptions2 = []
+        this.targets2 = []
+      }
+      if (!value || value.length == 0) {
+        return
+      }
+      const divice = this.getDivice(value[1])
+      const typeId = divice.site.deviceType || null
+      if (typeId) this.getTargetByType(type, typeId)
+    },
+    /**
+     * 根据设备类型id获取指标
+     */
+    async getTargetByType(type, typeId) {
+      console.log('typeId', typeId)
+      await getTargetByType({ current: 1, size: 10000, typeId: typeId }).then((res) => {
+        if (res.code == 1) {
+          if (type == 1) {
+            this.targetOptions1 = res.result.records
+            let targets = this.targetOptions1.length > 0 ? [this.targetOptions1[0].targetCode] : []
+            // this.$set(this.form, 'targets', targets)
+            this.targets = targets
+            this.getQueryTargets()
+          } else {
+            this.targetOptions2 = res.result.records
+            let targets2 = this.targetOptions2.length > 0 ? [this.targetOptions2[0].targetCode] : []
+            // this.$set(this.form, 'targets2', targets2)
+            this.targets2 = targets2
+            this.getQueryTargets()
+          }
+        }
+      })
     },
-    show(siteId = null) {
+    /**
+     * 根据设站点id获取站点信息
+     */
+    getDivice(value) {
+      let _group = null
+      let _site = null
+      for (let i = 0; i < this.siteOption.length; i++) {
+        const group = this.siteOption[i]
+        for (let j = 0; j < group.data.length; j++) {
+          const site = group.data[j]
+          if (site.id == value) {
+            _group = group
+            _site = site
+            break
+          }
+        }
+      }
+      return {
+        group: _group,
+        site: _site
+      }
+    },
+    /**
+     * 展示曲线
+     */
+    async show(siteId = null) {
       Object.assign(this.$data, this.$options.data.call(this))
-      this.getSites(siteId)
+      await this.getSites(siteId)
       this.dialogVisible = true
       if (siteId != null) {
-        this.getHistoryCurve({ siteId: siteId })
+        this.getHistoryCurve({ siteId: siteId, checkCodes: this.totleTargets.join(',') })
       }
     },
     /**
      * 获取站点
      */
-    getSites(siteId) {
-      getSites({ projectId: this.$store.state.project.project.id, size: 1000 }).then((res) => {
+    async getSites(siteId) {
+      await getGroupSite({ projectId: this.$store.state.project.project.id }).then(async (res) => {
         if (res.code && res.code == 1) {
           this.siteOption = res.result.records
-          if (siteId) this.$set(this.form, 'siteId', siteId)
+          this.siteOption = res.result.map((item) => {
+            item['name'] = `${item.groupName}(${item.size})`
+            item['id'] = item.groupName
+            item.data = item.data.map((item2) => {
+              item2['name'] = item2.siteName
+              return item2
+            })
+            return item
+          })
+          let { group, site } = this.getDivice(siteId)
+          console.log('opopopo', group, site)
+          // 初始化选中站点
+          if (group && site) this.$set(this.form, 'siteId', [group.id, siteId])
+          if (site.deviceType) await this.getTargetByType(1, site.deviceType)
         }
       })
     },
@@ -203,13 +337,20 @@ export default {
      * 请求参数
      */
     readyParams() {
-      let timeInterval = this.getQueryTime() // 查询时间段一
+      // let timeInterval = this.getQueryTime() // 查询时间段一
+      let timeInterval = {
+        startTime: this.$moment(this.form.date[0]).format('YYYY-MM-DD 00:00:00'),
+        endTime: this.$moment(this.form.date[1]).format('YYYY-MM-DD 23:59:59')
+      }
+      // beginTime: this.$moment(this.form.date[0]).format('YYYY-MM-DD 00:00:00'),
+      //   // endTime: this.$moment(this.form.date[1]).format('YYYY-MM-DD 23:59:59')
       let params = {
-        siteId: this.form.siteId,
+        siteId: this.form.siteId[1],
         beginTime: timeInterval.startTime,
-        endTime: timeInterval.endTime
+        endTime: timeInterval.endTime,
+        checkCodes: this.totleTargets.join(',')
       }
-      if (this.form.siteId2 && this.form.siteId2.length > 0) params['comprasionSiteIds'] = this.form.siteId2.join(',')
+      if (this.form.siteId2 && this.form.siteId2.length > 0) params['comprasionSiteIds'] = this.form.siteId2[1]
       // 同比开始时间
       if (this.form.date2) params['comprasionBeginTime'] = this.$moment(this.form.date2).format('YYYY-MM-DD 00:00:00')
       // 时间差
@@ -269,6 +410,7 @@ export default {
         let targetVos = listItem.targetVos
         for (let index2 = 0; index2 < targetVos.length; index2++) {
           const targetItem = targetVos[index2]
+          if (this.totleTargets.indexOf(targetItem.targetCode) < 0) continue
           let targetData = {
             list: listItem[targetItem.targetCode + 's'],
             type: listItem.type
@@ -585,7 +727,7 @@ export default {
         }
         .chartBox {
           width: 100%;
-          height: 320px;
+          height: 420px;
           // background-color: #ccc;
         }
       }

src/views/spectrum/dynamicMonitor/api/api.ts

@@ -9,6 +9,15 @@ export function getDisplaySitet(params) {
     })
 }
 
+// 按分组获取站点
+export function getGroupSite(params) {
+    return request({
+        url: '/survey/surveysite/listGroup',
+        method: 'get',
+        params
+    })
+}
+
 // 按分区获取站点
 export function getPartitionDisplaySite(params) {
     return request({
@@ -45,6 +54,15 @@ export function getSites(params) {
     })
 }
 
+// 根据设备类型id获取对应指标
+export function getTargetByType(params){
+    return request({
+        url: '/survey/devicetargetp/page',
+        method: 'get',
+        params
+    })
+}
+
 // 获取最新监测数据
 export function getSiteNewData(params) {
     return request({

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

@@ -109,8 +109,8 @@ export default {
       drainageTypes: [],
       levelOptions: [],
       drainageOptions: [],
-      pipeCalOptions:[],
-      defectLevelsOptions:[]
+      pipeCalOptions: [],
+      defectLevelsOptions: []
     }
   },
   mounted() {
@@ -189,6 +189,24 @@ export default {
       window.viewer.entities.add(entity)
 
       getFlawDetail({ code: row.code }).then((res) => {
+        console.log('获取线的点', window.viewer.entities.getById('liner'))
+        console.log('获取线的点2', window.viewer.entities.getById('liner').polyline.positions.getValue()[0])
+        let entity = window.viewer.entities.getById('liner')
+        let position1 = entity.polyline.positions.getValue()[0]
+        let position2 = entity.polyline.positions.getValue()[1]
+        let centerPosition = new Cesium.Cartesian3(
+          (position1.x + position2.x) / 2,
+          (position1.y + position2.y) / 2,
+          (position1.z + position2.z) / 2
+        )
+        console.log('获取线的点3中心点', centerPosition)
+
+        var cartographic = Cesium.Cartographic.fromCartesian(centerPosition)
+        var lon = Cesium.Math.toDegrees(cartographic.longitude)
+        var lat = Cesium.Math.toDegrees(cartographic.latitude)
+        var elev = viewer.scene.globe.getHeight(cartographic)
+        console.log('获取线的点3', lon, lat, elev)
+
         if (res.code == 1) {
           let data = res.result
           const defectPopup2 = Vue.extend(defectPopup)
@@ -196,14 +214,14 @@ export default {
           this.popup = new defectPopup2({
             data: {
               id: 'gu',
-              position: Cesium.Cartesian3.fromDegrees(row.longitude, row.latitude, 0),
+              position: Cesium.Cartesian3.fromDegrees(lon, lat, elev),
               data: data
             },
             store: this.$store
           }).$mount()
 
           window.viewer.camera.flyTo({
-            destination: Cesium.Cartesian3.fromDegrees(row.longitude, row.latitude, 100)
+            destination: Cesium.Cartesian3.fromDegrees(lon, lat, 100)
           })
         }
       })