Compare commits
12 Commits
| Author | SHA1 | Date |
|---|---|---|
978184212@qq.com
|
d4636bc3f3 | |
|
978184212@qq.com
|
5e63145598 | |
|
978184212@qq.com
|
cf960f82b2 | |
|
978184212@qq.com
|
aef546997b | |
|
978184212@qq.com
|
df2f982767 | |
|
978184212@qq.com
|
201369034a | |
wgx
|
f2ab33a2ce | |
|
wgx
|
c04b3e4908 | |
|
wgx
|
9ae166d778 | |
|
wgx
|
a7c1decc3e | |
|
wgx
|
7ecd1ac2ae | |
|
wgx
|
0c1546ee02 |
|
|
@ -5,8 +5,7 @@
|
|||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint",
|
||||
"preinstall": "pnpm i"
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
|
|
@ -38,6 +37,8 @@
|
|||
"@vue/cli-service": "~5.0.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"less": "^4.8.1",
|
||||
"less-loader": "^13.0.0",
|
||||
"vue-template-compiler": "^2.6.14"
|
||||
},
|
||||
"eslintConfig": {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>汾西县黄河流域农业面源污染平台</title>
|
||||
<title>武乡县黄河流域农业面源污染平台</title>
|
||||
<link rel="stylesheet" href="<%= BASE_URL %>reset.css">
|
||||
<!-- <link rel="stylesheet" href="<%= BASE_URL %>layui/dist/css/layui.css">-->
|
||||
<!-- <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>-->
|
||||
|
|
|
|||
|
|
@ -111,6 +111,24 @@ export function getSoilSummry(data) {
|
|||
method: 'get',
|
||||
headers: {},
|
||||
})
|
||||
}
|
||||
// 危废车辆分页
|
||||
export function vehicleList(obj) {
|
||||
return requests({
|
||||
url: '/zh-applet-admin/appmana/bigScreen/vehicleList',
|
||||
method: 'post',
|
||||
headers: {},
|
||||
data:obj
|
||||
})
|
||||
}
|
||||
// 危废车辆坐标
|
||||
export function gpsRecordPage(obj) {
|
||||
return requests({
|
||||
url: '/zh-applet-admin/appmana/bigScreen/gpsRecordPage',
|
||||
method: 'post',
|
||||
headers: {},
|
||||
data:obj
|
||||
})
|
||||
}
|
||||
// 查询设备下各检测项的历史数据
|
||||
export function survItemSummary(obj) {
|
||||
|
|
@ -138,3 +156,40 @@ export function getMaintainLog(params) {
|
|||
params
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* //监测预警数据
|
||||
* stationCode=S_1 站点编号
|
||||
* &deployId=1679816437477228546 设备ID
|
||||
* &pageNo=1 页号
|
||||
* &pageSize=10 页宽
|
||||
* &yearStr=2026 年份
|
||||
*
|
||||
* 回执
|
||||
* {
|
||||
* "id": "2027671112451649538",
|
||||
* "tenantId": "租户",
|
||||
* "deployCode": "16111113",
|
||||
* "deployId": "1679816437477228546",
|
||||
* "alertTime": "告警时间",
|
||||
* "itemCode":"检测项编号"
|
||||
* "itemName": "钾离子",
|
||||
* "deviceName": "设备名称",
|
||||
* "fullDeviceName":"带站点名称的设备名字"
|
||||
* "readStatus":"low=偏低，high=偏高",
|
||||
* "survUnit":"单位"
|
||||
* "survValue":"监测值"
|
||||
* "nomalValue":"正常值范围"
|
||||
* }
|
||||
* @param params
|
||||
* @returns {*}
|
||||
*/
|
||||
export function doGetAlertRecord(params) {
|
||||
return requests({
|
||||
url: '/appmana/bigScreen/alertRecord',
|
||||
method: 'get',
|
||||
headers: {},
|
||||
params
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ const requests = axios.create({
|
|||
// 请求拦截器
|
||||
requests.interceptors.request.use((config)=>{
|
||||
config.headers['X-Access-Token'] = localStorage.getItem("token") // 请求头带上token
|
||||
config.headers['X-Tenant-Id'] = '1001'
|
||||
return config
|
||||
},(error)=>{
|
||||
return Promise.reject(new Error('faile'));
|
||||
|
|
|
|||
|
|
@ -910,3 +910,209 @@
|
|||
.amap-copyright {
|
||||
opacity:0;
|
||||
}
|
||||
|
||||
/* 危废车辆列表 */
|
||||
/* 下拉菜单容器 */
|
||||
.vehicle-dropdown-dark {
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
top: 100px;
|
||||
left: 24%;
|
||||
}
|
||||
|
||||
/* 按钮样式 - 暗色科技风格 */
|
||||
.vehicle-dropdown-btn-dark {
|
||||
background: rgba(0, 40, 80, 0.8) !important;
|
||||
border: 1px solid #008cff !important;
|
||||
border-radius: 4px !important;
|
||||
padding: 12px 20px !important;
|
||||
color: #00d4ff !important;
|
||||
font-weight: 500;
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
|
||||
letter-spacing: 1px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.vehicle-dropdown-btn-dark:hover {
|
||||
background: rgba(0, 212, 255, 0.15) !important;
|
||||
box-shadow: 0 0 30px rgba(0, 212, 255, 0.4) !important;
|
||||
border-color: #00d4ff !important;
|
||||
}
|
||||
|
||||
.vehicle-dropdown-btn-dark i {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
/* 下拉菜单样式 */
|
||||
.vehicle-dropdown-menu-dark {
|
||||
background: rgba(0, 20, 40, 0.95) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(0, 212, 255, 0.3) !important;
|
||||
border-radius: 4px !important;
|
||||
padding: 5px 0 !important;
|
||||
box-shadow: 0 0 40px rgba(0, 212, 255, 0.1) !important;
|
||||
}
|
||||
|
||||
/* 下拉菜单项样式 */
|
||||
.vehicle-dropdown-item-dark {
|
||||
color: #8bb4d0 !important;
|
||||
padding: 0px 24px !important;
|
||||
border-bottom: 1px solid rgba(0, 212, 255, 0.05) !important;
|
||||
transition: all 0.3s ease !important;
|
||||
font-size: 14px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vehicle-dropdown-item-dark:last-child {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.vehicle-dropdown-item-dark:hover {
|
||||
background: rgba(0, 212, 255, 0.1) !important;
|
||||
color: #00d4ff !important;
|
||||
padding-left: 30px !important;
|
||||
}
|
||||
|
||||
/* 圆点指示器 */
|
||||
.vehicle-dot-dark {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #00d4ff;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.vehicle-dropdown-item-dark:hover .vehicle-dot-dark {
|
||||
box-shadow: 0 0 20px rgba(0, 212, 255, 0.8);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
/* 序号标签 */
|
||||
.vehicle-number-dark {
|
||||
background: rgba(0, 212, 255, 0.1);
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 212, 255, 0.5);
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.vehicle-dropdown-item-dark:hover .vehicle-number-dark {
|
||||
background: rgba(0, 212, 255, 0.2);
|
||||
color: #00d4ff;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media screen and (max-width: 768px) {
|
||||
.vehicle-dropdown-dark {
|
||||
top: 80px;
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.vehicle-dropdown-btn-dark {
|
||||
padding: 6px 15px !important;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.vehicle-dropdown-item-dark {
|
||||
padding: 8px 16px !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes glowPulse {
|
||||
0% {
|
||||
box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 40px rgba(0, 212, 255, 0.4);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.vehicle-dropdown-btn-dark {
|
||||
animation: glowPulse 3s infinite;
|
||||
}
|
||||
|
||||
.vehicle-dropdown-btn-dark:hover {
|
||||
animation: none;
|
||||
}
|
||||
/* 额外炫酷效果 - 鼠标悬停时的光晕动画 */
|
||||
.vehicle-dropdown-item-dark::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
background: #00d4ff;
|
||||
transform: scaleY(0);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.vehicle-dropdown-item-dark:hover::before {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
.vehicle-dropdown-item-dark {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 悬停时文字发光效果 */
|
||||
.vehicle-dropdown-item-dark:hover {
|
||||
text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
|
||||
}
|
||||
|
||||
/* 点击波纹效果 */
|
||||
.vehicle-dropdown-item-dark:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
/* ==================== 信息窗口样式（深色科技风） ==================== */
|
||||
:deep(.amap-info-content) {
|
||||
background: transparent !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.amap-info-sharp) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:deep(.amap-info-close) {
|
||||
color: #00d4ff !important;
|
||||
background: rgba(0, 20, 40, 0.8) !important;
|
||||
border-radius: 50% !important;
|
||||
width: 28px !important;
|
||||
height: 28px !important;
|
||||
line-height: 28px !important;
|
||||
text-align: center !important;
|
||||
right: 8px !important;
|
||||
top: 8px !important;
|
||||
border: 1px solid rgba(0, 212, 255, 0.3) !important;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
:deep(.amap-info-close:hover) {
|
||||
background: rgba(255, 69, 0, 0.2) !important;
|
||||
color: #FF4500 !important;
|
||||
border-color: #FF4500 !important;
|
||||
}
|
||||
|
||||
:deep(.amap-info-content) {
|
||||
background: transparent !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
/* 危废车辆列表完成 */
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 808 B |
Binary file not shown.
|
After Width: | Height: | Size: 802 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 806 B |
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 476 B |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 527 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 503 B |
Binary file not shown.
|
After Width: | Height: | Size: 347 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 446 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 448 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 579 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 272 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 364 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 853 B |
Binary file not shown.
|
After Width: | Height: | Size: 241 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 430 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 487 B |
Binary file not shown.
|
After Width: | Height: | Size: 918 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 490 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 572 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 678 KiB |
|
|
@ -0,0 +1,869 @@
|
|||
<template>
|
||||
<!-- 长期监测弹窗 -->
|
||||
<el-dialog
|
||||
width="75%"
|
||||
top="130px"
|
||||
:modal-append-to-body="false"
|
||||
:destroy-on-close="true"
|
||||
:visible.sync="trzddialogTableVisible"
|
||||
@close="closeDialog"
|
||||
>
|
||||
<div class="xintc">
|
||||
<div class="tz_cov_chanye" style="height: 770px" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)" >
|
||||
<img src="@/assets/image/zhwl/guanbi.png" class="guanbiann" @click="closeDialog" alt=""/>
|
||||
<div class="tz_cov_topchanye">
|
||||
<span class="tz_cov_top_tit">{{liulDataId.name}}</span>
|
||||
</div>
|
||||
<el-row class="tz_cov_topyqjs">
|
||||
<el-col :span="9">
|
||||
<div class="grid-content bg-purple ycboxlt4">
|
||||
<span class="tcxitit">实时监测信息</span>
|
||||
<div class="qxsjssjcTc" >
|
||||
<div class="qxsjssjc_left">
|
||||
<el-col :span="24" :class="`showTitle ${index > 7?'showTitle2':''}`" style="padding: 0px;width: 146px; z-index: 99;"
|
||||
v-for="(item, index) in tableHead" :key="index" :data-item="JSON.stringify(item)">
|
||||
<div class="jcsjtclist" style="overflow: hidden" @click="switchData(item)">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="7">
|
||||
<img :src="urlimg2+item.bsIcon" alt="" class="jcsjicon1"/>
|
||||
</el-col>
|
||||
<el-col :span="17">
|
||||
<span class="jcsjicon1_tit">{{ item.name }} </span>
|
||||
<button type="button" @click="startAnimate()" style="display: none"></button>
|
||||
<span class="jcsjicon1_num" >
|
||||
<span v-if="item.value == undefined || item.value == '0' || item.value == '0.0' ">0</span>
|
||||
<span v-else>
|
||||
<animate-number :ref="`animateNumber$index`" from="0" :to="item.value"
|
||||
:key="item.deployId" duration="3000"></animate-number>
|
||||
</span>
|
||||
<span class="jcsjicon1_dan">{{ item.unit }}</span>
|
||||
</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
</div>
|
||||
<div class="qxjcimg2">
|
||||
<img src="@/assets/image/zhwl/tcdiliul.png" class="tctrimg" alt="">
|
||||
<video width="620" height="376" autoplay="autoplay" muted="muted" loop="loop" class="tcdzimg" >
|
||||
<source src="@/assets/image/zhwl/tcdidizuo.webm" type="video/webm">
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="15">
|
||||
<span class="tcxitit">长期定位监测历史记录</span>
|
||||
<div class="bianqianlist">
|
||||
<el-radio-group v-model="postParam.summrayMode" @input="formParamChange(1)" size="small" fill="#1783C6">
|
||||
<el-radio-button label="dayhours">小时</el-radio-button>
|
||||
<el-radio-button label="monthDays">日均</el-radio-button>
|
||||
<el-radio-button label="yearMonth">月均</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-date-picker v-model="formParam.date" class="custom-date-picker" style="margin-left: 20px; width: 130px;" size="small"
|
||||
:type="postParam.summrayMode=='dayhours'?'date':postParam.summrayMode=='monthDays'?'month':'year'"
|
||||
:format="postParam.summrayMode=='dayhours'?'yyyy-MM-dd':postParam.summrayMode=='monthDays'?'yyyy-MM':'yyyy'"
|
||||
:value-format="postParam.summrayMode=='dayhours'?'yyyy-MM-dd':postParam.summrayMode=='monthDays'?'yyyy-MM':'yyyy'"
|
||||
@change="formParamChange" placeholder="选择日期"
|
||||
start-placeholder="开始日期" end-placeholder="结束日期">
|
||||
</el-date-picker>
|
||||
<!-- <div class="xiaoshiHover" @click="formParamChange">查询</div>-->
|
||||
<div class="zsfsList">
|
||||
<span>展示方式：</span>
|
||||
<el-radio-group v-model="echartOrTable" size="small" fill="#1783C6" @change="formParamChange">
|
||||
<el-radio-button label="1">折线</el-radio-button>
|
||||
<el-radio-button label="0">表格</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div id="columnTrEchart" v-show="(echartOrTable=='1')" style="min-width: 700px;width: 100%; height: 480px;"></div>
|
||||
<el-table v-if="allData" v-show="!(echartOrTable=='1')" :data="allData.tableData" :default-sort="{ prop: 'dates', order: 'descending' }"
|
||||
row-class-name="tableRowClassName" cell-class-name="tableRowClassName"
|
||||
header-row-class-name="tableRowClassName" header-cell-class-name="tableRowClassName"
|
||||
height="580" border size="mini">
|
||||
<el-table-column :prop="`dates`" label="日期" width="92" ></el-table-column>
|
||||
<el-table-column :prop="item2.survItem" :label="item2.name+'('+item2.unit+')'" v-for="(item2, index2) in allData.realTimeData"
|
||||
:key="item2.name">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="loader" v-show="false">
|
||||
<div class="loader-inner ball-grid-pulse">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<span class="lodingspan">加载中......</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {
|
||||
getSoilSummry
|
||||
} from '@/api';
|
||||
import { _colors } from '@/utils/color.js'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
liulDataId: Object,
|
||||
},
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
dTitle: '长期定位监测',
|
||||
urlimg: 'https://fxnsp.sxcooh.com/lh-api/sys/common/static/',
|
||||
urlimg2: 'https://farm.ilhzn.cn/jeecg-boot/sys/common/static/',
|
||||
deployType: 'soil',
|
||||
allData: null,
|
||||
tableHead: [],
|
||||
trzddialogTableVisible: true,
|
||||
tableListData: [],
|
||||
unitValue: true,
|
||||
echartOrTable: '1',
|
||||
formParam: {
|
||||
date: '',
|
||||
summrayMode: 'monthDays'
|
||||
},
|
||||
postParam: {
|
||||
deployIds: [this.liulDataId.ids],
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
summrayMode: 'monthDays',
|
||||
},
|
||||
myChartObj: null,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('流量监测弹窗显示拉!', this.liulDataId)
|
||||
this.deviceSummaryApi();
|
||||
},
|
||||
methods: {
|
||||
// 历史数据曲线
|
||||
deviceSummaryApi() {
|
||||
this.loading = true
|
||||
let that = this
|
||||
this.tableHead = [];
|
||||
getSoilSummry(that.postParam).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.allData = res.result
|
||||
if(this.allData){
|
||||
this.tableHead = res.result.realTimeData
|
||||
this.tableIndex = res.result.tableIndex
|
||||
}
|
||||
this.loading = false
|
||||
this.initEchartDom();
|
||||
}
|
||||
})
|
||||
},
|
||||
// 切换参数
|
||||
switchData(e) {
|
||||
let that = this
|
||||
console.log('切换参数switchData', e)
|
||||
that.formParamChange();
|
||||
// this.$nextTick(() => {
|
||||
// this.$refs.myNum1?.map(res => {
|
||||
// res.start()
|
||||
// })
|
||||
// })
|
||||
},
|
||||
initEchartDom() {
|
||||
if(!(this.echartOrTable == '1')){
|
||||
return;
|
||||
}
|
||||
console.log('initEchart')
|
||||
if(!this.allData) {
|
||||
console.error('数据未获取到')
|
||||
return ;
|
||||
}
|
||||
if(this.myChartObj){
|
||||
this.myChartObj.dispose();
|
||||
}
|
||||
this.myChartObj = this.$echarts.init(document.getElementById("columnTrEchart"));
|
||||
// 绘制图表
|
||||
let legendData = this.allData.realTimeData.map(item => item.name+'('+item.unit+')');
|
||||
let xAxisData = this.allData.tableIndex;
|
||||
let seriesData = this.allData.realTimeData.map((item,index) => {
|
||||
let subdata = this.allData.objResults[item.survItem]
|
||||
return {
|
||||
name: item.name+'('+item.unit+')',
|
||||
data: subdata,
|
||||
type: "line",
|
||||
symbol: "circle", //设定为实心点
|
||||
showAllSymbol: true,
|
||||
symbolSize: 0,
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
//新版渐变色实现
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: _colors[index],
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(255, 223, 4, 0.1)",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
//线的颜色
|
||||
color: _colors[index],
|
||||
width: 1.5,
|
||||
},
|
||||
itemStyle: {
|
||||
color: _colors[index],
|
||||
},
|
||||
}
|
||||
|
||||
}) ;
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
data: legendData,
|
||||
icon: "rect",
|
||||
itemWidth: 7, // 设置宽度
|
||||
itemHeight: 7, // 设置高度
|
||||
itemGap: 15, // 设置间距
|
||||
top: "0",
|
||||
textStyle: {
|
||||
//图例文字的样式
|
||||
color: "#fff",
|
||||
// fontSize: 14,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "1%",
|
||||
right: "1%",
|
||||
top: "14%",
|
||||
bottom: "2%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
lineStyle: {
|
||||
color: "rgba(117, 168, 202, 0.9)",
|
||||
},
|
||||
axisLine: {
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
name: '',
|
||||
type: "value",
|
||||
},
|
||||
],
|
||||
series: seriesData,
|
||||
};
|
||||
option && this.myChartObj.setOption(option);
|
||||
},
|
||||
formParamChange(f) {
|
||||
console.log(this.formParam)
|
||||
if(f === 1){
|
||||
this.formParam.date = null;
|
||||
}
|
||||
if(this.formParam.date) {
|
||||
this.postParam.startTime = this.formParam.date
|
||||
this.postParam.endTime = null
|
||||
} else {
|
||||
this.postParam.startTime = null
|
||||
this.postParam.endTime = null
|
||||
}
|
||||
this.deviceSummaryApi();
|
||||
},
|
||||
tableClassName(){},
|
||||
closeDialog() {
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
||||
.xintc :deep(.el-dialog) {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
background: none;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, .8);
|
||||
box-sizing: border-box;
|
||||
width: 50%;
|
||||
/* margin-left: 22%; */
|
||||
}
|
||||
|
||||
.xintc :deep(.el-dialog__header) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tz_cov_chanye {
|
||||
width: 100%;
|
||||
height: 42vw;
|
||||
background: rgba(1, 17, 26, 0.9);
|
||||
border-radius: 10px;
|
||||
border: 1px solid #33739d;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 0px 30px 0px rgba(14, 147, 255, 0.8);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.guanbiann {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
position: absolute;
|
||||
right: 2%;
|
||||
top: 0.5vw;
|
||||
z-index: 9999999999;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tz_cov_topchanye {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: url(@/assets/image/tctopback.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
line-height: 48px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tz_cov_top_tit {
|
||||
font-size: 20px;
|
||||
font-family: douyuFont;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tcgldw {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
width: 98%;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
line-height: 38px;
|
||||
text-align: left;
|
||||
text-indent: 2em;
|
||||
height: 576px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* 定义滚动条样式 */
|
||||
.tcgldw::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background-color: rgba(240, 240, 240, 0.1);
|
||||
}
|
||||
|
||||
.tcgldw::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 0px rgba(240, 240, 240, .0);
|
||||
border-radius: 10px;
|
||||
background-color: rgba(240, 240, 240, .0);
|
||||
}
|
||||
|
||||
.tcgldw::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 0px rgba(36, 132, 109, .8);
|
||||
background-color: rgba(36, 132, 109, .8);
|
||||
}
|
||||
|
||||
.ycboxlt {
|
||||
width: 94%;
|
||||
margin-left: 2%;
|
||||
background: url(@/assets/image/tckuang.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.ycboxlt4 {
|
||||
width: 94%;
|
||||
margin-left: 2%;
|
||||
background-size: 100% 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.tz_cov_topyqjs {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.tz_cov_top {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
overflow: auto;
|
||||
animation: fadeInLeft 1s 0.02s ease backwards;
|
||||
}
|
||||
|
||||
.in1con_lf_imglf_num_jix {
|
||||
color: #12CCFA;
|
||||
font-size: 24px;
|
||||
font-family: "UnidreamLED";
|
||||
}
|
||||
|
||||
.qxjcCon {
|
||||
height: 506px;
|
||||
}
|
||||
|
||||
.qxsjssjc {
|
||||
width: 100%;
|
||||
height: 506px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.qxsjssjc_left {
|
||||
margin-top: 70px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
height: 400px;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-between;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.qxsjssjc_leftTc {
|
||||
width: 10%;
|
||||
position: absolute;
|
||||
left: 2%;
|
||||
top: 40px;
|
||||
z-index: 33;
|
||||
}
|
||||
|
||||
.qxsjssjc_leftTc2 {
|
||||
width: 10%;
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
top: 40px;
|
||||
z-index: 33;
|
||||
}
|
||||
|
||||
.qxjcimg2 {
|
||||
width: 40%;
|
||||
float: left;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.qxjcimg2 .qiyename {
|
||||
width: 304px;
|
||||
height: 40px;
|
||||
margin-left: 40px;
|
||||
margin-top: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.qxjcimg2 .qiyename .qynammeLf {
|
||||
float: left;
|
||||
width: 34px;
|
||||
margin-top: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.qxjcimg2 .qiyename .qynammeCon {
|
||||
float: left;
|
||||
width: 234px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
background: url(@/assets/image/qiyename.png) no-repeat 100% 100%;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.qxjcimg2 .qiyename .qynammeRt {
|
||||
float: right;
|
||||
width: 34px;
|
||||
margin-top: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.qxsjssjc_left_list {
|
||||
width: 175px;
|
||||
height: 86px;
|
||||
background: url(@/assets/image/zhwl/qxbg.png) no-repeat 100% 100%;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.qxsjssjc_left_list_tit {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
border-radius: 6px 6px 0 0;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.qxsjssjc_left_list_show {
|
||||
font-size: 16px;
|
||||
color: #12CCFA;
|
||||
display: inline-block;
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.qxsjssjcTc {
|
||||
width: 100%;
|
||||
height: 580px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tcyqimg {
|
||||
width: 14%;
|
||||
position: absolute;
|
||||
left: 14%;
|
||||
bottom: 80px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tcdzimg {
|
||||
width: 40%;
|
||||
margin-left: 5%;
|
||||
position: absolute;
|
||||
left: -4%;
|
||||
bottom: -40px;
|
||||
z-index: -100;
|
||||
}
|
||||
|
||||
.tcxitit {
|
||||
display: block;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
margin-left: 2%;
|
||||
}
|
||||
|
||||
.bianqianlist {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.bianqianlist .xiaoshi {
|
||||
width: 48px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #D6D6D6;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bianqianlist .xiaoshiHover {
|
||||
width: 48px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
background: #1783C6;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bianqianlist .zsfsList {
|
||||
float: right;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.jcsjtclist {
|
||||
width: 138px;
|
||||
height: 60px;
|
||||
background: #1D4C82;
|
||||
border-radius: 6px;
|
||||
margin-top: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.jcsjtclist .jcsjicon1 {
|
||||
width: 46px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.jcsjtclist .jcsjicon1_tit {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.jcsjtclist .jcsjicon1_num {
|
||||
color: #e7f47b;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
font-family: "UnidreamLED";
|
||||
font-family: HYChangLiSongKeBen;
|
||||
text-align: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.jcsjtclist .jcsjicon1_dan {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
margin-left: 6px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.qxsjssjc_right {
|
||||
width: 12%;
|
||||
height: 500px;
|
||||
overflow: auto;
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
left: 470px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.qxsjssjc_right::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background-color: rgba(240, 240, 240, 0.1);
|
||||
}
|
||||
|
||||
.qxsjssjc_right::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 0px rgba(240, 240, 240, .0);
|
||||
border-radius: 10px;
|
||||
background-color: rgba(240, 240, 240, .0);
|
||||
}
|
||||
|
||||
.qxsjssjc_right::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 0px rgba(36, 132, 109, .8);
|
||||
background-color: rgba(36, 132, 109, .8);
|
||||
}
|
||||
|
||||
.tctrimg {
|
||||
width: 26%;
|
||||
height: 538px;
|
||||
position: absolute;
|
||||
left: 7%;
|
||||
top: 74px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tcscdimg {
|
||||
width: 10%;
|
||||
height: 500px;
|
||||
position: absolute;
|
||||
left: 16%;
|
||||
top: 20px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tcchimg {
|
||||
width: 115px;
|
||||
height: 446px;
|
||||
position: absolute;
|
||||
left: 17.5%;
|
||||
top: 60px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tcccqhimg {
|
||||
width: 115px;
|
||||
height: 446px;
|
||||
position: absolute;
|
||||
left: 17.5%;
|
||||
top: 60px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tcdidizuoimg {
|
||||
width: 40%;
|
||||
position: absolute;
|
||||
left: 2%;
|
||||
bottom: -30px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.tcdijtimg {
|
||||
width: 34%;
|
||||
position: absolute;
|
||||
left: 4%;
|
||||
top: -40px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@keyframes continuous-rotation {
|
||||
from {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.xiaoshiHover {
|
||||
width: 48px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
background: #1783C6;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.timeStty {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.timeStty .tcxitit {
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.timeStty .timeright {
|
||||
float: right;
|
||||
margin-right: 3%;
|
||||
}
|
||||
|
||||
.cqimgTcList {
|
||||
width: 100%;
|
||||
height: 480px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.cqimgTcList .cqimg {
|
||||
width: 32%;
|
||||
float: left;
|
||||
margin-top: 10px;
|
||||
margin-right: 1%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.cqimgTcList .cqimg img {
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgb(0, 95, 65);
|
||||
}
|
||||
|
||||
.cqimgTcList .cqTime {
|
||||
color: #1090D4;
|
||||
font-size: 16px;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.cqimgTcList::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background-color: rgba(240, 240, 240, 0.1);
|
||||
}
|
||||
|
||||
.cqimgTcList::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 0px rgba(240, 240, 240, .0);
|
||||
border-radius: 10px;
|
||||
background-color: rgba(240, 240, 240, .0);
|
||||
}
|
||||
|
||||
.cqimgTcList::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 0px rgba(36, 132, 109, .8);
|
||||
background-color: rgba(36, 132, 109, .8);
|
||||
}
|
||||
|
||||
.tz_cov_zaip {
|
||||
width: 100%;
|
||||
height: 1000px;
|
||||
background: rgba(15, 36, 69, 0.7);
|
||||
border-radius: 0.5vw;
|
||||
border: 1px solid #33739d;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 0px 30px 0px rgba(14, 147, 255, 0.8);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tz_cov_zaip :deep(.el-tabs--border-card) {
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.tz_cov_zaip :deep(.el-tabs--border-card > .el-tabs__header) {
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.tz_cov_zaip :deep(.el-tabs__item) {
|
||||
background: #0F5474;
|
||||
border: 1px solid #0089AE !important;
|
||||
margin-right: 1% !important;
|
||||
color: #C9C9C9 !important;
|
||||
font-size: 16px;
|
||||
padding: 0px 15px !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tz_cov_zaip :deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active) {
|
||||
background: #0089AE;
|
||||
border: 1px solid #1A848F !important;
|
||||
margin-right: 1% !important;
|
||||
color: #fff !important;
|
||||
font-size: 16px;
|
||||
padding: 0 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tz_cov_zaip :deep(.el-tabs--border-card > .el-tabs__content) {
|
||||
padding: 0;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.tableRowClassName {
|
||||
background-color: rgb(34, 28, 28);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.xintc :deep(.el-table .el-table__body-wrapper) {
|
||||
background-color: rgb(34, 28, 28);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,912 @@
|
|||
<template>
|
||||
<!-- 长期监测弹窗 -->
|
||||
<el-dialog
|
||||
width="75%"
|
||||
top="130px"
|
||||
:modal-append-to-body="false"
|
||||
:destroy-on-close="true"
|
||||
:visible.sync="trzddialogTableVisible"
|
||||
@close="closeDialog"
|
||||
>
|
||||
<div class="xintc">
|
||||
<div class="tz_cov_chanye" style="height: 770px" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)" >
|
||||
<img src="@/assets/image/zhwl/guanbi.png" class="guanbiann" @click="closeDialog" alt=""/>
|
||||
<div class="tz_cov_topchanye">
|
||||
<span class="tz_cov_top_tit">{{soilDataId.name}}</span>
|
||||
</div>
|
||||
<el-row class="tz_cov_topyqjs">
|
||||
<el-col :span="9">
|
||||
<div class="grid-content bg-purple ycboxlt4">
|
||||
<span class="tcxitit">实时监测信息</span>
|
||||
<div class="qxsjssjcTc" >
|
||||
<div class="qxsjssjc_left">
|
||||
<el-col :span="24" :class="`showTitle ${index > 7?'showTitle2':''}`" style="padding: 0px;width: 146px; z-index: 99;"
|
||||
v-for="(item, index) in tableHead" :key="index" :data-item="JSON.stringify(item)">
|
||||
<div class="jcsjtclist" style="overflow: hidden" @click="switchData(item)">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="7">
|
||||
<img :src="urlimg2+item.bsIcon" alt="" class="jcsjicon1"/>
|
||||
</el-col>
|
||||
<el-col :span="17">
|
||||
<span class="jcsjicon1_tit">{{ item.name }} </span>
|
||||
<button type="button" @click="startAnimate()" style="display: none"></button>
|
||||
<span class="jcsjicon1_num" >
|
||||
<span v-if="item.value == undefined || item.value == '0' || item.value == '0.0' ">0</span>
|
||||
<span v-else>
|
||||
<animate-number :ref="`animateNumber$index`" from="0" :to="item.value"
|
||||
:key="item.deployId" duration="3000"></animate-number>
|
||||
</span>
|
||||
<span class="jcsjicon1_dan">{{ item.unit }}</span>
|
||||
</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
</div>
|
||||
<div class="qxjcimg2">
|
||||
<img src="@/assets/image/zhwl/tcditr.png" class="tctrimg" alt="">
|
||||
<video width="620" height="376" autoplay="autoplay" muted="muted" loop="loop" class="tcdzimg" >
|
||||
<source src="@/assets/image/zhwl/tcdidizuo.webm" type="video/webm">
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="15">
|
||||
<span class="tcxitit">长期定位监测历史记录</span>
|
||||
<div class="bianqianlist">
|
||||
<el-radio-group v-model="postParam.summrayMode" @input="formParamChange(1)" size="small" fill="#1783C6">
|
||||
<el-radio-button label="dayhours">小时</el-radio-button>
|
||||
<el-radio-button label="monthDays">日均</el-radio-button>
|
||||
<el-radio-button label="yearMonth">月均</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-date-picker v-model="formParam.date" class="custom-date-picker" style="margin-left: 20px; width: 130px;" size="small"
|
||||
:type="postParam.summrayMode=='dayhours'?'date':postParam.summrayMode=='monthDays'?'month':'year'"
|
||||
:format="postParam.summrayMode=='dayhours'?'yyyy-MM-dd':postParam.summrayMode=='monthDays'?'yyyy-MM':'yyyy'"
|
||||
:value-format="postParam.summrayMode=='dayhours'?'yyyy-MM-dd':postParam.summrayMode=='monthDays'?'yyyy-MM':'yyyy'"
|
||||
@change="formParamChange" placeholder="选择日期"
|
||||
start-placeholder="开始日期" end-placeholder="结束日期">
|
||||
</el-date-picker>
|
||||
<!-- <div class="xiaoshiHover" @click="formParamChange">查询</div>-->
|
||||
<div class="zsfsList">
|
||||
<span>展示方式：</span>
|
||||
<el-radio-group v-model="echartOrTable" size="small" fill="#1783C6" @change="formParamChange">
|
||||
<el-radio-button label="1">折线</el-radio-button>
|
||||
<el-radio-button label="0">表格</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div id="columnTrEchart" v-show="(echartOrTable=='1')" style="min-width: 700px;width: 100%; height: 480px;"></div>
|
||||
<el-table v-if="allData" v-show="!(echartOrTable=='1')" :data="allData.tableData" :default-sort="{ prop: 'dates', order: 'descending' }"
|
||||
row-class-name="tableRowClassName" cell-class-name="tableRowClassName"
|
||||
header-row-class-name="tableRowClassName" header-cell-class-name="tableRowClassName"
|
||||
height="580" border size="mini">
|
||||
<el-table-column :prop="`dates`" label="日期" width="92" ></el-table-column>
|
||||
<el-table-column :prop="item2.survItem" :label="item2.name+'('+item2.unit+')'" v-for="(item2, index2) in allData.realTimeData"
|
||||
:key="item2.name">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="loader" v-show="false">
|
||||
<div class="loader-inner ball-grid-pulse">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<span class="lodingspan">加载中......</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {
|
||||
getSoilSummry
|
||||
} from '@/api';
|
||||
import { _colors } from '@/utils/color.js'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
soilDataId: Object,
|
||||
},
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
dTitle: '长期定位监测',
|
||||
urlimg: 'https://fxnsp.sxcooh.com/lh-api/sys/common/static/',
|
||||
urlimg2: 'https://farm.ilhzn.cn/jeecg-boot/sys/common/static/',
|
||||
deployType: 'soil',
|
||||
allData: null,
|
||||
tableHead: [],
|
||||
trzddialogTableVisible: true,
|
||||
tableListData: [],
|
||||
unitValue: true,
|
||||
echartOrTable: '1',
|
||||
formParam: {
|
||||
date: '',
|
||||
summrayMode: 'monthDays'
|
||||
},
|
||||
postParam: {
|
||||
deployIds: [this.soilDataId.ids],
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
summrayMode: 'monthDays',
|
||||
},
|
||||
myChartObj: null,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('长期监测弹窗显示拉!', this.soilDataId)
|
||||
this.deviceSummaryApi();
|
||||
},
|
||||
methods: {
|
||||
// 历史数据曲线
|
||||
deviceSummaryApi() {
|
||||
this.loading = true
|
||||
let that = this
|
||||
this.tableHead = [];
|
||||
getSoilSummry(that.postParam).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.allData = res.result
|
||||
if(this.allData){
|
||||
this.tableHead = res.result.realTimeData
|
||||
this.tableIndex = res.result.tableIndex
|
||||
}
|
||||
this.loading = false
|
||||
this.initEchartDom();
|
||||
}
|
||||
})
|
||||
},
|
||||
// 切换参数
|
||||
switchData(e) {
|
||||
let that = this
|
||||
console.log('切换参数switchData', e)
|
||||
that.formParamChange();
|
||||
// this.$nextTick(() => {
|
||||
// this.$refs.myNum1?.map(res => {
|
||||
// res.start()
|
||||
// })
|
||||
// })
|
||||
},
|
||||
initEchartDom() {
|
||||
if(!(this.echartOrTable == '1')){
|
||||
return;
|
||||
}
|
||||
console.log('initEchart')
|
||||
if(!this.allData) {
|
||||
console.error('数据未获取到')
|
||||
return ;
|
||||
}
|
||||
if(this.myChartObj){
|
||||
this.myChartObj.dispose();
|
||||
}
|
||||
this.myChartObj = this.$echarts.init(document.getElementById("columnTrEchart"));
|
||||
// 绘制图表
|
||||
let legendData = this.allData.realTimeData.map(item => item.name+'('+item.unit+')');
|
||||
let xAxisData = this.allData.tableIndex;
|
||||
let seriesData = this.allData.realTimeData.map((item,index) => {
|
||||
let subdata = this.allData.objResults[item.survItem]
|
||||
return {
|
||||
name: item.name+'('+item.unit+')',
|
||||
data: subdata,
|
||||
type: "line",
|
||||
symbol: "circle", //设定为实心点
|
||||
showAllSymbol: true,
|
||||
symbolSize: 0,
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
//新版渐变色实现
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: _colors[index],
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(255, 223, 4, 0.1)",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
//线的颜色
|
||||
color: _colors[index],
|
||||
width: 1.5,
|
||||
},
|
||||
itemStyle: {
|
||||
color: _colors[index],
|
||||
},
|
||||
}
|
||||
|
||||
}) ;
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
data: legendData,
|
||||
icon: "rect",
|
||||
itemWidth: 7, // 设置宽度
|
||||
itemHeight: 7, // 设置高度
|
||||
itemGap: 15, // 设置间距
|
||||
top: "0",
|
||||
textStyle: {
|
||||
//图例文字的样式
|
||||
color: "#fff",
|
||||
// fontSize: 14,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "1%",
|
||||
right: "1%",
|
||||
top: "14%",
|
||||
bottom: "2%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
lineStyle: {
|
||||
color: "rgba(117, 168, 202, 0.9)",
|
||||
},
|
||||
axisLine: {
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
name: '',
|
||||
type: "value",
|
||||
},
|
||||
],
|
||||
series: seriesData,
|
||||
};
|
||||
option && this.myChartObj.setOption(option);
|
||||
},
|
||||
formParamChange(f) {
|
||||
console.log(this.formParam)
|
||||
if(f === 1){
|
||||
this.formParam.date = null;
|
||||
}
|
||||
if(this.formParam.date) {
|
||||
this.postParam.startTime = this.formParam.date
|
||||
this.postParam.endTime = null
|
||||
} else {
|
||||
this.postParam.startTime = null
|
||||
this.postParam.endTime = null
|
||||
}
|
||||
this.deviceSummaryApi();
|
||||
},
|
||||
tableClassName(){},
|
||||
closeDialog() {
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.xintc {
|
||||
/* 不可删除弹出开始，以气象为主 */
|
||||
|
||||
:deep .el-dialog {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
background: none;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, .8);
|
||||
box-sizing: border-box;
|
||||
width: 50%;
|
||||
/* margin-left: 22%; */
|
||||
}
|
||||
|
||||
:deep .el-dialog__header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tz_cov_chanye {
|
||||
width: 100%;
|
||||
height: 42vw;
|
||||
/* background: url(../../assets/images/tccovbak.png) no-repeat;
|
||||
background-size: 100% 100%; */
|
||||
background: rgba(1, 17, 26, 0.9);
|
||||
border-radius: 10px;
|
||||
border: 1px solid #33739d;
|
||||
//text-align: center;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 0px 30px 0px rgba(14, 147, 255, 0.8);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.guanbiann {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
position: absolute;
|
||||
right: 2%;
|
||||
top: 0.5vw;
|
||||
z-index: 9999999999;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tz_cov_topchanye {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: url(@/assets/image/tctopback.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
line-height: 48px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tz_cov_top_tit {
|
||||
font-size: 20px;
|
||||
font-family: douyuFont;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tcgldw {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
width: 98%;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
line-height: 38px;
|
||||
text-align: left;
|
||||
text-indent: 2em;
|
||||
height: 576px;
|
||||
overflow: auto;
|
||||
/* text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 15; */
|
||||
}
|
||||
|
||||
/* 定义滚动条样式 */
|
||||
|
||||
.tcgldw::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background-color: rgba(240, 240, 240, 0.1);
|
||||
}
|
||||
|
||||
/*定义滚动条轨道 内阴影+圆角*/
|
||||
|
||||
.tcgldw::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 0px rgba(240, 240, 240, .0);
|
||||
border-radius: 10px;
|
||||
background-color: rgba(240, 240, 240, .0);
|
||||
}
|
||||
|
||||
/*定义滑块 内阴影+圆角*/
|
||||
|
||||
.tcgldw::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 0px rgba(36, 132, 109, .8);
|
||||
background-color: rgba(36, 132, 109, .8);
|
||||
}
|
||||
|
||||
.ycboxlt {
|
||||
width: 94%;
|
||||
margin-left: 2%;
|
||||
background: url(@/assets/image/tckuang.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.ycboxlt4 {
|
||||
width: 94%;
|
||||
margin-left: 2%;
|
||||
background-size: 100% 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.tz_cov_topyqjs {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.tz_cov_top {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
overflow: auto;
|
||||
animation: fadeInLeft 1s 0.02s ease backwards;
|
||||
}
|
||||
|
||||
.in1con_lf_imglf_num_jix {
|
||||
color: #12CCFA;
|
||||
font-size: 24px;
|
||||
font-family: "UnidreamLED";
|
||||
}
|
||||
|
||||
.qxjcCon {
|
||||
height: 506px;
|
||||
|
||||
}
|
||||
|
||||
.qxsjssjc {
|
||||
width: 100%;
|
||||
height: 506px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.qxsjssjc_left {
|
||||
//width: 873px;
|
||||
/* float: left; */
|
||||
/* margin-left: 40px; */
|
||||
margin-top:70px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
height: 400px;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-between;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.qxsjssjc_leftTc {
|
||||
width: 10%;
|
||||
position: absolute;
|
||||
left: 2%;
|
||||
top: 40px;
|
||||
z-index: 33;
|
||||
}
|
||||
|
||||
.qxsjssjc_leftTc2 {
|
||||
width: 10%;
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
top: 40px;
|
||||
z-index: 33;
|
||||
}
|
||||
|
||||
.qxjcimg2 {
|
||||
width: 40%;
|
||||
float: left;
|
||||
margin-left: 40px;
|
||||
|
||||
.qiyename {
|
||||
width: 304px;
|
||||
height: 40px;
|
||||
margin-left: 40px;
|
||||
margin-top: 20px;
|
||||
overflow: hidden;
|
||||
|
||||
.qynammeLf {
|
||||
float: left;
|
||||
width: 34px;
|
||||
margin-top: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.qynammeCon {
|
||||
float: left;
|
||||
width: 234px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
background: url(@/assets/image/qiyename.png) no-repeat 100% 100%;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.qynammeRt {
|
||||
float: right;
|
||||
width: 34px;
|
||||
margin-top: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qxsjssjc_left_list {
|
||||
width: 175px;
|
||||
height: 86px;
|
||||
background: url(@/assets/image/zhwl/qxbg.png) no-repeat 100% 100%;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.qxsjssjc_left_list_tit {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
border-radius: 6px 6px 0 0;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.qxsjssjc_left_list_show {
|
||||
font-size: 16px;
|
||||
color: #12CCFA;
|
||||
display: inline-block;
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.qxsjssjcTc {
|
||||
width: 100%;
|
||||
height: 580px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tcyqimg {
|
||||
width: 14%;
|
||||
position: absolute;
|
||||
left: 14%;
|
||||
bottom: 80px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tcdzimg {
|
||||
width: 40%;
|
||||
margin-left: 5%;
|
||||
position: absolute;
|
||||
left: -4%;
|
||||
bottom: -40px;
|
||||
z-index: -100;
|
||||
}
|
||||
|
||||
.tcxitit {
|
||||
display: block;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
margin-left: 2%;
|
||||
}
|
||||
|
||||
.bianqianlist {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
margin-top: 10px;
|
||||
|
||||
.xiaoshi {
|
||||
width: 48px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #D6D6D6;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.xiaoshiHover {
|
||||
width: 48px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
background: #1783C6;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.zsfsList {
|
||||
float: right;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
.jcsjtclist {
|
||||
width: 138px;
|
||||
height: 60px;
|
||||
background: #1D4C82;
|
||||
border-radius: 6px;
|
||||
margin-top: 14px;
|
||||
cursor: pointer;
|
||||
|
||||
.jcsjicon1 {
|
||||
width: 46px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.jcsjicon1_tit {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.jcsjicon1_num {
|
||||
color: #e7f47b;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
font-family: "UnidreamLED";
|
||||
font-family: HYChangLiSongKeBen;
|
||||
text-align: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.jcsjicon1_dan {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
margin-left: 6px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.qxsjssjc_right {
|
||||
width: 12%;
|
||||
height: 500px;
|
||||
overflow: auto;
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
left: 470px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
/* 定义滚动条样式 */
|
||||
|
||||
.qxsjssjc_right::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background-color: rgba(240, 240, 240, 0.1);
|
||||
}
|
||||
|
||||
/*定义滚动条轨道 内阴影+圆角*/
|
||||
|
||||
.qxsjssjc_right::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 0px rgba(240, 240, 240, .0);
|
||||
border-radius: 10px;
|
||||
background-color: rgba(240, 240, 240, .0);
|
||||
}
|
||||
|
||||
/*定义滑块 内阴影+圆角*/
|
||||
|
||||
.qxsjssjc_right::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 0px rgba(36, 132, 109, .8);
|
||||
background-color: rgba(36, 132, 109, .8);
|
||||
}
|
||||
|
||||
.tctrimg {
|
||||
width: 26%;
|
||||
height: 538px;
|
||||
position: absolute;
|
||||
left: 7%;
|
||||
top: 74px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tcscdimg {
|
||||
width: 10%;
|
||||
height: 500px;
|
||||
position: absolute;
|
||||
left: 16%;
|
||||
top: 20px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tcchimg {
|
||||
width: 115px;
|
||||
height: 446px;
|
||||
position: absolute;
|
||||
left: 17.5%;
|
||||
top: 60px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.tcccqhimg {
|
||||
width: 115px;
|
||||
height: 446px;
|
||||
position: absolute;
|
||||
left: 17.5%;
|
||||
top: 60px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tcdidizuoimg {
|
||||
width: 40%;
|
||||
position: absolute;
|
||||
left: 2%;
|
||||
bottom: -30px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.tcdijtimg {
|
||||
width: 34%;
|
||||
position: absolute;
|
||||
left: 4%;
|
||||
top: -40px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@keyframes continuous-rotation {
|
||||
from {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.xiaoshiHover {
|
||||
width: 48px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
background: #1783C6;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.timeStty {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.tcxitit {
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.timeright {
|
||||
float: right;
|
||||
margin-right: 3%;
|
||||
}
|
||||
}
|
||||
|
||||
.tcxitit {
|
||||
display: block;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
margin-left: 2%;
|
||||
}
|
||||
|
||||
.cqimgTcList {
|
||||
width: 100%;
|
||||
height: 480px;
|
||||
overflow: auto;
|
||||
|
||||
.cqimg {
|
||||
width: 32%;
|
||||
float: left;
|
||||
margin-top: 10px;
|
||||
margin-right: 1%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgb(0, 95, 65);
|
||||
}
|
||||
}
|
||||
|
||||
.cqTime {
|
||||
color: #1090D4;
|
||||
font-size: 16px;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 定义滚动条样式 */
|
||||
|
||||
.cqimgTcList::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background-color: rgba(240, 240, 240, 0.1);
|
||||
}
|
||||
|
||||
/*定义滚动条轨道 内阴影+圆角*/
|
||||
|
||||
.cqimgTcList::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 0px rgba(240, 240, 240, .0);
|
||||
border-radius: 10px;
|
||||
background-color: rgba(240, 240, 240, .0);
|
||||
}
|
||||
|
||||
/*定义滑块 内阴影+圆角*/
|
||||
|
||||
.cqimgTcList::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 0px rgba(36, 132, 109, .8);
|
||||
background-color: rgba(36, 132, 109, .8);
|
||||
}
|
||||
|
||||
|
||||
.tz_cov_zaip {
|
||||
width: 100%;
|
||||
height: 1000px;
|
||||
/* background: url(../../assets/images/tccovbak.png) no-repeat;
|
||||
background-size: 100% 100%; */
|
||||
background: rgba(15, 36, 69, 0.7);
|
||||
border-radius: 0.5vw;
|
||||
border: 1px solid #33739d;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 0px 30px 0px rgba(14, 147, 255, 0.8);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tz_cov_zaip .el-tabs--border-card {
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.tz_cov_zaip .el-tabs--border-card > .el-tabs__header {
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
margin-left: 15px;
|
||||
/* padding-left: 15px; */
|
||||
}
|
||||
|
||||
.tz_cov_zaip .el-tabs__item {
|
||||
background: #0F5474;
|
||||
border: 1px solid #0089AE !important;
|
||||
margin-right: 1% !important;
|
||||
color: #C9C9C9 !important;
|
||||
font-size: 16px;
|
||||
padding: 0px 15px !important;
|
||||
box-sizing: border-box;
|
||||
/* height: 40px !important; */
|
||||
}
|
||||
|
||||
.tz_cov_zaip .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
|
||||
background: #0089AE;
|
||||
border: 1px solid #1A848F !important;
|
||||
margin-right: 1% !important;
|
||||
color: #fff !important;
|
||||
font-size: 16px;
|
||||
padding: 0 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tz_cov_zaip .el-tabs--border-card > .el-tabs__content {
|
||||
padding: 0;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
.tableRowClassName{
|
||||
background-color: rgb(34, 28, 28);
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.el-table) :deep(.el-table__body-wrapper){
|
||||
background-color: rgb(34, 28, 28);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -122,7 +122,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
dTitle: '长期定位监测',
|
||||
urlimg: 'https://fxnsp.zgzhny.com/lh-api/sys/common/static/',
|
||||
urlimg: 'https://fxnsp.sxcooh.com/lh-api/sys/common/static/',
|
||||
urlimg2: 'https://farm.ilhzn.cn/jeecg-boot/sys/common/static/',
|
||||
deployType: 'soil',
|
||||
allData: null,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,564 @@
|
|||
<template>
|
||||
<div class="yqgkcCon nynj">
|
||||
<!-- 轨迹地图弹窗 -->
|
||||
<el-dialog
|
||||
custom-class="table_dialog"
|
||||
top="85px"
|
||||
:show-close="false"
|
||||
width="100%"
|
||||
destroy-on-close
|
||||
append-to-body
|
||||
:visible.sync="mapDialogVisible"
|
||||
v-if="mapDialogVisible"
|
||||
>
|
||||
<div class="inner_width" style="background: #0B2536;height:106%;">
|
||||
<img class="inner-img-w" src="@/assets/image/big_background.png" alt="">
|
||||
<div class="content-box" style="padding: 0;">
|
||||
<div class="mapparent" id="trajectory"></div>
|
||||
<div class="topdetail">
|
||||
<div class="map_detail_tit">
|
||||
轨迹详情
|
||||
<div style="height: 40px;float:right;cursor: pointer;" @click.stop="closeMapDialog">
|
||||
<div class="banrutimg">
|
||||
<span>关闭</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-ul">
|
||||
<div class="map-li">车辆：{{trajectoryVehicleName || '--'}}</div>
|
||||
<div class="map-li">车牌：{{trajectoryPlate || '--'}}</div>
|
||||
<div class="map-li">司机：{{formatName(trajectoryDriver)}}</div>
|
||||
<div class="map-li">GPS设备：{{trajectoryGpsId || '--'}}</div>
|
||||
<div class="map-li">轨迹点数：{{trajectoryPoints.length || 0}}</div>
|
||||
<div class="map-li"></div>
|
||||
<div class="map-li"></div>
|
||||
<div class="map-li"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-box">
|
||||
<div class="play" @click="jog">
|
||||
<img style="width: 24px;height: 24px;margin-bottom:3px" src="@/assets/image/reduce.png" alt="">
|
||||
<div>减速</div>
|
||||
</div>
|
||||
<div class="play" v-if="playsttus == 0 || playsttus == 2" @click="silderInput">
|
||||
<img src="@/assets/image/play.png" alt="">
|
||||
<div>播放</div>
|
||||
</div>
|
||||
<div class="play" v-if="playsttus == 1" @click="pauseAnimation">
|
||||
<img style="width: 24px;height: 24px;margin-bottom:3px" src="@/assets/image/puse.png" alt="">
|
||||
<div>暂停</div>
|
||||
</div>
|
||||
<div class="play" @click="fastforward">
|
||||
<img style="width: 24px;height: 24px;margin-bottom:3px" src="@/assets/image/add.png" alt="">
|
||||
<div>加速</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { gpsRecordPage } from '@/api';
|
||||
|
||||
export default {
|
||||
name: "zhnjCov",
|
||||
props: {
|
||||
// 从父组件接收车辆数据（点击地图标记时传入）
|
||||
vehicleData: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
// 控制弹窗显示
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
vehicleData: {
|
||||
handler(newVal) {
|
||||
if (newVal && newVal.gpsId) {
|
||||
// 接收到车辆数据，打开轨迹弹窗
|
||||
this.openTrajectoryDialog(newVal);
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
visible: {
|
||||
handler(newVal) {
|
||||
if (!newVal) {
|
||||
this.mapDialogVisible = false;
|
||||
this.clearMap();
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mapDialogVisible: false,
|
||||
|
||||
// 轨迹相关
|
||||
trajectoryPoints: [],
|
||||
trajectoryVehicleName: '',
|
||||
trajectoryPlate: '',
|
||||
trajectoryDriver: '',
|
||||
trajectoryGpsId: '',
|
||||
allTrajectoryData: [],
|
||||
|
||||
// 地图相关
|
||||
myMap: null,
|
||||
polyline: null,
|
||||
passedPolyline: null,
|
||||
marker: null,
|
||||
|
||||
playsttus: 0,
|
||||
valueTime: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 打开轨迹弹窗
|
||||
openTrajectoryDialog(vehicleInfo) {
|
||||
if (!vehicleInfo.gpsId) {
|
||||
this.$message.warning('该车辆没有GPS设备ID');
|
||||
return;
|
||||
}
|
||||
|
||||
this.trajectoryVehicleName = vehicleInfo.veNotes || vehicleInfo.vehicleName || '车辆';
|
||||
this.trajectoryPlate = vehicleInfo.vePlate || vehicleInfo.plateNumber || '--';
|
||||
this.trajectoryDriver = vehicleInfo.veDriver || vehicleInfo.driverName || '--';
|
||||
this.trajectoryGpsId = vehicleInfo.gpsId;
|
||||
|
||||
// 打开轨迹弹窗
|
||||
this.mapDialogVisible = true;
|
||||
// 获取轨迹数据
|
||||
this.fetchAllTrajectoryData();
|
||||
},
|
||||
|
||||
// 关闭轨迹弹窗
|
||||
closeMapDialog() {
|
||||
this.mapDialogVisible = false;
|
||||
this.clearMap();
|
||||
this.$emit('close');
|
||||
},
|
||||
|
||||
// 清除地图
|
||||
clearMap() {
|
||||
if (this.marker) {
|
||||
try {
|
||||
this.marker.stopMove();
|
||||
} catch(e) {}
|
||||
this.marker = null;
|
||||
}
|
||||
if (this.polyline) {
|
||||
this.polyline = null;
|
||||
}
|
||||
if (this.passedPolyline) {
|
||||
this.passedPolyline = null;
|
||||
}
|
||||
if (this.myMap) {
|
||||
try {
|
||||
this.myMap.destroy();
|
||||
} catch(e) {}
|
||||
this.myMap = null;
|
||||
}
|
||||
this.playsttus = 0;
|
||||
},
|
||||
|
||||
// 获取全部轨迹数据（不分页）
|
||||
fetchAllTrajectoryData() {
|
||||
const params = {
|
||||
pageNo: 1,
|
||||
pageSize: 1000,
|
||||
gpsId: this.trajectoryGpsId
|
||||
};
|
||||
|
||||
this.$message({
|
||||
message: '正在加载轨迹数据...',
|
||||
type: 'info',
|
||||
duration: 1500
|
||||
});
|
||||
|
||||
gpsRecordPage(params).then(res => {
|
||||
if (res.success && res.result) {
|
||||
const records = res.result.records || [];
|
||||
this.allTrajectoryData = records;
|
||||
|
||||
// 提取经纬度点
|
||||
this.trajectoryPoints = records
|
||||
.filter(item => item.jingdu && item.weidu)
|
||||
.map(item => [parseFloat(item.jingdu), parseFloat(item.weidu)]);
|
||||
|
||||
console.log('轨迹点数量:', this.trajectoryPoints.length);
|
||||
|
||||
if (this.trajectoryPoints.length > 0) {
|
||||
this.$nextTick(() => {
|
||||
this.initTrajectoryMap();
|
||||
});
|
||||
} else {
|
||||
this.$message.warning('该车辆暂无轨迹数据');
|
||||
}
|
||||
} else {
|
||||
this.$message.error('获取轨迹数据失败');
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error('获取轨迹数据失败:', err);
|
||||
this.$message.error('获取轨迹数据失败');
|
||||
});
|
||||
},
|
||||
|
||||
// 初始化轨迹地图
|
||||
initTrajectoryMap() {
|
||||
if (this.trajectoryPoints.length === 0) return;
|
||||
|
||||
this.clearMap();
|
||||
|
||||
const mapContainer = document.getElementById('trajectory');
|
||||
if (!mapContainer) {
|
||||
console.error('地图容器不存在');
|
||||
return;
|
||||
}
|
||||
|
||||
// 初始化地图
|
||||
this.myMap = new AMap.Map('trajectory', {
|
||||
resizeEnable: true,
|
||||
viewMode: '3D',
|
||||
zoomEnable: true,
|
||||
dragEnable: true,
|
||||
doubleClickZoom: true,
|
||||
zoom: 15,
|
||||
center: this.trajectoryPoints[0]
|
||||
});
|
||||
|
||||
// 添加地图图层
|
||||
let googleLayer = new AMap.TileLayer({
|
||||
tileSize: 256,
|
||||
errorUrl: '',
|
||||
getTileUrl: function (x, y, z) {
|
||||
return 'https://map.snkoudai.com/maps/vt/lyrs=y&hl=zh-CN&gl=cn&scale=1&x=' + x + '&y=' + y + '&z=' + z + '';
|
||||
},
|
||||
zIndex: 2,
|
||||
zooms: [16, 22],
|
||||
opacity: 1,
|
||||
});
|
||||
googleLayer.setMap(this.myMap);
|
||||
|
||||
// 绘制轨迹线
|
||||
this.polyline = new AMap.Polyline({
|
||||
map: this.myMap,
|
||||
path: this.trajectoryPoints,
|
||||
showDir: true,
|
||||
strokeColor: "#28F",
|
||||
strokeWeight: 6,
|
||||
});
|
||||
this.myMap.add(this.polyline);
|
||||
|
||||
// 添加起点标记
|
||||
this.marker = new AMap.Marker({
|
||||
map: this.myMap,
|
||||
position: this.trajectoryPoints[0],
|
||||
icon: "https://manage.ilhzn.cn/zh-api/sys/common/static/temp/20241228154040_824e4981dff456b1bb8889.png",
|
||||
offset: new AMap.Pixel(-23, -30)
|
||||
});
|
||||
|
||||
// 已走过的路径
|
||||
this.passedPolyline = new AMap.Polyline({
|
||||
strokeColor: "#AF5",
|
||||
strokeWeight: 6,
|
||||
});
|
||||
this.myMap.add(this.passedPolyline);
|
||||
|
||||
// 自适应视图
|
||||
this.myMap.setFitView();
|
||||
},
|
||||
|
||||
// 播放控制
|
||||
silderInput() {
|
||||
if (this.trajectoryPoints.length === 0) {
|
||||
this.$message.warning('暂无轨迹数据');
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.playsttus === 1) {
|
||||
this.pauseAnimation();
|
||||
return;
|
||||
} else if (this.playsttus === 2) {
|
||||
this.resumeAnimation();
|
||||
return;
|
||||
}
|
||||
|
||||
this.playsttus = 1;
|
||||
const that = this;
|
||||
|
||||
AMap.plugin("AMap.MoveAnimation", () => {
|
||||
that.marker.moveAlong(that.trajectoryPoints, {
|
||||
duration: 5000,
|
||||
autoRotation: true,
|
||||
});
|
||||
that.marker.on("moving", (e) => {
|
||||
that.passedPolyline.setPath(e.passedPath);
|
||||
that.myMap.setCenter(e.target.getPosition(), true);
|
||||
if (e.passedPath.length === that.trajectoryPoints.length) {
|
||||
that.playsttus = 0;
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
pauseAnimation() {
|
||||
if (this.marker) {
|
||||
this.marker.pauseMove();
|
||||
this.playsttus = 2;
|
||||
}
|
||||
},
|
||||
|
||||
resumeAnimation() {
|
||||
if (this.marker) {
|
||||
this.marker.resumeMove();
|
||||
this.playsttus = 1;
|
||||
}
|
||||
},
|
||||
|
||||
jog() {
|
||||
this.$message.info('减速');
|
||||
},
|
||||
|
||||
fastforward() {
|
||||
this.$message.info('加速');
|
||||
},
|
||||
|
||||
formatName(name) {
|
||||
if (!name) return '--';
|
||||
if (name.length <= 1) return name + '*';
|
||||
if (name.length === 2) return name.charAt(0) + '*';
|
||||
return name.charAt(0) + '*'.repeat(name.length - 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
:deep.el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
background: #409EFF !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
.table_dialog {
|
||||
width: 100%;
|
||||
height: calc(100vh - 122px);
|
||||
margin-bottom: 0;
|
||||
background: none;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.table_dialog .inner_width {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.table_dialog .inner_width .inner-img-w {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.table_dialog .inner_width .content-box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
padding: 15px 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.table_dialog .inner_width .bottom-box {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
width: 98%;
|
||||
}
|
||||
.table_dialog .inner_width .bottom-box .play {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px 0;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
}
|
||||
.table_dialog .inner_width .bottom-box .play img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
.table_dialog .inner_width .bottom-box .play div {
|
||||
width: 100%;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
}
|
||||
.table_dialog .inner_width .topdetail {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 0;
|
||||
left: 1%;
|
||||
height: 140px;
|
||||
background: rgba(0, 0, 0, 0.61);
|
||||
padding: 14px 30px;
|
||||
box-sizing: border-box;
|
||||
width: 98%;
|
||||
}
|
||||
.table_dialog .inner_width .topdetail .map_detail_tit {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: #01fffa;
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
box-sizing: border-box;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.table_dialog .inner_width .topdetail .map_detail_tit:before {
|
||||
content: ' ';
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
background: #01fffa;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
.table_dialog .inner_width .topdetail .map-ul {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.table_dialog .inner_width .topdetail .map-ul .map-li {
|
||||
width: 25%;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
line-height: 2.5;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
.table_dialog .el-dialog__header {
|
||||
padding: 0;
|
||||
}
|
||||
.table_dialog .el-dialog__body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
.table_dialog .el-table tr {
|
||||
background: none;
|
||||
}
|
||||
.table_dialog .el-table td.el-table__cell,
|
||||
.table_dialog .el-table th.el-table__cell.is-leaf {
|
||||
border-color: rgba(16, 128, 255, 0.4);
|
||||
color: #fff;
|
||||
}
|
||||
.table_dialog .el-input__inner {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #01fffa;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
}
|
||||
.table_dialog .el-table th.el-table__cell {
|
||||
background: none;
|
||||
}
|
||||
.table_dialog .el-table--border::after,
|
||||
.table_dialog .el-table--group::after,
|
||||
.table_dialog .el-table::before {
|
||||
background-color: rgba(16, 128, 255, 0.4);
|
||||
}
|
||||
.table_dialog .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||||
background: #06111B !important;
|
||||
}
|
||||
.table_dialog .pagination {
|
||||
margin-top: 20px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table_dialog .pagination .el-pager li {
|
||||
background: none;
|
||||
color: #fff;
|
||||
}
|
||||
.table_dialog .pagination .el-pagination .btn-next,
|
||||
.table_dialog .pagination .el-pagination .btn-prev {
|
||||
background: none;
|
||||
color: #fff;
|
||||
}
|
||||
.table_dialog .pagination .el-pagination__jump {
|
||||
color: #fff;
|
||||
}
|
||||
.el-select-dropdown,
|
||||
.el-picker-panel {
|
||||
background-color: #0b202f;
|
||||
border-color: rgba(16, 128, 255, 0.4);
|
||||
}
|
||||
.el-table td {
|
||||
padding: 4px 0px;
|
||||
}
|
||||
.el-date-table__row .available {
|
||||
color: #fff;
|
||||
}
|
||||
.el-date-picker__header .el-picker-panel__icon-btn {
|
||||
color: #fff;
|
||||
}
|
||||
.el-date-picker__header .el-date-picker__header-label {
|
||||
color: #fff;
|
||||
}
|
||||
.el-select-dropdown__item.hover,
|
||||
.el-select-dropdown__item:hover {
|
||||
background-color: #0b202f;
|
||||
color: #fff;
|
||||
}
|
||||
.popper__arrow {
|
||||
border-color: #0b202f;
|
||||
}
|
||||
.el-button--text {
|
||||
color: #01fffa;
|
||||
}
|
||||
.mapparent {
|
||||
width: 98%;
|
||||
height: 800px;
|
||||
margin: 0 auto;
|
||||
margin-top: 1%;
|
||||
background: #0a2a3a;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.banrutimg {
|
||||
width: 88px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
background: url(@/assets/image/zhnj/backreturn.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.banrutimg span {
|
||||
float: right;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.banrutimg:hover {
|
||||
width: 88px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
float: right;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
background: url(@/assets/image/zhnj/backreturnhover.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -9,11 +9,11 @@
|
|||
<div class="main2">
|
||||
<video class="fullscreenvideo" id="bgvid" playsinline="" autoplay="" muted="" loop="">
|
||||
<!-- <source src="@/assets/image/bg2.mp4" type="video/mp4">-->
|
||||
<source src="http://fxnsp.zgzhny.com/lh-api/sys/common/static/v/bg2.mp4" type="video/mp4">
|
||||
<source src="http://fxnsp.sxcooh.com/lh-api/sys/common/static/v/bg2.mp4" type="video/mp4">
|
||||
</video>
|
||||
<div class="nav">
|
||||
<span class="nav_ti nav_mag">{{DetailList.stationName}}</span>
|
||||
<span class="nav_tit">治理效果评价与预警一张图</span>
|
||||
<span class="nav_tit">治理效果评价和监测一张图</span>
|
||||
</div>
|
||||
<div class="nav_btn">
|
||||
<div class="btn_left">
|
||||
|
|
@ -172,7 +172,7 @@
|
|||
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
|
||||
</div>
|
||||
<!-- <img src="@/assets/image/zhpjimg2.png" class="zhpjimg2" alt="">-->
|
||||
<img src="http://fxnsp.zgzhny.com/lh-api/sys/common/static/bs/zhpjimg2.png" class="zhpjimg2" alt="">
|
||||
<img src="http://fxnsp.sxcooh.com/lh-api/sys/common/static/bs/zhpjimg2.png" class="zhpjimg2" alt="">
|
||||
<span class="zhpjtit" >{{DisplayListdetailList.detailValue}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -359,7 +359,7 @@ export default {
|
|||
name: "CqyzList",
|
||||
data(){
|
||||
return {
|
||||
urlimg:'https://fxnsp.zgzhny.com/lh-api/sys/common/static/',
|
||||
urlimg:'https://fxnsp.sxcooh.com/lh-api/sys/common/static/',
|
||||
player: null,
|
||||
enableZ:false, //默认关闭电子放大
|
||||
play: false, //默认停止播放
|
||||
|
|
@ -410,7 +410,7 @@ export default {
|
|||
this.DisplayListstinkList0 = val.result.stink[0].detailList[0]
|
||||
})
|
||||
getIndexSummry(stationCode).then(res=>{
|
||||
if (res.code ='200'&&res.result.length>0) {
|
||||
if (res.code == '200' && res.result.length > 0) {
|
||||
this.NHSummry = res.result[0].NHSummry
|
||||
this.TNSummry = res.result[0].TNSummry
|
||||
this.TPSummry = res.result[0].TPSummry
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -4,9 +4,9 @@
|
|||
<video autoplay loop muted preload
|
||||
style="width: 100%; height: 100%; object-fit: fill">
|
||||
<!-- <source src="@/assets/image/loginback.mp4">-->
|
||||
<source src="http://fxnsp.zgzhny.com/lh-api/sys/common/static/v/loginback.mp4">
|
||||
<source src="http://fxnsp.sxcooh.com/lh-api/sys/common/static/v/loginback.mp4">
|
||||
</video>
|
||||
<img src="@/assets/image/logintltle.png" alt="" class="logintltle">
|
||||
<img src="@/assets/image/logintltle3.png" alt="" class="logintltle">
|
||||
<el-form
|
||||
class="loginipt demo-ruleForm"
|
||||
:rules="rules"
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@
|
|||
<div class="main2" v-if="stationDetail">
|
||||
<video class="fullscreenvideo" id="bgvid" playsinline="" autoplay="" muted="" loop="">
|
||||
<!-- <source src="@/assets/image/bg2.mp4" type="video/mp4">-->
|
||||
<source src="http://fxnsp.zgzhny.com/lh-api/sys/common/static/v/bg2.mp4" type="video/mp4">
|
||||
<source src="http://fxnsp.sxcooh.com/lh-api/sys/common/static/v/bg2.mp4" type="video/mp4">
|
||||
</video>
|
||||
<div class="nav">
|
||||
<span class="nav_ti nav_mag">{{ stationDetail.stationName }}</span>
|
||||
<span class="nav_tit">治理效果评价与预警一张图</span>
|
||||
<span class="nav_tit">治理效果评价和监测一张图</span>
|
||||
</div>
|
||||
<div class="nav_btn">
|
||||
<div class="btn_left">
|
||||
|
|
@ -52,19 +52,19 @@
|
|||
<img src="@/assets/image/sanguang.png" class="sanguang" alt="">
|
||||
<div>
|
||||
<div class="in1con_lf_tit" style="position: relative;">
|
||||
<span class="in1con_lf_titshow">站点信息</span>
|
||||
<span class="in1con_lf_titshow">站点分析</span>
|
||||
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
|
||||
<!-- <img src="@/assets/image/moreinfor.png" class="in1con_lf_moreimg" alt="" @click="zdinfor"> -->
|
||||
<span class="in1con_lf_moreimg" @click="zdinfor">介绍>></span>
|
||||
</div>
|
||||
<div class="jczcov">
|
||||
<div class="switchLive">
|
||||
<span v-show="!currentPlayerLive" @click="switchLive(true)">录播</span>
|
||||
<span v-show="currentPlayerLive" @click="switchLive(false)">直播</span>
|
||||
</div>
|
||||
<el-carousel width="100%" arrow="always" :interval="5000">
|
||||
<el-carousel-item class="jczcov_lf" v-for="value in stationDetail.deviceList" :key="value.id">
|
||||
<div class="jczimg" :id="value.deployCode"></div>
|
||||
<div class="switchLive">
|
||||
<span v-show="!currentPlayerLive[value.deployCode]" @click="switchLive(true, value.deployCode)">录播</span>
|
||||
<span v-show="currentPlayerLive[value.deployCode]" @click="switchLive(false, value.deployCode)">直播</span>
|
||||
</div>
|
||||
<div class="jczimg" :id="'ezplayer' + value.deployCode"></div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
|
|
@ -127,7 +127,7 @@
|
|||
<div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
|
||||
<div>
|
||||
<div class="in1con_lf_tit ">
|
||||
<span class="in1con_lf_titshow">重要污染实时监测</span>
|
||||
<span class="in1con_lf_titshow">重点指标实时数据</span>
|
||||
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
|
||||
</div>
|
||||
<ul class="liMarqueeUp" style="height:206px;overflow:hidden;" @click="showEchartDialog($event, 1)" >
|
||||
|
|
@ -159,7 +159,7 @@
|
|||
<img src="@/assets/image/sanguang.png" class="sanguang2" alt="">
|
||||
<img src="@/assets/image/sanguang.png" class="sanguangbt2" alt="">
|
||||
<div class="zywr_lf_tit">
|
||||
<span class="zywr_titshow">重要污染物趋势图</span>
|
||||
<span class="zywr_titshow">重点污染指标趋势</span>
|
||||
<el-select class="dataTypeEchart2" v-model="dateType" placeholder="请选择" @change="changeDateType">
|
||||
<el-option
|
||||
v-for="item in dateTypeOptions"
|
||||
|
|
@ -192,12 +192,36 @@
|
|||
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
|
||||
</div>
|
||||
<!-- <img src="@/assets/image/zhpjimg2.png" class="zhpjimg2" alt="">-->
|
||||
<img src="http://fxnsp.zgzhny.com/lh-api/sys/common/static/bs/zhpjimg2.png" class="zhpjimg2" alt="">
|
||||
<span class="zhpjtit">{{ DisplayListdetailList.detailValue }}</span>
|
||||
<img src="http://fxnsp.sxcooh.com/lh-api/sys/common/static/bs/zhpjimg2.png" class="zhpjimg2" alt="">
|
||||
<span class="zhpjtit">{{ DisplayListdetailList2?.detailValue }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
|
||||
<div>
|
||||
<div class="xuqingchuli" v-if="stationType==='livestock'">
|
||||
<div class="in1con_lf_tit ">
|
||||
<span class="in1con_lf_titshow">畜禽粪污处理</span>
|
||||
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
|
||||
</div>
|
||||
<div class="qxfwzcl">
|
||||
<div class="qxfwzcl_left">
|
||||
<div class="qxfwzcl_left_tit">
|
||||
{{DisplayListdetailList0?.detailCode}}
|
||||
</div>
|
||||
<span class="qxfwzcl_left_num in1con_lf_imglf_num_jix">{{DisplayListdetailList0?.detailValue}}</span>
|
||||
<div class="qxfwzcl_left_tit">
|
||||
{{DisplayListdetailList1?.detailCode}}
|
||||
</div>
|
||||
<span class="qxfwzcl_left_num in1con_lf_imglf_num_jix">{{DisplayListdetailList1?.detailValue}}</span>
|
||||
</div>
|
||||
<div class="qxfwzcl_rit">
|
||||
<img src="@/assets/image/png01_iSpt.png" class="png01_iSpt" alt="">
|
||||
<img src="@/assets/image/qcshuj.png" class="qcshuj" alt="">
|
||||
<span class="qxfwzcl_rit_smt">{{DisplayListdetailList3?.detailCode}}</span>
|
||||
<span class="qxfwzcl_rit_num in1con_lf_imglf_num_jix">{{DisplayListdetailList3?.detailValue}} <span style="font-size: 0.5vw;">万头</span> </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="stationType==='watershed'">
|
||||
<div class="in1con_lf_tit ">
|
||||
<span class="in1con_lf_titshow">常规五参数实时监测</span>
|
||||
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
|
||||
|
|
@ -255,24 +279,126 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
|
||||
<div>
|
||||
<div v-if="stationType==='orient'">
|
||||
<div class="in1con_lf_tit ">
|
||||
<span class="in1con_lf_titshow">监测站维护日志</span>
|
||||
<span class="in1con_lf_titshow">水质数据实时监测</span>
|
||||
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
|
||||
</div>
|
||||
<div style="padding-left: 30px; margin-top: 26px; ">
|
||||
<el-timeline>
|
||||
<el-timeline-item v-for="(activity, index) in maintainLogList" :key="index" :color="`#0e81f7`" :size="'normal'"
|
||||
:placement="`top`">
|
||||
<div v-if="stationDetail.latestData && stationDetail.latestData.length > 0">
|
||||
<div class="changguiwucanshu">
|
||||
<div @click="showEchartDialog(stationDetail,stationDetail.latestData[0].survItem)"
|
||||
v-if="stationDetail.latestData.length > 0">
|
||||
<div class="wucanshuDiv">
|
||||
<div class="wucanshuValueDiv">
|
||||
<animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"
|
||||
:to="(stationDetail.latestData[0].value?stationDetail.latestData[0].value:0)" />
|
||||
<span class="typeStyle">{{ stationDetail.latestData[0].unit }}</span></div>
|
||||
</div>
|
||||
<div class="wucanshuNameDiv">{{stationDetail.latestData[0].name}}</div>
|
||||
</div>
|
||||
<div @click="showEchartDialog(stationDetail,stationDetail.latestData[1].survItem)"
|
||||
v-if="stationDetail.latestData.length > 1">
|
||||
<div class="wucanshuDiv">
|
||||
<div class="wucanshuValueDiv">
|
||||
<animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"
|
||||
:to="(stationDetail.latestData[1].value?stationDetail.latestData[1].value:0)" />
|
||||
<span class="typeStyle">{{ stationDetail.latestData[1].unit }}</span></div>
|
||||
</div>
|
||||
<div class="wucanshuNameDiv">{{stationDetail.latestData[1].name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="changguiwucanshu" >
|
||||
<div @click="showEchartDialog(stationDetail,stationDetail.latestData[2].survItem)"
|
||||
v-if="stationDetail.latestData.length > 2">
|
||||
<div class="wucanshuDiv">
|
||||
<div class="wucanshuValueDiv">
|
||||
<animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"
|
||||
:to="stationDetail.latestData[2].value?stationDetail.latestData[2].value:0" />
|
||||
<span class="typeStyle">{{ stationDetail.latestData[2].unit }}</span></div>
|
||||
</div>
|
||||
<div class="wucanshuNameDiv">{{stationDetail.latestData[2].name}}</div>
|
||||
</div>
|
||||
<div @click="showEchartDialog(stationDetail,stationDetail.latestData[3].survItem)"
|
||||
v-if="stationDetail.latestData.length > 3">
|
||||
<div class="wucanshuDiv">
|
||||
<div class="wucanshuValueDiv">
|
||||
<animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"
|
||||
:to="stationDetail.latestData[3].value?stationDetail.latestData[3].value:0" />
|
||||
<span class="typeStyle">{{ stationDetail.latestData[3].unit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wucanshuNameDiv">{{stationDetail.latestData[3].name}}</div>
|
||||
</div>
|
||||
<div @click="showEchartDialog(stationDetail,stationDetail.latestData[4].survItem)"
|
||||
v-if="stationDetail.latestData.length > 4">
|
||||
<div class="wucanshuDiv">
|
||||
<div class="wucanshuValueDiv">
|
||||
<animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"
|
||||
:to="stationDetail.latestData[4].value?stationDetail.latestData[4].value:0" />
|
||||
<span class="typeStyle">{{ stationDetail.latestData[4].unit }}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="wucanshuNameDiv">{{stationDetail.latestData[4].name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
|
||||
<!-- <div>-->
|
||||
<!-- <div class="in1con_lf_tit ">-->
|
||||
<!-- <span class="in1con_lf_titshow">监测站维护日志</span>-->
|
||||
<!-- <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">-->
|
||||
<!-- </div>-->
|
||||
<!-- <div style="padding-left: 30px; margin-top: 26px; ">-->
|
||||
<!-- <el-timeline>-->
|
||||
<!-- <el-timeline-item v-for="(activity, index) in maintainLogList" :key="index" :color="`#0e81f7`" :size="'normal'"-->
|
||||
<!-- :placement="`top`">-->
|
||||
<!-- <div class="maintainLog">-->
|
||||
<!-- <div class="maintainLogContent"><span class="el-icon-mobile"></span> {{activity.maintainData1}}</div>-->
|
||||
<!-- <div class="maintainLogPerson">维护人：{{activity.maintainPerson}}</div>-->
|
||||
<!-- <div class="maintainLogTime"><span class="el-icon-s-custom"></span> {{activity.maintainPerson}} -->
|
||||
<!-- <span class="el-icon-time"></span> {{activity.maintainTime}}</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-timeline-item>-->
|
||||
<!-- </el-timeline>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<div>
|
||||
<div class="in1con_lf_tit ">
|
||||
<span class="in1con_lf_titshow">监测与预警</span>
|
||||
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
|
||||
</div>
|
||||
<div style=" margin-top: 26px; margin-bottom: 10px; ">
|
||||
<el-collapse-transition>
|
||||
<el-timeline v-if="alertList && alertList.length > 0" style="margin-left: 30px;position: relative;top: -20px; overflow: hidden;height: 252px;">
|
||||
<el-timeline-item v-for="(activity, index) in alertList" :key="index" :color="`#66a8f1`"
|
||||
:size="'normal'" :placement="`top`" style="top: 20px;" >
|
||||
<div class="maintainLog">
|
||||
<div class="maintainLogContent"><span class="el-icon-mobile"></span> {{activity.maintainData1}}</div>
|
||||
<div class="maintainLogPerson">维护人：{{activity.maintainPerson}}</div>
|
||||
<div class="maintainLogTime"><span class="el-icon-s-custom"></span> {{activity.maintainPerson}}
|
||||
<span class="el-icon-time"></span> {{activity.maintainTime}}</div>
|
||||
<div class="maintainLogContent">
|
||||
<span class="el-icon-mobile"></span>
|
||||
<span>{{activity.itemName}}</span>
|
||||
<span style="color: #f4d877;font-size: 20px;"> {{activity.survValue}}</span>
|
||||
<span style="color: #f4d877;font-size: 12px;">{{activity.survUnit}} </span>
|
||||
<!-- <span>标准值 {{activity.normalValue}}{{activity.survUnit}}</span>-->
|
||||
<span :style="{color:activity.readStatus=='low'?'#66A8F1FF':activity.readStatus=='high'?'#ff676a':''}">({{activity.readStatus=='low'?'偏低':activity.readStatus=='high'?'偏高':'正常'}})</span>
|
||||
</div>
|
||||
<div class="maintainLogPerson"></div>
|
||||
<div class="maintainLogTime">
|
||||
<span class="el-icon-time"></span> {{activity.alertTime}}
|
||||
</div>
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</el-collapse-transition>
|
||||
<div v-if="alertList && alertList.length <= 0">
|
||||
<div style="margin:60px auto; width: 100%;font-size: 40px;color: #edd792; text-align: center;">暂无预警数据</div>
|
||||
</div>
|
||||
<div v-if="!alertList">
|
||||
<div style="margin:60px auto; width: 100%;font-size: 30px;color: #edd792; text-align: center;">
|
||||
<i class="el-icon-loading"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -315,7 +441,15 @@
|
|||
|
||||
<script>
|
||||
import ScaleBox from 'vue2-scale-box'
|
||||
import {getStationDetail, getStationDisplay, getIndexSummry, survItemSummary, getMaintainLog, stationInfo} from '@/api';
|
||||
import {
|
||||
getStationDetail,
|
||||
getStationDisplay,
|
||||
getIndexSummry,
|
||||
survItemSummary,
|
||||
getMaintainLog,
|
||||
stationInfo,
|
||||
getAlertRecord, doGetAlertRecord
|
||||
} from '@/api';
|
||||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||
import hefentianqi from '@/pages/weather/weather.vue'
|
||||
import SingleEchartDialog from "@/components/SingleEchartDialog.vue";
|
||||
|
|
@ -332,11 +466,12 @@ export default {
|
|||
return {
|
||||
loading: true,
|
||||
stationList:[],
|
||||
currentPlayerLive: true,
|
||||
currentPlayerLive: {},
|
||||
singleEchartDialogShowFlag: false,
|
||||
singleEchartData: null,
|
||||
stationCode: '',
|
||||
urlimg: 'https://fxnsp.zgzhny.com/lh-api/sys/common/static/',
|
||||
stationType:'',
|
||||
urlimg: 'https://fxnsp.sxcooh.com/lh-api/sys/common/static/',
|
||||
player: {},
|
||||
timer: {},
|
||||
interval: {},
|
||||
|
|
@ -346,14 +481,16 @@ export default {
|
|||
DetailListAirData: '',
|
||||
// DetailListSoilData: '',
|
||||
DisplayList: '',
|
||||
DisplayListdetailList: '',
|
||||
DisplayListdetailList0: '',
|
||||
DisplayListdetailList1: '',
|
||||
DisplayListdetailList2: '',
|
||||
DisplayListdetailList3: '',
|
||||
inforname: '',
|
||||
dialogVisible: false,
|
||||
fullscreen: false, //全屏
|
||||
qczddialogTableVisible: false,
|
||||
waterData: {},
|
||||
summryAllData: null,
|
||||
echartIndex: 0,
|
||||
summryAllDataJson: null,
|
||||
maintainLogList: [],
|
||||
dateType: 'monthDays',
|
||||
dateTypeOptions: [ {
|
||||
|
|
@ -368,22 +505,11 @@ export default {
|
|||
}],
|
||||
echartObj: null,
|
||||
animateObj: [],
|
||||
alertList: null,
|
||||
};
|
||||
},
|
||||
destroyed() {
|
||||
//离开页面是销毁
|
||||
Object.values(this.timer).map(item => {
|
||||
if(item){
|
||||
clearTimeout(item);
|
||||
}
|
||||
});
|
||||
Object.values(this.interval).map(item => {
|
||||
if(item){
|
||||
clearInterval(item);
|
||||
}
|
||||
});
|
||||
this.interval = {};
|
||||
this.timer = {};
|
||||
this.doDestroyed();
|
||||
},
|
||||
created() {
|
||||
this.stationCode = this.$route.query.stationCode
|
||||
|
|
@ -403,22 +529,53 @@ export default {
|
|||
},
|
||||
},
|
||||
mounted() {
|
||||
this.initStart();
|
||||
this.stationInfoApi();
|
||||
this.initStart()
|
||||
},
|
||||
methods: {
|
||||
doDestroyed(){
|
||||
let that = this;
|
||||
that.alertList = null;
|
||||
//离开页面时销毁
|
||||
Object.values(this.timer).map(item => {
|
||||
if(item){
|
||||
clearTimeout(item);
|
||||
}
|
||||
});
|
||||
Object.values(this.interval).map(item => {
|
||||
if(item){
|
||||
clearInterval(item);
|
||||
}
|
||||
});
|
||||
this.interval = {};
|
||||
this.timer = {};
|
||||
if(that.player){
|
||||
Object.keys(that.player).forEach(key => {
|
||||
if(that.player[key]){
|
||||
console.log(that.player[key])
|
||||
if(that.player[key].stop){that.player[key].stop();}
|
||||
if(that.player[key].destroy){that.player[key].destroy();}
|
||||
}
|
||||
})
|
||||
that.player = {};
|
||||
}
|
||||
},
|
||||
initStart(){
|
||||
this.loading = true;
|
||||
// 实时时间
|
||||
this.infor()
|
||||
getStationDisplay(this.stationCode).then(val => {
|
||||
this.DisplayList = val.result
|
||||
this.DisplayListdetailList = val.result.effect_assess[0].detailList[2]
|
||||
this.DisplayListdetailList0 = val.result.effect_assess[0].detailList[0]
|
||||
this.DisplayListdetailList1 = val.result.effect_assess[0].detailList[1]
|
||||
this.DisplayListdetailList2 = val.result.effect_assess[0].detailList[2]
|
||||
this.DisplayListdetailList3 = val.result.effect_assess[0].detailList[3]
|
||||
})
|
||||
this.initChartData();//下方echart监测图标
|
||||
this.stationDetailApi();
|
||||
this.getNowTime();
|
||||
this.initMaintainLog();
|
||||
this.stationInfoApi();
|
||||
this.getAlertRecord();
|
||||
},
|
||||
initMaintainLog(){//巡检日志
|
||||
getMaintainLog({stationCode: this.stationCode, pageSize: 3}).then(res => {
|
||||
|
|
@ -430,57 +587,66 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
getAlertRecord(){
|
||||
doGetAlertRecord({stationCode: this.stationCode, pageSize: 3}).then(res => {
|
||||
console.warn('监测预警数据',res)
|
||||
if (res.code === 200) {
|
||||
if(res.result.records.length === 0 && this.stationDetail.latestData !== 0){
|
||||
//itemName survValue survUnit normalValue survUnit readStatus alertTime
|
||||
let tempData = [];
|
||||
this.stationDetail.latestData.map(item => {
|
||||
tempData.push({
|
||||
itemName: item.name,
|
||||
survValue: item.value,
|
||||
survUnit: item.unit,
|
||||
normalValue: item.value,
|
||||
readStatus: 'normal',
|
||||
alertTime: item.dataDateTime,
|
||||
});
|
||||
})
|
||||
this.alertList = tempData;
|
||||
} else {
|
||||
this.alertList = res.result.records;
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
changeDateType() {
|
||||
// this.summryAllData = null;
|
||||
this.initChartData();
|
||||
},
|
||||
initChartData() {
|
||||
let that = this;
|
||||
this.riverList = [];
|
||||
this.summryAllData = [];
|
||||
getIndexSummry({summrayMode: this.dateType, statsionCode: this.stationCode}).then(res => {
|
||||
this.summryAllDataJson = {};
|
||||
getIndexSummry({summrayMode: this.dateType, stationCode: this.stationCode}).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.summryAllData = res.result;
|
||||
let len = this.summryAllData.length;
|
||||
this.summryAllData.map((item1, index) => {
|
||||
if (index % 2 === 0 && item1['datas'] && (index + 1) < len) {
|
||||
let data1 = item1['datas'];
|
||||
let keys = Object.keys(data1);
|
||||
let data2 = this.summryAllData[index + 1]['datas'];
|
||||
let data3 = {}
|
||||
let item3 = JSON.parse(JSON.stringify(item1));
|
||||
if (data2) {
|
||||
keys.map(key => {
|
||||
if (data1[key] instanceof Array) {
|
||||
data3[key] = []
|
||||
data1[key].map((itemSub, index) => {
|
||||
data3[key].push((data2[key][index] - data1[key][index]).toFixed(2))
|
||||
})
|
||||
}
|
||||
})
|
||||
item3['datas'] = data3;
|
||||
this.riverList.push(item3);
|
||||
}
|
||||
}
|
||||
res.result.map(item => {
|
||||
that.summryAllDataJson[item.stationCode] = item;
|
||||
});
|
||||
this.initEchartDom(this.echartIndex)
|
||||
this.initEchartDom()
|
||||
}
|
||||
})
|
||||
},
|
||||
// 折线图数据
|
||||
initEchartDom(index) {
|
||||
initEchartDom(times) {
|
||||
this.$nextTick(() => {
|
||||
let domKey = `myChartDiv0`;
|
||||
let divDom = document.getElementById(domKey);
|
||||
if (!divDom) {
|
||||
console.log('没找到dom：', domKey, divDom)
|
||||
console.warn('没找到dom,两秒后重试：', domKey, divDom)
|
||||
if (times !== 2) {
|
||||
setTimeout(() => {
|
||||
this.initEchartDom(2)
|
||||
}, 1500);
|
||||
}
|
||||
return;
|
||||
}
|
||||
if(this.echartObj){
|
||||
if (this.echartObj) {
|
||||
this.echartObj.dispose();
|
||||
}
|
||||
this.echartObj = this.$echarts.init(divDom);
|
||||
let data = this.summryAllData[index];
|
||||
console.log('开始初始化echart：' )
|
||||
let data = this.summryAllDataJson[this.stationCode];
|
||||
let dataObj = [];
|
||||
let i = 0;
|
||||
let colors = [
|
||||
|
|
@ -488,7 +654,7 @@ export default {
|
|||
'#001F3F', '#0074D9', '#9D50BB', '#6B48FF', '#FF69B4',
|
||||
'#FF6B6B', '#556B2F', '#32CD32', '#87CEEB', '#8B0000',
|
||||
'#DAA520', '#121212', '#F5F5F5', '#C0C0C0', '#003321'
|
||||
] ;
|
||||
];
|
||||
for (let key in data['datas']) {
|
||||
if (data['datas'][key] instanceof Array) {
|
||||
dataObj[i++] = {
|
||||
|
|
@ -571,19 +737,20 @@ export default {
|
|||
series: seriesData
|
||||
};
|
||||
this.echartObj.setOption(optionLine);
|
||||
|
||||
})
|
||||
},
|
||||
zdinfor(){
|
||||
this.qczddialogTableVisible=true;
|
||||
zdinfor() {
|
||||
this.qczddialogTableVisible = true;
|
||||
},
|
||||
showEchartDialog(item, survItem) {
|
||||
console.log('showEchartDialog', item, survItem)
|
||||
if(survItem === 1){
|
||||
if (survItem === 1) {
|
||||
console.log('showEchartDialog111', item, survItem)
|
||||
const dom = item.target.closest(".jcsssj2"); // 定位元素
|
||||
if (dom) { // 是否是滚动组件的某一行/列
|
||||
survItem = dom.dataset.survitem
|
||||
if(survItem){
|
||||
if (survItem) {
|
||||
this.showEchartDialog(this.stationDetail, survItem)
|
||||
}
|
||||
}
|
||||
|
|
@ -616,7 +783,7 @@ export default {
|
|||
// 实时时间
|
||||
getNowTime() {
|
||||
let that = this
|
||||
this.interval['time'] = setInterval(() =>{
|
||||
this.interval['time'] = setInterval(() => {
|
||||
that.nowTime = that.timeNumber()
|
||||
}, 1000)
|
||||
},
|
||||
|
|
@ -639,25 +806,27 @@ export default {
|
|||
stationDetailApi() {
|
||||
let that = this;
|
||||
// this.stationDetail = null
|
||||
if(that.stationDetail){
|
||||
if (that.stationDetail) {
|
||||
that.stationDetail.latestData = []
|
||||
}
|
||||
getStationDetail(this.stationCode).then(res => {
|
||||
this.stationDetail = res.result
|
||||
this.stationType = res.result.stationType
|
||||
this.DetailListAirData = res.result.latestAirData[0]
|
||||
//空气数据
|
||||
if (this.DetailListAirData) { }
|
||||
if (this.DetailListAirData) {
|
||||
}
|
||||
if (this.stationDetail.latestWaterData[0]) { //水数据
|
||||
this.stationDetail.latestWaterData.map(item => {
|
||||
if(item.survItem == 'dataWaterTemp'){
|
||||
if (item.survItem == 'dataWaterTemp') {
|
||||
that.waterData.dataWaterTemp = item.value
|
||||
} else if(item.survItem == 'dataWaterPh'){
|
||||
} else if (item.survItem == 'dataWaterPh') {
|
||||
that.waterData.dataWaterPh = item.value
|
||||
} else if(item.survItem == 'dataWaterDo'){
|
||||
} else if (item.survItem == 'dataWaterDo') {
|
||||
that.waterData.dataWaterDo = item.value
|
||||
} else if(item.survItem == 'dataWaterDdl'){
|
||||
} else if (item.survItem == 'dataWaterDdl') {
|
||||
that.waterData.dataWaterDdl = item.value
|
||||
} else if(item.survItem == 'dataWaterNtu'){
|
||||
} else if (item.survItem == 'dataWaterNtu') {
|
||||
that.waterData.dataWaterNtu = item.value
|
||||
}
|
||||
});
|
||||
|
|
@ -666,34 +835,39 @@ export default {
|
|||
}
|
||||
// 土壤数据
|
||||
// this.DetailListSoilData = res.result.latestSoilData[0]
|
||||
that.currentPlayerLive = false;
|
||||
that.currentPlayerLive = {};
|
||||
// 监控画面
|
||||
setTimeout(() => {
|
||||
this.switchLive(true);
|
||||
}, 2000)
|
||||
})
|
||||
},
|
||||
switchLive(live){
|
||||
switchLive(live, deployCode) {
|
||||
let that = this;
|
||||
this.stationDetail.deviceList.forEach((item) => {
|
||||
if (!deployCode) {
|
||||
that.initPlayer(item, live);
|
||||
} else if (deployCode == item.deployCode) {
|
||||
that.initPlayer(item, live);
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
initPlayer(itm, live){
|
||||
initPlayer(itm, live) {
|
||||
let that = this;
|
||||
if(this.currentPlayerLive === live){
|
||||
if (this.currentPlayerLive[itm.deployCode] === live) {
|
||||
return;
|
||||
}
|
||||
that.currentPlayerLive = live;
|
||||
if(that.player[itm.deployCode]){
|
||||
that.currentPlayerLive[itm.deployCode] = live;
|
||||
if (that.player[itm.deployCode]) {
|
||||
that.player[itm.deployCode].stop();
|
||||
that.player[itm.deployCode].destroy();
|
||||
}
|
||||
that.player[itm.deployCode] = new EZUIKit.EZUIKitPlayer({
|
||||
id: itm.deployCode,
|
||||
id: 'ezplayer' + itm.deployCode,
|
||||
accessToken: itm.ysToken,
|
||||
url: itm.deviceUrl,
|
||||
template: live?"pcLive":"pcRec", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
|
||||
url: itm.deviceUrl || itm.deviceIotUrl,
|
||||
template: live ? "pcLive" : "pcRec", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
|
||||
audio: false, // 是否默认开启声音 0 - 关闭 1 - 开启
|
||||
sound: 0,
|
||||
autoplay: true,
|
||||
|
|
@ -704,21 +878,25 @@ export default {
|
|||
that.timer[itm.deployCode] && clearTimeout(that.timer[itm.deployCode]);
|
||||
if (that.player[itm.deployCode]) {
|
||||
console.log('萤石云播放器播放成功自定义回调2', that.player[itm.deployCode])
|
||||
that.player[itm.deployCode].closeSound();
|
||||
that.timer[itm.deployCode] = setTimeout(() => {
|
||||
if (that.player[itm.deployCode] && that.player[itm.deployCode].closeSound) {
|
||||
that.player[itm.deployCode].closeSound();
|
||||
}
|
||||
}, 2000)
|
||||
that.timer[itm.deployCode] = setTimeout(() => {
|
||||
if (that.player[itm.deployCode] && that.player[itm.deployCode].pause) {
|
||||
that.player[itm.deployCode].pause()
|
||||
}
|
||||
}, 60000)
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
stationInfoApi(){
|
||||
stationInfoApi() {
|
||||
stationInfo().then(res => {
|
||||
this.stationInfoList = res.result
|
||||
if (this.stationInfoList) {
|
||||
this.stationList = [];
|
||||
res.result.map(item => {
|
||||
this.stationList.push({
|
||||
stationCode: item.stationCode,
|
||||
|
|
@ -728,23 +906,24 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
switchStation(e){
|
||||
console.log(e);
|
||||
switchStation(e) {
|
||||
console.log('切换站点');
|
||||
this.doDestroyed();
|
||||
// this.$router.push({path: '/MywrList', query: {stationCode: e.stationCode}})
|
||||
this.initStart();
|
||||
},
|
||||
addAnimateObj(dom){
|
||||
addAnimateObj(dom) {
|
||||
this.animateObj.push(dom);
|
||||
// console.log('特效数组添加', this.animateObj.length);
|
||||
},
|
||||
hhlistxunh() {
|
||||
// console.log('数据特效 轮询展示', this.animateObj);
|
||||
if(this.timer['water']){
|
||||
if (this.timer['water']) {
|
||||
clearTimeout(this.timer['water'])
|
||||
}
|
||||
this.animateObj.forEach((item, index) => {
|
||||
// console.log('数据特效 轮询展示', item);
|
||||
if(Boolean(Math.round(Math.random()))) {
|
||||
if (Boolean(Math.round(Math.random()))) {
|
||||
item && item.start && item.start();
|
||||
}
|
||||
|
||||
|
|
@ -1334,7 +1513,7 @@ export default {
|
|||
height: 2.4vw;
|
||||
background: #0c2139;
|
||||
float: right;
|
||||
display:block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.jcsssj_rt_tit {
|
||||
|
|
@ -2341,6 +2520,7 @@ a:hover {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
.wucanshuDiv {
|
||||
width: 144px;
|
||||
height: 104px;
|
||||
|
|
@ -2349,6 +2529,7 @@ a:hover {
|
|||
background-size: cover;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
.wucanshuValueDiv {
|
||||
font-weight: 300;
|
||||
font-family: HYChangLiSongKeBen, sans-serif;
|
||||
|
|
@ -2360,20 +2541,23 @@ a:hover {
|
|||
padding-left: 27px;
|
||||
padding-top: 12px;
|
||||
cursor: pointer;
|
||||
|
||||
.typeStyle {
|
||||
font-family: sans-serif;
|
||||
margin-left: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.wucanshuValueDiv:hover {
|
||||
color: #f4d877;
|
||||
font-size: 29px;
|
||||
}
|
||||
}
|
||||
|
||||
.wucanshuDiv:hover {
|
||||
color: #f4d877 !important;
|
||||
font-size: 29px!important;
|
||||
font-size: 29px !important;
|
||||
}
|
||||
|
||||
.wucanshuNameDiv {
|
||||
|
|
@ -2384,7 +2568,8 @@ a:hover {
|
|||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.maintainLog{
|
||||
|
||||
.maintainLog {
|
||||
position: relative;
|
||||
bottom: 28px;
|
||||
width: 344px;
|
||||
|
|
@ -2393,43 +2578,155 @@ a:hover {
|
|||
background-origin: border-box;
|
||||
background-size: contain;
|
||||
color: white;
|
||||
.maintainLogContent{
|
||||
|
||||
.maintainLogContent {
|
||||
padding-left: 74px;
|
||||
padding-top: 8px;
|
||||
//padding-top: 8px;
|
||||
color: #81b8e9;
|
||||
width: 258px; /* 设置容器宽度 */
|
||||
overflow: hidden; /* 隐藏超出部分 */
|
||||
text-overflow: ellipsis; /* 显示省略号 */
|
||||
white-space: nowrap; /* 禁止换行 */
|
||||
}
|
||||
.maintainLogPerson{
|
||||
|
||||
.maintainLogPerson {
|
||||
display: none;
|
||||
}
|
||||
.maintainLogTime{
|
||||
|
||||
.maintainLogTime {
|
||||
padding-left: 74px;
|
||||
padding-top: 8px;
|
||||
color: #bcbbbb;
|
||||
}
|
||||
}
|
||||
|
||||
.el-timeline-item__tail {
|
||||
border-left-color: rgb(71 105 172) !important;
|
||||
}
|
||||
.dataTypeEchart2{
|
||||
|
||||
.dataTypeEchart2 {
|
||||
left: 246px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.switchLive {
|
||||
position: absolute; cursor:pointer; top: 68px;right: 16px;color: rgb(255, 255, 255);z-index: 500;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 2px;
|
||||
right: 16px;
|
||||
color: rgb(255, 255, 255);
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
.switchLive:hover {
|
||||
color: rgb(236, 196, 23);
|
||||
}
|
||||
|
||||
.switchStation {
|
||||
position: absolute;
|
||||
right: 450px;
|
||||
cursor:pointer;
|
||||
cursor: pointer;
|
||||
z-index: 2000;
|
||||
width: 180px
|
||||
}
|
||||
|
||||
.xuqingchuli {
|
||||
.in1con_lf_tit {
|
||||
width: 100%;
|
||||
height: 3vw;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.in1con_lf_titshow {
|
||||
font-size: 1vw;
|
||||
color: #fff;
|
||||
text-shadow: 0px 2px 0px rgba(4, 49, 52, 0.55);
|
||||
display: block;
|
||||
margin-top: 0.9vw;
|
||||
font-family: douyuFont;
|
||||
}
|
||||
|
||||
.qxfwzcl {
|
||||
width: 100%;
|
||||
margin-top: 1vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.qxfwzcl_left {
|
||||
width: 40%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.qxfwzcl_rit {
|
||||
width: 60%;
|
||||
float: right;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.qxfwzcl_left_tit {
|
||||
width: 90%;
|
||||
height: 1.4vw;
|
||||
line-height: 1.4vw;
|
||||
background: url(../../assets/image/qctit.png) no-repeat;
|
||||
background-size: cover;
|
||||
margin-left: 5%;
|
||||
color: #e5eefa;
|
||||
padding-left: 0.6vw;
|
||||
font-size: 0.7vw;
|
||||
}
|
||||
|
||||
.qxfwzcl_left_num {
|
||||
width: 100%;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 1.8vw;
|
||||
color: #f1ff0d;
|
||||
margin-top: 0.2vw;
|
||||
margin-bottom: 1vw;
|
||||
}
|
||||
|
||||
.in1con_lf_imglf_num_jix {
|
||||
font-size: 1.5vw;
|
||||
font-weight: 300;
|
||||
font-family: HYChangLiSongKeBen;
|
||||
letter-spacing: 0.1vw
|
||||
}
|
||||
|
||||
.qxfwzcl_rit_smt {
|
||||
font-size: 0.7vw;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 8.4vw;
|
||||
left: 25%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.qxfwzcl_rit_num {
|
||||
font-size: 2vw;
|
||||
color: #f1ff0d;
|
||||
position: absolute;
|
||||
top: 4.4vw;
|
||||
left: 34%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.png01_iSpt {
|
||||
width: 150%;
|
||||
position: absolute;
|
||||
top: -3vw;
|
||||
left: -34%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.qcshuj {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: -2vw;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<!-- src="https://i.tianqi.com?c=code&id=10&color=%23FFFFFF&icon=1&py=fenxi&site=12"-->
|
||||
<!-- style="pointer-events: none;"></iframe>-->
|
||||
<!-- <iframe width="300" height="40" src="https://i.tianqi.com/?c=code&a=getcode&id=11&icon=1&color=%23FFFFFF" frameborder="0"></iframe>-->
|
||||
<iframe width="300" height="40" src="https://i.tianqi.com/?c=code&a=getcode&id=34&icon=1&color=%23FFFFFF&py=fenxi" frameborder="0"></iframe>
|
||||
<iframe width="300" height="40" src="https://i.tianqi.com/?c=code&a=getcode&id=34&icon=1&color=%23FFFFFF&py=wuxiang" frameborder="0"></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue