870 lines
22 KiB
Vue
870 lines
22 KiB
Vue
<script setup>
|
||
import {onMounted, ref} from "vue"
|
||
import getPath from "@/utils/getPath.js";
|
||
import * as echarts from "echarts";
|
||
import dialogBox from './components/dialog.vue'
|
||
// 照明监测
|
||
const lightingNumList = ref([
|
||
{
|
||
name:"照明四路数量",
|
||
num:1130,
|
||
pic:getPath.lightTotal,
|
||
},
|
||
{
|
||
name:"照明四路灭灯数量",
|
||
num:1130,
|
||
pic:getPath.noLightNum,
|
||
},
|
||
{
|
||
name:"照明四路亮灯数量",
|
||
num:1130,
|
||
pic:getPath.lightingNum,
|
||
},
|
||
{
|
||
name:"离线数量",
|
||
num:1130,
|
||
pic:getPath.offlineNum,
|
||
}
|
||
])
|
||
// 照明回路详情
|
||
const lightDetail = ref([
|
||
{
|
||
name:'照明1',
|
||
address:"西大厅",
|
||
state:false
|
||
},
|
||
{
|
||
name:'照明2',
|
||
address:"西大厅",
|
||
state:false
|
||
},
|
||
{
|
||
name:'照明3',
|
||
address:"西大厅",
|
||
state:false
|
||
},
|
||
{
|
||
name:'照明4',
|
||
address:"西大厅",
|
||
state:true
|
||
},
|
||
{
|
||
name:'照明5',
|
||
address:"西大厅",
|
||
state:true
|
||
}
|
||
])
|
||
|
||
// 照明控制
|
||
const lightControl = ref([
|
||
{
|
||
name:'控制箱名称1'
|
||
},
|
||
{
|
||
name:'控制箱名称2'
|
||
},
|
||
{
|
||
name:'控制箱名称3'
|
||
},
|
||
{
|
||
name:'控制箱名称4'
|
||
},
|
||
{
|
||
name:'控制箱名称5'
|
||
}
|
||
|
||
])
|
||
// 照明负荷的时间切换
|
||
const lightLoadDate = ref('day')
|
||
const toggleLightLoad = (event) =>{
|
||
lightLoadDate.value = event.srcElement.className
|
||
}
|
||
// 照明控制
|
||
const controlBtn = ref('')
|
||
const toggleControl = (event) =>{
|
||
controlBtn.value = event.srcElement.className
|
||
}
|
||
// 弹窗
|
||
const dialogShow = ref(false)
|
||
const box = ref("")
|
||
const dialogTitle = ref("")
|
||
const openDialog = (name) =>{
|
||
dialogShow.value = true
|
||
dialogTitle.value = name
|
||
}
|
||
const closeDialog = (val) =>{
|
||
dialogShow.value = val
|
||
}
|
||
// 故障情况
|
||
const drawFaultConditionsChart = () =>{
|
||
let trafficWay = [
|
||
{
|
||
name: "正常",
|
||
value: 1260,
|
||
},
|
||
{
|
||
name: "故障",
|
||
value: 80,
|
||
},
|
||
|
||
];
|
||
var total = 0;
|
||
for (var i = 0; i < trafficWay.length; i++) {
|
||
total += trafficWay[i].value;
|
||
}
|
||
|
||
var data = [];
|
||
var color = [
|
||
'rgba(1, 246, 139, 1)',
|
||
'rgba(255, 221, 0, 1)'
|
||
];
|
||
for (var i = 0; i < trafficWay.length; i++) {
|
||
data.push(
|
||
{
|
||
value: trafficWay[i].value,
|
||
name: trafficWay[i].name,
|
||
itemStyle: {
|
||
borderWidth: 5,
|
||
// shadowBlur: 20,
|
||
borderRadius: 10,
|
||
borderColor: color[i],
|
||
shadowColor: color[i],
|
||
},
|
||
},
|
||
{
|
||
value: total * 0.04,
|
||
name: "",
|
||
itemStyle: {
|
||
label: {
|
||
show: false,
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
color: "rgba(0, 0, 0, 0)",
|
||
borderWidth: 0,
|
||
},
|
||
},
|
||
);
|
||
}
|
||
var img = "/src/assets/images/energyMonitoring/loadClassification.png";
|
||
let myChart = echarts.init(document.getElementById("faultConditions"));
|
||
let option = {
|
||
graphic: {
|
||
elements: [
|
||
{
|
||
type: "image",
|
||
z: 3,
|
||
style: {
|
||
image: img,
|
||
width: 175,
|
||
height: 175,
|
||
},
|
||
left: "center",
|
||
top: "center",
|
||
},
|
||
],
|
||
},
|
||
|
||
color: color,
|
||
title: [
|
||
{
|
||
text: total,
|
||
x: "47%",
|
||
y: "42%",
|
||
textAlign: "center",
|
||
textStyle: {
|
||
fontFamily: "Verdana-Bold",
|
||
fontSize: "20",
|
||
fontWeight: "bold",
|
||
color: "#FFF",
|
||
},
|
||
},
|
||
{
|
||
text: "个",
|
||
x: "58%",
|
||
y: "45%",
|
||
textAlign: "center",
|
||
textStyle: {
|
||
fontSize: "13",
|
||
fontWeight: "100",
|
||
color: "#FFF",
|
||
},
|
||
},
|
||
{
|
||
text: "照明四路数量",
|
||
left: "49%",
|
||
top: "55%",
|
||
textAlign: "center",
|
||
textStyle: {
|
||
fontFamily: "MicrosoftYaHei",
|
||
fontSize: "12",
|
||
fontWeight: "100",
|
||
color: "#fff",
|
||
},
|
||
},
|
||
],
|
||
tooltip: {
|
||
show: true,
|
||
},
|
||
series: [
|
||
{
|
||
name: "",
|
||
type: "pie",
|
||
clockWise: true,
|
||
radius: [50, 56],
|
||
hoverAnimation: false,
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: "outside",
|
||
color: "#FFFFFF",
|
||
fontSize: 13,
|
||
formatter: function (params) {
|
||
var percent = 0;
|
||
// var total = 0
|
||
// for (var i = 0; i < trafficWay.length; i++) {
|
||
// total += trafficWay[i].value
|
||
// }
|
||
percent = params.percent;
|
||
let unit = "个";
|
||
// percent = ((params.value / total) * 100).toFixed(0)
|
||
if (params.name !== "") {
|
||
return (
|
||
`{a${params.dataIndex / 2}|` +
|
||
params.value +
|
||
"}" +
|
||
`{s0|` +
|
||
unit +
|
||
"}" +
|
||
"\n" +
|
||
params.name
|
||
);
|
||
} else {
|
||
return "";
|
||
}
|
||
},
|
||
padding: [60, -50],
|
||
textStyle: {
|
||
rich: {
|
||
a0: {
|
||
color: "rgba(1, 246, 139, 1)",
|
||
padding: [0, 0, 10, 0],
|
||
fontSize: 15,
|
||
},
|
||
a1: {
|
||
color: color[1],
|
||
padding: [0, 0, 10, 0],
|
||
fontSize: 15,
|
||
},
|
||
s0: {
|
||
color: "#fff",
|
||
padding: [0, 0, 10, 5],
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
labelLine: {
|
||
length: 20,
|
||
length2: 100,
|
||
show: true,
|
||
showAbove:true,
|
||
color: "#00ffff",
|
||
},
|
||
},
|
||
},
|
||
data: data,
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
}
|
||
// 展馆照明
|
||
const drawHallLightingChart =()=>{
|
||
const offsetX = 10; //bar宽
|
||
const offsetY = 5; //倾斜角度
|
||
// 绘制左侧面
|
||
const CubeLeft = echarts.graphic.extendShape({
|
||
shape: {
|
||
x: 0,
|
||
y: 0,
|
||
},
|
||
buildPath: function (ctx, shape) {
|
||
const xAxisPoint = shape.xAxisPoint;
|
||
const c0 = [shape.x - 7, shape.y];
|
||
const c1 = [shape.x + 7, shape.y];
|
||
const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
|
||
const c3 = [xAxisPoint[0] - 7, xAxisPoint[1]];
|
||
ctx
|
||
.moveTo(c0[0], c0[1])
|
||
.lineTo(c1[0], c1[1])
|
||
.lineTo(c2[0], c2[1])
|
||
.lineTo(c3[0], c3[1])
|
||
.closePath();
|
||
ctx.stroke();
|
||
},
|
||
});
|
||
// 绘制右侧面
|
||
const CubeRight = echarts.graphic.extendShape({
|
||
shape: {
|
||
x: 0,
|
||
y: 0,
|
||
},
|
||
buildPath: function (ctx, shape) {
|
||
const xAxisPoint = shape.xAxisPoint;
|
||
const c1 = [shape.x + 7, shape.y];
|
||
const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
|
||
const c3 = [xAxisPoint[0] + 7 + 7, xAxisPoint[1] - 10];
|
||
const c4 = [shape.x + 7 + 7, shape.y - 5];
|
||
ctx
|
||
.moveTo(c1[0], c1[1])
|
||
.lineTo(c2[0], c2[1])
|
||
.lineTo(c3[0], c3[1])
|
||
.lineTo(c4[0], c4[1])
|
||
.closePath();
|
||
ctx.stroke();
|
||
},
|
||
});
|
||
// 绘制顶面
|
||
const CubeTop = echarts.graphic.extendShape({
|
||
shape: {
|
||
x: 0,
|
||
y: 0,
|
||
},
|
||
buildPath: function (ctx, shape) {
|
||
const c1 = [shape.x - 7, shape.y];
|
||
const c2 = [shape.x + 8, shape.y];
|
||
const c3 = [shape.x + 15, shape.y - 5];
|
||
const c4 = [shape.x - 2, shape.y - 5];
|
||
ctx
|
||
.moveTo(c1[0], c1[1])
|
||
.lineTo(c2[0], c2[1])
|
||
.lineTo(c3[0], c3[1])
|
||
.lineTo(c4[0], c4[1])
|
||
.closePath();
|
||
ctx.stroke();
|
||
},
|
||
});
|
||
// 注册三个面图形
|
||
echarts.graphic.registerShape("CubeLeft", CubeLeft);
|
||
echarts.graphic.registerShape("CubeRight", CubeRight);
|
||
echarts.graphic.registerShape("CubeTop", CubeTop);
|
||
let intAxisData = ['室内','户外'];
|
||
let intSeriesData = [100,200];
|
||
// 绿色渐变
|
||
// let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]
|
||
let colorArr;
|
||
let myChart = echarts.init(
|
||
document.getElementById("hallLighting")
|
||
);
|
||
const option = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
formatter: function (params, ticket, callback) {
|
||
const item = params[1];
|
||
return item.name + " : " + item.value;
|
||
},
|
||
},
|
||
grid: {
|
||
left: "4%",
|
||
right: "5%",
|
||
top: "18%",
|
||
bottom: "5%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: intAxisData,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 1,
|
||
type: "solid",
|
||
color: "rgba(255, 255, 255, 0.20)",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
color: "rgba(221, 255, 253, 1)",
|
||
fontSize: 14,
|
||
interval: 0,
|
||
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
|
||
// formatter: function (value) {
|
||
// const length = value.length;
|
||
// if (length > 3) {
|
||
// const start = Math.floor(length / 2);
|
||
// const str =
|
||
// value.slice(0, start) + "\n" + value.slice(start, length);
|
||
// return str;
|
||
// }
|
||
// return value;
|
||
// },
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
name: "单位:kW",
|
||
nameTextStyle: {
|
||
color: "#DDFFFD",
|
||
padding:[0,20,0,0]
|
||
},
|
||
// minInterval: 1,
|
||
// y轴（竖直线）
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
// y轴横向 标线
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: "dashed",
|
||
color: "rgba(1, 39, 37, 0.30)",
|
||
},
|
||
},
|
||
// y轴刻度线
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
// y轴文字
|
||
axisLabel: {
|
||
fontSize: 14,
|
||
color: "#DDFFFD",
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
type: "custom",
|
||
renderItem: (params, api) => {
|
||
const location = api.coord([api.value(0), api.value(1)]);
|
||
colorArr = params.dataIndex===0?[
|
||
// 蓝色渐变
|
||
["rgba(0, 170, 193, 1)"],
|
||
["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"],
|
||
]:[
|
||
// 绿色渐变
|
||
["rgba(0, 193, 113, 1)"],
|
||
["rgba(0, 255, 140, 1)", "rgba(0, 255, 140,0)"],
|
||
]
|
||
return {
|
||
type: "group",
|
||
children: [
|
||
// 左侧面
|
||
{
|
||
type: "CubeLeft",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(0),
|
||
yValue: api.value(1),
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0]),
|
||
},
|
||
style: {
|
||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: colorArr[1][0],
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: colorArr[1][1],
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
// 右侧面
|
||
{
|
||
type: "CubeRight",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(0),
|
||
yValue: api.value(1),
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0]),
|
||
},
|
||
style: {
|
||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: colorArr[1][0],
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: colorArr[1][1],
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
// 顶部
|
||
{
|
||
type: "CubeTop",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(0),
|
||
yValue: api.value(1),
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0]),
|
||
},
|
||
style: {
|
||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: colorArr[0][0],
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: colorArr[0][0],
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
],
|
||
};
|
||
},
|
||
data: intSeriesData,
|
||
},
|
||
{
|
||
type: "bar",
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
position: "top",
|
||
formatter: (e) => {
|
||
return e.value;
|
||
},
|
||
fontSize: 16,
|
||
color: "#43C4F1",
|
||
offset: [0, -5],
|
||
},
|
||
},
|
||
itemStyle: {
|
||
color: "transparent",
|
||
},
|
||
tooltip: {},
|
||
data: intSeriesData,
|
||
},
|
||
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
}
|
||
// 照明负荷
|
||
const drawLightLoadChart = () =>{
|
||
let myChart = echarts.init(document.getElementById("lightLoad"));
|
||
|
||
let option = {
|
||
grid: {
|
||
top: '18%',
|
||
left: '3%',
|
||
right: '5%',
|
||
bottom: '7%',
|
||
containLabel: true
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
borderWidth: 1,
|
||
// axisPointer: {
|
||
// type: 'shadow'
|
||
// },
|
||
// extraCssText: 'z-index:2'
|
||
|
||
},
|
||
legend: [{
|
||
icon: 'rect',
|
||
top: 5,
|
||
left: 'right',
|
||
orient: 'horizontal',
|
||
// data: ['进水量', '出水量'],
|
||
borderRadius: 20,
|
||
itemHeight:10,
|
||
itemWidth:15,
|
||
textStyle: {
|
||
color: '#DDFFFD',
|
||
fontSize: 12,
|
||
// fontWeight: 400
|
||
}
|
||
}],
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['13:00', '14:00', '15:00', '16:00', '17:00'],
|
||
axisLine: {
|
||
//坐标轴轴线相关设置。数学上的x轴
|
||
show: true,
|
||
lineStyle: {
|
||
// type:'dashed',
|
||
color: "#557775"
|
||
// color: "#233e64",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#DDFFFD",//X轴文字颜色
|
||
}
|
||
}
|
||
},
|
||
yAxis: [
|
||
{
|
||
min:0,
|
||
max:500,
|
||
type: 'value',
|
||
name: '单位/kW',
|
||
nameTextStyle: {
|
||
color: "#DDFFFD",
|
||
fontSize: 12,
|
||
padding: [0, 10, 0, 0], // 四个数字分别为上右下左与原位置距离
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
color: "#DDFFFD",
|
||
fontSize: 12
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type:'dashed',
|
||
color: "rgba(1, 39, 37, 0.30)",
|
||
},
|
||
}
|
||
|
||
}
|
||
|
||
],
|
||
series: [
|
||
{
|
||
name: '昨日',
|
||
type: 'line',
|
||
//显示所有图形。
|
||
//标记的图形为实心圆
|
||
symbol: "none",
|
||
itemStyle: {
|
||
//折线拐点标志的样式
|
||
color: 'white',
|
||
borderWidth: '2',
|
||
borderColor: 'rgba(91, 250, 241, 1)',
|
||
normal: {
|
||
color: 'rgba(91, 250, 241, 1)'//拐点颜色
|
||
}
|
||
},
|
||
lineStyle: {
|
||
color: 'rgba(91, 250, 241, 1)'
|
||
},
|
||
data: [400, 320, 100, 320, 100]
|
||
},
|
||
{
|
||
name: '今日',
|
||
type: 'line',
|
||
symbol: "none",
|
||
itemStyle: {
|
||
//折线拐点标志的样式
|
||
color: 'white',
|
||
borderWidth: '2',
|
||
borderColor: '#91cc75',
|
||
normal: {
|
||
color: '#91cc75'//拐点颜色
|
||
}
|
||
},
|
||
lineStyle: {
|
||
color: '#91cc75'
|
||
},
|
||
data: [100, 320, 400,420, 500]
|
||
}
|
||
]
|
||
|
||
}
|
||
myChart.setOption(option)
|
||
}
|
||
onMounted(()=>{
|
||
// 故障情况
|
||
drawFaultConditionsChart()
|
||
// 展馆照明
|
||
drawHallLightingChart()
|
||
// 照明负荷
|
||
drawLightLoadChart()
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div class="page m100">
|
||
<dialogBox ref="box" :show="dialogShow" @update="closeDialog" :name="dialogTitle"/>
|
||
<div class="page-left-box">
|
||
<!-- 照明监测-->
|
||
<div class="title">
|
||
<span>照明监测</span>
|
||
</div>
|
||
<div class="margin10 box-bg" id="light">
|
||
<div class="light-item" v-for="(item,index) in lightingNumList">
|
||
<img :src="item.pic" alt="">
|
||
<p>
|
||
<span class="name">{{item.name}}</span>
|
||
<span class="num">{{item.num}}<span class="unit">个</span></span>
|
||
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- 当日累计用电量-->
|
||
<div class="title margin10">
|
||
<span>照明回路详情</span>
|
||
</div>
|
||
<div class="margin10 box-bg">
|
||
<div class="runningState">
|
||
<div class="tableTitle">
|
||
<span>名称</span>
|
||
<span>位置</span>
|
||
<span>状态</span>
|
||
</div>
|
||
<div class="tableContent">
|
||
<div class="tableBoby"
|
||
v-for="(item, index) in lightDetail"
|
||
:key="index"
|
||
>
|
||
<span class="name">{{ item.name }}</span>
|
||
<span>{{item.address}}</span>
|
||
<span ><i :class="item.state?'state1':'state0'"></i></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 照明负荷-->
|
||
<div class="title margin10">
|
||
<span>照明负荷</span>
|
||
<p>
|
||
<span class="year" :class="lightLoadDate === 'year'?'selectYear':''" @click="toggleLightLoad">年</span>
|
||
<span class="month" :class="lightLoadDate === 'month'?'selectMonth':''" @click="toggleLightLoad">月</span>
|
||
<span class="day" :class="lightLoadDate === 'day'?'selectDay':''" @click="toggleLightLoad">日</span>
|
||
</p>
|
||
</div>
|
||
<div class="margin10 box-bg" id="lightLoad"></div>
|
||
</div>
|
||
<div class="page-right-box">
|
||
<!-- 展馆照明 -->
|
||
<div class="title">
|
||
<span>展馆照明</span>
|
||
</div>
|
||
<div class="margin10 box-bg" id="hallLighting"></div>
|
||
<!-- 照明控制-->
|
||
<div class="title margin10">
|
||
<span>照明控制</span>
|
||
<p class="control-btn">
|
||
<span class="on" :class="controlBtn==='on'?'select':''" @click="toggleControl">全开</span>
|
||
<span style="margin-left: .7rem" class="off" :class="controlBtn==='off'?'select':''" @click="toggleControl">全关</span>
|
||
</p>
|
||
</div>
|
||
<div class="margin10 box-bg" >
|
||
<div class="runningState">
|
||
<div class="tableTitle">
|
||
<span>控制箱名称</span>
|
||
<span>操作</span>
|
||
</div>
|
||
<div class="tableContent">
|
||
<div class="tableBoby"
|
||
v-for="(item, index) in lightControl"
|
||
:key="index"
|
||
>
|
||
<span class="name">{{ item.name }}</span>
|
||
|
||
<span class="control" @click="openDialog(item.name)">照明控制</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 故障情况-->
|
||
<div class="title margin10">
|
||
<span>故障情况</span>
|
||
</div>
|
||
<div class="margin10 box-bg" id="faultConditions"></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
//照明监测
|
||
#light{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-content: space-evenly;
|
||
//padding: 2% 10%;
|
||
box-sizing: border-box;
|
||
img{
|
||
width: 3.875rem;
|
||
height: 4.375rem;
|
||
}
|
||
}
|
||
.light-item{
|
||
display: flex;
|
||
flex-basis: 50%;
|
||
padding-left: 2rem;
|
||
box-sizing: border-box;
|
||
p{
|
||
margin-left: .5rem;
|
||
.name{
|
||
margin-top: 1.3rem;
|
||
margin-bottom: .5rem;
|
||
}
|
||
.num {
|
||
color: rgba(1, 246, 139, 1);
|
||
font-weight: 700;
|
||
font-size: 1.25rem !important;
|
||
}
|
||
.unit{
|
||
margin-left: .2rem;
|
||
}
|
||
.name,.num{
|
||
display: block;
|
||
font-size: .75rem;
|
||
}
|
||
}
|
||
}
|
||
//照明回路详情
|
||
.state0,.state1{
|
||
width: 1.1rem;
|
||
height: 1.1rem;
|
||
display: block;
|
||
background-size: 100% 100%;
|
||
margin: 0 auto;
|
||
}
|
||
.state0{
|
||
background-image: url('@/assets/images/lighting/state0.png');
|
||
}
|
||
.state1{
|
||
background-image: url('@/assets/images/lighting/state1.png');
|
||
}
|
||
//照明控制
|
||
.control{
|
||
color:rgba(61, 255, 244, 1);
|
||
cursor: pointer;
|
||
}
|
||
.control-btn{
|
||
display: flex;
|
||
.select{
|
||
background-image: url("@/assets/images/air-tab-select.png") !important;
|
||
}
|
||
span{
|
||
background-image: url("@/assets/images/air-tab.png");
|
||
cursor: pointer;
|
||
font-family: normal;
|
||
color: rgba(221, 255, 253, 1);
|
||
background-size: 100% 100%;
|
||
font-size: 0.8rem;
|
||
padding: 0.2rem 1.1rem;
|
||
}
|
||
}
|
||
//弹窗
|
||
.dialog{
|
||
|
||
}
|
||
</style> |