sxyanzhu
/
jhbigscreen
4
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity
jhbigscreen/src/pages/safe/excavation.vue

1015 lines
37 KiB
Vue
Raw Normal View History

update code
2024-03-09 01:14:29 +08:00
<template>
update code
2024-03-10 00:34:11 +08:00
<div class="project-excavation" @click="clickOutside">
<el-row>
<el-col :span="6">
<module-one-2-1 label="监测概况">
基坑监测大屏
2024-08-17 13:02:13 +08:00
<div class="analyse-equipment" style="position: absolute; top: 10px; left: 325px">
深基坑监测
</div>
update code
2024-03-10 00:34:11 +08:00
<div class="czz-max">
<div class="czz-number">
<div class="czz-number-content">
<div class="czz-number-img czz-number-img-blue">
基坑监测大屏
2024-08-17 13:02:13 +08:00
<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">
update code
2024-03-10 00:34:11 +08:00
<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">
基坑监测大屏
2024-08-17 13:02:13 +08:00
<p>设备总数</p>
<div class="survey_content_value">
<span v-html="monTotal"></span> 个
</div>
update code
2024-03-10 00:34:11 +08:00
</div>
</div>
<div class="czz-number-content">
<div class="czz-number-img czz-number-img-green">
基坑监测大屏
2024-08-17 13:02:13 +08:00
<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">
update code
2024-03-10 00:34:11 +08:00
<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">
基坑监测大屏
2024-08-17 13:02:13 +08:00
<p>监测数据条数</p>
<div class="survey_content_value survey_content_value_color_green">
<span v-html="onlineDevTotal"></span> 个
</div>
update code
2024-03-10 00:34:11 +08:00
</div>
</div>
</div>
<classify-bar :data="classifyBarData" :height="200"></classify-bar>
<div class="analyse-title">
基坑监测大屏
2024-08-17 13:02:13 +08:00
<div class="analyse-text">报警数据</div>
update code
2024-03-10 00:34:11 +08:00
</div>
基坑监测大屏
2024-08-17 13:02:13 +08:00
<el-row style="margin-top: 12px">
<el-col :span="24">
update code
2024-03-10 00:34:11 +08:00
<div class="analyse-number-max" id="afootOverflowType" @mouseout="listMinMouseoutType"
@mouseover="listMinMouseoverType">
基坑监测大屏
2024-08-17 13:02:13 +08:00
<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>
update code
2024-03-10 00:34:11 +08:00
</div>
基坑监测大屏
2024-08-17 13:02:13 +08:00
<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>
update code
2024-03-10 00:34:11 +08:00
</div>
</div>
</el-col>
</el-row>
</div>
</module-one-2-1>
</el-col>
<el-col :span="12">
基坑监测大屏
2024-08-17 13:02:13 +08:00
<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>
update code
2024-03-10 00:34:11 +08:00
</div>
基坑监测大屏
2024-08-17 13:02:13 +08:00
<div class="sjk-icon-legend" style="left: 11px; bottom: 11px; width: calc(100% - 22px)">
update code
2024-03-10 00:34:11 +08:00
<div class="sjk-icon-legend-color">
<div class="sjk-icon-legend-color-list">
<div class="sjk-icon-legend-color-list-box box-green"></div>
基坑监测大屏
2024-08-17 13:02:13 +08:00
<div class="sjk-icon-legend-color-list-text">在线</div>
</div>
update code
2024-03-10 00:34:11 +08:00
<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">
基坑监测大屏
2024-08-17 13:02:13 +08:00
<div :class="item.class" v-for="(item, idx) in legendArrData" @click="legendScreen(item.type)" :key="idx">
<img :src="item.url" />
update code
2024-03-10 00:34:11 +08:00
<span v-cloak>{{ item.text }}</span>
</div>
</div>
</div>
</module-one-2-2>
</el-col>
<el-col :span="6">
update code
2024-03-10 13:17:17 +08:00
<module-one-2-1 label="监测时长">
基坑监测大屏
2024-08-17 13:02:13 +08:00
<div style="padding: 4px">
update code
2024-03-10 13:17:17 +08:00
<div class="mon-time-row1">
<img src="images/security1.gif" class="time-img" />
<div class="time-info">
基坑监测大屏
2024-08-17 13:02:13 +08:00
<div style="color: #cbdaff; font-size: 16px">监测时长(天)</div>
<div style="color: #5bf8b5; font-size: 24px; font-weight: bold">
{{ monitDays }}
</div>
update code
2024-03-10 13:17:17 +08:00
</div>
</div>
<div class="analyse_title_blue analyse-title">
<div class="analyse-text">监测点</div>
</div>
</div>
基坑监测大屏
2024-08-17 13:02:13 +08:00
<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 }}
update code
2024-03-10 13:17:17 +08:00
</div>
基坑监测大屏
2024-08-17 13:02:13 +08:00
</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 }}
update code
2024-03-10 13:17:17 +08:00
</div>
基坑监测大屏
2024-08-17 13:02:13 +08:00
<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>
update code
2024-03-10 13:17:17 +08:00
</div>
基坑监测大屏
2024-08-17 13:02:13 +08:00
<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>
update code
2024-03-10 13:17:17 +08:00
</div>
</div>
</module-one-2-1>
update code
2024-03-10 00:34:11 +08:00
</el-col>
</el-row>
<el-row>
<el-col :span="12">
基坑监测大屏
2024-08-17 13:02:13 +08:00
<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>
update code
2024-03-10 00:34:11 +08:00
<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)">
基坑监测大屏
2024-08-17 13:02:13 +08:00
<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>
update code
2024-03-10 00:34:11 +08:00
</div>
基坑监测大屏
2024-08-17 13:02:13 +08:00
<div class="trend-chart-max" :key="charElIdx">
<trend-line-chart :height="220" :chartdata="CollWeiyiPointData" :data="CollWeiyiPointData.data"
:fn="setChartOpt"></trend-line-chart>
update code
2024-03-10 00:34:11 +08:00
</div>
</div>
</module-one-1-2>
</el-col>
<el-col :span="12">
基坑监测大屏
2024-08-17 13:02:13 +08:00
<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>
update code
2024-03-10 00:34:11 +08:00
</module-one-1-2>
</el-col>
</el-row>
</div>
</template>
<script>
基坑监测大屏
2024-08-17 13:02:13 +08:00
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";
update code
2024-03-10 00:34:11 +08:00
export default {
//基坑
基坑监测大屏
2024-08-17 13:02:13 +08:00
name: "JhbigscreenExcavation",
update code
2024-03-10 23:37:38 +08:00
components: { enginChart },
update code
2024-03-10 00:34:11 +08:00
data() {
return {
基坑监测大屏
2024-08-17 13:02:13 +08:00
projectInfo: {},
dept: {},
prjs: [],
monitDays:0,
selPoint: null,
monTotal: 0,
onlineDevTotal: 0,
update code
2024-03-10 00:34:11 +08:00
classifyBarData: [],
todayTotal: 10,
weekTotal: 99,
warningType: [],
warningTypeInterval: undefined,
warningTypeIndex: 0,
基坑监测大屏
2024-08-17 13:02:13 +08:00
urlImgBgd: "",
update code
2024-03-10 00:34:11 +08:00
forBitMappedImageData: [],
forBitMappedImageDataPJ: [],
legendArrData: [],
popupShow: false,
popupPosition: {},
基坑监测大屏
2024-08-17 13:02:13 +08:00
pointPositionName: "",
update code
2024-03-10 00:34:11 +08:00
popupArrData: [],
offLine: true,
loading: false,
基坑监测大屏
2024-08-17 13:02:13 +08:00
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]);
},
},
],
},
update code
2024-03-10 00:34:11 +08:00
};
},
mounted() {
基坑监测大屏
2024-08-17 13:02:13 +08:00
let dt1 = this.$dt(+new Date() - 7 * 24 * 3600 * 1000);
let dt2 = this.$dt(new Date());
this.selDate = [dt1, dt2];
update code
2024-03-10 00:34:11 +08:00
this.urlImgBgd = "url(images/data/excavation-01.jpg) 100% 100%";
基坑监测大屏
2024-08-17 13:02:13 +08:00
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
update code
2024-03-10 13:17:17 +08:00
return {
基坑监测大屏
2024-08-17 13:02:13 +08:00
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",
};
update code
2024-03-10 13:17:17 +08:00
});
update code
2024-03-10 23:37:38 +08:00
this.selPoint = this.pointData[0];
update code
2024-03-10 00:34:11 +08:00
this.init();
基坑监测大屏
2024-08-17 13:02:13 +08:00
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();
}
update code
2024-03-10 00:34:11 +08:00
},
methods: {
基坑监测大屏
2024-08-17 13:02:13 +08:00
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 = {
update code
2024-03-10 23:37:38 +08:00
tooltip: {
基坑监测大屏
2024-08-17 13:02:13 +08:00
trigger: "axis",
update code
2024-03-10 23:37:38 +08:00
axisPointer: {
基坑监测大屏
2024-08-17 13:02:13 +08:00
lineStyle: {
color: "#57617B",
},
},
},
legend: {
textStyle: {
color: "#c3dbfd",
},
data: objs.map(it => it[0].spName),
type: "scroll",
animation: false,
left: "30",
right: "20",
selected: [],
update code
2024-03-10 23:37:38 +08:00
},
基坑监测大屏
2024-08-17 13:02:13 +08:00
grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
toolbox: { top: "6%", feature: { saveAsImage: {} } },
dataZoom: [{ type: "slider", show: true }, { type: "inside" }],
update code
2024-03-10 23:37:38 +08:00
xAxis: {
基坑监测大屏
2024-08-17 13:02:13 +08:00
type: "time",
update code
2024-03-10 23:37:38 +08:00
axisLabel: {
基坑监测大屏
2024-08-17 13:02:13 +08:00
textStyle: {
color: "#c5d9fc",
},
},
axisLine: {
show: true,
lineStyle: {
color: "#25597e",
type: "dashed",
},
},
update code
2024-03-10 23:37:38 +08:00
},
yAxis: {
基坑监测大屏
2024-08-17 13:02:13 +08:00
name: titles[this.btnNav],
nameTextStyle: {
color: "#fff",
fontSize: 14,
},
update code
2024-03-10 23:37:38 +08:00
axisLabel: {
show: true,
基坑监测大屏
2024-08-17 13:02:13 +08:00
textStyle: {
color: "#c5d9fc",
update code
2024-03-10 23:37:38 +08:00
},
基坑监测大屏
2024-08-17 13:02:13 +08:00
},
},
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;
})
update code
2024-03-10 23:37:38 +08:00
}
基坑监测大屏
2024-08-17 13:02:13 +08:00
})
};
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",
update code
2024-03-10 23:37:38 +08:00
};
基坑监测大屏
2024-08-17 13:02:13 +08:00
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;
update code
2024-03-10 23:37:38 +08:00
},
update code
2024-03-10 00:34:11 +08:00
init() {
this.warningTypeInterval = setInterval(this.automaticRollType, 5000);
},
listMinMouseoverType() {
clearInterval(this.warningTypeInterval);
},
listMinMouseoutType() {
this.warningTypeInterval = setInterval(this.automaticRollType, 5000);
},
automaticRollType() {
基坑监测大屏
2024-08-17 13:02:13 +08:00
var height = $(".glr-login-number-max").innerHeight();
if (
$("#afootOverflowType").scrollTop() ==
height * this.warningType.length - $("#afootOverflowType").innerHeight()
) {
this.warningTypeIndex = 0;
update code
2024-03-10 00:34:11 +08:00
} else {
基坑监测大屏
2024-08-17 13:02:13 +08:00
this.warningTypeIndex = this.warningTypeIndex + 1;
update code
2024-03-10 00:34:11 +08:00
}
基坑监测大屏
2024-08-17 13:02:13 +08:00
$("#afootOverflowType").animate({
scrollTop: height * this.warningTypeIndex + "px",
});
if (
$("#afootOverflowTypePJ").scrollTop() ==
height * this.warningType.length -
$("#afootOverflowTypePJ").innerHeight()
) {
this.warningTypeIndex = 0;
update code
2024-03-10 00:34:11 +08:00
} else {
基坑监测大屏
2024-08-17 13:02:13 +08:00
this.warningTypeIndex = this.warningTypeIndex + 1;
update code
2024-03-10 00:34:11 +08:00
}
基坑监测大屏
2024-08-17 13:02:13 +08:00
$("#afootOverflowTypePJ").animate({
scrollTop: height * this.warningTypeIndex + "px",
});
update code
2024-03-10 00:34:11 +08:00
},
legendScreen(type) {
基坑监测大屏
2024-08-17 13:02:13 +08:00
var data = this.forBitMappedImageData;
data.map((x) => {
update code
2024-03-10 00:34:11 +08:00
if (x.sensorType == type) {
if (x.state == true) {
基坑监测大屏
2024-08-17 13:02:13 +08:00
x.state = false;
update code
2024-03-10 00:34:11 +08:00
} else {
基坑监测大屏
2024-08-17 13:02:13 +08:00
x.state = true;
update code
2024-03-10 00:34:11 +08:00
}
}
基坑监测大屏
2024-08-17 13:02:13 +08:00
return x;
});
update code
2024-03-10 00:34:11 +08:00
基坑监测大屏
2024-08-17 13:02:13 +08:00
var legendData = this.legendArrData;
legendData.map((y) => {
update code
2024-03-10 00:34:11 +08:00
if (y.type == type) {
基坑监测大屏
2024-08-17 13:02:13 +08:00
if (y.class == "sjk-icon-legend-right-icon") {
y.class = "sjk-icon-legend-right-icon sjk-legend-filter";
update code
2024-03-10 00:34:11 +08:00
} else {
基坑监测大屏
2024-08-17 13:02:13 +08:00
y.class = "sjk-icon-legend-right-icon";
update code
2024-03-10 00:34:11 +08:00
}
}
基坑监测大屏
2024-08-17 13:02:13 +08:00
return y;
});
this.forBitMappedImageData = data;
this.legendArrData = legendData;
update code
2024-03-10 00:34:11 +08:00
},
//点击点位事件
onClickSpot(type, id, isBase, status, it) {
基坑监测大屏
2024-08-17 13:02:13 +08:00
this.deviceId = id;
var posX = 0,
posY = 0;
update code
2024-03-10 00:34:11 +08:00
var event = event || window.event;
if (event.pageX || event.pageY) {
posX = event.pageX;
posY = event.pageY;
} else if (event.clientX || event.clientY) {
基坑监测大屏
2024-08-17 13:02:13 +08:00
posX =
event.clientX +
document.documentElement.scrollLeft +
document.body.scrollLeft;
posY =
event.clientY +
document.documentElement.scrollTop +
document.body.scrollTop;
update code
2024-03-10 00:34:11 +08:00
}
基坑监测大屏
2024-08-17 13:02:13 +08:00
var position = {};
update code
2024-03-10 00:34:11 +08:00
基坑监测大屏
2024-08-17 13:02:13 +08:00
if (type == "CollWeiyiPoint") {
update code
2024-03-10 00:34:11 +08:00
position = {
top: posY - 110,
基坑监测大屏
2024-08-17 13:02:13 +08:00
left: posX + 30,
};
} else if (type == "CollQingxiePoint") {
update code
2024-03-10 00:34:11 +08:00
position = {
top: posY - 110,
基坑监测大屏
2024-08-17 13:02:13 +08:00
left: posX + 30,
};
update code
2024-03-10 00:34:11 +08:00
}
基坑监测大屏
2024-08-17 13:02:13 +08:00
this.popupPosition = position;
update code
2024-03-10 00:34:11 +08:00
if (isBase) {
基坑监测大屏
2024-08-17 13:02:13 +08:00
this.popupShow = true;
update code
2024-03-10 00:34:11 +08:00
if (type == "CollWeiyiPoint") {
基坑监测大屏
2024-08-17 13:02:13 +08:00
this.pointPositionName = `沉降监测-${it.pointName}`;
update code
2024-03-10 00:34:11 +08:00
}
if (type == "CollQingxiePoint") {
基坑监测大屏
2024-08-17 13:02:13 +08:00
this.pointPositionName = `倾斜监测-${it.pointName}`;
update code
2024-03-10 00:34:11 +08:00
}
this.popupArrData = [];
}
},
onClickSpotPJ(type, projectId, id, it) {
基坑监测大屏
2024-08-17 13:02:13 +08:00
this.deviceId = id;
var posX = 0,
posY = 0;
update code
2024-03-10 00:34:11 +08:00
var event = event || window.event;
if (event.pageX || event.pageY) {
posX = event.pageX;
posY = event.pageY;
} else if (event.clientX || event.clientY) {
基坑监测大屏
2024-08-17 13:02:13 +08:00
posX =
event.clientX +
document.documentElement.scrollLeft +
document.body.scrollLeft;
posY =
event.clientY +
document.documentElement.scrollTop +
document.body.scrollTop;
update code
2024-03-10 00:34:11 +08:00
}
基坑监测大屏
2024-08-17 13:02:13 +08:00
var position = {};
update code
2024-03-10 00:34:11 +08:00
基坑监测大屏
2024-08-17 13:02:13 +08:00
if (type == "CollWeiyiPoint") {
update code
2024-03-10 00:34:11 +08:00
position = {
top: posY - 110,
基坑监测大屏
2024-08-17 13:02:13 +08:00
left: posX + 30,
};
} else if (type == "CollQingxiePoint") {
update code
2024-03-10 00:34:11 +08:00
position = {
top: posY - 110,
基坑监测大屏
2024-08-17 13:02:13 +08:00
left: posX + 30,
};
update code
2024-03-10 00:34:11 +08:00
}
this.pointPositionName = `爬架-倾斜监测-${it.pointName}`;
基坑监测大屏
2024-08-17 13:02:13 +08:00
this.popupPosition = position;
update code
2024-03-10 00:34:11 +08:00
this.popupShow = true;
this.popupArrData = [];
},
// 监听点击弹窗以外的区域
clickOutside(event) {
const current = document.getElementById("clickPopup");
if (current) {
if (!current.contains(event.target)) {
基坑监测大屏
2024-08-17 13:02:13 +08:00
if (event.target._prevClass != "icon-img") {
this.popupShow = false;
update code
2024-03-10 00:34:11 +08:00
}
}
}
},
//点击点位类型
onClickPoint(n) {
基坑监测大屏
2024-08-17 13:02:13 +08:00
this.btnNav = n;
this.dtChange();
update code
2024-03-10 00:34:11 +08:00
},
},
};
</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 * {
基坑监测大屏
2024-08-17 13:02:13 +08:00
fill: #63f8bc !important;
update code
2024-03-10 00:34:11 +08:00
}
.my-svg-icon-blue * {
基坑监测大屏
2024-08-17 13:02:13 +08:00
fill: #7c9ce1 !important;
update code
2024-03-10 00:34:11 +08:00
}
.sjk-img-min {
height: 100%;
}
update code
2024-03-10 13:17:17 +08:00
.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;
}
}
基坑监测大屏
2024-08-17 13:02:13 +08:00
.sjk-chart-line-title.chart-nav {
div {
font-size: 12px;
padding: 5px 16px;
font-weight: bold;
}
}
update code
2024-03-10 13:17:17 +08:00
.mon-point-info {
.mon-title {
border-bottom: dotted 1px #918c8c;
line-height: 24px;
基坑监测大屏
2024-08-17 13:02:13 +08:00
font-size: 14px;
font-weight: bold
update code
2024-03-10 13:17:17 +08:00
}
.mon-point-title {
color: #51b5ff;
}
基坑监测大屏
2024-08-17 13:02:13 +08:00
.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;
update code
2024-03-10 23:37:38 +08:00
font-size: 12px;
基坑监测大屏
2024-08-17 13:02:13 +08:00
.pt-icon{
font-size:30px;
color:#5bf8b5;
margin-top:10px;
update code
2024-03-10 13:17:17 +08:00
}
基坑监测大屏
2024-08-17 13:02:13 +08:00
.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;
update code
2024-03-10 13:17:17 +08:00
display: inline-block;
基坑监测大屏
2024-08-17 13:02:13 +08:00
width: 80px;
text-align: right;
&::after{
content: ":";
display: inline-block;
padding:0px 2px;
}
update code
2024-03-10 13:17:17 +08:00
}
基坑监测大屏
2024-08-17 13:02:13 +08:00
.sp-data{
&.sp-level-0{
color: #FFEBEE;
update code
2024-03-10 13:17:17 +08:00
}
基坑监测大屏
2024-08-17 13:02:13 +08:00
&.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;
update code
2024-03-10 13:17:17 +08:00
}
基坑监测大屏
2024-08-17 13:02:13 +08:00
.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;
update code
2024-03-10 13:17:17 +08:00
}
基坑监测大屏
2024-08-17 13:02:13 +08:00
update code
2024-03-10 13:17:17 +08:00
}
update code
2024-03-10 23:37:38 +08:00
}
update code
2024-03-10 00:34:11 +08:00
}
基坑监测大屏
2024-08-17 13:02:13 +08:00
.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;
}
}
}
}
update code
2024-03-10 00:34:11 +08:00
</style>