|
|
@@ -0,0 +1,876 @@
|
|
|
+<template>
|
|
|
+ <!-- 在线监控 -->
|
|
|
+ <div class="scada-monitor" style="padding: 0">
|
|
|
+ <tf-legend
|
|
|
+ class="legend_dept"
|
|
|
+ label="条件搜索"
|
|
|
+ isopen="true"
|
|
|
+ title="描述站位。"
|
|
|
+ >
|
|
|
+ <el-row>
|
|
|
+ <el-select
|
|
|
+ v-model="deviceType"
|
|
|
+ size="small"
|
|
|
+ clearable
|
|
|
+ placeholder="请选择设备类型"
|
|
|
+ style="float: left; width: 100%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in deviceTypes"
|
|
|
+ :key="item.ccode"
|
|
|
+ :label="item.cname"
|
|
|
+ :value="item.ccode"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ <el-input
|
|
|
+ v-model="querySiteName"
|
|
|
+ class="helpInput"
|
|
|
+ style="float: left; width: calc(100% - 46px); margin: 6px 0"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ placeholder="请输入设备名称"
|
|
|
+ >
|
|
|
+ <template slot-scope="{ item }">
|
|
|
+ <i class="el-icon-location" />
|
|
|
+ <span class="name">{{ item.value }}</span>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ style="
|
|
|
+ float: left;
|
|
|
+ height: 32px;
|
|
|
+ margin-top: 6px;
|
|
|
+ border-radius: 0px 4px 4px 0px;
|
|
|
+ "
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-search"
|
|
|
+ size="small"
|
|
|
+ plain
|
|
|
+ @click="querySite"
|
|
|
+ />
|
|
|
+ </el-row>
|
|
|
+ </tf-legend>
|
|
|
+ <tf-legend
|
|
|
+ class="legend_dept"
|
|
|
+ label="监测列表"
|
|
|
+ isopen="true"
|
|
|
+ title="描述站位。"
|
|
|
+ style="height: calc(100% - 124px); padding: 0"
|
|
|
+ :can-change="false"
|
|
|
+ >
|
|
|
+ <el-table
|
|
|
+ v-loading="tableLoading"
|
|
|
+ height="calc(100% - 26px)"
|
|
|
+ :data="siteDataTable"
|
|
|
+ stripe
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="site"
|
|
|
+ label="设备名称"
|
|
|
+ align="center"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column fixed="right" label="操作" width="120" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ @click="goto(scope.row)"
|
|
|
+ >查看</el-button>
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ @click="getSiteHistroty(scope.row)"
|
|
|
+ >趋势图</el-button>
|
|
|
+ <el-button
|
|
|
+ v-if="scope.row.isCraft"
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ @click="watchCraft(scope.row)"
|
|
|
+ >工艺图</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div style="margin-top: 8px">
|
|
|
+ <div style="float: left; width: 80%">
|
|
|
+ <el-pagination
|
|
|
+ ref="pagination"
|
|
|
+ small
|
|
|
+ background
|
|
|
+ layout="total, sizes, prev, next"
|
|
|
+ :total="total"
|
|
|
+ :page-sizes="[20, 30, 50, 80, 160]"
|
|
|
+ @current-change="listRefersh(resData)"
|
|
|
+ @size-change="listRefersh(resData)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div style="float: left; width: 20%">
|
|
|
+ <span
|
|
|
+ ref="pageLength"
|
|
|
+ style="font-size: 13px"
|
|
|
+ class="el-pagination__total"
|
|
|
+ >1/1 页</span>
|
|
|
+ </div>
|
|
|
+ <div style="clear: both" />
|
|
|
+ </div>
|
|
|
+ </tf-legend>
|
|
|
+ <el-dialog
|
|
|
+ title="工艺图"
|
|
|
+ :visible.sync="craftVisible"
|
|
|
+ top="50px"
|
|
|
+ @close="craftClose"
|
|
|
+ >
|
|
|
+ <div ref="craft" />
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog
|
|
|
+ :title="siteTitle"
|
|
|
+ :visible.sync="siteVisible"
|
|
|
+ width="1400px"
|
|
|
+ top="calc(50vh - 350px)"
|
|
|
+ >
|
|
|
+ <el-row>
|
|
|
+ <span class="title2">指标</span>
|
|
|
+ <el-select
|
|
|
+ ref="siteSelect"
|
|
|
+ v-model="siteType"
|
|
|
+ style="
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 3px;
|
|
|
+ margin-right: 5px;
|
|
|
+ width: 150px;
|
|
|
+ "
|
|
|
+ size="small"
|
|
|
+ placeholder="请选择"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in sites"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <span class="title2">时间</span>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="timss"
|
|
|
+ size="small"
|
|
|
+ type="daterange"
|
|
|
+ align="right"
|
|
|
+ unlink-panels
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ />
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ @click="showResult"
|
|
|
+ >查询</el-button>
|
|
|
+ <el-checkbox v-model="dontShow">去除特殊值(-9999)</el-checkbox>
|
|
|
+ </el-row>
|
|
|
+ <div
|
|
|
+ v-loading="loading"
|
|
|
+ style="width: 100%; height: 500px; margin-top: 8px; display: flex"
|
|
|
+ >
|
|
|
+ <div style="width: 25%; height: 100%">
|
|
|
+ <el-table
|
|
|
+ v-loading="tableLoading"
|
|
|
+ :data="siteHistoryDataTable"
|
|
|
+ border
|
|
|
+ height="calc(100% - 43px)"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column prop="scadaTime" label="时间" />
|
|
|
+ <el-table-column prop="value" label="测量值" />
|
|
|
+ </el-table>
|
|
|
+ <el-row style="margin-top: 8px">
|
|
|
+ <el-col :span="18">
|
|
|
+ <el-pagination
|
|
|
+ ref="pagination2"
|
|
|
+ small
|
|
|
+ background
|
|
|
+ layout="total, sizes, prev, next"
|
|
|
+ :page-sizes="[40, 80, 200, 500]"
|
|
|
+ :total="total2"
|
|
|
+ @current-change="pagRefersh"
|
|
|
+ @size-change="pagRefersh"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <span
|
|
|
+ ref="pageLength2"
|
|
|
+ style="font-size: 13px"
|
|
|
+ class="el-pagination__total"
|
|
|
+ >1/1 页</span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div ref="chart" style="width: 75%; height: 100%" />
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import pointImg from './images/power.png'
|
|
|
+import tfLegend from '@/views/zhpt/common/Legend'
|
|
|
+import TableItem from '@/components/Table'
|
|
|
+import request from '@/utils/request'
|
|
|
+import Echarts from 'echarts'
|
|
|
+import { TF_craft } from './createSiteCraft'
|
|
|
+import { craftConfig } from './craftConfig'
|
|
|
+import { getSysCommonCode } from '@/api/dataCenter'
|
|
|
+export default {
|
|
|
+ name: 'ScadaMonitor',
|
|
|
+ components: { TableItem, tfLegend, Echarts },
|
|
|
+ props: { data: Object },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 输入框
|
|
|
+ querySiteName: '',
|
|
|
+ tableLoading: false,
|
|
|
+ // 列表
|
|
|
+ siteDataTable: [],
|
|
|
+ total: 0,
|
|
|
+
|
|
|
+ // 工艺图
|
|
|
+ craftVisible: false,
|
|
|
+
|
|
|
+ // 测站历史
|
|
|
+ loading: false,
|
|
|
+ siteVisible: false,
|
|
|
+ siteTitle: '',
|
|
|
+ siteType: '',
|
|
|
+ sites: [],
|
|
|
+ timss: [],
|
|
|
+ siteHistoryDataTable: [],
|
|
|
+ total2: 0,
|
|
|
+ dontShow: true,
|
|
|
+ resData: [],
|
|
|
+ deviceTypes: [],
|
|
|
+ deviceType: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ sidePanelOn() {
|
|
|
+ return this.$store.state.map.P_editableTabsValue
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ sidePanelOn(newTab, oldTab) {
|
|
|
+ if (newTab == oldTab) return
|
|
|
+ if (newTab == 'scadaMonitor') {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.layer.visible = true
|
|
|
+ for (var i = 0, il = this.divs, ii = il.length; i < ii; i++) {
|
|
|
+ il[i].div.style.display = ''
|
|
|
+ }
|
|
|
+ this.addWatch()
|
|
|
+ if (this.ids.length > 0) this.loadRealTimeSiteValue()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (oldTab == 'scadaMonitor') {
|
|
|
+ this.layer.visible = false
|
|
|
+ for (var i = 0, il = this.divs, ii = il.length; i < ii; i++) {
|
|
|
+ il[i].div.style.display = 'none'
|
|
|
+ }
|
|
|
+ if (this.watch) {
|
|
|
+ this.watch.remove()
|
|
|
+ this.watch = undefined
|
|
|
+ }
|
|
|
+ if (this.timeOut) window.clearTimeout(this.timeOut)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ getSysCommonCode({ pCid: '53400' }).then((res) => {
|
|
|
+ this.deviceTypes = res.result[0].codeList
|
|
|
+ })
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ var view = (this.mapView = this.data.mapView)
|
|
|
+ this.floatDiv = view.TF_floatPanel
|
|
|
+ this.divs = []
|
|
|
+ this.ids = []
|
|
|
+ this.siteIndex = {}
|
|
|
+ view.map.add((this.layer = new view.TF_graphicsLayer()))
|
|
|
+ this.querySite()
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+ this.clearSiteDiv()
|
|
|
+ var view = this.mapView
|
|
|
+ view.map.remove(this.layer)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ addWatch() {
|
|
|
+ var view = this.mapView
|
|
|
+ var divs = this.divs
|
|
|
+ if (this.watch) return
|
|
|
+ var ceil = Math.ceil
|
|
|
+ var change = (e) => {
|
|
|
+ var { xmin, xmax, ymin, ymax } = e
|
|
|
+ var center = e.center
|
|
|
+ var cx = center.x
|
|
|
+ var cy = center.y
|
|
|
+ var xy = view.toScreen(center)
|
|
|
+ var dx = xy.x
|
|
|
+ var dy = xy.y
|
|
|
+ var r = view.resolution
|
|
|
+ for (var i = 0, ii = divs.length; i < ii; i++) {
|
|
|
+ var { x, y, div } = divs[i]
|
|
|
+ var style = div.style
|
|
|
+ if (x < xmin || x > xmax || y < ymin || y > ymax) {
|
|
|
+ if (style.display == 'none') continue
|
|
|
+ else style.display = 'none'
|
|
|
+ } else {
|
|
|
+ if (style.display) style.display = ''
|
|
|
+ style.left = ceil(dx - (cx - x) / r) + 'px'
|
|
|
+ style.top = ceil(dy + (cy - y) / r) + 'px'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.watch = view.watch('extent', change)
|
|
|
+ change(view.extent)
|
|
|
+ },
|
|
|
+ querySite() {
|
|
|
+ var pages = this.$refs.pagination
|
|
|
+ const data = { name: this.querySiteName }
|
|
|
+ this.tableLoading = true
|
|
|
+ if (this.deviceType != '') { Object.assign(data, { deviceType: this.deviceType }) }
|
|
|
+ request({
|
|
|
+ url: '/tofly-scada/scada/app/data',
|
|
|
+ method: 'post',
|
|
|
+ data: data
|
|
|
+ }).then((res) => {
|
|
|
+ var sites = []
|
|
|
+ pages.internalCurrentPage = 1
|
|
|
+ if (res.code == 1) {
|
|
|
+ res = res.result.filter((item) => {
|
|
|
+ return item.allocations
|
|
|
+ })
|
|
|
+ this.resData = res // 保存所有站点数据,用于分页时调用
|
|
|
+ this.total = res.length
|
|
|
+ for (var i = 0, ii = res.length; i < ii; i++) {
|
|
|
+ var site = res[i]
|
|
|
+ sites.push({
|
|
|
+ id: site.id,
|
|
|
+ site: site.name,
|
|
|
+ x: site.longitude,
|
|
|
+ y: site.latitude,
|
|
|
+ isCraft: false
|
|
|
+ }) // site.iscraft == '1' })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.siteData = sites
|
|
|
+ this.listRefersh(res)
|
|
|
+ this.tableLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ listRefersh(res) {
|
|
|
+ this.clearSiteDiv()
|
|
|
+ var pages = this.$refs.pagination
|
|
|
+ var current = pages.internalCurrentPage
|
|
|
+ var size = pages.internalPageSize
|
|
|
+ var sites = this.siteData
|
|
|
+ var firstIndex = (current - 1) * size
|
|
|
+ var showSites = (this.siteDataTable = sites.slice(
|
|
|
+ firstIndex,
|
|
|
+ firstIndex + size
|
|
|
+ ))
|
|
|
+ this.$refs.pageLength.innerHTML =
|
|
|
+ current + '/' + Math.ceil(sites.length / size) + ' 页'
|
|
|
+ this.addSiteDiv(showSites, res)
|
|
|
+ },
|
|
|
+ addSiteDiv(sites, res) {
|
|
|
+ var view = this.mapView
|
|
|
+ var layer = this.layer
|
|
|
+
|
|
|
+ var Graphic = view.TF_graphic
|
|
|
+ var sp = view.spatialReference
|
|
|
+ var image = pointImg
|
|
|
+ var floatPanel = this.floatDiv
|
|
|
+ var divs = (this.divs = [])
|
|
|
+ var ids = (this.ids = [])
|
|
|
+ var feas = []
|
|
|
+ var index = (this.siteIndex = {})
|
|
|
+ var extent = {
|
|
|
+ xmin: Infinity,
|
|
|
+ ymin: Infinity,
|
|
|
+ xmax: -Infinity,
|
|
|
+ ymax: -Infinity,
|
|
|
+ spatialReference: sp
|
|
|
+ }
|
|
|
+
|
|
|
+ for (var i = 0, ii = sites.length; i < ii; i++) {
|
|
|
+ var ds = sites[i]
|
|
|
+ var div = document.createElement('div')
|
|
|
+ var id = ds.id
|
|
|
+ ids.push(id)
|
|
|
+ if (!ds.x) continue
|
|
|
+ floatPanel.appendChild(div)
|
|
|
+ div.setAttribute('data', id)
|
|
|
+ div.classList.add('floatBox')
|
|
|
+ div.innerHTML =
|
|
|
+ '<div class="widgets-scadaLayer-title"><span>' +
|
|
|
+ ds.site +
|
|
|
+ '</span></div><div class="widgets-scadaLayer-box"></div>'
|
|
|
+ divs.push({ div, x: ds.x, y: ds.y })
|
|
|
+ // 图片路径
|
|
|
+ const deviceTypeImg = modulesFiles('./' + (isError ? deviceConfig[site.deviceType].image_red : deviceConfig[site.deviceType].image))
|
|
|
+
|
|
|
+ feas.push(
|
|
|
+ new Graphic({
|
|
|
+ geometry: { type: 'point', x: ds.x, y: ds.y, spatialReference: sp },
|
|
|
+ symbol: {
|
|
|
+ url: image,
|
|
|
+ width: '37px',
|
|
|
+ height: '40px',
|
|
|
+ yoffset: '7px',
|
|
|
+ xoffset: '6px',
|
|
|
+ type: 'picture-marker'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ )
|
|
|
+ index[id] = { div, children: [] }
|
|
|
+
|
|
|
+ if (ds.x < extent.xmin) extent.xmin = ds.x
|
|
|
+ if (ds.y < extent.ymin) extent.ymin = ds.y
|
|
|
+ if (ds.x > extent.xmax) extent.xmax = ds.x
|
|
|
+ if (ds.y > extent.ymax) extent.ymax = ds.y
|
|
|
+ }
|
|
|
+ if (sites.length != 0 && extent.xmin != Infinity) {
|
|
|
+ if (sites.length == 1) {
|
|
|
+ view.center = {
|
|
|
+ x: extent.xmin,
|
|
|
+ y: extent.ymin,
|
|
|
+ spatialReference: sp
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ view.extent = extent
|
|
|
+ window.requestAnimationFrame((_) => view.zoom--)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ layer.addMany(feas)
|
|
|
+ this.addWatch()
|
|
|
+ window.requestAnimationFrame((_) => {
|
|
|
+ // request({ url: '/gis/scadaAbout/selectIndex?ids=' + ids.join(','), method: 'get' }).then(res => {
|
|
|
+ // if (res.code == 1) {
|
|
|
+ this.addAttribute(res)
|
|
|
+ // } else {
|
|
|
+ // this.$message.error('获取测站指标失败！' + res.message)
|
|
|
+ // console.log(res)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ clearSiteDiv() {
|
|
|
+ if (this.timeOut) window.clearTimeout(this.timeOut)
|
|
|
+ var div = this.floatDiv
|
|
|
+ for (var i = 0, il = this.divs, ii = il.length; i < ii; i++) {
|
|
|
+ div.removeChild(il[i].div)
|
|
|
+ }
|
|
|
+ if (this.watch) {
|
|
|
+ this.watch.remove()
|
|
|
+ this.watch = undefined
|
|
|
+ }
|
|
|
+ this.layer.removeAll()
|
|
|
+ },
|
|
|
+ addAttribute(res) {
|
|
|
+ var index = this.siteIndex
|
|
|
+ for (var i = 0, ii = res.length; i < ii; i++) {
|
|
|
+ var dr = res[i]
|
|
|
+ if (dr.allocations) {
|
|
|
+ const allocationsAry = dr.allocations.sort(compare('sortNumber'))
|
|
|
+
|
|
|
+ for (const i in allocationsAry) {
|
|
|
+ var t = dr.allocations[i].variableCode
|
|
|
+ if (index.hasOwnProperty(dr.id)) {
|
|
|
+ var di = index[dr.id]
|
|
|
+ var div = document.createElement('div')
|
|
|
+ div.setAttribute('data', t)
|
|
|
+ div.onclick = function(e) {
|
|
|
+ this.getSiteHistroty(e)
|
|
|
+ }.bind(this)
|
|
|
+ div.innerHTML =
|
|
|
+ '<span class="scadaLayer-float-name">' +
|
|
|
+ dr.allocations[i].displayName +
|
|
|
+ '</span><span class="scadaLayer-float-value">' +
|
|
|
+ '-' +
|
|
|
+ '</span><span class="scadaLayer-float-unit">' +
|
|
|
+ dr.allocations[i].unit +
|
|
|
+ '</span><span class="scadaLayer-float-arrow1"></span>'
|
|
|
+ di.div.children[1].appendChild(div)
|
|
|
+ di.children.push(div)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ window.requestAnimationFrame((_) => this.loadRealTimeSiteValue())
|
|
|
+
|
|
|
+ function compare(key) {
|
|
|
+ return function(value1, value2) {
|
|
|
+ var val1 = value1[key]
|
|
|
+ var val2 = value2[key]
|
|
|
+ return val1 - val2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ loadRealTimeSiteValue() {
|
|
|
+ const data = { name: this.querySiteName }
|
|
|
+ if (this.deviceType != '') { Object.assign(data, { deviceType: this.deviceType }) }
|
|
|
+ request({
|
|
|
+ url: '/tofly-scada/scada/app/data',
|
|
|
+ method: 'post',
|
|
|
+ data: data
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ res = res.result.filter((item) => {
|
|
|
+ return item.allocations
|
|
|
+ })
|
|
|
+ setValue(res)
|
|
|
+ } else {
|
|
|
+ this.$message.error('获取测站指标失败！' + res.message)
|
|
|
+ console.log(res)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ var setValue = (res) => {
|
|
|
+ var index = this.siteIndex
|
|
|
+ for (var item in res) {
|
|
|
+ if (!index.hasOwnProperty(res[item].id)) continue
|
|
|
+ var di = index[res[item].id].children
|
|
|
+ var dr = res[item].allocations
|
|
|
+ for (const item2 in dr) {
|
|
|
+ for (var i = 0, ii = di.length; i < ii; i++) {
|
|
|
+ var ddi = di[i]
|
|
|
+ var id = ddi.getAttribute('data')
|
|
|
+ if (dr[item2].variableCode != id) continue
|
|
|
+ var ddr = dr[item2].scada
|
|
|
+ if (!ddr) continue
|
|
|
+ var value = ddr.value
|
|
|
+ ddi.children[1].innerHTML = value == 'null' ? '-' : value
|
|
|
+ ddi.children[3].classList.value =
|
|
|
+ 'scadaLayer-float-arrow' + (ddr.mark || 1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.timeOut = window.setTimeout(
|
|
|
+ (_) => this.loadRealTimeSiteValue(),
|
|
|
+ 1000 * 60 * 1
|
|
|
+ )
|
|
|
+ }
|
|
|
+ },
|
|
|
+ goto(row) {
|
|
|
+ if (row.x) {
|
|
|
+ var mapView = this.mapView
|
|
|
+ mapView.center = {
|
|
|
+ x: row.x,
|
|
|
+ y: row.y,
|
|
|
+ spatialReference: mapView.spatialReference
|
|
|
+ }
|
|
|
+ mapView.zoom = 15
|
|
|
+ } else {
|
|
|
+ this.$message('此测站无坐标信息')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getSiteHistroty(e) {
|
|
|
+ var div = e.currentTarget
|
|
|
+ var stid, zbx
|
|
|
+ if (div) {
|
|
|
+ stid = div.parentElement.parentElement.getAttribute('data')
|
|
|
+ zbx = div.getAttribute('data')
|
|
|
+ } else stid = e.id
|
|
|
+ this.siteVisible = true
|
|
|
+ this.loading = true
|
|
|
+ var date = new Date()
|
|
|
+ var date1 = new Date(date.getTime() - 1000 * 60 * 60 * 24)
|
|
|
+ this.timss = [
|
|
|
+ [date1.getFullYear(), date1.getMonth() + 1, date1.getDate()].join('-') +
|
|
|
+ ' 00:00:00',
|
|
|
+ [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-') +
|
|
|
+ ' 00:00:00'
|
|
|
+ ]
|
|
|
+ request({
|
|
|
+ url: '/tofly-scada/scada/app/data',
|
|
|
+ method: 'post',
|
|
|
+ data: { deviceId: stid }
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ res = res.result[0]
|
|
|
+ this.selectSite = res
|
|
|
+ var index = (this.selectZBXIndex = {})
|
|
|
+ const allocations = res.allocations.sort((a, b) => { return parseInt(a.sortNumber) - parseInt(b.sortNumber) })
|
|
|
+ this.sites = allocations.map((e) => {
|
|
|
+ index[e.variableCode] = [e.displayName, e.unit]
|
|
|
+ return { value: e.variableCode, label: e.displayName }
|
|
|
+ })
|
|
|
+ this.siteType = zbx || this.sites[0].value
|
|
|
+ this.siteTitle = res.name
|
|
|
+ this.chart = Echarts.init(this.$refs.chart)
|
|
|
+ // getZBX()
|
|
|
+ idDone()
|
|
|
+ } else {
|
|
|
+ this.$message.error('获取测站失败！')
|
|
|
+ console.error(res)
|
|
|
+ this.siteVisible = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ var getZBX = () => {
|
|
|
+ var index = (this.selectZBXIndex = {})
|
|
|
+ request({
|
|
|
+ url:
|
|
|
+ '/tofly-scada/scada/page?code=' +
|
|
|
+ this.siteType +
|
|
|
+ '&start=' +
|
|
|
+ this.timss[0] +
|
|
|
+ '&end=' +
|
|
|
+ this.timss[1] +
|
|
|
+ '&size=' +
|
|
|
+ 10000,
|
|
|
+ // '&statisticsType=' + 0,
|
|
|
+ method: 'get'
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ res = res.result.records
|
|
|
+ // this.sites = res.map(e => {
|
|
|
+ // index[e.id] = [e.itnm, e.unit]
|
|
|
+ // return { value: e.id, label: e.itnm }
|
|
|
+ // })
|
|
|
+ // this.siteType = zbx || this.sites[0].value
|
|
|
+ this.chart = Echarts.init(this.$refs.chart)
|
|
|
+ idDone()
|
|
|
+ } else {
|
|
|
+ this.$message.error('获取测站指标失败！')
|
|
|
+ console.error(res)
|
|
|
+ this.siteVisible = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ var done = 0
|
|
|
+ var idDone = () => {
|
|
|
+ if (++done == 1) this.showResult()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getAllData() {
|
|
|
+ var stid = this.selectSite.id
|
|
|
+ var datt = this.selectZBXIndex[this.siteType]
|
|
|
+ var times = this.timss
|
|
|
+ var startDate = times[0].split(' ')[0] + ' 00:00:00'
|
|
|
+ var endDate = times[1].split(' ')[0] + ' 23:59:59'
|
|
|
+ var parm = this.siteType.replace(/\#/g, '%23')
|
|
|
+ request({
|
|
|
+ url:
|
|
|
+ '/tofly-scada/scada/page?code=' +
|
|
|
+ parm +
|
|
|
+ '&start=' +
|
|
|
+ startDate +
|
|
|
+ '&end=' +
|
|
|
+ endDate +
|
|
|
+ '&size=' +
|
|
|
+ 10000,
|
|
|
+ // '&statisticsType=' + 1,
|
|
|
+ method: 'get'
|
|
|
+ }).then((res) => {
|
|
|
+ var chart = this.chart
|
|
|
+ chart.clear()
|
|
|
+ if (res.code == 1) {
|
|
|
+ res = res.result.records
|
|
|
+ // this.total2 = res.length;
|
|
|
+ var dontShow = this.dontShow
|
|
|
+ var dataX = []
|
|
|
+ var dataY = []
|
|
|
+ var max = -Infinity
|
|
|
+ var min = Infinity
|
|
|
+ var Xmax = -Infinity
|
|
|
+ var Xmin = Infinity
|
|
|
+ var d
|
|
|
+ var symbol = 'none'
|
|
|
+ for (var i = 0, ii = res.length; i < ii; i++) {
|
|
|
+ var v = parseFloat(res[i].value)
|
|
|
+ if (dontShow && v == -9999) continue
|
|
|
+ // var x = res[i].scadaTime.split(' ')[0]
|
|
|
+ const x = res[i].scadaTime.substring(5)
|
|
|
+ dataX.push(x)
|
|
|
+ dataY.push(v)
|
|
|
+ // if (v < min) min = v
|
|
|
+ // if (v > max) max = v
|
|
|
+ // if (x < Xmin) Xmin = x
|
|
|
+ // if (x > Xmax) Xmax = x
|
|
|
+ }
|
|
|
+ // if (ii <= 1) symbol = Xmin = Xmax = max = min = undefined
|
|
|
+ // else d = max - min, [max, min] = [max + d * 0.2, min - d * 0.2].map(e => parseFloat(e).toFixed(2))
|
|
|
+ var [type, unit] = datt
|
|
|
+
|
|
|
+ chart.setOption({
|
|
|
+ title: {
|
|
|
+ text: type,
|
|
|
+ left: 'center',
|
|
|
+ subtext: times[0] + '至' + times[1]
|
|
|
+ },
|
|
|
+ color: 'rgb(45, 116, 231)',
|
|
|
+ grid: { left: '50px', right: '50px', bottom: '80px' },
|
|
|
+ // dataZoom: [{ minSpan: 1, type: 'slider', labelFormatter: (i) => {
|
|
|
+ // var date = new Date(i)
|
|
|
+ // var time = [date.getHours(), date.getMinutes()]
|
|
|
+ // if (time[0] < 10) time[0] = '0' + time[0]
|
|
|
+ // if (time[1] < 10) time[1] = '0' + time[1]
|
|
|
+ // return [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-') + '\n' + time.join(':')
|
|
|
+ // } }],
|
|
|
+ toolbox: { feature: { saveAsImage: {}}},
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ formatter(a) {
|
|
|
+ return (
|
|
|
+ '记录时间：' +
|
|
|
+ a[0].axisValue +
|
|
|
+ '<br>' +
|
|
|
+ type +
|
|
|
+ ' ' +
|
|
|
+ a[0].data +
|
|
|
+ ' ' +
|
|
|
+ unit
|
|
|
+ )
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ name: '日期',
|
|
|
+ type: 'category',
|
|
|
+ data: dataX,
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis: [{ name: unit, type: 'value' }],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'line',
|
|
|
+ symbol,
|
|
|
+ smooth: true,
|
|
|
+ data: dataY,
|
|
|
+ markPoint: {
|
|
|
+ data: [
|
|
|
+ { type: 'max', name: 'Max' },
|
|
|
+ { type: 'min', name: 'Min' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ markLine: {
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ type: 'average',
|
|
|
+ name: 'Avg',
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter: '平均值：\n {c}'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$message.error('获取指标历史失败！' + res.message)
|
|
|
+ console.error(res)
|
|
|
+ }
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ showResult() {
|
|
|
+ if (!this.timss) return this.$message.error('请选择时间范围')
|
|
|
+ this.loading = true
|
|
|
+ this.$refs.pagination2.internalCurrentPage = 1
|
|
|
+ this.getAllData()
|
|
|
+ this.siteHistiryQuery = [
|
|
|
+ this.selectZBXIndex[this.siteType][0],
|
|
|
+ this.timss
|
|
|
+ ]
|
|
|
+ this.pagRefersh()
|
|
|
+ },
|
|
|
+ pagRefersh() {
|
|
|
+ this.tableLoading = true
|
|
|
+ var pages = this.$refs.pagination2
|
|
|
+ var [zbx, times] = this.siteHistiryQuery
|
|
|
+ var parm = this.siteType.replace(/\#/g, '%23')
|
|
|
+ request({
|
|
|
+ url:
|
|
|
+ '/tofly-scada/scada/page?code=' +
|
|
|
+ parm +
|
|
|
+ '&start=' +
|
|
|
+ times[0] +
|
|
|
+ '&end=' +
|
|
|
+ times[1] +
|
|
|
+ // '&statisticsType=' + 1 +
|
|
|
+ '¤t=' +
|
|
|
+ pages.internalCurrentPage +
|
|
|
+ '&size=' +
|
|
|
+ pages.internalPageSize,
|
|
|
+ method: 'get'
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ res = res.result
|
|
|
+ this.siteHistoryDataTable = res.records
|
|
|
+ this.$refs.pageLength2.innerHTML =
|
|
|
+ (pages.internalCurrentPage || 1) +
|
|
|
+ '/' +
|
|
|
+ Math.ceil(res.total / pages.internalPageSize) +
|
|
|
+ ' 页'
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.message)
|
|
|
+ this.siteHistoryDataTable = []
|
|
|
+ this.$refs.pageLength2.innerHTML = '1/1 页'
|
|
|
+ }
|
|
|
+ this.total2 = res.total
|
|
|
+ this.tableLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ watchCraft(row) {
|
|
|
+ var config = craftConfig[row.id]
|
|
|
+ if (config) {
|
|
|
+ this.craftVisible = true
|
|
|
+ var image = new Image()
|
|
|
+ var modulesFiles = require.context('./images', true, /\.png$/)
|
|
|
+ image.src = modulesFiles('./' + config.craftImage)
|
|
|
+ image.onload = () => {
|
|
|
+ var craft = TF_craft({
|
|
|
+ div: this.$refs.craft,
|
|
|
+ image: image,
|
|
|
+ config: config.config,
|
|
|
+ id: row.id
|
|
|
+ })
|
|
|
+ this.craftRealTime(row.id, craft.index)
|
|
|
+ craft.divs.map((e) => (e.onclick = this.getSiteHistroty))
|
|
|
+ }
|
|
|
+ } else this.$message.error('工艺图未配置')
|
|
|
+ },
|
|
|
+ craftRealTime(id, index) {
|
|
|
+ request({
|
|
|
+ url: '/gis/customDisplay/getSiteInfos?stids=' + id,
|
|
|
+ method: 'post'
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code == 1 && (res = res.result[id])) {
|
|
|
+ for (var item in res) {
|
|
|
+ if (!index.hasOwnProperty(item)) continue
|
|
|
+ index[item].innerHTML = res[item].realVal
|
|
|
+ }
|
|
|
+ this.craftTimeOut = window.setTimeout(() => {
|
|
|
+ this.craftRealTime(id, index)
|
|
|
+ }, 1000 * 60 * 1)
|
|
|
+ } else {
|
|
|
+ this.$message.error('获取测站指标失败！' + res.message)
|
|
|
+ console.log(res)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ craftClose() {
|
|
|
+ if (this.craftTimeOut) window.clearTimeout(this.craftTimeOut)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
zjz
