2024-07-22 11:11:43 +08:00
|
|
|
<template>
|
|
|
|
|
<div class="box">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<div class="left_top">
|
|
|
|
|
<div class="title1">
|
|
|
|
|
<span style="margin-left:13px;font-weight: bold;font-size: 15px;">接入总览</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex;align-items: center;justify-content: center;padding: 10px 0px;">
|
|
|
|
|
<img style="width:15%;height:15%;" src="./indeximag/图2.png" alt="" />
|
|
|
|
|
<div style="text-align: center;">
|
|
|
|
|
<p style="font-size: 13px;margin-bottom: 10px;">接入数量</p>
|
|
|
|
|
<span class="fp">{{getNthChar(data1.alarmPointTotal+'',5)}}</span>
|
|
|
|
|
<span class="fp">{{getNthChar(data1.alarmPointTotal+'',4)}}</span>
|
|
|
|
|
<span class="fp">{{getNthChar(data1.alarmPointTotal+'',3)}}</span>
|
|
|
|
|
<span class="fp">{{getNthChar(data1.alarmPointTotal+'',2)}}</span>
|
|
|
|
|
<span class="fp">{{getNthChar(data1.alarmPointTotal+'',1)}}</span>
|
|
|
|
|
<span class="fp">{{getNthChar(data1.alarmPointTotal+'',0)}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="EcharRef" style="width:98%; height:54%;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="left_cen">
|
|
|
|
|
<div class="title1">
|
|
|
|
|
<span style="margin-left:13px;font-weight: bold;font-size: 15px;">运营单位</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex;justify-content:space-between;margin-top: 10px;">
|
|
|
|
|
<div style="margin-left:30px;">
|
|
|
|
|
<span style="margin-right:5px;font-size: 13px;">接入数量</span>
|
|
|
|
|
<span class="fp">{{getNthChar(config.data.length+'',2)}}</span>
|
|
|
|
|
<span class="fp">{{getNthChar(config.data.length+'',1)}}</span>
|
|
|
|
|
<span class="fp">{{getNthChar(config.data.length+'',0)}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-right:30px;padding-top:6px;">
|
|
|
|
|
<span style="display:inline-block;font-size: 13px;">在线率</span>
|
|
|
|
|
<div style="display:inline-block;">
|
|
|
|
|
<el-progress
|
|
|
|
|
style="width:65px;display: inline-block;vertical-align: middle;margin-left:10px;margin-top: -5px;"
|
|
|
|
|
:percentage="(i/config.data.length).toFixed(2)*100" :stroke-width="15"
|
|
|
|
|
:text-inside="true"></el-progress>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="width:100%;height:70%;margin-top: 5px;">
|
|
|
|
|
<dv-scroll-board :config="config" @click="row1" style="" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="left_bottm">
|
|
|
|
|
<div class="title1">
|
|
|
|
|
<span style="margin-left:13px;font-weight: bold;font-size: 15px;">重点单位</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="EcharRef1" style="width:98%; height:44%;">
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div style="width:100%;height:30%;margin-top: 10px;">
|
|
|
|
|
<dv-scroll-board :config="config1" style="" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cen" id="myMap">
|
|
|
|
|
<!-- <el-button icon="el-icon-search" circle></el-button> -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right" style="position: relative;">
|
|
|
|
|
<span style="position: absolute;left:-180px;top:12px;z-index:9;font-size:23px;font-weight: bold;">{{maptitle}}</span>
|
|
|
|
|
<el-tooltip class="item" effect="dark" content="返回上一级" placement="top-start">
|
|
|
|
|
<el-button @click="hy()" type="primary" icon="refresh-left" circle
|
|
|
|
|
style="position: absolute;left:-48px;top:4px;z-index:9;"></el-button>
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="right_top">
|
|
|
|
|
<div class="title1">
|
|
|
|
|
<span style="margin-left:13px;font-weight: bold;font-size: 15px;">今日警情</span>
|
|
|
|
|
<img src="" alt="" />
|
|
|
|
|
</div>
|
|
|
|
|
<div style="width:100%;display:flex;justify-content: center;align-items: center;margin-top:15px;">
|
|
|
|
|
<div>
|
|
|
|
|
<span style="margin-right:5px;font-size: 13px;">报警次数</span>
|
|
|
|
|
<span class="fp">{{getNthChar(drzs.countAlarm+'',2)}}</span>
|
|
|
|
|
<span class="fp">{{getNthChar(drzs.countAlarm+'',1)}}</span>
|
|
|
|
|
<span class="fp">{{getNthChar(drzs.countAlarm+'',0)}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-left:30px;">
|
|
|
|
|
<span style="margin-right:5px;font-size: 13px;">警情数量</span>
|
|
|
|
|
<span class="fp">{{getNthChar(drzs.countCase+'',1)}}</span>
|
|
|
|
|
<span class="fp">{{getNthChar(drzs.countCase+'',0)}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="EcharRef2" style="width:98%; height:73%;margin-top:10px;">
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right_cen">
|
|
|
|
|
<div class="title1">
|
|
|
|
|
<span style="margin-left:13px;font-weight: bold;font-size: 15px;">今日报警</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="width:100%;height:80%;margin-top: 10px;">
|
|
|
|
|
<el-empty v-if="config2.data.length==0" :image-size="100" description="暂无数据"></el-empty>
|
|
|
|
|
<dv-scroll-board v-else :config="config2" @click="row2" style="" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right_bottm">
|
|
|
|
|
<div class="title1">
|
|
|
|
|
<span style="margin-left:13px;font-weight: bold;font-size: 15px;">今日预警</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="width:100%;height:70%;margin-top: 10px;">
|
|
|
|
|
<el-empty v-if="config3.data.length==0" :image-size="100" description="暂无数据"></el-empty>
|
|
|
|
|
<dv-scroll-board v-else :config="config3" @click="row3" style="" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<el-dialog title="运营单位" v-model="dialogVisible1" width="800" :before-close="handleClose">
|
|
|
|
|
<div class="uploadBtn" style="text-align: right;margin-right: 10px;">
|
|
|
|
|
<el-button><el-icon>
|
|
|
|
|
<Printer />
|
|
|
|
|
</el-icon>导出</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<el-descriptions title="" border direction="" :column="2">
|
|
|
|
|
<el-descriptions-item label="平台名称">{{showrow1data.name}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="公司">{{showrow1data.company}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="城市">{{showrow1data.city}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="区县">{{showrow1data.district}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="IP">{{showrow1data.ip}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="平台公钥">{{showrow1data.platKey}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="视频系统">{{showrow1data.ipcSystem}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="在线状态">{{showrow1data.lineState}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="启用状态">{{showrow1data.useState}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="联系人">{{showrow1data.userName1}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="电话">{{showrow1data.userPhone2}}</el-descriptions-item>
|
|
|
|
|
</el-descriptions>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
<el-dialog title="今日报警" v-model="dialogVisible2" width="800" :before-close="handleClose">
|
|
|
|
|
<div class="uploadBtn" style="text-align: right;margin-right: 10px;">
|
|
|
|
|
<el-button><el-icon>
|
|
|
|
|
<Printer />
|
|
|
|
|
</el-icon>导出</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<el-descriptions title="" border direction="" :column="2">
|
|
|
|
|
<el-descriptions-item label="时间">{{showrow2data.timestamp}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="类型">{{showrow2data.alarmCode}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="报警单位">{{showrow2data.alarmTarget}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="地点">{{showrow2data.address}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="城市">{{showrow2data.city}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="区县">{{showrow2data.district}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="乡镇">{{showrow2data.town}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="报警类型">{{showrow2data.alarmType}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="设备类型">{{showrow2data.deviceType}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="设备号">{{showrow2data.alarmSource}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="描述信息">{{showrow2data.description}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="核验状态">{{totypecn(showrow2data.fakeState) }}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="联系人">{{showrow2data.user1Name}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="联系人号码">{{showrow2data.user1Phone}}</el-descriptions-item>
|
|
|
|
|
</el-descriptions>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
<el-dialog title="今日预警" v-model="dialogVisible3" width="800" :before-close="handleClose">
|
|
|
|
|
<div class="uploadBtn" style="text-align: right;margin-right: 10px;">
|
|
|
|
|
<el-button><el-icon>
|
|
|
|
|
<Printer />
|
|
|
|
|
</el-icon>导出</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<el-descriptions title="" border direction="" :column="2">
|
|
|
|
|
<el-descriptions-item label="时间">{{showrow3data.timestamp}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="类型">{{showrow3data.alarmCode}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="报警单位">{{showrow3data.alarmTarget}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="地点">{{showrow3data.address}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="城市">{{showrow3data.city}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="区县">{{showrow3data.district}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="乡镇">{{showrow3data.town}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="报警类型">{{showrow3data.alarmType}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="设备类型">{{showrow3data.deviceType}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="设备号">{{showrow3data.alarmSource}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="描述信息">{{showrow3data.description}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="核验状态">{{totypecn(showrow3data.fakeState) }}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="联系人">{{showrow3data.user1Name}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="联系人号码">{{showrow3data.user1Phone}}</el-descriptions-item>
|
|
|
|
|
</el-descriptions>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import 'echarts-gl';
|
|
|
|
|
import { getAreaCode } from './js/area';
|
|
|
|
|
import { Ref, ref, watch, onMounted, deleted, onBeforeMount, reactive, getCurrentInstance, nextTick } from 'vue';
|
|
|
|
|
import * as echarts from "echarts";
|
|
|
|
|
import api from "@/axios";
|
|
|
|
|
const { proxy } = getCurrentInstance() as any;
|
|
|
|
|
const day = proxy.day;
|
|
|
|
|
onMounted(
|
|
|
|
|
() => {
|
|
|
|
|
// gettotal();
|
|
|
|
|
seach();
|
|
|
|
|
initMapdt(localStorage.getItem('mapdata'), JSON.parse(localStorage.getItem('totaldata')),JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue']);
|
|
|
|
|
get1(JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'], '', '');
|
|
|
|
|
get3(JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'], '', '');
|
|
|
|
|
getaiyuji(JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'], '', '');
|
|
|
|
|
getdayline(JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'], '', '');
|
|
|
|
|
getAi(JSON.parse(localStorage.getItem('user-stores'))['userInfo']['levelvalue'], '', '');
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
//详情
|
|
|
|
|
const row1data = ref();
|
|
|
|
|
const showrow1data = ref();
|
|
|
|
|
const dialogVisible1 = ref(false);
|
|
|
|
|
const row1 = (row) => {
|
|
|
|
|
showrow1data.value = row1data.value[row.rowIndex]
|
|
|
|
|
dialogVisible1.value = true;
|
|
|
|
|
};
|
|
|
|
|
const totypecn = (data) => {
|
|
|
|
|
if (data == '0') {
|
|
|
|
|
return '未核验'
|
|
|
|
|
} else if (data == '1') {
|
|
|
|
|
return '核验为假'
|
|
|
|
|
} else if (data == '2') {
|
|
|
|
|
return '核验为真'
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
//查询运营商
|
|
|
|
|
const config = reactive({
|
|
|
|
|
header: ['名称', 'ip', '地区', '状态'],
|
|
|
|
|
headerHeight: 28,
|
|
|
|
|
columnWidth: [150, 150, 180, 80],
|
|
|
|
|
waitTime: 3000,
|
|
|
|
|
data: [
|
|
|
|
|
|
|
|
|
|
],
|
|
|
|
|
headerBGC: '#174F8A',
|
|
|
|
|
oddRowBGC: '#2C5784',
|
|
|
|
|
evenRowBGC: 'F3FDFF',
|
|
|
|
|
index: false,
|
|
|
|
|
align: ['left', 'left', 'left', 'center'],
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const i = ref(0)
|
|
|
|
|
const seach = (obj) => {
|
|
|
|
|
api.post('/multialarm/client/platform/getlist', obj).then((res) => {
|
|
|
|
|
if (res.code == 0) {
|
|
|
|
|
row1data.value = res.data;
|
|
|
|
|
let arr = [];
|
|
|
|
|
res.data.forEach((x) => {
|
|
|
|
|
if (x.lineState == "online") {
|
|
|
|
|
i.value++;
|
|
|
|
|
arr.push([x.name, x.ip, x.address, '<span style="background:#038E4C;padding:2px 3px;color:#fff;font-size:12px;border-radius:3px">在线</span>'])
|
|
|
|
|
} else {
|
|
|
|
|
arr.push([x.name, x.ip, x.address, '<span style="background:red;padding:2px 3px;color:#fff;font-size:12px;border-radius:3px">离线</span>'])
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
config.data = arr;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
};
|
|
|
|
|
//还原
|
|
|
|
|
const hy = () => {
|
|
|
|
|
var tree4data = flattenTree(JSON.parse(localStorage.getItem('tree4data')));
|
|
|
|
|
// maptitle.value = tree4data.find(element => element.code == JSON.parse(data)['name'])['title'];
|
|
|
|
|
if (localStorage.getItem('nowCode') == JSON.parse(localStorage.getItem('user-stores'))['userInfo']['geoCode']) {
|
|
|
|
|
return
|
|
|
|
|
} else {
|
|
|
|
|
let fhcode = getAreaCode(localStorage.getItem('nowCode'))['codes'][0];
|
|
|
|
|
let ado = echarts.init(document.getElementById('myMap'));
|
|
|
|
|
ado.showLoading({
|
|
|
|
|
text: '地图加载中',
|
|
|
|
|
color: '#09A2DC', //设置加载颜色
|
|
|
|
|
textColor: '#09A2DC',
|
|
|
|
|
maskColor: 'rgba(255, 255, 255, 0.2)',
|
|
|
|
|
zlevel: 0
|
|
|
|
|
})
|
|
|
|
|
// const url = 'https://www.hndyjqrh.cn:8083/multialarm/pic/download?creator=geo&file=' + fhcode + '.geojson'
|
|
|
|
|
const url = 'https://www.hndyjqrh.cn/api/multialarm/pic/download?creator=geo&file=' + fhcode + '.geojson'
|
|
|
|
|
fetch(url).then(response => {
|
|
|
|
|
var status = response["status"]
|
|
|
|
|
if (status == "500") {
|
|
|
|
|
return new Promise((resovle) => {
|
|
|
|
|
resovle("无数据");
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
return response.text();
|
|
|
|
|
}
|
|
|
|
|
}).then(data => {
|
|
|
|
|
api.post('multialarm/system/alarm/total', {
|
|
|
|
|
name: localStorage.getItem('loginname'),
|
|
|
|
|
parent: fhcode,
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
if (res.code == 0) {
|
|
|
|
|
const myChart = echarts.init(document.getElementById('myMap'));
|
|
|
|
|
myChart.dispose();
|
|
|
|
|
initMapdt(data, res.data,tree4data.find(element => element.code == fhcode)['title'])
|
|
|
|
|
// ado.hideLoading()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
//详情
|
|
|
|
|
const row3data = ref();
|
|
|
|
|
const showrow3data = ref();
|
|
|
|
|
const dialogVisible3 = ref(false);
|
|
|
|
|
const row3 = (row) => {
|
|
|
|
|
showrow3data.value = row3data.value[row.rowIndex]
|
|
|
|
|
dialogVisible3.value = true;
|
|
|
|
|
};
|
|
|
|
|
//查询当日预警
|
|
|
|
|
const config3 = reactive({
|
|
|
|
|
header: ['时间', '事件', '位置'],
|
|
|
|
|
waitTime: 3000,
|
|
|
|
|
rowNum: 6,
|
|
|
|
|
columnWidth: [220, 150, 200],
|
|
|
|
|
headerHeight: 38,
|
|
|
|
|
data: [
|
|
|
|
|
],
|
|
|
|
|
headerBGC: '#174F8A',
|
|
|
|
|
oddRowBGC: '#2C5784',
|
|
|
|
|
evenRowBGC: 'F3FDFF',
|
|
|
|
|
index: false,
|
|
|
|
|
align: ['left', 'center', 'center', 'center'],
|
|
|
|
|
});
|
|
|
|
|
const getAi = (city, district, town) => {
|
|
|
|
|
api.post('/multialarm/ai/alarm/getlist/today', {
|
|
|
|
|
name: localStorage.getItem('loginname'),
|
|
|
|
|
city: city == '湖南省' ? null : city,
|
|
|
|
|
district: district,
|
|
|
|
|
town: town,
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
if (res.code == 0) {
|
|
|
|
|
row3data.value = res.data;
|
|
|
|
|
let arr = [];
|
|
|
|
|
res.data.forEach((x) => {
|
|
|
|
|
arr.push([x.timestamp, x.alarmName, x.address])
|
|
|
|
|
})
|
|
|
|
|
// res.data.forEach((x)={
|
|
|
|
|
// })
|
|
|
|
|
config3.data = arr;
|
|
|
|
|
} else {
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
};
|
|
|
|
|
//2.3.5查询近7天报警数量
|
|
|
|
|
const drzs = ref({});
|
|
|
|
|
const getdayline = (city, district, town) => {
|
|
|
|
|
api.post('multialarm/system/alarm/count/dayline', {
|
|
|
|
|
name: localStorage.getItem('loginname'),
|
|
|
|
|
city: city == '湖南省' ? null : city,
|
|
|
|
|
district: district,
|
|
|
|
|
town: town,
|
|
|
|
|
start: day().format('YYYY-MM-DD HH:mm:ss'),
|
|
|
|
|
before: 1,
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
if (res.code == 0) {
|
|
|
|
|
drzs.value = res.data[6];
|
|
|
|
|
initMap2(res.data);
|
|
|
|
|
} else {
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
};
|
|
|
|
|
//详情
|
|
|
|
|
const dialogVisible2 = ref(false);
|
|
|
|
|
const row2data = ref();
|
|
|
|
|
const showrow2data = ref();
|
|
|
|
|
const row2 = (row) => {
|
|
|
|
|
showrow2data.value = row2data.value[row.rowIndex]
|
|
|
|
|
dialogVisible2.value = true;
|
|
|
|
|
};
|
|
|
|
|
//查询指定区域的当天所有警报事件列表
|
|
|
|
|
const config2 = reactive({
|
|
|
|
|
header: ['时间', '类型', '报警单位', '地点'],
|
|
|
|
|
waitTime: 3000,
|
|
|
|
|
rowNum: 6,
|
|
|
|
|
columnWidth: [180, 100, 130, 180],
|
|
|
|
|
headerHeight: 38,
|
|
|
|
|
data: [
|
|
|
|
|
|
|
|
|
|
],
|
|
|
|
|
headerBGC: '#174F8A',
|
|
|
|
|
oddRowBGC: '#2C5784',
|
|
|
|
|
evenRowBGC: 'F3FDFF',
|
|
|
|
|
index: false,
|
|
|
|
|
align: ['left', 'left', 'left', 'left'],
|
|
|
|
|
});
|
|
|
|
|
const getaiyuji = (city, district, town) => {
|
|
|
|
|
api.post('multialarm/client/sensor/alarm_event/getlist/today', {
|
|
|
|
|
name: localStorage.getItem('loginname'),
|
|
|
|
|
city: city == '湖南省' ? '' : city,
|
|
|
|
|
district: district,
|
|
|
|
|
town: town,
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
if (res.code == 0) {
|
|
|
|
|
row2data.value = res.data;
|
|
|
|
|
let arr = [];
|
|
|
|
|
res.data.forEach((x) => {
|
|
|
|
|
arr.push([x.timestamp, x.alarmCode, x.station, x.address])
|
|
|
|
|
})
|
|
|
|
|
config2.data = arr;
|
|
|
|
|
} else {
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
};
|
|
|
|
|
//01
|
|
|
|
|
const getNthChar = (str, n) => {
|
|
|
|
|
let str1 = str.split("").reverse().join("")
|
|
|
|
|
return str1.charAt(n) || '0';
|
|
|
|
|
};
|
|
|
|
|
const data1 = ref({});
|
|
|
|
|
const get1 = (city, district, town) => {
|
|
|
|
|
api.post('multialarm/system/count/devices', {
|
|
|
|
|
name: localStorage.getItem('loginname'),
|
|
|
|
|
city: city,
|
|
|
|
|
district: district,
|
|
|
|
|
town: town,
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
if (res.code == 0) {
|
|
|
|
|
data1.value = res.data;
|
|
|
|
|
initMap(res.data);
|
|
|
|
|
} else {
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
};
|
|
|
|
|
const config1 = ref({});
|
|
|
|
|
const get3 = (city, district, town) => {
|
|
|
|
|
api.post('/multialarm/system/station/summary', {
|
|
|
|
|
name: localStorage.getItem('loginname'),
|
|
|
|
|
city: city,
|
|
|
|
|
district: district,
|
|
|
|
|
town: town,
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
if (res.code == 0) {
|
|
|
|
|
initMap1(res.data)
|
|
|
|
|
config1.value = {
|
|
|
|
|
header: ['行业名称', '总数', '在线总数', '在线率'],
|
|
|
|
|
waitTime: 3000,
|
|
|
|
|
rowNum: 2,
|
|
|
|
|
columnWidth: [150, 120, 180, 120],
|
|
|
|
|
headerHeight: 28,
|
|
|
|
|
data: [
|
|
|
|
|
['党政机关', res.data[0]['total'], res.data[0]['lineOnTotal'], res.data[0]['lineOnTotal'] == 0 ? '0%' : (res.data[0]['lineOnTotal'] / res.data[0]['total']) * 100 + '%'],
|
|
|
|
|
['金融机构', res.data[2]['total'], res.data[2]['lineOnTotal'], res.data[2]['lineOnTotal'] == 0 ? '0%' : (res.data[2]['lineOnTotal'] / res.data[2]['total']) * 100 + '%'],
|
|
|
|
|
['医疗单位', res.data[3]['total'], res.data[3]['lineOnTotal'], res.data[3]['lineOnTotal'] == 0 ? '0%' : (res.data[3]['lineOnTotal'] / res.data[3]['total']) * 100 + '%'],
|
|
|
|
|
['中小学', res.data[1]['total'], res.data[1]['lineOnTotal'], res.data[1]['lineOnTotal'] == 0 ? '0%' : (res.data[1]['lineOnTotal'] / res.data[1]['total']) * 100 + '%'],
|
|
|
|
|
['其他', res.data[4]['total'], res.data[4]['lineOnTotal'], res.data[4]['lineOnTotal'] == 0 ? '0%' : (res.data[4]['lineOnTotal'] / res.data[4]['total']) * 100 + '%'],
|
|
|
|
|
],
|
|
|
|
|
headerBGC: '#174F8A',
|
|
|
|
|
oddRowBGC: '#2C5784',
|
|
|
|
|
evenRowBGC: 'F3FDFF',
|
|
|
|
|
index: false,
|
|
|
|
|
align: ['left', 'left', 'left', 'left'],
|
|
|
|
|
}
|
|
|
|
|
// initMap(res.data);
|
|
|
|
|
} else {
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
};
|
|
|
|
|
const convertData = (data) => {
|
|
|
|
|
var res = [];
|
|
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
|
|
|
var dataItem = data[i];
|
|
|
|
|
var fromCoord = chinaGeoCoordMap[dataItem[0].name];
|
|
|
|
|
var toCoord = [116.4551, 40.2539];
|
|
|
|
|
if (fromCoord && toCoord) {
|
|
|
|
|
res.push([{
|
|
|
|
|
coord: fromCoord,
|
|
|
|
|
value: dataItem[0].value
|
|
|
|
|
}, {
|
|
|
|
|
coord: toCoord,
|
|
|
|
|
}]);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return res;
|
|
|
|
|
};
|
|
|
|
|
var mapJson = '';
|
|
|
|
|
const flattenTree = (treeData) => {
|
|
|
|
|
const result = [];
|
|
|
|
|
function traverse(node) {
|
|
|
|
|
if (node.children && node.children.length > 0) {
|
|
|
|
|
for (const child of node.children) {
|
|
|
|
|
traverse(child);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
delete node.children
|
|
|
|
|
result.push(node);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
traverse(treeData);
|
|
|
|
|
return result;
|
|
|
|
|
};
|
|
|
|
|
const maptitle = ref('');
|
|
|
|
|
const initMapdt = (data, podat,nameb) => {
|
|
|
|
|
var tree4data = flattenTree(JSON.parse(localStorage.getItem('tree4data')));
|
|
|
|
|
// maptitle.value = tree4data.find(element => element.code == JSON.parse(data)['name'])['title'];
|
|
|
|
|
maptitle.value = nameb;
|
|
|
|
|
localStorage.setItem('nowCode', JSON.parse(data)['name'])
|
|
|
|
|
const myChart = echarts.init(document.getElementById('myMap'));
|
|
|
|
|
// myChart.showLoading();
|
|
|
|
|
// myChart.hideLoading();
|
|
|
|
|
let langarr = JSON.parse(data)['features'];
|
|
|
|
|
langarr.forEach((x, i) => {
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
echarts.registerMap('myMap', data);
|
|
|
|
|
var option = {
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'item',
|
|
|
|
|
textStyle: { fontSize: '14', color: '#fff', fontFamily: 'Arial' },
|
|
|
|
|
backgroundColor: '#092b6a',
|
|
|
|
|
formatter: (params) => {
|
|
|
|
|
let datat = podat;
|
|
|
|
|
let itemWithId2 = datat.children.find(item => item.grope === params.name);
|
|
|
|
|
if (itemWithId2 == null || itemWithId2 == undefined) {
|
|
|
|
|
return '<br /> 报警:' + '0' + '<br /> 警情:' + '0' + ' <br /> AI预警:' + '0'
|
|
|
|
|
} else {
|
|
|
|
|
return '<br /> 报警:' + itemWithId2.alarmCount + '<br /> 警情:' + itemWithId2.caseCount + ' <br /> AI预警:' + itemWithId2.aiCount
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
type: 'map3D',
|
|
|
|
|
name: '地图',
|
|
|
|
|
selectedMode: 'single', // 地图高亮单选
|
|
|
|
|
regionHeight: 1, // 地图高度
|
|
|
|
|
map: 'myMap',
|
|
|
|
|
viewControl: {
|
|
|
|
|
distance: 168, // 地图视角 控制初始大小
|
|
|
|
|
alpha: 180,// 倾斜角度
|
|
|
|
|
rotateSensitivity: 0,
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
show: true, // 是否显示名字
|
|
|
|
|
color: '#fff', // 文字颜色
|
|
|
|
|
fontSize: 15, // 文字大小
|
|
|
|
|
fontWeight: 'bold', // 文字大小
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#0A3E77', // 地图背景颜色
|
|
|
|
|
borderWidth: 1, // 分界线wdith
|
|
|
|
|
borderColor: '#a4d8f0', // 分界线颜色
|
|
|
|
|
opacity: 0.9
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
label: {
|
|
|
|
|
show: true, // 是否显示高亮
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#fff' // 高亮文字颜色
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#3a69c1', // 地图高亮颜色
|
|
|
|
|
borderWidth: 10, // 分界线wdith
|
|
|
|
|
borderColor: '#6BECF5'// 分界线颜色
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
light: {
|
|
|
|
|
main: {
|
|
|
|
|
color: '#fff',
|
|
|
|
|
intensity: 1,
|
|
|
|
|
shadow: true,
|
|
|
|
|
shadowQuality: 'high',
|
|
|
|
|
alpha: 25, //
|
|
|
|
|
beta: 20
|
|
|
|
|
},
|
|
|
|
|
ambient: {
|
|
|
|
|
color: '#fff',
|
|
|
|
|
intensity: 0.6
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
lines3D: {
|
|
|
|
|
show: true,
|
|
|
|
|
data: [
|
|
|
|
|
{
|
|
|
|
|
coords: [
|
|
|
|
|
[111.51, 29.02], // 起点坐标
|
|
|
|
|
[109.22793, 29.12239] // 终点坐标
|
|
|
|
|
],
|
|
|
|
|
lineStyle: {
|
|
|
|
|
width: 2,
|
|
|
|
|
color: '#fff'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 可以添加更多的线条
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
myChart.setOption(option);
|
|
|
|
|
|
|
|
|
|
window.addEventListener('resize', function () {
|
|
|
|
|
myChart.resize();
|
|
|
|
|
});
|
|
|
|
|
myChart.on('click', (x) => {
|
|
|
|
|
// let tree4data = flattenTree(JSON.parse(localStorage.getItem('tree4data')));
|
|
|
|
|
tree4data.forEach((item) => {
|
|
|
|
|
if (item.stationId === undefined) {
|
|
|
|
|
if (item.code.length < 9) {
|
|
|
|
|
if (x.name == item.title) {
|
|
|
|
|
myChart.dispose();
|
|
|
|
|
let ado = echarts.init(document.getElementById('myMap'));
|
|
|
|
|
ado.showLoading({
|
|
|
|
|
text: '地图加载中',
|
|
|
|
|
color: '#09A2DC', //设置加载颜色
|
|
|
|
|
textColor: '#09A2DC',
|
|
|
|
|
maskColor: 'rgba(255, 255, 255, 0.2)',
|
|
|
|
|
zlevel: 0
|
|
|
|
|
})
|
|
|
|
|
get1(x.name, '', '');
|
|
|
|
|
get3(x.name, '', '');
|
|
|
|
|
getaiyuji(x.name, '', '');
|
|
|
|
|
getdayline(x.name, '', '');
|
|
|
|
|
getAi(x.name, '', '');
|
|
|
|
|
//item.code
|
|
|
|
|
// const url = 'https://www.hndyjqrh.cn:8083/multialarm/pic/download?creator=geo&file=' + item.code + '.geojson'
|
|
|
|
|
const url = 'https://www.hndyjqrh.cn/api/multialarm/pic/download?creator=geo&file=' + item.code + '.geojson'
|
|
|
|
|
fetch(url).then(response => {
|
|
|
|
|
var status = response["status"]
|
|
|
|
|
if (status == "500") {
|
|
|
|
|
return new Promise((resovle) => {
|
|
|
|
|
resovle("无数据");
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
return response.text();
|
|
|
|
|
}
|
|
|
|
|
}).then(data => {
|
|
|
|
|
api.post('multialarm/system/alarm/total', {
|
|
|
|
|
name: localStorage.getItem('loginname'),
|
|
|
|
|
parent: item.code,
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
if (res.code == 0) {
|
|
|
|
|
initMapdt(data, res.data,x.name)
|
|
|
|
|
ado.hideLoading();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const initMap = (data1) => {
|
|
|
|
|
const domMap = document.getElementById("EcharRef");
|
|
|
|
|
domMap.removeAttribute("_echarts_instance_");
|
|
|
|
|
const myChart = echarts.init(domMap);
|
|
|
|
|
var option = {
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'item'
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
top: '15px',
|
|
|
|
|
left: '230px',
|
|
|
|
|
orient: 'vertical',
|
|
|
|
|
type: 'scroll',
|
|
|
|
|
itemHeight: 5,
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#fff'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
type: 'pie',
|
|
|
|
|
radius: ['45%', '70%'],
|
|
|
|
|
avoidLabelOverlap: false,
|
|
|
|
|
label: {
|
|
|
|
|
show: false,
|
|
|
|
|
position: 'right'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
emphasis: {
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
fontWeight: 'bold',
|
|
|
|
|
color: '#fff'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
labelLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
},
|
|
|
|
|
center: ['35%', '50%'],
|
|
|
|
|
data: [
|
|
|
|
|
{ value: data1.alarmPointZone, name: '防区报警' },
|
|
|
|
|
{ value: data1.alarmPointTalk, name: '对讲报警' },
|
|
|
|
|
{ value: data1.mdevTotal, name: '移动报警' },
|
|
|
|
|
{ value: data1.alarmPointPushButton, name: '一键报警' },
|
|
|
|
|
{ value: data1.ipcTotal, name: '报警复合' }
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
|
|
myChart.setOption(option);
|
|
|
|
|
};
|
|
|
|
|
const initMap1 = (data1) => {
|
|
|
|
|
const domMap = document.getElementById("EcharRef1");
|
|
|
|
|
domMap.removeAttribute("_echarts_instance_");
|
|
|
|
|
const myChart = echarts.init(domMap);
|
|
|
|
|
var option = {
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'item'
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false //去掉网格线
|
|
|
|
|
},
|
|
|
|
|
axisLine: {//这是y轴文字颜色
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "#fff",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data: ['党政机关', '金融机构', '医疗单位', '中小学', '其他'],
|
|
|
|
|
axisLabel: {
|
|
|
|
|
formatter: val => {
|
|
|
|
|
let txt = val
|
|
|
|
|
if (val.length > 4) {
|
|
|
|
|
txt = val.substr(0, 4) + '...'
|
|
|
|
|
}
|
|
|
|
|
return txt
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
top: '8%',
|
|
|
|
|
left: '1%',
|
|
|
|
|
right: '1%',
|
|
|
|
|
bottom: '3%',
|
|
|
|
|
containLabel: true
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: 'value',
|
|
|
|
|
axisLine: {//这是y轴文字颜色
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "#fff",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
splitLine: { // 设置x轴轴线相关配置
|
|
|
|
|
show: false // 不显示x轴轴线
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
barWidth: '24%',
|
|
|
|
|
data: [data1[0]['total'], data1[2]['total'], data1[3]['total'], data1[1]['total'], data1[4]['total']],
|
|
|
|
|
type: 'bar',
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: '#0386F6' // 起始颜色（红）
|
|
|
|
|
}, {
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: '#0FBBC4' // 结束颜色（蓝）
|
|
|
|
|
}])
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
myChart.setOption(option);
|
|
|
|
|
};
|
|
|
|
|
const initMap2 = (arr) => {
|
|
|
|
|
let time = [];
|
|
|
|
|
let data1 = [];
|
|
|
|
|
let data2 = [];
|
|
|
|
|
arr.forEach(x => {
|
|
|
|
|
time.push(x.month + '-' + x.day);
|
|
|
|
|
data1.push(parseInt(x.countAlarm))
|
|
|
|
|
data2.push(parseInt(x.countCase))
|
|
|
|
|
})
|
|
|
|
|
const domMap = document.getElementById("EcharRef2");
|
|
|
|
|
domMap.removeAttribute("_echarts_instance_");
|
|
|
|
|
const myChart = echarts.init(domMap);
|
|
|
|
|
var option = {
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'item',
|
|
|
|
|
formatter: (params) => {
|
|
|
|
|
return '警情数量:' + params.seriesIndex + '<br /> 报警次数:' + params.data
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
top: '15%',
|
|
|
|
|
left: '1%',
|
|
|
|
|
right: '1%',
|
|
|
|
|
bottom: '3%',
|
|
|
|
|
containLabel: true
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
data: [{
|
|
|
|
|
name: '报警次数',
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#fff'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
}, {
|
|
|
|
|
name: '警情数量',
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#fff'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
xAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: 'category',
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false //去掉网格线
|
|
|
|
|
},
|
|
|
|
|
data: time,
|
|
|
|
|
axisLine: {//这是y轴文字颜色
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "#fff",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisPointer: {
|
|
|
|
|
type: 'shadow'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
yAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: 'value',
|
|
|
|
|
name: '',
|
|
|
|
|
min: 0,
|
|
|
|
|
// max: 250,
|
|
|
|
|
interval: 50,
|
|
|
|
|
splitLine: { // 设置x轴轴线相关配置
|
|
|
|
|
show: false // 不显示x轴轴线
|
|
|
|
|
},
|
|
|
|
|
axisLine: {//这是y轴文字颜色
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "#fff",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
formatter: '{value}次'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'value',
|
|
|
|
|
min: 0,
|
|
|
|
|
splitLine: { // 设置x轴轴线相关配置
|
|
|
|
|
show: false // 不显示x轴轴线
|
|
|
|
|
},
|
|
|
|
|
max: 25,
|
|
|
|
|
interval: 5,
|
|
|
|
|
axisLabel: {
|
|
|
|
|
formatter: ''
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '报警次数',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
tooltip: {
|
|
|
|
|
valueFormatter: function (value) {
|
|
|
|
|
// return value + ' ml';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
barWidth: '24%',
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#3F7AD1' // 设置折线的颜色为红色
|
|
|
|
|
},
|
|
|
|
|
data: data1,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '警情数量',
|
|
|
|
|
type: 'line',
|
|
|
|
|
smooth: true,
|
|
|
|
|
yAxisIndex: 1,
|
|
|
|
|
tooltip: {
|
|
|
|
|
valueFormatter: function (value) {
|
|
|
|
|
// return value + '°C';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#81A2CF' // 设置折线的颜色为红色
|
|
|
|
|
},
|
|
|
|
|
data: data2,
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
myChart.setOption(option);
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
:deep(.dv-scroll-board .header) {
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.dv-scroll-board .rows .row-item) {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-descriptions) {
|
|
|
|
|
width: 98%;
|
|
|
|
|
margin: 10px auto;
|
|
|
|
|
text-align: center;
|
|
|
|
|
border: 1px solid #1F9BD9;
|
|
|
|
|
|
|
|
|
|
--el-descriptions-table-border: {
|
|
|
|
|
1px solid #1F9BD9
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
;
|
|
|
|
|
|
|
|
|
|
--el-descriptions-item-bordered-label-background: {
|
|
|
|
|
transparent
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-descriptions__body) {
|
|
|
|
|
background: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-descriptions__label) {
|
|
|
|
|
width: 130px;
|
|
|
|
|
color: rgb(12, 214, 254);
|
|
|
|
|
background: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-descriptions__content.el-descriptions__cell.is-bordered-content) {
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell) {
|
|
|
|
|
border: 1px solid #1F9BD9;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-dialog__body) {
|
|
|
|
|
padding: 10px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uploadBtn .el-button {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
border-color: #1F9BD9;
|
|
|
|
|
color: #1F9BD9;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uploadBtn .el-button i {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
margin-right: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uploadBtn .el-button:hover {
|
|
|
|
|
color: rgb(12, 214, 254);
|
|
|
|
|
border: 1px solid rgb(12, 214, 254);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-dialog) {
|
|
|
|
|
--el-dialog-bg-color: #071D4D;
|
|
|
|
|
border: 3px solid #387dbf;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-dialog__header) {
|
|
|
|
|
padding: 13px;
|
|
|
|
|
border-bottom: 1px solid #3374b4 !important;
|
|
|
|
|
margin-right: 0px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-dialog__title) {
|
|
|
|
|
color: #067bc1 !important;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-input__inner) {
|
|
|
|
|
color: #000;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-dialog__headerbtn .el-dialog__close) {
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tabs_a {
|
|
|
|
|
background-image: url(./indeximag/able.jpg);
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-tabs__nav-wrap) {
|
|
|
|
|
margin-bottom: 1px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-tabs--border-card>.el-tabs__content) {
|
|
|
|
|
height: calc(100% - 40px);
|
|
|
|
|
background: red;
|
|
|
|
|
padding: 0px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active) {
|
|
|
|
|
color: #d1dbe5;
|
|
|
|
|
background-color: #29d;
|
|
|
|
|
border-right-color: #29d;
|
|
|
|
|
border-left-color: #29d;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-tabs--border-card>.el-tabs__header) {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
border-bottom: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-tabs--border-card) {
|
|
|
|
|
background: #022C54;
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-progress-bar__outer) {
|
|
|
|
|
background-color: #174771;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-progress-bar__inner) {
|
|
|
|
|
background-color: #3BC5F3;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title1 {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 30px;
|
|
|
|
|
background-image: url(./indeximag/一级标题.png);
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fp {
|
|
|
|
|
background-image: url(./indeximag/数字背景.png);
|
|
|
|
|
width: 15px;
|
|
|
|
|
height: 22px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
line-height: 22px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.box {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
background-color: #022C54;
|
|
|
|
|
|
|
|
|
|
.left {
|
|
|
|
|
width: 450px;
|
|
|
|
|
height: 98%;
|
|
|
|
|
margin-top: 0.5%;
|
|
|
|
|
margin-left: 0.5%;
|
|
|
|
|
border: 1px solid #3876B9;
|
|
|
|
|
|
|
|
|
|
.left_top {
|
|
|
|
|
width: 97%;
|
|
|
|
|
height: 33%;
|
|
|
|
|
padding: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.left_cen {
|
|
|
|
|
width: 97%;
|
|
|
|
|
height: 33%;
|
|
|
|
|
padding: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.left_bottm {
|
|
|
|
|
width: 97%;
|
|
|
|
|
height: 33%;
|
|
|
|
|
padding: 5px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right {
|
|
|
|
|
width: 450px;
|
|
|
|
|
height: 98%;
|
|
|
|
|
margin-top: 0.5%;
|
|
|
|
|
border: 1px solid #3876B9;
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
|
|
|
|
|
.right_top {
|
|
|
|
|
width: 97%;
|
|
|
|
|
height: 33%;
|
|
|
|
|
padding: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right_cen {
|
|
|
|
|
width: 97%;
|
|
|
|
|
height: 33%;
|
|
|
|
|
padding: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right_bottm {
|
|
|
|
|
width: 97%;
|
2024-08-06 15:35:51 +08:00
|
|
|
height: 35%;
|
2024-07-22 11:11:43 +08:00
|
|
|
padding: 5px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cen {
|
|
|
|
|
width: calc(100% - 900px);
|
|
|
|
|
height: 98%;
|
|
|
|
|
margin-top: 0.5%;
|
|
|
|
|
margin-left: 0.5%;
|
|
|
|
|
margin-right: 0.5%;
|
|
|
|
|
border: 1px solid #3876B9;
|
|
|
|
|
background-image: url(./indeximag/able.jpg);
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
