12/18代码
This commit is contained in:
parent
4733005d51
commit
6ed07fe0fc
Binary file not shown.
|
After Width: | Height: | Size: 469 B |
Binary file not shown.
|
After Width: | Height: | Size: 491 B |
|
|
@ -1,6 +1,6 @@
|
|||
<script setup>
|
||||
import moment from "moment"
|
||||
import {ref,shallowRef} from "vue";
|
||||
import {ref, shallowRef} from "vue";
|
||||
import overview from '@/views/overview/index.vue' //总览
|
||||
import energyEfficiency from '@/views/energyEfficiency/index.vue' //能效
|
||||
import drainage from '@/views/drainage/index.vue' //排水
|
||||
|
|
@ -17,35 +17,37 @@ const nowWeek = ref('')
|
|||
const nowMin = ref('')
|
||||
|
||||
const timer = ref(0)
|
||||
const getNowDate = () =>{
|
||||
const getNowDate = () => {
|
||||
nowDate.value = moment().format('YYYY年MM月DD日')
|
||||
nowWeek.value = moment().format('dddd')
|
||||
nowMin.value = moment().format('HH:mm:ss')
|
||||
}
|
||||
getNowDate()
|
||||
timer.value = setInterval(()=>{
|
||||
timer.value = setInterval(() => {
|
||||
getNowDate()
|
||||
},1000)
|
||||
}, 1000)
|
||||
const menuList = ref([
|
||||
{name:shallowRef(overview),default:getPath.overview,select:getPath.overviewselect},
|
||||
{name:shallowRef(energyMonitoring),
|
||||
default:getPath.energy,select:getPath.energyselect},
|
||||
{name:shallowRef(energyEfficiency),default:getPath.energyefficiency,select:getPath.energyefficiencyselect},
|
||||
{name:shallowRef(drainage),default:getPath.drainage,select:getPath.drainageselect},
|
||||
{name:shallowRef(airConditioning),default:getPath.airconditioning,select:getPath.airconditioningselect},
|
||||
{name:shallowRef(lighting),default:getPath.lighting,select:getPath.lightingselect},
|
||||
{name:shallowRef(carbonEmission),default:getPath.carbon,select:getPath.carbonselect},
|
||||
{name:shallowRef(screen),default:getPath.screen,select:getPath.screenselect}
|
||||
{name: shallowRef(overview), default: getPath.overview, select: getPath.overviewselect},
|
||||
{
|
||||
name: shallowRef(energyMonitoring),
|
||||
default: getPath.energy, select: getPath.energyselect
|
||||
},
|
||||
{name: shallowRef(energyEfficiency), default: getPath.energyefficiency, select: getPath.energyefficiencyselect},
|
||||
{name: shallowRef(drainage), default: getPath.drainage, select: getPath.drainageselect},
|
||||
{name: shallowRef(airConditioning), default: getPath.airconditioning, select: getPath.airconditioningselect},
|
||||
{name: shallowRef(lighting), default: getPath.lighting, select: getPath.lightingselect},
|
||||
{name: shallowRef(carbonEmission), default: getPath.carbon, select: getPath.carbonselect},
|
||||
{name: shallowRef(screen), default: getPath.screen, select: getPath.screenselect}
|
||||
])
|
||||
const menuIndex = ref(0)
|
||||
// 菜单切换方法
|
||||
const toggleClick = (item,index) =>{
|
||||
const toggleClick = (item, index) => {
|
||||
tabName.value = item?.name
|
||||
menuIndex.value = index
|
||||
|
||||
}
|
||||
const tabName = shallowRef(overview)
|
||||
const getImageUrl=(name)=>{
|
||||
const getImageUrl = (name) => {
|
||||
return `url(${new URL(name, import.meta.url).href})`
|
||||
}
|
||||
|
||||
|
|
@ -66,9 +68,9 @@ const getImageUrl=(name)=>{
|
|||
<div class="container">
|
||||
<div class="date">
|
||||
<p>
|
||||
<span class="m10">{{nowDate}}</span>
|
||||
<span class="m10">{{nowWeek}}</span>
|
||||
<span>{{nowMin}}</span>
|
||||
<span class="m10">{{ nowDate }}</span>
|
||||
<span class="m10">{{ nowWeek }}</span>
|
||||
<span>{{ nowMin }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="m10 weaIcon">晴</span>
|
||||
|
|
@ -78,13 +80,15 @@ const getImageUrl=(name)=>{
|
|||
</div>
|
||||
<div class="menu">
|
||||
<ul>
|
||||
<li @click="toggleClick(item,index)" v-for="(item,index) in menuList" :style="'background-image:'+ getImageUrl(menuIndex==index?item.select:item.default)" :class="'menu-icon'+index"></li>
|
||||
<li v-for="(item,index) in menuList" :class="'menu-icon'+index"
|
||||
:style="'background-image:'+ getImageUrl(menuIndex===index?item.select:item.default)"
|
||||
@click="toggleClick(item,index)"></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- <overview></overview>-->
|
||||
<!-- <router-view />-->
|
||||
<!-- <overview></overview>-->
|
||||
<!-- <router-view />-->
|
||||
<keep-alive>
|
||||
<component :is="tabName"></component>
|
||||
<component :is="tabName" ></component>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -100,6 +104,7 @@ const getImageUrl=(name)=>{
|
|||
background-size: 100% 100%;
|
||||
z-index: -1 !important;
|
||||
}
|
||||
|
||||
.left-mask {
|
||||
width: vw(600);
|
||||
left: 0;
|
||||
|
|
@ -120,38 +125,45 @@ const getImageUrl=(name)=>{
|
|||
background-image: url('@/assets/images/mask/right.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.date{
|
||||
|
||||
.date {
|
||||
display: flex;
|
||||
color:#fff;
|
||||
color: #fff;
|
||||
margin: 2.5rem 2.2rem 0 2.2rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.m10{
|
||||
|
||||
.m10 {
|
||||
margin-right: 1.3rem;
|
||||
}
|
||||
.weaIcon{
|
||||
|
||||
.weaIcon {
|
||||
|
||||
}
|
||||
.menu{
|
||||
|
||||
.menu {
|
||||
position: fixed;
|
||||
bottom: vh(24);
|
||||
z-index:999;
|
||||
left:29.15%;
|
||||
z-index: 999;
|
||||
left: 29.15%;
|
||||
width: vw(800);
|
||||
height: vh(100);
|
||||
ul{
|
||||
|
||||
ul {
|
||||
//width: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
li{
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
width:12.5%;
|
||||
height: 100%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
width: 12.5%;
|
||||
height: 100%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -50,10 +50,12 @@ p,ul,li{
|
|||
|
||||
&-right-box {
|
||||
padding-right: 2.375rem;
|
||||
//transform: translateX(100%);
|
||||
}
|
||||
|
||||
&-left-box {
|
||||
padding-left: 2.375rem;
|
||||
//transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
.m100{
|
||||
|
|
@ -108,3 +110,66 @@ p,ul,li{
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
//table的css
|
||||
.tableBoby>span{
|
||||
//width: 4rem;
|
||||
text-align: center;
|
||||
flex-basis: 33%;
|
||||
display: block;
|
||||
}
|
||||
.tableBoby .date{
|
||||
font-weight: 600;
|
||||
color: rgba(61, 255, 244, 1);
|
||||
span{
|
||||
font-weight: normal;
|
||||
color: rgba(221, 255, 253, 1);
|
||||
}
|
||||
}
|
||||
:deep(.el-switch){
|
||||
//width: 4rem;
|
||||
flex-basis: 33%;
|
||||
justify-content: center;
|
||||
}
|
||||
.runningState {
|
||||
height: 98%;
|
||||
width: 100%;
|
||||
padding: 2% 2%;
|
||||
box-sizing: border-box;
|
||||
.tableTitle {
|
||||
background: url("@/assets/images/overview/runTime.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 15.5%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
span{
|
||||
flex-basis: 33%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
.tableContent {
|
||||
width: 100%;
|
||||
height: calc(100% - 4.5%);
|
||||
overflow: auto;
|
||||
scrollbar-width: none; /* firefox */
|
||||
-ms-overflow-style: none; /* IE 10+ */
|
||||
.tableBoby {
|
||||
background: url("@/assets/images/air-conditioning/table-item.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 15.5%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
margin-top: .3rem;
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
display: none; /* Chrome Safari */
|
||||
}
|
||||
}
|
||||
|
|
@ -222,6 +222,7 @@ const maintenanceList = ref([
|
|||
<span>开机策略</span>
|
||||
</div>
|
||||
<div class="margin10 box-bg">
|
||||
<!-- tbale -->
|
||||
<div class="runningState">
|
||||
<div class="tableTitle">
|
||||
<span>策略名称</span>
|
||||
|
|
|
|||
|
|
@ -962,7 +962,7 @@ onMounted(() => {
|
|||
<ul class="system-tab">
|
||||
<li
|
||||
v-for="(item, index) in systemTab"
|
||||
:class="index == systemTabIndex ? 'tab-select' : ''"
|
||||
:class="index === systemTabIndex ? 'tab-select' : ''"
|
||||
@click="selectSystemTab(index)"
|
||||
>
|
||||
<span>{{ item.name }}</span>
|
||||
|
|
|
|||
|
|
@ -927,7 +927,6 @@ function getLoadClassification() {
|
|||
},
|
||||
},
|
||||
labelLine: {
|
||||
length: 60,
|
||||
length: 60,
|
||||
length2: 60,
|
||||
show: true,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script setup>
|
||||
import {ref} from "vue"
|
||||
import {onMounted, ref} from "vue"
|
||||
import getPath from "@/utils/getPath.js";
|
||||
import * as echarts from "echarts";
|
||||
// 照明监测
|
||||
const lightingNumList = ref([
|
||||
{
|
||||
|
|
@ -24,6 +25,656 @@ const lightingNumList = ref([
|
|||
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 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>
|
||||
|
|
@ -47,29 +698,69 @@ const lightingNumList = ref([
|
|||
<div class="title margin10">
|
||||
<span>照明回路详情</span>
|
||||
</div>
|
||||
<div class="margin10 box-bg"></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">年</span>
|
||||
<span class="month">月</span>
|
||||
<span class="day">日</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="margin10 box-bg"></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="airConditioningLoad"></div>
|
||||
<div class="margin10 box-bg" id="hallLighting"></div>
|
||||
<!-- 照明控制-->
|
||||
<div class="title margin10">
|
||||
<span>照明控制</span>
|
||||
</div>
|
||||
<div class="margin10 box-bg" id="exhibitionLoad"></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">照明控制</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 故障情况-->
|
||||
<div class="title margin10">
|
||||
<span>故障情况</span>
|
||||
</div>
|
||||
<div class="margin10 box-bg" id="ranking"></div>
|
||||
<div class="margin10 box-bg" id="faultConditions"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -112,4 +803,22 @@ const lightingNumList = ref([
|
|||
}
|
||||
}
|
||||
}
|
||||
//照明回路详情
|
||||
.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);
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue