<template>
|
<div class="charts-container">
|
<div class="header-content">
|
<div class="title-left">
|
<!-- <img src="../../../assets/warningScreen/logo_dark.png" alt="" />-->
|
<div class="datetime">
|
<div class="timel">{{time}}</div>
|
<div class="timer">
|
<div>{{date}}</div>
|
<div>{{weekDay}}</div>
|
</div>
|
</div>
|
</div>
|
<div class="title"><span>广域特殊气体泄漏在线监测预警系统</span></div>
|
<div class="title-right">
|
<div class="btns">
|
<div class="fullBtn" v-if="!isFull" @click="toFull()">
|
<el-icon><FullScreen /></el-icon>
|
<div>全屏</div>
|
</div>
|
<div class="backBtn" @click="back()" v-else>
|
<el-icon><SwitchButton /></el-icon>
|
<div>退出</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="main-content">
|
<div id="bigMap"></div>
|
<div class="main-left">
|
<div class="left-top withFilter">
|
<div class="chart-head">
|
<div class="chart-tit">预警汇总</div>
|
<el-radio-group v-model="chart1Search">
|
<el-radio :label="1" size="small" border>当日</el-radio>
|
<el-radio :label="2" size="small" border>近7天</el-radio>
|
<el-radio :label="3" size="small" border>近30天</el-radio>
|
<el-radio :label="4" size="small" border>当年</el-radio>
|
</el-radio-group>
|
</div>
|
<div class="chart-cont">
|
<div class="orange">
|
<div><span>30</span><span>橙色预警</span></div>
|
</div>
|
<div class="red">
|
<div><span>10</span><span>红色预警</span></div>
|
</div>
|
</div>
|
</div>
|
<div class="left-mid withFilter">
|
<div class="chart-head">
|
<div class="chart-tit">预警信息</div>
|
<el-date-picker
|
v-model="chart2Search"
|
size="small"
|
:teleported="false"
|
type="daterange"
|
unlink-panels
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
|
/>
|
</div>
|
<div class="chart-cont">
|
<dv-scroll-board :config="config" class="scroll-table" @mouseover="mouseoverHandler" @click="clickHandler" />
|
</div>
|
</div>
|
<div class="left-bottom withFilter">
|
<div class="chart-head">
|
<div class="chart-tit">设备状态</div>
|
<div class="sys-status">
|
<Cpu style="width: 1.2em; height: 1.2em; color: #fff" />
|
<div>系统状态:<span>正常</span></div>
|
</div>
|
</div>
|
<div class="chart-cont">
|
<div class="online">
|
<dv-decoration-9 :color="['#22aaff','rgba(34,170,255,.6)']">
|
<div color-green font-600 class="isOnline" bg="~ dark/0">
|
0
|
</div>
|
</dv-decoration-9>
|
<div>在线</div>
|
</div>
|
<div class="online">
|
<dv-decoration-9 :color="['#ee594a','rgba(238,89,74,.6)']">
|
<div color-red font-600 class="isOnline red-font" bg="~ dark/0">
|
1
|
</div>
|
</dv-decoration-9>
|
<div style="color:#ee594a;">离线</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="main-middle">
|
<div class="mid-bottom">
|
<div class="chart-head">
|
<div class="chart-tit">气象信息</div>
|
</div>
|
<div class="chart-cont bigData">
|
<div class="bigPic">
|
<div></div>
|
<div></div>
|
<div></div>
|
<div></div>
|
<div></div>
|
<div></div>
|
</div>
|
<dv-scroll-board :config="bigConfig" class="scroll-table" @mouseover="mouseoverHandler" @click="clickHandler" />
|
</div>
|
</div>
|
</div>
|
<div class="main-right">
|
<div class="right-top withFilterLong">
|
<div class="chart-head">
|
<div class="chart-tit long-tit">气体浓度监测</div>
|
<el-select v-model="gasSearch" :teleported="false" class="m-2" placeholder="Select" size="small">
|
<el-option
|
v-for="item in gasOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</div>
|
<div class="chart-cont">
|
<div class="echart" :id="gasN"></div>
|
</div>
|
</div>
|
<div class="right-mid withFilterLong">
|
<div class="chart-head">
|
<div class="chart-tit long-tit">气体通量监测</div>
|
<div class="searchGroup">
|
<el-select v-model="searchParams.gasSearch" :teleported="false" class="m-2" placeholder="Select" size="small">
|
<el-option
|
v-for="item in gasOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
<el-select v-model="searchParams.areaSearch" :teleported="false" class="m-2" placeholder="Select" size="small">
|
<el-option
|
v-for="item in areaOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</div>
|
</div>
|
<div class="chart-cont">
|
<div class="echart" :id="gasT"></div>
|
</div>
|
</div>
|
<div class="right-bottom withoutFilter">
|
<div class="chart-head">
|
<div class="chart-tit long-tit">实时数据量</div>
|
</div>
|
<div class="chart-cont">
|
<div class="online">
|
<div class="totalNum"><span>1048</span>条</div>
|
<div class="dataPic"></div>
|
<div class="totalNum">浓度条数</div>
|
</div>
|
<div class="online">
|
<div class="totalNum"><span>566</span>条</div>
|
<div class="dataPic"></div>
|
<div class="totalNum">通量条数</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import {toRefs, reactive, onMounted, ref, defineComponent, onUnmounted} from 'vue';
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
import { useRouter} from "vue-router";
|
import * as echarts from "echarts";
|
import "amfe-flexible";
|
import AMapLoader from '@amap/amap-jsapi-loader'
|
import { shallowRef } from '@vue/reactivity'
|
// 定义接口来定义对象的类型
|
interface TableDataState {
|
time: string
|
date: string
|
weekDay: string
|
dayTime:string
|
isFull: boolean
|
chart1Search: number | null
|
chart2Search: Array<string>
|
gasSearch: number | null
|
gasOptions: Array<gasType>
|
searchParams: Object
|
areaOptions: Array<gasType>
|
}
|
|
interface gasType {
|
label: string
|
value: number | null
|
}
|
|
export default defineComponent({
|
name: 'bigScreen',
|
components: { },
|
props:{
|
isFull: Boolean
|
},
|
setup(props,context) {
|
const state = reactive<TableDataState>({
|
time: '',
|
date: '',
|
weekDay: '',
|
dayTime: '',
|
isFull: props.isFull,
|
chart1Search: 1,
|
chart2Search: [],
|
gasSearch: 1,
|
gasOptions: [
|
{
|
label: '气体一',
|
value: 1
|
},
|
{
|
label: '气体二',
|
value: 2
|
},
|
{
|
label: '气体三',
|
value: 3
|
}
|
],
|
searchParams:{
|
gasSearch: 1,
|
areaSearch: 1
|
},
|
areaOptions: [
|
{
|
label: '区域一',
|
value: 1
|
},
|
{
|
label: '区域二',
|
value: 2
|
},
|
{
|
label: '区域三',
|
value: 3
|
}
|
]
|
});
|
const router = useRouter();
|
const gasN = ref("eChartgasN" + Date.now() + Math.random())
|
const gasT = ref("eChartgasT" + Date.now() + Math.random())
|
const timeForm = {
|
hour12: false,
|
year: 'numeric',
|
month: '2-digit',
|
day: '2-digit',
|
hour: '2-digit',
|
minute: '2-digit',
|
second: '2-digit',
|
};
|
|
// 页面加载时
|
onMounted(() => {
|
const baseSize = 38;
|
function setRem() {
|
const scale = document.documentElement.clientWidth / 1920;/* 当前页面宽度缩放比例，可根据自己需要修改 */
|
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";/* 设置页面根节点字体大小 */
|
}
|
|
setRem();
|
|
window.onresize = () => {
|
setRem();/* 改变窗口大小时重新设置 rem */
|
}
|
getDateTime();
|
setInterval(() => {
|
getDateTime();
|
}, 1000);
|
initgasN()
|
initgasT()
|
initMap()
|
});
|
|
const config = reactive({
|
header: ['预警级别','气体名称', '气体浓度', '时间'],
|
data: [
|
['红色预警', '甲烷', '19', '2023-08-10'],
|
['<span style="color:red;">红色预警</span>', '甲烷', '19', '2023-08-10'],
|
['红色预警', '甲烷', '19', '2023-08-10'],
|
['红色预警', '甲烷', '19', '2023-08-10'],
|
['红色预警', '甲烷', '19', '2023-08-10'],
|
['红色预警', '甲烷', '19', '2023-08-10']
|
],
|
index: true,
|
columnWidth: [38],
|
align: ['center','center','center','center','center'],
|
headerBGC: '',
|
oddRowBGC: '',
|
evenRowBGC: ''
|
})
|
|
const bigConfig = reactive({
|
header: ['时间','温度', '湿度', '风速', '风向', '气压'],
|
data: [
|
['2023-08-10 13:29:25','56', '105', '40', '32', '20'],['2023-08-10 13:29:25','56', '105', '40', '32', '20'],['2023-08-10 13:29:25','56', '105', '40', '32', '20'],['2023-08-10 13:29:25','56', '105', '40', '32', '20'],['2023-08-10 13:29:25','56', '105', '40', '32', '20'],['2023-08-10 13:29:25','56', '105', '40', '32', '20'],['2023-08-10 13:29:25','56', '105', '40', '32', '20'],['2023-08-10 13:29:25','56', '105', '40', '32', '20'],['2023-08-10 13:29:25','56', '105', '40', '32', '20']
|
],
|
align: ['center','center','center','center','center','center'],
|
headerBGC: '',
|
oddRowBGC: '',
|
evenRowBGC: '',
|
rowNum: 3
|
})
|
|
const mouseoverHandler = (e: any) => {
|
console.log(e)
|
}
|
|
const clickHandler = (e: any) => {
|
console.log(e)
|
}
|
|
type EChartsOption = echarts.EChartsOption
|
const initgasN =()=>{
|
let dom = document.getElementById(gasN.value);
|
let myChart = echarts.init(dom);
|
let option: EChartsOption;
|
option = {
|
xAxis: {
|
type: 'category',
|
data: ['10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30'],
|
axisLabel: {
|
color: '#fff'
|
}
|
},
|
yAxis: {
|
axisLine:{
|
show: true
|
},
|
splitLine: {
|
show: false
|
},
|
axisLabel:{
|
color: '#ccc'
|
}
|
},
|
grid: {
|
top: '5%',
|
bottom: '10%',
|
right: '0%'
|
},
|
series: [
|
{
|
data: [150, 230, 224, 218, 135, 147, 230, 224, 218, 135, 147, 260],
|
type: 'line',
|
// label:{
|
// show: true,
|
// color: '#fff',
|
// textBorderColor: 'transparent'
|
// },
|
lineStyle:{
|
color: '#54d5ff'
|
},
|
itemStyle:{
|
color: '#54d5ff',
|
},
|
areaStyle:{
|
color: {
|
type: 'linear',
|
x: 0,
|
y: 0,
|
x2: 0,
|
y2: 1,
|
colorStops: [{
|
offset: 0, color: '#2af' // 0% 处的颜色
|
}, {
|
offset: 1, color: 'rgba(255,255,255,.1)' // 100% 处的颜色
|
}],
|
global: false // 缺省为 false
|
}
|
}
|
}
|
]
|
}
|
|
option && myChart.setOption(option);
|
window.addEventListener("resize",function (){
|
myChart.resize();
|
});
|
}
|
const initgasT =()=>{
|
let dom = document.getElementById(gasT.value);
|
let myChart = echarts.init(dom);
|
let option: EChartsOption;
|
option = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
legend: {
|
textStyle: {
|
color: '#fff'
|
}
|
},
|
grid: {
|
left: '0%',
|
right: '0%',
|
bottom: '1%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
data: ['10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30'],
|
axisLabel: {
|
color: '#fff'
|
}
|
},
|
yAxis: {
|
type: 'value',
|
boundaryGap: [0, 0.01],
|
splitLine: {
|
show: false
|
},
|
axisLabel:{
|
color: '#ccc'
|
}
|
},
|
series: [
|
{
|
name: '2011',
|
type: 'bar',
|
data: [18, 23, 29, 10, 13, 6],
|
label:{
|
show: true,
|
color: '#fff',
|
textBorderColor: 'transparent'
|
}
|
},
|
{
|
name: '2012',
|
type: 'bar',
|
data: [19, 23, 31, 12, 13, 6],
|
label:{
|
show: true,
|
color: '#fff',
|
textBorderColor: 'transparent'
|
}
|
}
|
]
|
}
|
|
option && myChart.setOption(option);
|
window.addEventListener("resize",function (){
|
myChart.resize();
|
});
|
}
|
|
const map = shallowRef(null)
|
const initMap=()=> {
|
let m = map.value
|
window._AMapSecurityConfig = {
|
securityJsCode: "456045075984862a9806587f0d7fee3c",
|
};
|
AMapLoader.load({
|
key: '5dbeedfa28e0d7fffb59684446569773', // 申请好的Web端开发者Key，首次调用 load 时必填
|
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
plugins: [] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
})
|
.then(AMap => {
|
if (AMap && typeof AMap.Map === 'function') {
|
m = new AMap.Map('bigMap', {
|
viewMode: '2D',
|
mapStyle: 'amap://styles/normal',
|
zoom: 18,
|
center: [85.057805, 45.62550],
|
// layers:[
|
// new AMap.TileLayer.RoadNet({}),
|
// new AMap.TileLayer.Satellite()
|
// ],
|
zooms:[2,20],
|
})
|
|
AMap.plugin(["AMap.DistrictSearch","AMap.ToolBar","AMap.ControlBar"],()=> {
|
var district = new AMap.DistrictSearch({
|
extensions: "all",
|
subdistrict: 0,
|
level: "district",
|
});
|
district.search("克拉玛依市", function (status, result) {
|
// // 外多边形坐标数组和内多边形坐标数组
|
var outer = [
|
new AMap.LngLat(-360, 90, true),
|
new AMap.LngLat(-360, -90, true),
|
new AMap.LngLat(360, -90, true),
|
new AMap.LngLat(360, 90, true),
|
]; // 使得遮盖填充反向
|
var holes = result.districtList[0].boundaries; // 得到该区域的边界坐标集合
|
|
var pathArray = [outer];
|
pathArray.push.apply(pathArray, holes);
|
var polygon = new AMap.Polygon({
|
pathL: pathArray,
|
//线条颜色，使用16进制颜色代码赋值。默认值为#006600
|
strokeColor: "#11feee",
|
strokeWeight: 3,
|
fillColor: "#051342",
|
fillOpacity: 1,
|
strokeStyle: "solid",
|
strokeDasharray: [2, 2],
|
});
|
polygon.setPath(pathArray)
|
m.add(polygon);
|
})
|
m.addControl(new AMap.ToolBar({
|
position: {
|
top: '20px',
|
left: 'calc(25% + 5px)'
|
}
|
}))
|
m.addControl(new AMap.ControlBar({
|
position: {
|
top: '20px',
|
right: 'calc(25% + 5px)'
|
}
|
}))
|
})
|
|
} else {
|
console.error('AMap 或 AMap.Map 不可用');
|
}
|
})
|
.catch(e => {
|
console.log('加载高德地图时出错：', e)
|
})
|
}
|
// 当前时间
|
const getDateTime = () => {
|
const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
|
state.time = curTime.slice(10, 19);
|
state.date = curTime.slice(0, 10);
|
let week = ['日', '一', '二', '三', '四', '五', '六'];
|
let day = new Date().getDay();
|
state.weekDay = '星期' + week[day];
|
let curHour = Number(curTime.slice(10, 13));
|
if (curHour >= 5 && curHour <= 10) {
|
state.dayTime = '上午';
|
}
|
if (curHour > 10 && curHour <= 12) {
|
state.dayTime = '中午';
|
}
|
if (curHour > 12 && curHour <= 18) {
|
state.dayTime = '下午';
|
}
|
if (curHour > 18 && curHour <= 22) {
|
state.dayTime = '晚上';
|
}
|
if (curHour > 22) {
|
state.dayTime = '午夜';
|
}
|
}
|
const toFull= ()=>{
|
router.push({
|
path:"/fullScreen"
|
})
|
context.emit('clickFull')
|
}
|
const back=()=>{
|
window.history.go(-1);
|
context.emit('clickFull')
|
}
|
|
onUnmounted(()=>{
|
map.value && map.value.destroy();
|
})
|
|
return {
|
timeForm,
|
config,
|
bigConfig,
|
gasN,
|
gasT,
|
map,
|
mouseoverHandler,
|
clickHandler,
|
toFull,
|
back,
|
...toRefs(state)
|
};
|
}
|
});
|
</script>
|
<style lang="scss" scoped>
|
.charts-container{
|
width: 100%;
|
height: 100%;
|
background: url("../../../assets/warningScreen/body-bg.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.header-content {
|
width: 100%;
|
height: 10%;
|
padding: 0 20px;
|
display: flex;
|
align-items: flex-start;
|
justify-content: space-around;
|
z-index: 9;
|
|
.title-left {
|
width: 27%;
|
height: 50%;
|
display: flex;
|
align-items: center;
|
.datetime{
|
display: flex;
|
align-items: center;
|
color: #11feee;
|
|
.timel{
|
font-size: 30px;
|
margin-right: 10px;
|
}
|
.timer{
|
font-size: 12px;
|
}
|
}
|
}
|
.title {
|
width: 46%;
|
height: 100%;
|
font-size: 28px;
|
font-weight: bolder;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
letter-spacing: 10px;
|
color: #11feee;
|
}
|
|
.title-right {
|
width: 27%;
|
height: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: right;
|
font-size: 14px;
|
|
.btns{
|
display: flex;
|
align-items: center;
|
top: 3%;
|
right: 10%;
|
|
.backBtn,.fullBtn{
|
display: flex;
|
color: #11feee;
|
align-items: center;
|
cursor: pointer;
|
|
&>div{
|
margin-left: 6px;
|
}
|
}
|
}
|
}
|
}
|
.main-content{
|
width: 100%;
|
height: 90%;
|
padding: 10px;
|
display: flex;
|
align-items: flex-end;
|
justify-content: space-between;
|
position: relative;
|
|
&>div{
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
align-items: flex-start;
|
&>div{
|
padding: 0 4px;
|
box-sizing: border-box;
|
.chart-head{
|
width: 100%;
|
height: 38px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.chart-tit{
|
width: 34%;
|
padding-left: 15px;
|
letter-spacing: 4px;
|
font-size: 16px;
|
font-weight: bolder;
|
line-height: 38px;
|
color: #11feee;
|
}
|
.long-tit{
|
width: 40%;
|
}
|
.el-select{
|
width: 60%;
|
height: 20px;
|
}
|
::v-deep(.el-popper){
|
background-color: rgba(10,31,92,1);
|
border: 1px solid rgba(17,254,238,.4);
|
color: #11FEEE;
|
|
.el-icon{
|
color: #11FEEE;
|
}
|
.el-select-dropdown__item{
|
color: #11FEEE;
|
}
|
.el-select-dropdown__item.hover{
|
background: #0049af;
|
}
|
}
|
::v-deep(.el-popper__arrow){
|
&::before{
|
background-color: rgba(10,31,92,.6) !important;
|
border: 1px solid rgba(17,254,238,.4);
|
}
|
}
|
|
.sys-status{
|
width: 66%;
|
height: 70%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 12px;
|
div{
|
color: #fff;
|
margin-left: 2px;
|
span{
|
color: #11feee;
|
margin-left: 10px;
|
font-size: 14px;
|
}
|
}
|
}
|
|
.el-radio-group{
|
height: 90%;
|
width: 66%;
|
flex-flow: row nowrap;
|
display: flex;
|
align-items: center;
|
justify-content: right;
|
.el-radio{
|
width: calc((100% - 6px)/4);
|
margin-right: 0;
|
margin-left: 2px;
|
margin-bottom: 0;
|
text-align: center;
|
border-color: #ccc;
|
&.el-radio--small{
|
height: 20px;
|
}
|
:deep(.el-radio__inner){
|
display: none;
|
}
|
:deep(.el-radio__label){
|
width: 100%;
|
padding-left: 0;
|
font-size: 10px;
|
color: #ccc;
|
}
|
}
|
.el-radio.is-bordered.is-checked{
|
border-color: #11FEEE;
|
background: #005dd6;
|
box-shadow: 0 3px 8px rgba(0,0,0,.2);
|
|
:deep(.el-radio__label){
|
color: #fff;
|
}
|
}
|
}
|
:deep(.el-date-editor){
|
width: 66%;
|
height: 20px;
|
.el-range-separator{
|
color: #fff;
|
}
|
}
|
|
:deep(.el-input__wrapper){
|
box-shadow: none;
|
border: 1px solid #11FEEE;
|
background: #005dd6;
|
color: #fff;
|
|
input{
|
font-size: 10px;
|
color: #fff;
|
}
|
.el-icon{
|
display: none;
|
color: #fff;
|
}
|
}
|
|
.searchGroup{
|
width: 60%;
|
height: 20px;
|
display: flex;
|
align-items: center;
|
}
|
}
|
.chart-cont{
|
height: calc(100% - 40px);
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
padding: 0 15px;
|
|
.orange,.red{
|
width: 140px;
|
height: 140px;
|
border-radius: 50%;
|
border: 2px solid #ffb74b;
|
padding: 8px;
|
div{
|
width: 100%;
|
height: 100%;
|
border-radius: 50%;
|
background: #ffb74b;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
color: #fff;
|
font-size: 14px;
|
span:first-of-type{
|
font-size: 28px;
|
font-weight: bolder;
|
margin-bottom: 4px;
|
}
|
}
|
}
|
.red{
|
border: 2px solid #ee594a;
|
div{
|
background: #ee594a;
|
}
|
}
|
:deep(.dv-scroll-board){
|
width: 100%;
|
height: 90%;
|
.header{
|
font-size: 12px;
|
color: #11feee;
|
}
|
.rows{
|
.row-item{
|
border-bottom: 1px dashed rgba(255,255,255,.2);
|
font-size: 12px;
|
}
|
}
|
}
|
.online{
|
width: 50%;
|
padding: 0 10px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
.dv-decoration-9{
|
width: 120px;
|
height: 120px;
|
.isOnline{
|
font-size: 36px;
|
font-family: "PingFang SC";
|
font-weight: 600;
|
color: #2af;
|
text-shadow: 0 1px 3px #2af;
|
}
|
.red-font{
|
color: red;
|
text-shadow: 0 1px 3px red;
|
}
|
}
|
&>div{
|
color: #2af;
|
margin-top: 10px;
|
}
|
.totalNum{
|
color: #ccc;
|
span{
|
font-size: 18px;
|
color: #11feee;
|
margin-right: 10px;
|
}
|
}
|
.dataPic{
|
width: 100%;
|
height: 100px;
|
background: url("../../../assets/warningScreen/data.gif") no-repeat center;
|
background-size: 100% 100%;
|
}
|
}
|
.echart{
|
width: 100%;
|
height: 80%;
|
}
|
}
|
|
.bigData{
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
padding: 5px 10px;
|
.bigPic{
|
width: 100%;
|
height: 50px;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
div{
|
width: 50px;
|
height: 50px;
|
background: url("../../../assets/warningScreen/data-1.png") no-repeat center;
|
background-size: 90% 90%;
|
}
|
div:nth-of-type(2){
|
background: url("../../../assets/warningScreen/data-2.png") no-repeat center;
|
background-size: 90% 90%;
|
}
|
div:nth-of-type(3){
|
background: url("../../../assets/warningScreen/data-3.png") no-repeat center;
|
background-size: 90% 90%;
|
}
|
div:nth-of-type(4){
|
background: url("../../../assets/warningScreen/data-4.png") no-repeat center;
|
background-size: 90% 90%;
|
}
|
div:nth-of-type(5){
|
background: url("../../../assets/warningScreen/data-5.png") no-repeat center;
|
background-size: 90% 90%;
|
}
|
div:nth-of-type(6){
|
background: url("../../../assets/warningScreen/data-6.png") no-repeat center;
|
background-size: 90% 90%;
|
}
|
}
|
|
:deep(.dv-scroll-board){
|
width: 100%;
|
height: calc(100% - 60px);
|
.header{
|
color: #11feee;
|
}
|
.rows{
|
background: url("../../../assets/warningScreen/scroll-bg.png") no-repeat center;
|
background-size: 100% 100%;
|
padding: 6px 0 0;
|
.row-item{
|
border-bottom: none;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
#bigMap{
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
left: 0;
|
top: 0;
|
|
:deep(.amap-logo){
|
display: none!important;
|
visibility: hidden!important;
|
}
|
|
:deep(.amap-copyright) {
|
display: none!important;
|
visibility: hidden!important;
|
}
|
}
|
|
.main-left{
|
z-index: 9;
|
width: calc(25% - 5px);
|
&>div{
|
width: 100%;
|
height: calc((100%/3) - (20px/3));
|
}
|
.withFilter{
|
background: url("../../../assets/warningScreen/chart-bg2.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.withoutFilter{
|
background: url("../../../assets/warningScreen/chart-bg.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
}
|
.main-middle{
|
width: calc(50% - 10px);
|
height: calc((100%/3) - (20px/3));
|
z-index: 9;
|
|
.mid-bottom{
|
width: 100%;
|
height: 100%;
|
background: url("../../../assets/warningScreen/chart-bg4.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
}
|
.main-right{
|
width: calc(25% - 5px);
|
z-index: 9;
|
&>div{
|
width: 100%;
|
height: calc((100%/3) - (20px/3));
|
}
|
.withFilter{
|
background: url("../../../assets/warningScreen/chart-bg2.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.withFilterLong{
|
background: url("../../../assets/warningScreen/chart-bg3.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.withoutFilter{
|
background: url("../../../assets/warningScreen/chart-bg.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
}
|
}
|
</style>
|
