Merge branch 'master' of http://172.16.1.12/luoshiwen/long_IslandOcean
This commit is contained in:
commit
15026f7ed5
|
|
@ -0,0 +1,78 @@
|
|||
import http from '@/utils/http'
|
||||
|
||||
|
||||
//照明监测
|
||||
export function getLightingMonitoring() {
|
||||
return http({
|
||||
url: '/api/GetLightingMonitoring',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
//照明回路详情
|
||||
export function getLightingDetail() {
|
||||
return http({
|
||||
url: '/api/GetLightingDetail',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
//照明负荷
|
||||
export function getLightingLoad(params) {
|
||||
return http({
|
||||
url: '/api/GetLightingLoad',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
//展馆照明
|
||||
export function getPavilionLighting() {
|
||||
return http({
|
||||
url: '/api/GetPavilionLighting',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
//照明控制
|
||||
export function getLightingControl() {
|
||||
return http({
|
||||
url: '/api/GetLightingControl',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
//故障情况
|
||||
export function getFaultCondition() {
|
||||
return http({
|
||||
url: '/api/GetFaultCondition',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
//照明单控
|
||||
export function getSingleControl(params) {
|
||||
return http({
|
||||
url: '/api/GetSingleControl',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
//控制照明
|
||||
export function setLighting(params) {
|
||||
return http({
|
||||
url: '/api/SetLighting',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
//照明单控
|
||||
export function setSingleSwitch(params) {
|
||||
return http({
|
||||
url: '/api/SetSingleSwitch',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
//照明全控
|
||||
export function setFullSwitch(params) {
|
||||
return http({
|
||||
url: '/api/SetFullSwitch',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
|
@ -1,72 +1,123 @@
|
|||
<script setup>
|
||||
import {ref} from 'vue'
|
||||
|
||||
const lightControl = ref([
|
||||
{
|
||||
name:'照明1',
|
||||
state:false
|
||||
},
|
||||
{
|
||||
name:'照明1',
|
||||
state:true
|
||||
},
|
||||
{
|
||||
name:'照明1',
|
||||
state:false
|
||||
},
|
||||
{
|
||||
name:'照明1',
|
||||
state:false
|
||||
},
|
||||
{
|
||||
name:'照明1',
|
||||
state:false
|
||||
}
|
||||
|
||||
])
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { setLighting, setSingleSwitch } from "@/api/lighting";
|
||||
const lightControl = ref([]);
|
||||
// 照明控制
|
||||
const controlBtn = ref('')
|
||||
const toggleControl = (event) =>{
|
||||
controlBtn.value = event.srcElement.className
|
||||
if(event.srcElement.className==="off"){
|
||||
lightControl.value.forEach(ele=>{
|
||||
ele.state = false
|
||||
})
|
||||
}else if(event.srcElement.className==="on"){
|
||||
lightControl.value.forEach(ele=>{
|
||||
ele.state = true
|
||||
})
|
||||
const controlBtn = ref("");
|
||||
const toggleControl = (event) => {
|
||||
if (event.srcElement.className === "off") {
|
||||
controlBtn.value = "off";
|
||||
let dataMap = {
|
||||
name: props.name,
|
||||
value: "全关",
|
||||
};
|
||||
lightControl.value.forEach((ele) => {
|
||||
setSingleSwitch(dataMap)
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
ele.State = false;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
const props = defineProps(
|
||||
{
|
||||
show:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
});
|
||||
} else if (event.srcElement.className === "on") {
|
||||
controlBtn.value = "on";
|
||||
lightControl.value.forEach((ele) => {
|
||||
let dataMap = {
|
||||
name: props.name,
|
||||
value: "全开",
|
||||
};
|
||||
lightControl.value.forEach((ele) => {
|
||||
setSingleSwitch(dataMap)
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
ele.State = true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
name:{
|
||||
type:String,
|
||||
default:"",
|
||||
}
|
||||
}
|
||||
)
|
||||
const emit = defineEmits(['update'])
|
||||
name: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
tableData: {
|
||||
type: Array,
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(["update"]);
|
||||
const closeDialog = () => {
|
||||
// 向父组件传值
|
||||
emit('update',false)
|
||||
emit("update", false);
|
||||
};
|
||||
//照明控制
|
||||
function control(params) {
|
||||
let dataMap = {
|
||||
name: params.Id,
|
||||
value: params.State == true ? "255" : "0",
|
||||
};
|
||||
setLighting(dataMap)
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
controlBtn.value = "";
|
||||
emit("closeAll", false);
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
// 使用 watch 监听数组的变化
|
||||
watch(
|
||||
() => props.tableData,
|
||||
(newVal, oldVal) => {
|
||||
// 当数组变化时，可以在这里执行一些操作
|
||||
newVal.forEach((item) => {
|
||||
item.State = item.State == "255" ? true : false;
|
||||
});
|
||||
lightControl.value = newVal;
|
||||
controlBtn.value = "";
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dialog" v-if="props.show">
|
||||
<div class="close-btn" @click="closeDialog"></div>
|
||||
<div class="dialog-title">
|
||||
<span>{{props.name}}</span>
|
||||
<span>{{ props.name }}</span>
|
||||
</div>
|
||||
<div 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>
|
||||
<span
|
||||
class="on"
|
||||
:class="controlBtn === 'on' ? 'select' : ''"
|
||||
@click="toggleControl"
|
||||
>全开</span
|
||||
>
|
||||
<span
|
||||
style="margin-left: 0.7rem"
|
||||
class="off"
|
||||
:class="controlBtn === 'off' ? 'select' : ''"
|
||||
@click="toggleControl"
|
||||
>全关</span
|
||||
>
|
||||
</div>
|
||||
<div class="dialog-content">
|
||||
<div class="runningState">
|
||||
|
|
@ -75,14 +126,19 @@ const closeDialog = () => {
|
|||
<span>操作</span>
|
||||
</div>
|
||||
<div class="tableContent">
|
||||
<div class="tableBoby"
|
||||
<div
|
||||
class="tableBoby"
|
||||
v-for="(item, index) in lightControl"
|
||||
:key="index"
|
||||
>
|
||||
<span class="name">{{ item.name }}</span>
|
||||
|
||||
<span><el-switch v-model="item.state" style="left: 8px" /></span>
|
||||
|
||||
<span
|
||||
><el-switch
|
||||
v-model="item.State"
|
||||
style="left: 8px"
|
||||
@change="control(item)"
|
||||
/></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -91,23 +147,22 @@ const closeDialog = () => {
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.dialog-content{
|
||||
.dialog-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 74%;
|
||||
box-sizing: border-box;
|
||||
//padding: 1rem .5rem 0 1rem;
|
||||
}
|
||||
.control-btn{
|
||||
.control-btn {
|
||||
padding-left: 1rem;
|
||||
padding-top: .8rem;
|
||||
padding-top: 0.8rem;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
.select{
|
||||
.select {
|
||||
background-image: url("@/assets/images/air-tab-select.png") !important;
|
||||
}
|
||||
span{
|
||||
span {
|
||||
background-image: url("@/assets/images/air-tab.png");
|
||||
cursor: pointer;
|
||||
font-family: normal;
|
||||
|
|
@ -116,9 +171,7 @@ const closeDialog = () => {
|
|||
font-size: 0.8rem;
|
||||
padding: 0.2rem 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
:deep(.el-switch__core) {
|
||||
border-radius: 0;
|
||||
|
|
|
|||
|
|
@ -3,76 +3,45 @@ import { onMounted, ref } from "vue";
|
|||
import getPath from "@/utils/getPath.js";
|
||||
import * as echarts from "echarts";
|
||||
import dialogBox from "./components/dialog.vue";
|
||||
import {
|
||||
getLightingMonitoring,
|
||||
getLightingDetail,
|
||||
getLightingLoad,
|
||||
getPavilionLighting,
|
||||
getLightingControl,
|
||||
getFaultCondition,
|
||||
getSingleControl,
|
||||
setFullSwitch,
|
||||
} from "@/api/lighting";
|
||||
// 照明监测
|
||||
const lightingNumList = ref([
|
||||
{
|
||||
name: "照明四路数量",
|
||||
num: 1130,
|
||||
num: 0,
|
||||
pic: getPath.lightTotal,
|
||||
},
|
||||
{
|
||||
name: "照明四路灭灯数量",
|
||||
num: 1130,
|
||||
num: 0,
|
||||
pic: getPath.noLightNum,
|
||||
},
|
||||
{
|
||||
name: "照明四路亮灯数量",
|
||||
num: 1130,
|
||||
num: 0,
|
||||
pic: getPath.lightingNum,
|
||||
},
|
||||
{
|
||||
name: "离线数量",
|
||||
num: 1130,
|
||||
num: 0,
|
||||
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 lightDetail = ref([]);
|
||||
|
||||
// 照明控制
|
||||
const lightControl = ref([
|
||||
{
|
||||
name: "控制箱名称1",
|
||||
},
|
||||
{
|
||||
name: "控制箱名称2",
|
||||
},
|
||||
{
|
||||
name: "控制箱名称3",
|
||||
},
|
||||
{
|
||||
name: "控制箱名称4",
|
||||
},
|
||||
{
|
||||
name: "控制箱名称5",
|
||||
},
|
||||
]);
|
||||
const lightControl = ref([]);
|
||||
const tableData = ref([]);
|
||||
// 照明负荷的时间切换
|
||||
const lightLoadDate = ref("day");
|
||||
|
||||
|
|
@ -110,11 +79,18 @@ const toggleFloor = (item, index) => {
|
|||
|
||||
const toggleLightLoad = (event) => {
|
||||
lightLoadDate.value = event.srcElement.className;
|
||||
lightingLoad();
|
||||
};
|
||||
// 照明控制
|
||||
const controlBtn = ref("on");
|
||||
const controlBtn = ref("");
|
||||
const toggleControl = (event) => {
|
||||
controlBtn.value = event.srcElement.className;
|
||||
if (event.srcElement.className == "on") {
|
||||
controlBtn.value = "on";
|
||||
fullControl("全开");
|
||||
} else if (event.srcElement.className == "off") {
|
||||
controlBtn.value = "off";
|
||||
fullControl("全关");
|
||||
}
|
||||
};
|
||||
// 弹窗
|
||||
const dialogShow = ref(false);
|
||||
|
|
@ -126,20 +102,26 @@ const openDialog = (name) => {
|
|||
|
||||
dialogTitle.value = name;
|
||||
dialogShow.value = true;
|
||||
singleControl(name);
|
||||
};
|
||||
const closeDialog = (val) => {
|
||||
dialogShow.value = val;
|
||||
};
|
||||
function closeAll(params) {
|
||||
if (params == false) {
|
||||
controlBtn.value = "";
|
||||
}
|
||||
}
|
||||
// 故障情况
|
||||
const drawFaultConditionsChart = () => {
|
||||
const drawFaultConditionsChart = (params) => {
|
||||
let trafficWay = [
|
||||
{
|
||||
name: "正常",
|
||||
value: 1260,
|
||||
value: params[0].Normality,
|
||||
},
|
||||
{
|
||||
name: "故障",
|
||||
value: 80,
|
||||
value: params[0].Malfunction,
|
||||
},
|
||||
];
|
||||
var total = 0;
|
||||
|
|
@ -317,7 +299,9 @@ const drawFaultConditionsChart = () => {
|
|||
});
|
||||
};
|
||||
// 展馆照明
|
||||
const drawHallLightingChart = () => {
|
||||
const drawHallLightingChart = (params) => {
|
||||
// let dataList = [params[0].Indoor,params[0].Outdoor]
|
||||
|
||||
const offsetX = 10; //bar宽
|
||||
const offsetY = 5; //倾斜角度
|
||||
// 绘制左侧面
|
||||
|
|
@ -351,7 +335,7 @@ const drawHallLightingChart = () => {
|
|||
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 c3 = [xAxisPoint[0] + 7 + 7, xAxisPoint[1] - 5];
|
||||
const c4 = [shape.x + 7 + 7, shape.y - 5];
|
||||
ctx
|
||||
.moveTo(c1[0], c1[1])
|
||||
|
|
@ -387,7 +371,7 @@ const drawHallLightingChart = () => {
|
|||
echarts.graphic.registerShape("CubeRight", CubeRight);
|
||||
echarts.graphic.registerShape("CubeTop", CubeTop);
|
||||
let intAxisData = ["室内", "户外"];
|
||||
let intSeriesData = [100, 200];
|
||||
let intSeriesData = [params[0].Indoor, params[0].Outdoor];
|
||||
// 绿色渐变
|
||||
// let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]
|
||||
let colorArr;
|
||||
|
|
@ -597,9 +581,16 @@ const drawHallLightingChart = () => {
|
|||
});
|
||||
};
|
||||
// 照明负荷
|
||||
const drawLightLoadChart = () => {
|
||||
const drawLightLoadChart = (params) => {
|
||||
let xData = [];
|
||||
let toDay = [];
|
||||
let lastDay = [];
|
||||
params.forEach((item) => {
|
||||
xData.push(item.time);
|
||||
toDay.push(item.TP);
|
||||
lastDay.push(item.YP);
|
||||
});
|
||||
let myChart = echarts.init(document.getElementById("lightLoad"));
|
||||
|
||||
let option = {
|
||||
grid: {
|
||||
top: "18%",
|
||||
|
|
@ -635,7 +626,7 @@ const drawLightLoadChart = () => {
|
|||
],
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["13:00", "14:00", "15:00", "16:00", "17:00"],
|
||||
data: xData,
|
||||
axisLine: {
|
||||
//坐标轴轴线相关设置。数学上的x轴
|
||||
show: true,
|
||||
|
|
@ -701,7 +692,7 @@ const drawLightLoadChart = () => {
|
|||
lineStyle: {
|
||||
color: "rgba(91, 250, 241, 1)",
|
||||
},
|
||||
data: [400, 320, 100, 320, 100],
|
||||
data: lastDay,
|
||||
},
|
||||
{
|
||||
name: "今日",
|
||||
|
|
@ -719,7 +710,7 @@ const drawLightLoadChart = () => {
|
|||
lineStyle: {
|
||||
color: "#91cc75",
|
||||
},
|
||||
data: [100, 320, 400, 420, 500],
|
||||
data: toDay,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -729,14 +720,144 @@ const drawLightLoadChart = () => {
|
|||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||||
});
|
||||
};
|
||||
//照明监测
|
||||
function lightingMonitoring() {
|
||||
getLightingMonitoring()
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
lightingNumList.value[0].num = res.data[0].Amount;
|
||||
lightingNumList.value[1].num = res.data[0].Blackout;
|
||||
lightingNumList.value[2].num = res.data[0].Connection;
|
||||
lightingNumList.value[3].num = res.data[0].Offline;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
//照明回路详情
|
||||
function lightingCircuit() {
|
||||
getLightingDetail()
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
res.data.forEach((item) => {
|
||||
item.state = item.state == "0" ? false : true;
|
||||
});
|
||||
lightDetail.value = res.data;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
//照明负荷
|
||||
function lightingLoad() {
|
||||
let date =
|
||||
lightLoadDate.value == "year"
|
||||
? "年"
|
||||
: lightLoadDate.value == "month"
|
||||
? "月"
|
||||
: "日";
|
||||
getLightingLoad({ date })
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
drawLightLoadChart(res.data);
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
//展馆照明
|
||||
function exhibitionHall() {
|
||||
getPavilionLighting()
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
drawHallLightingChart(res.data);
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
//照明控制
|
||||
function lightingControl() {
|
||||
getLightingControl()
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
lightControl.value = res.data;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
//故障情况
|
||||
function fault() {
|
||||
getFaultCondition()
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
drawFaultConditionsChart(res.data);
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
//照明单控
|
||||
function singleControl(name) {
|
||||
getSingleControl({ name })
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
tableData.value = res.data;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
//照明全控
|
||||
function fullControl(params) {
|
||||
let name = params;
|
||||
setFullSwitch({ name })
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
window.openBox = openDialog;
|
||||
// 故障情况
|
||||
drawFaultConditionsChart();
|
||||
fault();
|
||||
// 展馆照明
|
||||
drawHallLightingChart();
|
||||
exhibitionHall();
|
||||
// 照明负荷
|
||||
drawLightLoadChart();
|
||||
lightingLoad();
|
||||
//照明检测
|
||||
lightingMonitoring();
|
||||
//照明回路详情
|
||||
lightingCircuit();
|
||||
//照明控制
|
||||
lightingControl();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -756,7 +877,9 @@ onMounted(() => {
|
|||
ref="box"
|
||||
:name="dialogTitle"
|
||||
:show="dialogShow"
|
||||
:tableData="tableData"
|
||||
@update="closeDialog"
|
||||
@closeAll="closeAll"
|
||||
/>
|
||||
<div class="page-left-box">
|
||||
<!-- 照明监测-->
|
||||
|
|
@ -783,14 +906,14 @@ onMounted(() => {
|
|||
<span>位置</span>
|
||||
<span>状态</span>
|
||||
</div>
|
||||
<div class="tableContent">
|
||||
<div class="tableContent" style="height: 86.5%">
|
||||
<div
|
||||
v-for="(item, index) in lightDetail"
|
||||
:key="index"
|
||||
class="tableBoby"
|
||||
>
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<span>{{ item.address }}</span>
|
||||
<span>{{ item.location }}</span>
|
||||
<span><i :class="item.state ? 'state1' : 'state0'"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -853,15 +976,15 @@ onMounted(() => {
|
|||
<span>控制箱名称</span>
|
||||
<span>操作</span>
|
||||
</div>
|
||||
<div class="tableContent">
|
||||
<div class="tableContent" style="height: 86.5%">
|
||||
<div
|
||||
v-for="(item, index) in lightControl"
|
||||
:key="index"
|
||||
class="tableBoby"
|
||||
>
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<span class="name">{{ item.TypeName }}</span>
|
||||
|
||||
<span class="control" @click="openDialog(item.name)"
|
||||
<span class="control" @click="openDialog(item.TypeName)"
|
||||
>照明控制</span
|
||||
>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue