<template>
|
<div class="dma-container">
|
<div class="content">
|
<div class="left">
|
|
</div>
|
<div class="main">
|
|
</div>
|
<!-- 右 ------------------------------------------ -->
|
<div class="right">
|
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { getCurrentInstance,onBeforeUnmount,onMounted } from 'vue';
|
import dma from "@/api/screen/dma/index";
|
import overview from '@/api/screen/overview/index';
|
import * as echarts from 'echarts'
|
import pointApi from "@/api/facility/point.js";
|
const { proxy }= getCurrentInstance()
|
/**
|
* 地块
|
*/
|
const landMassList = ref([
|
{
|
"code": "6-1",
|
"name": "6#系统1",
|
"listArea": [
|
"八连"
|
],
|
"landType": "耕地",
|
"soilType": "沙土",
|
"vegetationType": "棉花",
|
"extent": 100,
|
"sort": 1
|
},{
|
"code": "6-2",
|
"name": "6#系统2",
|
"listArea": [
|
"八连"
|
],
|
"landType": "耕地",
|
"soilType": "沙土",
|
"vegetationType": "棉花",
|
"extent": 100,
|
"sort": 2
|
},{
|
"code": "6-3",
|
"name": "6#系统3",
|
"listArea": [
|
"八连"
|
],
|
"landType": "耕地",
|
"soilType": "沙土",
|
"vegetationType": "棉花",
|
"extent": 100,
|
"sort": 3
|
},{
|
"code": "7-1",
|
"name": "7#系统1",
|
"listArea": [
|
"八连"
|
],
|
"landType": "耕地",
|
"soilType": "沙土",
|
"vegetationType": "棉花",
|
"extent": 100,
|
"sort": 4
|
},{
|
"code": "7-2",
|
"name": "7#系统2",
|
"listArea": [
|
"八连"
|
],
|
"landType": "耕地",
|
"soilType": "沙土",
|
"vegetationType": "棉花",
|
"extent": 100,
|
"sort": 5
|
}
|
]);
|
|
/**
|
* 地图取水点
|
*/
|
const pointInfo = ref([
|
// {name:'监控点1',liquidLevel:'0',flow:'0.00',pressure:'0.00',class:'point-one point'},
|
// {name:'监控点2',liquidLevel:'0',flow:'0.00',pressure:'0.00',class:'point-two point'},
|
// {name:'监控点3',liquidLevel:'0',flow:'0.00',pressure:'0.00',class:'point-three point'},
|
])
|
|
/**
|
* 频率
|
*/
|
|
const getPointInfo = async () =>{
|
await overview().getDataOverview().then((res) => {
|
res.data.forEach((item,index1)=> {
|
pointInfo.value[index1].name = item.pointName
|
item.dataList.forEach((item) => {
|
//液位
|
// if(item.columnsCode === '1001'){
|
// pointInfo.value[index1].liquidLevel = item.columnsValue
|
// }
|
//流量
|
if(item.columnsCode === '1011'){
|
pointInfo.value[index1].flow = item.columnsValue
|
}
|
//压力
|
if(item.columnsCode === '1002'){
|
pointInfo.value[index1].pressure = item.columnsValue
|
}
|
})
|
})
|
})
|
pointInfo.value.forEach((item) =>{
|
item.flow = Number(item.flow).toFixed(2)
|
item.pressure = Number(item.pressure).toFixed(2)
|
})
|
}
|
//getPointInfo()
|
/**
|
* Echarts 图表
|
*/
|
let pressureChart
|
let liquidLevelChart
|
let flowChart
|
let analysisChart
|
let entranceChart
|
//初始化Echarts
|
let initCharts = () =>{
|
pressureChart = echarts.init(document.getElementById('pressure'));
|
liquidLevelChart = echarts.init(document.getElementById('liquidLevel'));
|
flowChart = echarts.init(document.getElementById('flow'));
|
analysisChart = echarts.init(document.getElementById('analysis'));
|
entranceChart = echarts.init(document.getElementById('entrance'));
|
}
|
let loadingEcharts = {
|
text: 'loading',
|
textColor: 'rgba(105,133,219, 1)',
|
maskColor: 'rgba(202, 224, 252, 0.2)',
|
fontSize: '20px',
|
}
|
/**
|
* 搜索
|
*/
|
const pointList = ref([])
|
const pointId = ref();
|
const getPointList = async() =>{
|
|
//区域列表
|
let res = await pointApi().search({limit: 10000, page: 1})
|
if(res.code == 200){
|
pointList.value = res.data.list
|
pointId.value = pointList.value[0].id
|
console.log("获取监控点数据",pointList.value);
|
}else{
|
proxy.$modal.msgError('获取数据失败,请刷新再试！')
|
}
|
}
|
//选中数据
|
const searchPoint = () =>{
|
getListData({type:'1',pointId:pointId.value})
|
}
|
//报警相关
|
const alarmList = ref([
|
{description:'6#泵房液位过低',createTimeView:'2025-01-01 15:12:36'},
|
{description:'7#泵房液位过低',createTimeView:'2025-01-01 15:13:36'},
|
{description:'6#泵房压力异常',createTimeView:'2025-01-01 15:12:36'}
|
])
|
async function getAlarmData(){
|
await dma().alarm({limit:10000,page:1}).then((res) =>{
|
alarmList.value = res.data.list
|
})
|
}
|
|
//获取液位监测数据
|
let liquidLevelList = [[],[],[]]
|
const getLiquidLevelList = async(val) =>{
|
liquidLevelChart.showLoading(loadingEcharts)
|
val.columnsCodeList = ['1001']
|
let res = await dma().searchMonitor(val)
|
liquidLevelChart.hideLoading()
|
liquidLevelList = [[],[],[]]
|
if(res.code == 200){
|
res.data.forEach((item) =>{
|
if(item.facilityCode === 'YWJ001' || item.facilityCode === 'YWJ002' || item.facilityCode === 'YWJ003'){
|
liquidLevelList[0].push([item.uploadTimeView,Number(item.columnsValue)])
|
}
|
if(item.facilityCode === 'YWJ004' || item.facilityCode === 'YWJ005' || item.facilityCode === 'YWJ006'){
|
liquidLevelList[1].push([item.uploadTimeView,Number(item.columnsValue)])
|
}
|
// if(item.facilityName === '3#液位计'){
|
// liquidLevelList[2].push([item.uploadTimeView,Number(item.columnsValue)])
|
// }
|
})
|
}else{
|
// proxy.$modal.msgError('暂无液位数据')
|
}
|
setOptions(liquidLevelList,liquidLevelChart,['1#液位计','高位水池液位','3#液位计'],'( m3/h )')
|
console.log('pre-get',liquidLevelList);
|
}
|
//获取压力监测数据
|
let pressureList = [[],[],[]]
|
const getPressureList = async(val) =>{
|
pressureChart.showLoading(loadingEcharts)
|
val.columnsCodeList = ['1002']
|
let res = await dma().searchMonitor(val)
|
pressureChart.hideLoading()
|
pressureList = [[],[],[]]
|
if(res.code == 200){
|
res.data.forEach((item) =>{
|
if(item.facilityCode === '000243617545' || item.facilityCode === '000243617546' || item.facilityCode === '000243617547'){
|
pressureList[0].push([item.uploadTimeView,Number(item.columnsValue)])
|
}
|
// if(item.facilityName === '压力计2'){
|
// pressureList[1].push([item.uploadTimeView,Number(item.columnsValue)])
|
// }
|
// if(item.facilityName === '压力计3'){
|
// pressureList[2].push([item.uploadTimeView,Number(item.columnsValue)])
|
// }
|
})
|
}else{
|
// proxy.$modal.msgError('获取列表失败,请刷新重试！')
|
}
|
setOptions(pressureList,pressureChart,['1#压力计','2#压力计','3#压力计'],'( Mpa )')
|
console.log('pre-get',pressureList);
|
}
|
//获取流量监测数据
|
let flowList = [[],[],[]]
|
const getFlowList = async(val) =>{
|
flowChart.showLoading(loadingEcharts)
|
val.columnsCodeList = ['1012']
|
let res = await dma().searchMonitor(val)
|
flowChart.hideLoading()
|
flowList = [[],[],[]]
|
if(res.code == 200){
|
res.data.forEach((item,index) =>{
|
if(item.facilityCode === 'LLJ001' || item.facilityCode === 'LLJ002' || item.facilityCode === 'LLJ003'){
|
flowList[0].push([item.uploadTimeView,Number(item.columnsValue)])
|
}
|
// if(item.facilityName === '2#流量计'){
|
// flowList[1].push([item.uploadTimeView,Number(item.columnsValue)])
|
// }
|
// if(item.facilityName === '3#流量计'){
|
// flowList[2].push([item.uploadTimeView,Number(item.columnsValue)])
|
// }
|
// data.push([item.uploadTimeView,Number(item.columnsValue)])
|
})
|
}else{
|
proxy.$modal.msgError('获取列表失败,请刷新重试！')
|
}
|
console.log('flowList',flowList)
|
setOptions(flowList,flowChart,['1#流量计','2#流量计','3#流量计'],'( t )')
|
}
|
|
//获取夜间流量监测数据
|
let flowNightList = [[],[],[]]
|
const getAnalysisList = async(val) =>{
|
analysisChart.showLoading(loadingEcharts)
|
val.columnsCodeList = ['1012']
|
let res = await dma().searchStatistic(val)
|
analysisChart.hideLoading()
|
flowNightList = [[],[],[]]
|
if(res.code == 200){
|
res.data.forEach((item,index) =>{
|
if(item.facilityCode === 'LLJ001' || item.facilityCode === 'LLJ002' || item.facilityCode === 'LLJ003'){
|
flowNightList[0].push([item.uploadTimeView,Number(item.columnsValue)])
|
}
|
// if(item.facilityName === '2#流量计'){
|
// flowNightList[1].push([item.uploadTimeView,Number(item.columnsValue)])
|
// }
|
// if(item.facilityName === '3#流量计'){
|
// flowNightList[2].push([item.uploadTimeView,Number(item.columnsValue)])
|
// }
|
})
|
}else{
|
proxy.$modal.msgError('获取列表失败,请刷新重试！')
|
}
|
console.log('flowNightList',flowNightList)
|
setOptions(flowNightList,analysisChart,['1#流量计','2#流量计','3#流量计'],'( t )')
|
}
|
/**
|
* echart配置
|
*
|
*/
|
const setOptions = (datalist,echart,title,yAxisTitle) =>{
|
let options = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'line' ,
|
lineStyle:{
|
color:'#f3eadc',
|
},
|
snap:true,
|
},
|
},
|
grid:{
|
width:'80%',
|
left:'8%',
|
bottom: '12%'
|
},
|
xAxis: {
|
name:'Date',
|
type: 'time',//横坐标设为时间，根据data当日时间自动对应，data横坐标为时间格式
|
axisTick:{
|
show:false,
|
},
|
axisLabel:{
|
show:false,
|
},
|
axisLine:{
|
show:true,
|
lineStyle:{
|
color:'#bdc3c7',
|
width:1,
|
},
|
},
|
},
|
yAxis: {
|
name:yAxisTitle,
|
type: 'value',
|
boundaryGap:false,
|
axisLine:{
|
show:true,
|
lineStyle:{
|
color:'#bdc3c7',
|
width:1,
|
},
|
},
|
axisLabel:{
|
color:'#C8C8C8',
|
},
|
splitLine:{
|
show:false,
|
}
|
},
|
series: [
|
{
|
name: title[0],
|
type: 'line',
|
symbol: 'none',
|
data:datalist[0],
|
itemStyle: {
|
color: '#1459a8',
|
},
|
lineStyle:{
|
color: '#1459a8',
|
width:1,
|
},
|
|
labelLine:{
|
show:false,
|
},
|
smooth:true,
|
areaStyle: {
|
color: new echarts.graphic.LinearGradient(
|
0, 0, 0, 1,
|
[
|
{offset: 0, color:'#1459a8'},
|
{offset: 1, color:'#7cb2f1'}
|
]
|
)
|
}
|
},
|
{
|
name: title[1],
|
type: 'line',
|
symbol: 'none',
|
data:datalist[1],
|
itemStyle: {
|
color: '#12835c',
|
},
|
lineStyle:{
|
color: '#12835c',
|
width:1,
|
},
|
smooth:true,
|
areaStyle: {
|
color: new echarts.graphic.LinearGradient(
|
0, 0, 0, 1,
|
[
|
{offset: 0, color:'#12835c'},
|
{offset: 1, color:'#ace4d1'}
|
]
|
)
|
}
|
},
|
{
|
name: title[2],
|
type: 'line',
|
symbol: 'none',
|
data:datalist[2],
|
itemStyle: {
|
color: '#04748c',
|
},
|
lineStyle:{
|
color: '#04748c',
|
width:1,
|
},
|
smooth:true,
|
areaStyle: {
|
color: new echarts.graphic.LinearGradient(
|
0, 0, 0, 1,
|
[
|
{offset: 0, color:'#04748c'},
|
{offset: 1, color:'#7fd8ec'}
|
]
|
)
|
}
|
}
|
],
|
}
|
echart.clear()
|
echart.setOption(options,true)
|
}
|
//压力曲线
|
const getListPressure = () =>{
|
const pressureList = [
|
['2024-08-12 02:10:00', 4],
|
['2024-08-12 02:23:00', 5],
|
['2024-08-12 03:53:00', 6],
|
['2024-08-12 05:23:00', 7],
|
['2024-08-12 07:33:00', 12],
|
['2024-08-12 09:43:00', 6],
|
['2024-08-12 11:22:00', 3],
|
['2024-08-12 13:26:00', 10],
|
['2024-08-12 16:29:00', 11],
|
['2024-08-12 20:53:00', 20],
|
]
|
setDmaOptions(pressureList,pressureChart,'| 压力曲线','压力','( MPa)')
|
}
|
//流量曲线
|
const getListEntrance = () =>{
|
const entranceList = [
|
['2024-08-12 02:10:00', 4],
|
['2024-08-12 02:23:00', 5],
|
['2024-08-12 03:53:00', 6],
|
['2024-08-12 05:23:00', 7],
|
['2024-08-12 07:33:00', 12],
|
['2024-08-12 09:43:00', 6],
|
['2024-08-12 11:22:00', 3],
|
['2024-08-12 13:26:00', 10],
|
['2024-08-12 16:29:00', 11],
|
['2024-08-12 20:53:00', 20],
|
]
|
setDmaOptions(entranceList,entranceChart,'|流量曲线','流量','( m³)')
|
}
|
//水位曲线
|
const getListAnalysis = () =>{
|
const analysisList = [
|
['2024-08-12 02:10:00', 4],
|
['2024-08-12 02:23:00', 5],
|
['2024-08-12 03:53:00', 6],
|
['2024-08-12 05:23:00', 7],
|
['2024-08-12 07:33:00', 12],
|
['2024-08-12 09:43:00', 6],
|
['2024-08-12 11:22:00', 3],
|
['2024-08-12 13:26:00', 10],
|
['2024-08-12 16:29:00', 11],
|
['2024-08-12 20:53:00', 20],
|
]
|
setDmaOptions(analysisList,analysisChart,'| 水位曲线','水位','( m)')
|
}
|
//频率折线
|
const getListFlow = () =>{
|
|
setDmaOptions2(flowChart)
|
}
|
//设备饼图
|
const getListLiquidLevel = () =>{
|
|
setDmaOptions3(liquidLevelChart)
|
}
|
//echart配置
|
const setDmaOptions = (dataList,chart,title,toolTitle,axisName) =>{
|
let options = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'line' ,
|
lineStyle:{
|
color:'#f3eadc',
|
},
|
snap:true,
|
},
|
},
|
grid: {
|
width:'80%',
|
left:'8%',
|
bottom: '12%'
|
},
|
dataset: {
|
source:dataList
|
},
|
xAxis: {
|
name:'Date',
|
type: 'time',
|
axisTick:{
|
show:false,
|
},
|
axisLabel:{
|
show:false,
|
},
|
axisLine:{
|
show:true,
|
lineStyle:{
|
color:'#bdc3c7',
|
width:1,
|
},
|
},
|
},
|
yAxis: {
|
name:axisName,
|
type: 'value',
|
boundaryGap:false,
|
axisLine:{
|
show:true,
|
lineStyle:{
|
color:'#bdc3c7',
|
width:1,
|
},
|
},
|
axisLabel:{
|
color:'#C8C8C8',
|
},
|
splitLine:{
|
show:false,
|
}
|
},
|
series: [
|
{
|
name: toolTitle,
|
type: 'line',
|
symbol: 'none',
|
itemStyle: {
|
color: '#47B3FF',
|
},
|
lineStyle:{
|
color: '#47B3FF',
|
width:1,
|
},
|
smooth:true,
|
encode: {
|
x: 0,
|
y: 1
|
},
|
areaStyle: {
|
color: new echarts.graphic.LinearGradient(
|
0, 0, 0, 1,
|
[
|
{offset: 0, color:'#55A5EB'},
|
{offset: 1, color:'#fff'}
|
]
|
)
|
}
|
}
|
],
|
}
|
chart.clear()
|
chart.setOption(options,true)
|
}
|
|
//echart 折线配置
|
const setDmaOptions2 = (chart) =>{
|
|
let options = {
|
|
tooltip: {
|
trigger: 'axis',
|
splitLine:false
|
},
|
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
// toolbox: {
|
// feature: {
|
// saveAsImage: {}
|
// }
|
// },
|
xAxis: {
|
type: 'category',
|
splitLine: {
|
show:false
|
},
|
|
boundaryGap: false,
|
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
},
|
yAxis: {
|
type: 'value',
|
splitLine: {
|
show:false
|
},
|
|
},
|
series: [
|
{
|
name: '6#1',
|
type: 'line',
|
smooth: true,
|
data: [0, 1, 1.2, 1.2,1.5, 15,1.3]
|
},
|
{
|
name: '6#2',
|
type: 'line',
|
stack: 'Total',
|
smooth: true,
|
data: [1, 1.5, 1.1, 2.4, 2.0, 1.5, 2.1]
|
},
|
{
|
name: '6#3',
|
type: 'line',
|
stack: 'Total',
|
smooth: true,
|
data: [1.5, 2.2, 2.1, 1.4, 1.6, 1.6, 2.3]
|
},
|
{
|
name: '7#1t',
|
type: 'line',
|
stack: 'Total',
|
smooth: true,
|
data: [0.5, 1.6, 0.9, 0.7, 0.5, 1.6, 1.2]
|
},
|
{
|
name: '7#2',
|
type: 'line',
|
stack: 'Total',
|
smooth: true,
|
data: [1.2, 1.6, 1.6, 0.9, 2.1, 0.3, 1.6]
|
}
|
]
|
};
|
chart.clear()
|
chart.setOption(options,true)
|
}
|
//echart 饼图配置
|
const setDmaOptions3 = (chart) =>{
|
|
let options = {
|
|
series: [
|
{
|
name: 'Nightingale Chart',
|
type: 'pie',
|
radius: [50, 90],
|
center: ['50%', '50%'],
|
roseType: 'area',
|
itemStyle: {
|
borderRadius: 8
|
},
|
data: [
|
|
{ value: 38, name: '离线' },
|
{ value: 24, name: '在线' }
|
]
|
}
|
]
|
};
|
chart.clear()
|
chart.setOption(options,true)
|
}
|
//统一请求数据监测数据
|
const getListData = async(val) =>{
|
getPressureList(val)
|
getFlowList(val)
|
getAnalysisList(val)
|
getLiquidLevelList(val)
|
}
|
/**
|
* 表格上传记录-Table
|
*/
|
const loading = ref(false); //加载状态
|
const tableData = ref([]); //管点列表
|
let tableHeader = ref({
|
sort:'序号',
|
code: '地块编号',
|
name: '地块名称',
|
listArea: '所属区域',
|
landType:'土地类型',
|
soilType:'土壤类型',
|
vegetationType:'种植作物',
|
extent:'面积',
|
})
|
//获取列表数据
|
const getTableList = async() => {
|
loading.value = true;
|
let res = await dma().headWaterArea(['1013','1012'])
|
if(res.code == 200) {
|
loading.value = false;
|
tableData.value = res.data
|
}
|
}
|
watchEffect(() =>{
|
if(pressureChart || flowChart || analysisChart || analysisChart){
|
setOptions(flowList,flowChart,['1#流量计','2#流量计','3#流量计'])
|
setOptions(pressureList,pressureChart,['1#压力计','2#压力计','3#压力计'])
|
setOptions(liquidLevelList,liquidLevelChart,['1#液位计','2#液位计','3#液位计'])
|
setOptions(flowNightList,analysisChart,['1#流量计','2#流量计','3#流量计'],'( t )')
|
}else{
|
console.log('eChart不存在');
|
}
|
})
|
window.addEventListener('resize', function() {
|
pressureChart.resize();
|
liquidLevelChart.resize();
|
flowChart.resize();
|
analysisChart.resize();
|
entranceChart.resize();
|
|
});
|
onMounted(async() =>{
|
initCharts()
|
getListEntrance()
|
getListPressure()
|
getListAnalysis()
|
getListFlow()
|
getListLiquidLevel()
|
|
await getPointList()
|
await getTableList()
|
// await getListData({type:'1',pointId:pointId.value})
|
// await getAlarmData()
|
})
|
//卸载前销毁图表
|
const disposeEcharts = (echarts) => {
|
if (echarts) {
|
echarts.dispose();
|
echarts = null;
|
}
|
}
|
onBeforeUnmount(async ()=> {
|
disposeEcharts(pressureChart)
|
disposeEcharts(liquidLevelChart)
|
disposeEcharts(flowChart)
|
disposeEcharts(analysisChart)
|
disposeEcharts(entranceChart)
|
})
|
|
</script>
|
|
<style lang="scss" scoped>
|
.dma-container{
|
height:100%;
|
width: 100%;
|
padding: 0.5%;
|
.content{
|
display: flex;
|
flex-wrap: nowrap;
|
height: 100%;
|
width: 100%;
|
.left{
|
width: 26.4%;
|
height:100%;
|
display: flex;
|
justify-content: space-between;
|
flex-direction: column;
|
.echarts-box{
|
width: 100%;
|
height: 33%;
|
// background-image: url("../../../assets/images/screen/dma/box.png");
|
// background-repeat: no-repeat;
|
// background-size: 100% 100%;
|
.echarts-title{
|
width: 100%;
|
height: 16.5%;
|
// background-image: url("../../../assets/images/screen/dma/icon1.png");
|
// background-repeat: no-repeat;
|
// background-position: 4% 50%;
|
font-weight: 500;
|
font-size: 18px;
|
color: #FFFFFF;
|
padding-left:8%;
|
padding-top:2.5%;
|
|
}
|
#pressure{
|
width: 100%;
|
height: 83.5%;
|
}
|
#analysis{
|
width: 100%;
|
height: 83.5%;
|
}
|
#entrance{
|
width: 100%;
|
height: 83.5%;
|
}
|
}
|
|
}
|
.main{
|
width:47%;
|
height:100%;
|
margin: 0 auto;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
.map{
|
width: 100%;
|
height:560px;
|
|
position: relative;
|
background-image: url("../../../assets/images/screen/overview/maplot.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
.map-img{
|
// position: absolute;
|
// top: 112px;
|
// right: 416px;
|
width:100%;
|
height:100%;
|
img{
|
width:100%;
|
height:100%;
|
}
|
}
|
.circle{
|
width:75px;
|
height:113px;
|
position: absolute;
|
background-image: url("../../../assets/images/screen/dma/mini-circle.png");
|
background-repeat: no-repeat;
|
top: 1%;
|
right: 1%;
|
}
|
.map-text1{
|
position: absolute;
|
top:65%;
|
left:32%;
|
font-weight: 400;
|
font-size: 14px;
|
color: #FFFFFF;
|
font-style: italic;
|
}
|
.map-text2{
|
position: absolute;
|
top:26%;
|
left:60%;
|
font-weight: 400;
|
font-size: 14px;
|
color: #FFFFFF;
|
font-style: italic;
|
}
|
.map-text3{
|
position: absolute;
|
top: 50.5%;
|
left: 64.5%;
|
font-weight: 400;
|
font-size: 14px;
|
color: #FFFFFF;
|
font-style: italic;
|
}
|
.map-text4{
|
position: absolute;
|
top:65.5%;
|
left:55%;
|
font-weight: 400;
|
font-size: 14px;
|
color: #FFFFFF;
|
font-style: italic;
|
}
|
.point{
|
width: 24%;
|
height: 24%;
|
background-image: url("../../../assets/images/screen/dma/alert.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
padding: 2% 3% 1%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-evenly;
|
.point-name{
|
width: 100%;
|
font-weight: 500;
|
font-size: 18px;
|
color: #BEF0FF;
|
}
|
.point-content{
|
width: 100%;
|
margin-top:1%;
|
div{
|
width: 100%;
|
display: flex;
|
justify-content:space-between;
|
margin-left: 10px;
|
margin-top:3%;
|
span:first-child{
|
font-weight: 500;
|
font-size: 16px;
|
color: #A4ECF5;
|
// margin-right: 15px;
|
}
|
span:last-child{
|
font-weight: 500;
|
font-size: 14px;
|
color: #FFFFFF;
|
}
|
}
|
}
|
}
|
.point-one{
|
top:6%;
|
left: 15%;
|
position: absolute;
|
}
|
.point-two{
|
bottom:43%;
|
left: 9%;
|
position: absolute;
|
}
|
.point-three{
|
right:73%;
|
top: 62%;
|
position: absolute;
|
}
|
img{
|
width:48px;
|
height:80px;
|
position: absolute;
|
// bottom: calc(50% - 40px);
|
// left: calc(50% - 24px)
|
}
|
}
|
.table-box{
|
height:33%;
|
width:100%;
|
background-image: url("../../../assets/images/screen/dma/table-box.png");
|
background-repeat: no-repeat;
|
background-size: 98% 100%;
|
background-position: center;
|
padding: 0 2%;
|
//修改边框和字体
|
:deep(.el-table){
|
--el-table-border-color:rgba(0,0,0,0);
|
font-weight: 500;
|
font-size: 14px;
|
color: #FFFFFF;
|
}
|
//修改头部字体
|
:deep(.el-table__header th){
|
font-weight: 500;
|
font-size: 12px;
|
color: #FFFFFF;
|
}
|
/*最外层透明*/
|
:deep(.el-table),
|
:deep(.el-table__expanded-cell){
|
background-color: transparent !important;
|
}
|
/* 表格内背景颜色 */
|
:deep(.el-table th),
|
:deep(.el-table tr),
|
:deep(.el-table td){
|
background-color: transparent !important;
|
border-bottom:1px solid #1D627D !important;
|
}
|
//:deep(.el-table tr){
|
// border:1px solid #000 !important;
|
//}
|
/*去除底边框*/
|
:deep(.el-table td.el-table__cell){
|
border:0;
|
}
|
:deep(.el-table th.el-table__cell.is-leaf) {
|
border: 0;
|
}
|
/*去除底部灰条.el-table::before*/
|
:deep(.el-table::before) {
|
display: none;
|
}
|
}
|
}
|
.right{
|
width: 26.4%;
|
height:100%;
|
display: flex;
|
justify-content: space-between;
|
flex-direction: column;
|
.search{
|
width: 100%;
|
height:4%;
|
display: flex;
|
align-items: center;
|
justify-content: flex-start;
|
.search-select{
|
height:100%;
|
width: 80%;
|
:deep(.el-select__wrapper){
|
height: 100%;
|
width: 100%;
|
background:transparent !important;
|
border: 1px solid #1fb0be !important;
|
border-radius: 5px 0 0 5px;
|
}
|
}
|
.search-btn{
|
height:100%;
|
width: 20%;
|
border-radius:0 5px 5px 0;
|
background: #2a6bb6;
|
border-bottom: 1px solid #03e9ff !important;
|
border-top: 1px solid #03e9ff !important;
|
border-right: 1px solid #03e9ff !important;
|
font-weight: 400;
|
font-size: 18px;
|
color: #B9F9FF;
|
}
|
}
|
#alarm{
|
width: 100%;
|
height: 27.5%;
|
// background-image: url("../../../assets/images/screen/dma/box.png");
|
// background-repeat: no-repeat;
|
// background-size: 100% 100%;
|
.alarm-title{
|
padding-left:15px;
|
height:18%;
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
div{
|
display: flex;
|
align-items: center;
|
height: 100%;
|
margin-left: 10px;
|
font-weight: 500;
|
font-size: 18px;
|
color: #FFFFFF;
|
}
|
}
|
.alarm-more{
|
height:14%;
|
font-weight: 500;
|
font-size:20px;
|
color: #559AE8;
|
// color: #25D9B9;
|
margin-left:12%;
|
}
|
.alarm-content{
|
height:68%;
|
display: flex;
|
flex-direction: column;
|
justify-content: flex-start;
|
align-items:flex-start;
|
padding: 3% 6%;
|
// background-color: #03e9ff;
|
overflow: hidden;
|
.alarm-item{
|
width: 100%;
|
height:20%;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
padding: 16px 0;
|
.item-point{
|
width:10px;
|
height:10px;
|
border-radius: 50%;
|
background-color: #49CBCB;
|
}
|
.item-text{
|
width:60%;
|
font-weight: 500;
|
font-size: 15px;
|
//color: #25D9B9;
|
color: #559AE8;
|
}
|
.item-date{
|
font-weight: 500;
|
font-size: 13px;
|
// color: #559AE8;
|
color: #25D9B9;
|
}
|
}
|
}
|
}
|
.echarts-box{
|
width: 100%;
|
height: 33%;
|
// background-image: url("../../../assets/images/screen/dma/box.png");
|
// background-repeat: no-repeat;
|
// background-size: 100% 100%;
|
.echarts-title {
|
width: 100%;
|
height: 16.5%;
|
background-image: url("../../../assets/images/screen/dma/icon1.png");
|
background-repeat: no-repeat;
|
background-position: 4% 50%;
|
font-weight: 500;
|
font-size: 18px;
|
color: #FFFFFF;
|
padding-left:8%;
|
padding-top:2.5%;
|
}
|
#liquidLevel{
|
width: 100%;
|
height: 83.5%;
|
}
|
#flow{
|
width: 100%;
|
height: 83.5%;
|
}
|
}
|
}
|
}
|
}
|
.img{
|
img{
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.titbox{
|
|
width: 216px;
|
height: 42px;
|
font-weight: 400;
|
font-size: 20px;
|
color: #FFFFFF;
|
position: relative;
|
z-index: 66;
|
margin-bottom: 40px;
|
|
}
|
.titbox>img{
|
width: 100%;
|
height: 100%;
|
margin: 16px;
|
}
|
.titbox>span{
|
position: absolute;
|
left: 70px;
|
top: 20px;
|
}
|
.el-table:last-child(){
|
border: none !important;
|
}
|
</style>
|
