1015 lines
37 KiB
Vue
1015 lines
37 KiB
Vue
<template>
|
||
<div class="project-excavation" @click="clickOutside">
|
||
<el-row>
|
||
<el-col :span="6">
|
||
<module-one-2-1 label="监测概况">
|
||
<div class="analyse-equipment" style="position: absolute; top: 10px; left: 325px">
|
||
深基坑监测
|
||
</div>
|
||
<div class="czz-max">
|
||
<div class="czz-number">
|
||
<div class="czz-number-content">
|
||
<div class="czz-number-img czz-number-img-blue">
|
||
<svg class="my-svg-icon-blue" style="
|
||
width: 1em;
|
||
height: 1em;
|
||
vertical-align: middle;
|
||
fill: currentColor;
|
||
overflow: hidden;
|
||
" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3815">
|
||
<path
|
||
d="M96 334.4A48 48 0 0 0 144 288V144H288a48 48 0 0 0 0-96H96A48 48 0 0 0 48 96v192A48 48 0 0 0 96 334.4zM288 880H144V768a48 48 0 0 0-96 0v160A48 48 0 0 0 96 976h192a48 48 0 0 0 0-96zM928 687.04A48 48 0 0 0 880 736v144H736a48 48 0 0 0 0 96h192a48 48 0 0 0 48-48v-192a48 48 0 0 0-48-48.96zM928 48h-194.56a48 48 0 0 0 0 96h146.56V288a48 48 0 0 0 96 0V96A48 48 0 0 0 928 48zM522.88 194.88c-155.2 0-281.28 136-281.28 302.72 0 156.16 134.08 282.88 206.08 352 9.28 8.64 17.6 16.32 24.32 23.36a72.64 72.64 0 0 0 50.88 21.12 71.68 71.68 0 0 0 50.56-21.12c6.72-7.04 15.04-14.72 24.32-23.36 72-68.16 206.4-194.88 206.4-352 0-166.72-126.4-302.72-281.28-302.72zM544 790.4c-7.36 7.04-14.08 13.12-19.84 19.2l-20.16-19.2c-67.84-64-181.12-171.2-181.12-292.8s90.24-224 201.28-224 201.28 99.84 201.28 224S610.56 726.4 544 790.4zM529.6 370.88a123.84 123.84 0 1 0 123.84 123.84 123.84 123.84 0 0 0-123.84-123.84z m0 167.68a43.84 43.84 0 1 1 43.84-43.84 43.52 43.52 0 0 1-43.84 43.84z"
|
||
p-id="3816"></path>
|
||
</svg>
|
||
</div>
|
||
<div class="survey_content_number">
|
||
<p>设备总数</p>
|
||
<div class="survey_content_value">
|
||
<span v-html="monTotal"></span> 个
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="czz-number-content">
|
||
<div class="czz-number-img czz-number-img-green">
|
||
<svg class="my-svg-icon-green" style="
|
||
width: 1em;
|
||
height: 1em;
|
||
vertical-align: middle;
|
||
fill: currentColor;
|
||
overflow: hidden;
|
||
" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5561">
|
||
<path
|
||
d="M636.062286 948.357007l-248.319027-0.77782-190.565895-458.913786h629.645272l-190.76035 459.691606z"
|
||
fill="#0C42B2" opacity=".8" p-id="5562"></path>
|
||
<path
|
||
d="M512 661.146981C329.01785 661.146981 191.149259 531.639954 191.149259 359.741739 191.149259 178.509685 341.07406 19.445499 512 19.445499S832.850741 178.509685 832.850741 359.741739C832.850741 531.639954 694.98215 661.146981 512 661.146981z"
|
||
fill="#1F3C78" p-id="5563"></path>
|
||
<path
|
||
d="M512 38.890999C672.619825 38.890999 813.405241 188.815799 813.405241 359.741739 813.405241 520.55602 683.898215 641.701481 512 641.701481S210.594759 520.55602 210.594759 359.741739C210.594759 188.815799 351.380175 38.890999 512 38.890999m0-38.890999C324.156476 0 171.70376 171.898215 171.70376 359.741739S324.156476 680.59248 512 680.59248 852.29624 547.585264 852.29624 359.741739 699.843524 0 512 0z"
|
||
fill="#3D79F1" p-id="5564"></path>
|
||
<path
|
||
d="M396.299278 934.939613a115.700722 79.337638 0 1 0 231.401444 0 115.700722 79.337638 0 1 0-231.401444 0Z"
|
||
fill="#0C41AD" p-id="5565"></path>
|
||
</svg>
|
||
</div>
|
||
<div class="survey_content_number">
|
||
<p>监测数据条数</p>
|
||
<div class="survey_content_value survey_content_value_color_green">
|
||
<span v-html="onlineDevTotal"></span> 个
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<classify-bar :data="classifyBarData" :height="200"></classify-bar>
|
||
<div class="analyse-title">
|
||
<div class="analyse-text">报警数据</div>
|
||
</div>
|
||
<el-row style="margin-top: 12px">
|
||
<el-col :span="24">
|
||
<div class="analyse-number-max" id="afootOverflowType" @mouseout="listMinMouseoutType"
|
||
@mouseover="listMinMouseoverType">
|
||
<div class="warn-item" v-for="(item, idx) in warningType" :key="idx">
|
||
<div>
|
||
<span class="sp-label">告警源</span>
|
||
<span class="sp-data1">{{item.alarmSource}}</span>
|
||
<span class="sp-data2">{{ item.variety }}</span>
|
||
</div>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
|
||
<span class="sp-label">等级</span>
|
||
<span class="sp-data" :class="'sp-level-'+item.level">{{getWarnLevel(item.level) }}</span>
|
||
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<span class="sp-label">产生次数</span>
|
||
<span class="sp-data">{{item.numbers }}</span>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<span class="sp-label">产生时间</span>
|
||
<span class="sp-data">{{item.gmtAlarmStart }}</span>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<span class="sp-label">更新时间</span>
|
||
<span class="sp-data">{{item.gmtModified }}</span>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</module-one-2-1>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<module-one-2-2 label="点位图" style="position: relative">
|
||
<div class="sjk-icon-max" style="height: calc(100% - 80px)">
|
||
<div class="sjk-img-min" :style="{ background: urlImgBgd }"></div>
|
||
|
||
<div class="sjk-icon-spot-list">
|
||
<span class="icon-img" :style="{ top: item.top + 'px', left: item.left + 'px' }" v-for="(item, idx) in pointElements" :key="idx" >
|
||
<el-popover placement="top-start" popper-class="pit-spot-node-pop" trigger="hover">
|
||
<div class="spot-info">
|
||
<div class="pt-type">位移</div>
|
||
<div class="pt-data">
|
||
<span class="pt-data-type">X: </span>
|
||
<span class="pt-data-val">{{ item.displace?item.displace.toFixed(3):"-" }}</span>
|
||
<span class="pt-data-unit">mm</span>
|
||
</div>
|
||
<div class="pt-data">
|
||
<span class="pt-data-type">Y: </span>
|
||
<span class="pt-data-val">{{ item.displace2?item.displace2.toFixed(3):"-" }}</span>
|
||
<span class="pt-data-unit">mm</span>
|
||
</div>
|
||
</div>
|
||
<span slot="reference" style="cursor: pointer"><img :src="getPtImg(item)" />
|
||
<span class="spot-text">{{ item.spName }}</span> </span>
|
||
</el-popover>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="sjk-icon-legend" style="left: 11px; bottom: 11px; width: calc(100% - 22px)">
|
||
<div class="sjk-icon-legend-color">
|
||
<div class="sjk-icon-legend-color-list">
|
||
<div class="sjk-icon-legend-color-list-box box-green"></div>
|
||
<div class="sjk-icon-legend-color-list-text">在线</div>
|
||
</div>
|
||
<div class="sjk-icon-legend-color-list">
|
||
<div class="sjk-icon-legend-color-list-box box-grey"></div>
|
||
<div class="sjk-icon-legend-color-list-text">离线</div>
|
||
</div>
|
||
</div>
|
||
<div class="sjk-icon-legend-right">
|
||
<div :class="item.class" v-for="(item, idx) in legendArrData" @click="legendScreen(item.type)" :key="idx">
|
||
<img :src="item.url" />
|
||
<span v-cloak>{{ item.text }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</module-one-2-2>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<module-one-2-1 label="监测时长">
|
||
<div style="padding: 4px">
|
||
<div class="mon-time-row1">
|
||
<img src="images/security1.gif" class="time-img" />
|
||
<div class="time-info">
|
||
<div style="color: #cbdaff; font-size: 16px">监测时长(天)</div>
|
||
<div style="color: #5bf8b5; font-size: 24px; font-weight: bold">
|
||
{{ monitDays }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="analyse_title_blue analyse-title">
|
||
<div class="analyse-text">监测点</div>
|
||
</div>
|
||
</div>
|
||
<div class="sjk-chart-line-title scroll mon-points" v-if="pointElements && pointElements.length>0">
|
||
<div v-for="(it, idx) in pointElements" :key="idx" :class="(selPoint?.spId || 0) == it.spId ? 'active' : ''"
|
||
class="title-item" @click="selPoint = it">
|
||
{{ it.spName }}
|
||
</div>
|
||
</div>
|
||
<div style="padding: 10px" class="mon-point-info" v-if="pointElements && pointElements.length>0">
|
||
<div class="mon-title">监测点数据</div>
|
||
<div v-if="selPoint" class="pt-item-line">
|
||
<div class="glr-title mon-point-title" style="margin-top: 10px">
|
||
{{ selPoint.spName }}
|
||
</div>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<div class="pt-label">X方向位移</div>
|
||
<div>
|
||
<span class="pt-val">{{selPoint.displace?selPoint.displace.toFixed(3):"-" }}</span>
|
||
<span class="pt-unit">mm</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="pt-label">Y方向位移</div>
|
||
<div>
|
||
<span class="pt-val">{{selPoint.displace2?selPoint.displace2.toFixed(3):"-" }}</span>
|
||
<span class="pt-unit">mm</span></div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<div class="pt-label">X方向累计变化量</div>
|
||
<div>
|
||
<span class="pt-val">{{selPoint.totalize?selPoint.totalize.toFixed(3):"-" }}</span>
|
||
<span class="pt-unit">mm</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="pt-label">Y方向累计变化量</div>
|
||
<div>
|
||
<span class="pt-val">{{selPoint.totalize2?selPoint.totalize2.toFixed(3):"-" }}</span>
|
||
<span class="pt-unit">mm</span>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<div class="pt-label">X方向单次变化量</div>
|
||
<div>
|
||
<span class="pt-val">{{selPoint.variation?selPoint.variation.toFixed(3):"-" }}</span>
|
||
<span class="pt-unit">mm</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="pt-label">Y方向单次变化量</div>
|
||
<div>
|
||
<span class="pt-val">{{selPoint.variation2? selPoint.variation.toFixed(3):"-"}}</span>
|
||
<span class="pt-unit">mm</span>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<div class="pt-label">X方向变化速率</div>
|
||
<div>
|
||
<span class="pt-val">{{selPoint.changeRate?selPoint.changeRate.toFixed(3):"-" }}</span>
|
||
<span class="pt-unit">mm/d</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="pt-label">Y方向变化速率</div>
|
||
<div>
|
||
<span class="pt-val">{{selPoint.changeRate2?selPoint.changeRate2.toFixed(3):"-" }}</span>
|
||
<span class="pt-unit">mm</span>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div v-else class="div-no-data" style="padding-top: 100px">
|
||
<img src="images/nodata.png" style="width: 120px" />
|
||
<div style="text-align: center; font-size: 12px; color: #888">
|
||
暂无数据
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</module-one-2-1>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<module-one-1-2 label="基坑变化趋势" style="position: relative">
|
||
<div style="position: absolute; right: 0px; top: 4px">
|
||
<el-date-picker class="bg-date-picker" v-model="selDate" type="daterange" popper-class="bg-date-picker-pop"
|
||
:editable="false" @change="dtChange" :picker-options="pickerOptions" range-separator="至"
|
||
start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
||
</div>
|
||
|
||
<div class="sjk-chart-line" v-loading="loading" element-loading-text="数据加载中"
|
||
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
|
||
<div class="sjk-chart-line-title chart-nav">
|
||
<div :class="btnNav == 0 ? 'active' : ''" @click="onClickPoint(0)">
|
||
X位移
|
||
</div>
|
||
<div :class="btnNav == 1 ? 'active' : ''" @click="onClickPoint(1)">
|
||
X累计变化量
|
||
</div>
|
||
<div :class="btnNav == 2 ? 'active' : ''" @click="onClickPoint(2)">
|
||
X单次变化量
|
||
</div>
|
||
<div :class="btnNav == 3 ? 'active' : ''" @click="onClickPoint(3)">
|
||
X变化速率
|
||
</div>
|
||
<div :class="btnNav == 4 ? 'active' : ''" @click="onClickPoint(4)">
|
||
Y位移
|
||
</div>
|
||
<div :class="btnNav == 5 ? 'active' : ''" @click="onClickPoint(5)">
|
||
Y累计变化量
|
||
</div>
|
||
<div :class="btnNav == 6 ? 'active' : ''" @click="onClickPoint(6)">
|
||
Y单次变化量
|
||
</div>
|
||
<div :class="btnNav == 7 ? 'active' : ''" @click="onClickPoint(7)">
|
||
Y变化速率
|
||
</div>
|
||
</div>
|
||
<div class="trend-chart-max" :key="charElIdx">
|
||
<trend-line-chart :height="220" :chartdata="CollWeiyiPointData" :data="CollWeiyiPointData.data"
|
||
:fn="setChartOpt"></trend-line-chart>
|
||
</div>
|
||
</div>
|
||
</module-one-1-2>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<module-one-1-2 label="测点统计">
|
||
<div class="pt-list scroll">
|
||
<div v-for="(it,idx) in pointElements" :key="idx" class="pt-item">
|
||
<div class="pt-icon"><i class="el-icon-tickets"></i></div>
|
||
<div class="pt-name">{{ it.spName }}</div>
|
||
<div class="pt-deptname">{{ it. deptName}}</div>
|
||
<div class="pt-type">位移</div>
|
||
<div class="pt-data">
|
||
<span class="pt-data-type">X: </span>
|
||
<span class="pt-data-val">{{ it.displace?it.displace.toFixed(3):"-" }}</span>
|
||
<span class="pt-data-unit">mm</span>
|
||
</div>
|
||
<div class="pt-data">
|
||
<span class="pt-data-type">Y: </span>
|
||
<span class="pt-data-val">{{ it.displace2?it.displace2.toFixed(3):"-" }}</span>
|
||
<span class="pt-data-unit">mm</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</module-one-1-2>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import "@/components/module/module-one-2-2";
|
||
import "@/components/module/module-one-1-2";
|
||
import "@/components/module/module-one-2-1";
|
||
import "@/components/classify-bar";
|
||
import "@/components/trend-line-chart";
|
||
import debounce from "lodash.debounce";
|
||
import enginChart from "../engin/enginChart.vue";
|
||
export default {
|
||
//基坑
|
||
name: "JhbigscreenExcavation",
|
||
components: { enginChart },
|
||
data() {
|
||
return {
|
||
projectInfo: {},
|
||
dept: {},
|
||
prjs: [],
|
||
monitDays:0,
|
||
selPoint: null,
|
||
monTotal: 0,
|
||
onlineDevTotal: 0,
|
||
classifyBarData: [],
|
||
todayTotal: 10,
|
||
weekTotal: 99,
|
||
warningType: [],
|
||
warningTypeInterval: undefined,
|
||
warningTypeIndex: 0,
|
||
urlImgBgd: "",
|
||
forBitMappedImageData: [],
|
||
forBitMappedImageDataPJ: [],
|
||
legendArrData: [],
|
||
popupShow: false,
|
||
popupPosition: {},
|
||
pointPositionName: "",
|
||
popupArrData: [],
|
||
offLine: true,
|
||
loading: false,
|
||
btnNav: 0,
|
||
CollWeiyiPointData: {
|
||
dataX: [],
|
||
legend: [],
|
||
data: [],
|
||
},
|
||
charElIdx: 0,
|
||
pointElements:[],
|
||
pointData: [],
|
||
selDate: [],
|
||
pickerOptions: {
|
||
shortcuts: [
|
||
{
|
||
text: "最近一周",
|
||
onClick(picker) {
|
||
const end = new Date();
|
||
const start = new Date();
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||
picker.$emit("pick", [start, end]);
|
||
},
|
||
},
|
||
{
|
||
text: "最近一个月",
|
||
onClick(picker) {
|
||
const end = new Date();
|
||
const start = new Date();
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||
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]);
|
||
},
|
||
},
|
||
],
|
||
},
|
||
};
|
||
},
|
||
|
||
mounted() {
|
||
let dt1 = this.$dt(+new Date() - 7 * 24 * 3600 * 1000);
|
||
let dt2 = this.$dt(new Date());
|
||
this.selDate = [dt1, dt2];
|
||
|
||
|
||
this.urlImgBgd = "url(images/data/excavation-01.jpg) 100% 100%";
|
||
this.forBitMappedImageData = JSON.parse(
|
||
'[{"sensorTypeName":"位移(WY)","pointName":"位移26","drawId":"7039969819126403072","sensorInfoId":"7042034685840703494","url":"","xpixels":1492.266916,"sortValue":1,"createData":"2023-03-20 20:06:19","top":86.56728596535274,"fileSize":"2276*1280","left":607.8571428571429,"ypixels":117.403425,"sensorType":"CollWeiyiPoint","statusTime":"2024-03-09 22:40:04","otherProjectId":"1634117283072266241","isBase":"0","sensorSmallType":"24","drawName":"御井路公租房.jpg","status":"0","state":true,"imgUrl":"images/place_chenjiang_green.png"},{"sensorTypeName":"沉降(CJ)","pointName":"沉降53","drawId":"7039969819126403072","sensorInfoId":"7039970088807718912","url":"","xpixels":423.054061,"sortValue":1,"createData":"2023-03-20 20:06:19","top":152.63871453678132,"fileSize":"2276*1280","left":211.42857142857142,"ypixels":336.059302,"sensorType":"CollWeiyiPoint","statusTime":"2024-03-09 22:40:04","otherProjectId":"1634117283072266241","isBase":"1","sensorSmallType":"80","drawName":"御井路公租房.jpg","status":"0","state":true,"imgUrl":"images/place_chenjiang_blue.png"},{"sensorTypeName":"倾斜(QX)","pointName":"倾斜44","drawId":"7039969819126403072","sensorInfoId":"7039970088841273344","url":"","xpixels":387.71104,"sortValue":1,"createData":"2023-03-13 11:22:53","top":112.99585739392417,"fileSize":"2276*1280","left":317.1428571428571,"ypixels":766.483595,"sensorType":"CollQingxiePoint","statusTime":"2024-03-09 22:40:04","otherProjectId":"1634117283072266241","isBase":"0","sensorSmallType":"33","drawName":"御井路公租房.jpg","status":"0","state":true,"imgUrl":"images/place_qingxie_green.png"}]'
|
||
);
|
||
this.forBitMappedImageDataPJ = JSON.parse(
|
||
'[{"top":205.49585739392415,"left":224.64285714285714,"fileSize":"2276*1280","pointName":"倾斜45","sensorType":"CollQingxiePoint","id":1831,"otherProjectId":"1634117283072266241","project_name":"XXXXX项目EPC总承包项目","sensorInfoId":"7052577632253038592","url":"","status":"2","state":true,"imgUrl":"images/pj_grey.png"},{"top":271.56728596535277,"left":179.71428571428572,"fileSize":"2276*1280","pointName":"倾斜46","sensorType":"CollQingxiePoint","id":1831,"otherProjectId":"1634117283072266241","project_name":"XXXXX项目EPC总承包项目","sensorInfoId":"7052577632253038596","url":"","status":"2","state":true,"imgUrl":"images/pj_grey.png"},{"top":337.6387145367813,"left":171.78571428571428,"fileSize":"2276*1280","pointName":"倾斜47","sensorType":"CollQingxiePoint","id":1831,"otherProjectId":"1634117283072266241","project_name":"XXXXX项目EPC总承包项目","sensorInfoId":"7052577632253038600","url":"","status":"2","state":true,"imgUrl":"images/pj_grey.png"},{"top":245.13871453678132,"left":211.42857142857142,"fileSize":"2276*1280","pointName":"倾斜48","sensorType":"CollQingxiePoint","id":1831,"otherProjectId":"1634117283072266241","project_name":"XXXXX项目EPC总承包项目","sensorInfoId":"7052896778106015744","url":"","status":"2","state":true,"imgUrl":"images/pj_grey.png"},{"top":311.2101431082099,"left":211.42857142857142,"fileSize":"2276*1280","pointName":"倾斜49","sensorType":"CollQingxiePoint","id":1831,"otherProjectId":"1634117283072266241","project_name":"XXXXX项目EPC总承包项目","sensorInfoId":"7052896778106015748","url":"","status":"2","state":true,"imgUrl":"images/pj_grey.png"},{"top":350.85300025106704,"left":185,"fileSize":"2276*1280","pointName":"倾斜50","sensorType":"CollQingxiePoint","id":1831,"otherProjectId":"1634117283072266241","project_name":"XXXXX项目EPC总承包项目","sensorInfoId":"7052896778106015752","url":"","status":"2","state":true,"imgUrl":"images/pj_grey.png"}]'
|
||
);
|
||
this.legendArrData = JSON.parse(
|
||
'[{"type":"CollWeiyiPoint","class":"sjk-icon-legend-right-icon","url":"images/legend_weiyi.png","text":"位移"}]'
|
||
);
|
||
|
||
this.pointData = "1,2,3,4,5,6,7,8".split(",").map((d) => {
|
||
//,9,10,11,12,13,14,15,16,17
|
||
return {
|
||
id: d,
|
||
name: "监测点0" + (d < 10 ? "0" + d : "" + d),
|
||
pN: "-14",
|
||
pE: "-0.4",
|
||
pZ: "-0.2",
|
||
sedD: "-0.2",
|
||
sedM: "12",
|
||
sedS: "A",
|
||
disD: "1.5",
|
||
disM: "12",
|
||
disS: "A",
|
||
ratD: "0.23",
|
||
ratM: 12,
|
||
ratS: "D",
|
||
};
|
||
});
|
||
this.selPoint = this.pointData[0];
|
||
this.init();
|
||
this.$bus.$on(
|
||
"projectChange",
|
||
debounce((res) => {
|
||
this.projectInfo = res;
|
||
this.dept = this.$root.dept || this.dep || {};
|
||
this.prjs = this.$root.projects || this.prjs || [];
|
||
this.loadData();
|
||
})
|
||
);
|
||
if (this.$root.hasInitHeader) {
|
||
this.initMe();
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
getPtImg(it){
|
||
return it.isOnline? "images/place_weiyi_green.png": "images/place_weiyi_grey.png";
|
||
},
|
||
getWarnLevel(lvl){
|
||
return ["正常","超预警值","超报警值","超控制值"][lvl];
|
||
},
|
||
setChartOpt(opt) {//重写图表
|
||
if (!this.CollWeiyiPointData.ok) {
|
||
return opt;
|
||
}
|
||
let objs = this.CollWeiyiPointData.obj;
|
||
let titles = ['X方向位移(mm)', 'X方向累计变化量（mm）', 'X方向单次变化量（mm）', 'X方向变化速率（mm/d）', 'Y方向位移（mm）', 'Y方向累计变化量（mm）', 'Y方向单次变化量（mm）', 'Y方向变化速率（mm/d）'];
|
||
let field = ['displace', 'totalize', 'variation', 'changeRate', 'displace2', 'totalize2', 'variation2', 'changeRate2'];
|
||
let o = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: "#57617B",
|
||
},
|
||
},
|
||
},
|
||
legend: {
|
||
textStyle: {
|
||
color: "#c3dbfd",
|
||
},
|
||
data: objs.map(it => it[0].spName),
|
||
type: "scroll",
|
||
animation: false,
|
||
left: "30",
|
||
right: "20",
|
||
selected: [],
|
||
},
|
||
grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
|
||
toolbox: { top: "6%", feature: { saveAsImage: {} } },
|
||
dataZoom: [{ type: "slider", show: true }, { type: "inside" }],
|
||
xAxis: {
|
||
type: "time",
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "#c5d9fc",
|
||
},
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#25597e",
|
||
type: "dashed",
|
||
},
|
||
},
|
||
},
|
||
yAxis: {
|
||
name: titles[this.btnNav],
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: 14,
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#c5d9fc",
|
||
},
|
||
},
|
||
},
|
||
series: objs.map(it => {
|
||
return {
|
||
name: it[0].spName,
|
||
type: "line",
|
||
sampling: "max",
|
||
showSymbol: false,
|
||
animation: false,
|
||
data: it.map(item => {
|
||
let tmps = [];
|
||
tmps.push(item.collectTime)
|
||
tmps.push("" + item[field[this.btnNav]])
|
||
return tmps;
|
||
})
|
||
}
|
||
})
|
||
};
|
||
return o;
|
||
},
|
||
initMe() {
|
||
this.projectInfo = this.$root.project || {};
|
||
this.dept = this.$root.dept || {};
|
||
this.prjs = this.$root.projects || [];
|
||
this.loadData();
|
||
},
|
||
dtChange() {//加载图表数据
|
||
let postData = {
|
||
projectId: this.projectInfo.id,
|
||
createTime: this.$dt(this.selDate[0]).format("YYYY-MM-DD HH:mm:ss"),
|
||
updateTime: this.$dt(this.selDate[1]).format("YYYY-MM-DD HH:mm:ss"),
|
||
dataType: "horizontal",
|
||
};
|
||
this.$api.pitmonit.selectByDate(postData).then((d) => {
|
||
let obj = {};
|
||
(d.data || []).forEach(it => {
|
||
let name = it.spName;
|
||
if (obj[name]) {
|
||
obj[name].push(it);
|
||
} else {
|
||
obj[name] = [it];
|
||
}
|
||
});
|
||
let tmps = [];
|
||
for (let k in obj) {
|
||
tmps.push(obj[k]);
|
||
}
|
||
this.CollWeiyiPointData = {
|
||
dataX: [],
|
||
legend: [],
|
||
data: [],
|
||
obj: tmps,
|
||
ok: true
|
||
};
|
||
this.charElIdx++;
|
||
});
|
||
},
|
||
loadData() {
|
||
this.dtChange();
|
||
let ajaxs = [
|
||
this.$api.pitmonit.totalCount(this.projectInfo.id),
|
||
this.$api.pitmonit.getLastDataForElement(this.projectInfo.id),
|
||
this.$api.pitmonit.monitDays(this.projectInfo.id),
|
||
this.$api.pitmonit.alarmList(this.projectInfo.id),
|
||
];
|
||
this.$api.http.all(ajaxs).then((res) => {
|
||
this.monTotal = res[0].data.dev || 0;
|
||
this.onlineDevTotal = res[0].data.data || 0;
|
||
const spDate = (dt) => {
|
||
let dt1 = this.$dt(this.$dt(new Date()).format("YYYY-MM-DD")).$d;
|
||
let dt2 = this.$dt(dt).$d;
|
||
return ((dt1 - dt2) * 1.0) / 1000 / 3600 / 24;
|
||
};
|
||
let pts = res[1].data.filter((d) => d.dataType == "horizontal").map(d=>{
|
||
d.isOnline=d.collectTime && spDate(d.collectTime) < 3;
|
||
d.pt=JSON.parse(d.remark||"{}");
|
||
d.top=d.pt.x||0;
|
||
d.left=d.pt.y||0;
|
||
return d;
|
||
});
|
||
this.pointElements=pts;
|
||
if(pts.length>0){
|
||
this.selPoint=pts[0];
|
||
}
|
||
let total = pts.length;
|
||
let onLine = pts.filter(d=>d.isOnline).length;
|
||
this.classifyBarData = [
|
||
{
|
||
name: "水平位移",
|
||
total: total,
|
||
yesMonitor: onLine,
|
||
notMonitor: total - onLine,
|
||
unit: "个",
|
||
},
|
||
];
|
||
this.monitDays=res[2].data||0;
|
||
this.showAlarmList(res[3].data||[]);
|
||
});
|
||
},
|
||
showAlarmList(datas){
|
||
this.warningType=datas;
|
||
},
|
||
init() {
|
||
this.warningTypeInterval = setInterval(this.automaticRollType, 5000);
|
||
},
|
||
listMinMouseoverType() {
|
||
clearInterval(this.warningTypeInterval);
|
||
},
|
||
listMinMouseoutType() {
|
||
this.warningTypeInterval = setInterval(this.automaticRollType, 5000);
|
||
},
|
||
automaticRollType() {
|
||
var height = $(".glr-login-number-max").innerHeight();
|
||
if (
|
||
$("#afootOverflowType").scrollTop() ==
|
||
height * this.warningType.length - $("#afootOverflowType").innerHeight()
|
||
) {
|
||
this.warningTypeIndex = 0;
|
||
} else {
|
||
this.warningTypeIndex = this.warningTypeIndex + 1;
|
||
}
|
||
$("#afootOverflowType").animate({
|
||
scrollTop: height * this.warningTypeIndex + "px",
|
||
});
|
||
|
||
if (
|
||
$("#afootOverflowTypePJ").scrollTop() ==
|
||
height * this.warningType.length -
|
||
$("#afootOverflowTypePJ").innerHeight()
|
||
) {
|
||
this.warningTypeIndex = 0;
|
||
} else {
|
||
this.warningTypeIndex = this.warningTypeIndex + 1;
|
||
}
|
||
$("#afootOverflowTypePJ").animate({
|
||
scrollTop: height * this.warningTypeIndex + "px",
|
||
});
|
||
},
|
||
legendScreen(type) {
|
||
var data = this.forBitMappedImageData;
|
||
data.map((x) => {
|
||
if (x.sensorType == type) {
|
||
if (x.state == true) {
|
||
x.state = false;
|
||
} else {
|
||
x.state = true;
|
||
}
|
||
}
|
||
return x;
|
||
});
|
||
|
||
var legendData = this.legendArrData;
|
||
legendData.map((y) => {
|
||
if (y.type == type) {
|
||
if (y.class == "sjk-icon-legend-right-icon") {
|
||
y.class = "sjk-icon-legend-right-icon sjk-legend-filter";
|
||
} else {
|
||
y.class = "sjk-icon-legend-right-icon";
|
||
}
|
||
}
|
||
return y;
|
||
});
|
||
this.forBitMappedImageData = data;
|
||
this.legendArrData = legendData;
|
||
},
|
||
//点击点位事件
|
||
onClickSpot(type, id, isBase, status, it) {
|
||
this.deviceId = id;
|
||
var posX = 0,
|
||
posY = 0;
|
||
var event = event || window.event;
|
||
if (event.pageX || event.pageY) {
|
||
posX = event.pageX;
|
||
posY = event.pageY;
|
||
} else if (event.clientX || event.clientY) {
|
||
posX =
|
||
event.clientX +
|
||
document.documentElement.scrollLeft +
|
||
document.body.scrollLeft;
|
||
posY =
|
||
event.clientY +
|
||
document.documentElement.scrollTop +
|
||
document.body.scrollTop;
|
||
}
|
||
var position = {};
|
||
|
||
if (type == "CollWeiyiPoint") {
|
||
position = {
|
||
top: posY - 110,
|
||
left: posX + 30,
|
||
};
|
||
} else if (type == "CollQingxiePoint") {
|
||
position = {
|
||
top: posY - 110,
|
||
left: posX + 30,
|
||
};
|
||
}
|
||
this.popupPosition = position;
|
||
if (isBase) {
|
||
this.popupShow = true;
|
||
if (type == "CollWeiyiPoint") {
|
||
this.pointPositionName = `沉降监测-${it.pointName}`;
|
||
}
|
||
if (type == "CollQingxiePoint") {
|
||
this.pointPositionName = `倾斜监测-${it.pointName}`;
|
||
}
|
||
this.popupArrData = [];
|
||
}
|
||
},
|
||
onClickSpotPJ(type, projectId, id, it) {
|
||
this.deviceId = id;
|
||
var posX = 0,
|
||
posY = 0;
|
||
var event = event || window.event;
|
||
if (event.pageX || event.pageY) {
|
||
posX = event.pageX;
|
||
posY = event.pageY;
|
||
} else if (event.clientX || event.clientY) {
|
||
posX =
|
||
event.clientX +
|
||
document.documentElement.scrollLeft +
|
||
document.body.scrollLeft;
|
||
posY =
|
||
event.clientY +
|
||
document.documentElement.scrollTop +
|
||
document.body.scrollTop;
|
||
}
|
||
var position = {};
|
||
|
||
if (type == "CollWeiyiPoint") {
|
||
position = {
|
||
top: posY - 110,
|
||
left: posX + 30,
|
||
};
|
||
} else if (type == "CollQingxiePoint") {
|
||
position = {
|
||
top: posY - 110,
|
||
left: posX + 30,
|
||
};
|
||
}
|
||
|
||
this.pointPositionName = `爬架-倾斜监测-${it.pointName}`;
|
||
this.popupPosition = position;
|
||
this.popupShow = true;
|
||
this.popupArrData = [];
|
||
},
|
||
// 监听点击弹窗以外的区域
|
||
clickOutside(event) {
|
||
const current = document.getElementById("clickPopup");
|
||
if (current) {
|
||
if (!current.contains(event.target)) {
|
||
if (event.target._prevClass != "icon-img") {
|
||
this.popupShow = false;
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
//点击点位类型
|
||
onClickPoint(n) {
|
||
this.btnNav = n;
|
||
this.dtChange();
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less">
|
||
.project-excavation {
|
||
|
||
.my-svg-icon-blue,
|
||
.my-svg-icon-green {
|
||
width: 28px !important;
|
||
height: 28px !important;
|
||
position: relative;
|
||
top: -10px;
|
||
}
|
||
|
||
.my-svg-icon-green * {
|
||
fill: #63f8bc !important;
|
||
}
|
||
|
||
.my-svg-icon-blue * {
|
||
fill: #7c9ce1 !important;
|
||
}
|
||
|
||
.sjk-img-min {
|
||
height: 100%;
|
||
}
|
||
|
||
.mon-time-row1 {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 10px;
|
||
|
||
.time-img {
|
||
height: 120px;
|
||
}
|
||
|
||
.time-info {
|
||
text-align: center;
|
||
line-height: 40px;
|
||
}
|
||
}
|
||
|
||
.sjk-chart-line-title.mon-points {
|
||
display: block;
|
||
max-height: 60px;
|
||
overflow-y: auto;
|
||
|
||
.title-item {
|
||
display: inline-block;
|
||
cursor: pointer;
|
||
font-size: 9px;
|
||
}
|
||
}
|
||
|
||
.sjk-chart-line-title.chart-nav {
|
||
div {
|
||
font-size: 12px;
|
||
padding: 5px 16px;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.mon-point-info {
|
||
.mon-title {
|
||
border-bottom: dotted 1px #918c8c;
|
||
line-height: 24px;
|
||
font-size: 14px;
|
||
font-weight: bold
|
||
}
|
||
|
||
.mon-point-title {
|
||
color: #51b5ff;
|
||
}
|
||
.pt-item-line{
|
||
.el-row{
|
||
margin-top:8px;
|
||
.el-col{
|
||
div{
|
||
text-align: center;
|
||
line-height: 30px;
|
||
}
|
||
.pt-label{
|
||
font-size:16px;
|
||
font-weight: bold;
|
||
color:#B3E5FC;
|
||
}
|
||
.pt-val{
|
||
font-size:20px;
|
||
font-weight: bold;
|
||
color:#03CCE0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
.pt-list{
|
||
width:100%;
|
||
overflow-x: auto;
|
||
display: block;
|
||
white-space: nowrap;
|
||
padding:20px;
|
||
.pt-item{
|
||
width:140px;
|
||
display: inline-block;
|
||
background-color: #042457;
|
||
background: linear-gradient(0deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 98%, rgba(0, 219, 255, 1) 70%);
|
||
border: #042457 solid 1px;
|
||
border-radius: 5px;
|
||
margin-left:20px;
|
||
height: 220px;
|
||
vertical-align: middle;
|
||
padding: 10px;
|
||
text-align: center;
|
||
&:first-child{
|
||
margin-left: 0px;
|
||
}
|
||
line-height: 24px;
|
||
font-size: 12px;
|
||
.pt-icon{
|
||
font-size:30px;
|
||
color:#5bf8b5;
|
||
margin-top:10px;
|
||
}
|
||
.pt-name{
|
||
margin-top:8px;
|
||
font-size:14px;
|
||
font-weight:bold;
|
||
}
|
||
.pt-deptname{
|
||
font-size: 12px;
|
||
white-space: break-spaces;
|
||
padding: 0px 0px;
|
||
line-height: 20px;
|
||
color:#e2e2e369;
|
||
height: 40px;
|
||
}
|
||
.pt-data{
|
||
margin-top:8px;
|
||
.pt-data-type{
|
||
font-size:18px;
|
||
color:#03CCE0;
|
||
}
|
||
.pt-data-val{
|
||
font-size:18px;
|
||
color:#03CCE0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.analyse-number-max{
|
||
height:200px;
|
||
.warn-item{
|
||
font-size:12px;
|
||
color: #51b5ff;
|
||
padding:10px;
|
||
border-bottom: dotted 1px #042457;
|
||
line-height: 22px;
|
||
.sp-label{
|
||
color: #5bf8b5;
|
||
display: inline-block;
|
||
width: 80px;
|
||
text-align: right;
|
||
&::after{
|
||
content: ":";
|
||
display: inline-block;
|
||
padding:0px 2px;
|
||
}
|
||
}
|
||
.sp-data{
|
||
&.sp-level-0{
|
||
color: #FFEBEE;
|
||
}
|
||
&.sp-level-1{
|
||
color: #EF9A9A;
|
||
}
|
||
&.sp-level-2{
|
||
color: #EF5350;
|
||
}
|
||
&.sp-level-3{
|
||
color: #D32F2F;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.sjk-icon-max{
|
||
.icon-img{
|
||
position:absolute;
|
||
cursor: pointer;
|
||
&:hover{
|
||
img{
|
||
width:40px;
|
||
}
|
||
.spot-text{
|
||
left:8px;
|
||
color:#51b5ff;
|
||
}
|
||
}
|
||
img{
|
||
width:30px;
|
||
}
|
||
.spot-text{
|
||
position: absolute;
|
||
font-size:10px;
|
||
font-weight: bold;
|
||
color:#fff;
|
||
text-shadow: 1px 1px 2px #010b2d;
|
||
left:4px;
|
||
top:40px;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
.pit-spot-node-pop{
|
||
.spot-info{
|
||
.pt-data{
|
||
margin-top:8px;
|
||
.pt-data-type{
|
||
font-size:16px;
|
||
color:#03CCE0;
|
||
}
|
||
.pt-data-val{
|
||
font-size:16px;
|
||
color:#03CCE0;
|
||
margin-right:4px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|