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

@@ -0,0 +1,28 @@
+import request from '@/utils/request'
+
+// 按设备类型获取站点
+export function getDisplaySitet(params) {
+    return request({
+        url: '/survey/surveysite/displaySite',
+        method: 'get',
+        params
+    })
+}
+
+// 按分区获取站点
+export function getPartitionDisplaySite(params) {
+    return request({
+        url: '/survey/surveysite/partitionDisplaySite',
+        method: 'get',
+        params
+    })
+}
+
+// 获取站点实时监测数据
+export function getPGBSiteData(params) {
+    return request({
+        url: '/survey/devicecheckdata/PGBSiteData',
+        method: 'get',
+        params
+    })
+}

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

@@ -0,0 +1,163 @@
+<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.area" placeholder="输入排水分区名称"></el-input>
+        </el-form-item>
+        <el-form-item label="监测分组：">
+          <el-input v-model="form.area" placeholder="输入监测分组名称"></el-input>
+        </el-form-item>
+        <el-form-item label="监测点：">
+          <el-input v-model="form.area" placeholder="输入监测站点名称"></el-input>
+        </el-form-item>
+        <el-form-item label="站点状态：">
+          <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 :label="4">离线</el-radio>
+            <el-radio :label="5">维护</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary">查询</el-button>
+          <el-button type="primary">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- 表格 -->
+    <div class="content-body">
+      <el-table :data="tableData" stripe height="100%" highlight-current-row
+                :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>
+        </template>
+        <el-table-column prop="date" label="序号" width="50" align="center">
+          <template slot-scope="scope">{{scope.$index+1}}</template>
+        </el-table-column>
+        <el-table-column label="操作" align="center">
+          <template slot-scope="{row}">
+            <el-button type="text">监测曲线</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column prop="partitionName" label="排水分区" show-overflow-tooltip width="150" align="center"></el-table-column>
+        <el-table-column prop="groupByName" label="监测分组" show-overflow-tooltip width="150" align="center"></el-table-column>
+        <el-table-column prop="deviceTypeName" label="监测设备类型" show-overflow-tooltip width="150" align="center"></el-table-column>
+        <el-table-column prop="siteName" label="监测点名称" show-overflow-tooltip width="150" align="center"></el-table-column>
+        <el-table-column prop="siteState" label="站点状态" show-overflow-tooltip width="150" align="center">
+          <template slot-scope="{row}">{{['正常','报警','离线','维护中'][row.siteState-1]}}</template>
+        </el-table-column>
+        <el-table-column label="距离当前时间间隔(分钟)" show-overflow-tooltip width="150" align="center">
+          <template slot-scope="{row}">{{getIntervalMinutes(row.collectionDate)}}</template>
+        </el-table-column>
+        <el-table-column prop="collectionDate" label="最近一次数据采集时间" show-overflow-tooltip width="150" align="center"></el-table-column>
+        <el-table-column prop="temperature" label="温度(℃)" show-overflow-tooltip width="150" align="center">
+          <template slot-scope="{row}">{{row.temperature?row.temperature:"/"}}</template>
+        </el-table-column>
+        <el-table-column prop="turb" label="浊度(NTU)" show-overflow-tooltip width="150" align="center">
+          <template slot-scope="{row}">{{row.turb?row.turb:"/"}}</template>
+        </el-table-column>
+        <el-table-column prop="cod" label="化学需氧量(mg/L)" show-overflow-tooltip width="150" align="center">
+          <template slot-scope="{row}">{{row.cod?row.cod:"/"}}</template>
+        </el-table-column>
+        <el-table-column prop="ec" label="电导率(uS/cm)" show-overflow-tooltip width="150" align="center">
+          <template slot-scope="{row}">{{row.ec?row.ec:"/"}}</template>
+        </el-table-column>
+        <el-table-column prop="chl" label="叶绿素光谱指数" show-overflow-tooltip width="150" align="center">
+          <template slot-scope="{row}">{{row.chl?row.chl:"/"}}</template>
+        </el-table-column>
+        <el-table-column prop="doxygen" label="溶解氧(mg/L)" show-overflow-tooltip width="150" align="center">
+          <template slot-scope="{row}">{{row.doxygen?row.doxygen:"/"}}</template>
+        </el-table-column>
+        <el-table-column prop="address" label="总有机碳(mg/L)" show-overflow-tooltip width="150" align="center">
+          <template slot-scope="{row}">{{row.address?row.address:"/"}}</template>
+        </el-table-column>
+        <el-table-column prop="codmn" label="高猛酸盐指数" show-overflow-tooltip width="150" align="center">
+          <template slot-scope="{row}">{{row.codmn?row.codmn:"/"}}</template>
+        </el-table-column>
+        <el-table-column prop="tss" label="悬浮物(mg/L)" show-overflow-tooltip width="150" align="center">
+          <template slot-scope="{row}">{{row.tss?row.tss:"/"}}</template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 分页 -->
+    <div class="content-footer">
+      <span style="margin-left:10px;color: #323b41;font-size: 14px;">共 {{tableData.length}} 条</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getPGBSiteData } from '@/views/spectrum/dynamicMonitor/api/api'
+export default {
+  data() {
+    return {
+      form: {},
+      radio: 1,
+      tableData: [],
+      interVal: null
+    }
+  },
+  mounted() {
+    this.getPGBSiteData()
+    this.interVal = setInterval(() => {
+      this.getPGBSiteData()
+    }, 60000);
+  },
+  destroyed() {
+    if (this.interVal) clearInterval(this.interVal)
+  },
+  methods: {
+    getPGBSiteData() {
+      getPGBSiteData({ projectId: 1 }).then(res => {
+        this.tableData = res.result
+      })
+    },
+    /**
+     * 计算间隔分钟数
+     */
+    getIntervalMinutes(time) {
+      if (!time) return '/'
+      return ((new Date() - new Date(time)) / (1000 * 60)).toFixed(0)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  .content-top {
+    width: 100%;
+    height: 40px;
+    .el-form {
+      >>> .el-form-item {
+        margin-bottom: 0 !important;
+        vertical-align: sub !important;
+      }
+    }
+  }
+  .content-body {
+    width: 100%;
+    height: calc(100% - 70px);
+    box-sizing: border-box;
+    padding-top: 10px;
+    padding-bottom: 5px;
+    .el-table {
+      >>> th > .cell {
+        white-space: pre-line;
+      }
+    }
+  }
+  .content-footer {
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    // background-color: #0bbdd4;
+  }
+}
+</style>

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

@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <el-input placeholder="输入关键字进行过滤" v-model="filterText" clearable></el-input>
+    <el-row :gutter="24" style="margin-top:10px;">
+      <el-col :span="12" style="text-align: center;">
+        <el-switch v-model="value1" active-text="实时监测"></el-switch>
+      </el-col>
+      <el-col :span="12" style="text-align: center;">
+        <el-switch v-model="value2" active-text="显示分区"></el-switch>
+      </el-col>
+    </el-row>
+    <el-tabs v-model="activeName" type="card" style="margin-top:10px">
+      <el-tab-pane label="按设备类型" name="first">
+        <el-tree class="filter-tree" :data="deviceData" :props="defaultProps1" default-expand-all :filter-node-method="filterNode"
+                 ref="tree1">
+        </el-tree>
+      </el-tab-pane>
+      <el-tab-pane label="按排水分区" name="second">
+        <el-tree class="filter-tree" :data="areaData" :props="defaultProps2" default-expand-all :filter-node-method="filterNode"
+                 ref="tree2">
+        </el-tree>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { getDisplaySitet, getPartitionDisplaySite } from '@/views/spectrum/dynamicMonitor/api/api'
+export default {
+  data() {
+    return {
+      activeName: 'first',
+      filterText: '',
+      value1: true,
+      value2: false,
+      deviceData: [],
+      areaData: [],
+      defaultProps1: {
+        children: 'list',
+        label: 'siteName'
+      },
+      defaultProps2: {
+        children: 'list',
+        label: 'siteName'
+      }
+    }
+  },
+  mounted() {
+    this.getDisplaySitet()
+    this.getPartitionDisplaySite()
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree1.filter(val);
+      this.$refs.tree2.filter(val);
+    }
+  },
+  methods: {
+    /**
+     * 按设备类型
+     */
+    getDisplaySitet() {
+      getDisplaySitet().then(res => {
+        console.log('输出：树', res)
+        const treeData = res.result.map(item => {
+          item['siteName'] = item.deviceTypeName ?
+            `${tem.deviceTypeName}(${item.list ? item.list.length : 0})` :
+            `未绑定(${item.list ? item.list.length : 0})`
+          return item
+        })
+        this.deviceData = treeData
+      })
+    },
+    /**
+     * 按排水分区
+     */
+    getPartitionDisplaySite() {
+      getPartitionDisplaySite().then(res => {
+        console.log('输出：树2', res)
+      })
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+  }
+}
+</script>
+
+<style>
+</style>

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

@@ -0,0 +1,162 @@
+<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.area" placeholder="输入设备名称"></el-input>
+        </el-form-item>
+        <el-form-item label="设备类型：">
+          <el-select v-model="model" placeholder="">
+            <el-option v-for="item in []" :key="item.value" :label="item.label" :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="数据采集时间：">
+          <el-date-picker v-model="form.value1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="站点状态：">
+          <el-checkbox v-model="checked">显示有效数据</el-checkbox>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary">查询</el-button>
+          <el-button type="primary">重置</el-button>
+          <el-button type="primary">作废</el-button>
+          <el-button type="primary">导出</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- 表格 -->
+    <div class="content-body">
+      <el-table :data="tableData" stripe height="100%" highlight-current-row
+                :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>
+        </template>
+        <el-table-column prop="date" label="序号" width="50" align="center">
+          <template slot-scope="scope">{{scope.$index+1}}</template>
+        </el-table-column>
+        <el-table-column label="操作" align="center">
+          <template slot-scope="{row}">
+            <el-button type="text">监测曲线</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column prop="partitionName" label="排水分区" show-overflow-tooltip width="150" align="center"></el-table-column>
+        <el-table-column prop="groupByName" label="监测分组" show-overflow-tooltip width="150" align="center"></el-table-column>
+        <el-table-column prop="deviceTypeName" label="监测设备类型" show-overflow-tooltip width="150" align="center"></el-table-column>
+        <el-table-column prop="siteName" label="监测点名称" show-overflow-tooltip width="150" align="center"></el-table-column>
+        <el-table-column prop="siteState" label="站点状态" show-overflow-tooltip width="150" align="center">
+          <template slot-scope="{row}">{{['正常','报警','离线','维护中'][row.siteState-1]}}</template>
+        </el-table-column>
+        <el-table-column label="距离当前时间间隔(分钟)" show-overflow-tooltip width="150" align="center">
+          <template slot-scope="{row}">{{getIntervalMinutes(row.collectionDate)}}</template>
+        </el-table-column>
+        <el-table-column prop="collectionDate" label="最近一次数据采集时间" show-overflow-tooltip width="150" align="center"></el-table-column>
+        <el-table-column prop="temperature" label="温度(℃)" show-overflow-tooltip width="150" align="center">
+          <template slot-scope="{row}">{{row.temperature?row.temperature:"/"}}</template>
+        </el-table-column>
+        <el-table-column prop="turb" label="浊度(NTU)" show-overflow-tooltip width="150" align="center">
+          <template slot-scope="{row}">{{row.turb?row.turb:"/"}}</template>
+        </el-table-column>
+        <el-table-column prop="cod" label="化学需氧量(mg/L)" show-overflow-tooltip width="150" align="center">
+          <template slot-scope="{row}">{{row.cod?row.cod:"/"}}</template>
+        </el-table-column>
+        <el-table-column prop="ec" label="电导率(uS/cm)" show-overflow-tooltip width="150" align="center">
+          <template slot-scope="{row}">{{row.ec?row.ec:"/"}}</template>
+        </el-table-column>
+        <el-table-column prop="chl" label="叶绿素光谱指数" show-overflow-tooltip width="150" align="center">
+          <template slot-scope="{row}">{{row.chl?row.chl:"/"}}</template>
+        </el-table-column>
+        <el-table-column prop="doxygen" label="溶解氧(mg/L)" show-overflow-tooltip width="150" align="center">
+          <template slot-scope="{row}">{{row.doxygen?row.doxygen:"/"}}</template>
+        </el-table-column>
+        <el-table-column prop="address" label="总有机碳(mg/L)" show-overflow-tooltip width="150" align="center">
+          <template slot-scope="{row}">{{row.address?row.address:"/"}}</template>
+        </el-table-column>
+        <el-table-column prop="codmn" label="高猛酸盐指数" show-overflow-tooltip width="150" align="center">
+          <template slot-scope="{row}">{{row.codmn?row.codmn:"/"}}</template>
+        </el-table-column>
+        <el-table-column prop="tss" label="悬浮物(mg/L)" show-overflow-tooltip width="150" align="center">
+          <template slot-scope="{row}">{{row.tss?row.tss:"/"}}</template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 分页 -->
+    <div class="content-footer">
+      <span style="margin-left:10px;color: #323b41;font-size: 14px;">共 {{tableData.length}} 条</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getPGBSiteData } from '@/views/spectrum/dynamicMonitor/api/api'
+export default {
+  data() {
+    return {
+      form: {},
+      checked: true,
+      tableData: [],
+      interVal: null
+    }
+  },
+  mounted() {
+    this.getPGBSiteData()
+    this.interVal = setInterval(() => {
+      this.getPGBSiteData()
+    }, 60000);
+  },
+  destroyed() {
+    if (this.interVal) clearInterval(this.interVal)
+  },
+  methods: {
+    getPGBSiteData() {
+      getPGBSiteData({ projectId: 1 }).then(res => {
+        this.tableData = res.result
+      })
+    },
+    /**
+     * 计算间隔分钟数
+     */
+    getIntervalMinutes(time) {
+      if (!time) return '/'
+      return ((new Date() - new Date(time)) / (1000 * 60)).toFixed(0)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  .content-top {
+    width: 100%;
+    height: 40px;
+    .el-form {
+      >>> .el-form-item {
+        margin-bottom: 0 !important;
+        vertical-align: sub !important;
+      }
+    }
+  }
+  .content-body {
+    width: 100%;
+    height: calc(100% - 70px);
+    box-sizing: border-box;
+    padding-top: 10px;
+    padding-bottom: 5px;
+    .el-table {
+      >>> th > .cell {
+        white-space: pre-line;
+      }
+    }
+  }
+  .content-footer {
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    // background-color: #0bbdd4;
+  }
+}
+</style>

src/views/spectrum/monitorWarning/alarmHistory/widget.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+      预警报警历史
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

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

@@ -0,0 +1,15 @@
+<template>
+  <div>
+      多站点水质分析
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

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

@@ -0,0 +1,15 @@
+<template>
+  <div>
+      单站点水质分析
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/widgets/dynamicMonitor/siteMonitor/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-      站点监控台
+      分区管理1
   </div>
 </template>
 

src/views/zhpt/index.vue

@@ -33,7 +33,7 @@
             "
           /> -->
           <div id="mapView" class="mapView">
-            <!-- <cesium-map></cesium-map> -->
+            <cesium-map></cesium-map>
             <!-- <div
               id="any"
               ref="any"