代码提交12/20
This commit is contained in:
parent
790c8ed129
commit
9f5afda6f6
|
|
@ -9,6 +9,7 @@
|
|||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"echarts": "^5.4.3",
|
||||
"echarts-gl": "^2.0.9",
|
||||
"element-plus": "^2.4.3",
|
||||
"moment": "^2.29.4",
|
||||
"sass": "^1.69.5",
|
||||
|
|
@ -1029,6 +1030,11 @@
|
|||
"node": ">=6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/claygl": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz",
|
||||
"integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
|
||||
},
|
||||
"node_modules/commander": {
|
||||
"version": "2.20.3",
|
||||
"resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
|
||||
|
|
@ -1063,6 +1069,18 @@
|
|||
"zrender": "5.4.4"
|
||||
}
|
||||
},
|
||||
"node_modules/echarts-gl": {
|
||||
"version": "2.0.9",
|
||||
"resolved": "https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz",
|
||||
"integrity": "sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==",
|
||||
"dependencies": {
|
||||
"claygl": "^1.2.1",
|
||||
"zrender": "^5.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"echarts": "^5.1.2"
|
||||
}
|
||||
},
|
||||
"node_modules/echarts/node_modules/tslib": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
|
||||
|
|
@ -2826,6 +2844,11 @@
|
|||
"integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
|
||||
"peer": true
|
||||
},
|
||||
"claygl": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz",
|
||||
"integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
|
||||
},
|
||||
"commander": {
|
||||
"version": "2.20.3",
|
||||
"resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
|
||||
|
|
@ -2867,6 +2890,15 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"echarts-gl": {
|
||||
"version": "2.0.9",
|
||||
"resolved": "https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz",
|
||||
"integrity": "sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==",
|
||||
"requires": {
|
||||
"claygl": "^1.2.1",
|
||||
"zrender": "^5.1.1"
|
||||
}
|
||||
},
|
||||
"electron-to-chromium": {
|
||||
"version": "1.4.609",
|
||||
"resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.609.tgz",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 162 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 192 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
|
|
@ -1,6 +1,6 @@
|
|||
<script setup>
|
||||
import moment from "moment"
|
||||
import {ref, shallowRef} from "vue";
|
||||
import {onMounted, 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' //排水
|
||||
|
|
@ -40,6 +40,7 @@ const menuList = ref([
|
|||
{name: shallowRef(screen), default: getPath.screen, select: getPath.screenselect}
|
||||
])
|
||||
const menuIndex = ref(0)
|
||||
// const animationShow = ref(false)
|
||||
// 菜单切换方法
|
||||
const toggleClick = (item, index) => {
|
||||
tabName.value = item?.name
|
||||
|
|
@ -47,9 +48,9 @@ const toggleClick = (item, index) => {
|
|||
|
||||
}
|
||||
const tabName = shallowRef(overview)
|
||||
const getImageUrl = (name) => {
|
||||
return `url(${new URL(name, import.meta.url).href})`
|
||||
}
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
|
|
@ -81,19 +82,45 @@ const getImageUrl = (name) => {
|
|||
<div class="menu">
|
||||
<ul>
|
||||
<li v-for="(item,index) in menuList" :class="'menu-icon'+index"
|
||||
:style="'background-image:'+ getImageUrl(menuIndex===index?item.select:item.default)"
|
||||
:style="menuIndex===index?'background-image:url('+ item.select + ')':'background-image:url('+ item.default + ')'"
|
||||
@click="toggleClick(item,index)"></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- <overview></overview>-->
|
||||
<!-- <router-view />-->
|
||||
<transition appear mode="out-in">
|
||||
<keep-alive>
|
||||
<component :is="tabName"></component>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.v-enter-from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.v-enter-active {
|
||||
transition: opacity 1s ease-in;
|
||||
}
|
||||
|
||||
.v-enter-to {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.v-leave-from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.v-leave-active {
|
||||
transition: opacity 1s ease-in
|
||||
}
|
||||
|
||||
.v-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: vh(136);
|
||||
width: 100%;
|
||||
|
|
@ -103,6 +130,7 @@ const getImageUrl = (name) => {
|
|||
background-image: url('@/assets/images/mask/top.png');
|
||||
background-size: 100% 100%;
|
||||
z-index: -1 !important;
|
||||
|
||||
}
|
||||
|
||||
.left-mask {
|
||||
|
|
|
|||
|
|
@ -50,14 +50,37 @@ p,ul,li{
|
|||
|
||||
&-right-box {
|
||||
padding-right: 2.375rem;
|
||||
//transform: translateX(100%);
|
||||
|
||||
}
|
||||
|
||||
&-left-box {
|
||||
padding-left: 2.375rem;
|
||||
|
||||
//transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
@keyframes slide-out {
|
||||
//0%{
|
||||
// transform: translateX(0%);
|
||||
//}
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
//@keyframes slide-in {
|
||||
// //0%{
|
||||
// // transform: translateX(0%);
|
||||
// //}
|
||||
// from{
|
||||
// opacity: 0;
|
||||
// }
|
||||
// to {
|
||||
// opacity: 1;
|
||||
// }
|
||||
//}
|
||||
.m100{
|
||||
position: relative;
|
||||
top:2rem;
|
||||
|
|
@ -93,6 +116,7 @@ p,ul,li{
|
|||
span{
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-family: normal;
|
||||
}
|
||||
.year,.month,.day{
|
||||
padding: 0 0.8rem;
|
||||
|
|
@ -102,6 +126,9 @@ p,ul,li{
|
|||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.selectMonth,.selectYear,.selectDay{
|
||||
background-image: url('@/assets/images/small-icon-select.png');
|
||||
}
|
||||
.day{
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
|
@ -173,3 +200,38 @@ p,ul,li{
|
|||
display: none; /* Chrome Safari */
|
||||
}
|
||||
}
|
||||
|
||||
//弹窗
|
||||
.dialog {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
width: vw(506);
|
||||
height: vh(317);
|
||||
background-image: url('@/assets/images/lighting/dialog.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
&-title {
|
||||
padding-left: 2.5rem;
|
||||
padding-top: .2rem;
|
||||
box-sizing: border-box;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-size: 1.4rem;
|
||||
font-family: title;
|
||||
}
|
||||
.close-btn {
|
||||
background-image: url('@/assets/images/lighting/dialog-close.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 5%;
|
||||
height: 8.5%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 3%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,185 @@
|
|||
<script setup>
|
||||
import {ref} from 'vue'
|
||||
const checkAll = ref(false)
|
||||
const isIndeterminate = ref(true)
|
||||
// 父组件传值
|
||||
const props = defineProps({
|
||||
dialogName:{
|
||||
type:String,
|
||||
default:''
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['update'])
|
||||
const closeDialog = () =>{
|
||||
// 关闭弹窗
|
||||
emit('update',false)
|
||||
}
|
||||
// 选中设备
|
||||
const checkedSystem = ref(['2号机窗'])
|
||||
const systems = ['1号机窗', '2号机窗', '3号机窗', '4号机窗']
|
||||
|
||||
const handleCheckAllChange = (val) => {
|
||||
checkedSystem.value = val ? systems : []
|
||||
isIndeterminate.value = false
|
||||
}
|
||||
const handleCheckedCitiesChange = (value) => {
|
||||
const checkedCount = value.length
|
||||
checkAll.value = checkedCount === systems.length
|
||||
isIndeterminate.value = checkedCount > 0 && checkedCount < systems.length
|
||||
}
|
||||
|
||||
// 关闭设备的按钮
|
||||
const toggleClose = (index) =>{
|
||||
checkedSystem.value.splice(index,1)
|
||||
const checkedCount = checkedSystem.value.length
|
||||
checkAll.value = checkedCount === systems.length
|
||||
isIndeterminate.value = checkedCount > 0 && checkedCount < systems.length
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dialog">
|
||||
<div class="close-btn" @click="closeDialog"></div>
|
||||
<div class="dialog-title">策略编辑</div>
|
||||
<div class="dialog-box">
|
||||
<div class="dialog-box-name">
|
||||
<el-form-item label="策略名称:">
|
||||
<el-input v-model="props.dialogName"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="dialog-box-content">
|
||||
<div class="dialog-box-content-item">
|
||||
<el-checkbox
|
||||
v-model="checkAll"
|
||||
:indeterminate="isIndeterminate"
|
||||
@change="handleCheckAllChange"
|
||||
>全部设备</el-checkbox
|
||||
>
|
||||
<el-checkbox-group
|
||||
|
||||
v-model="checkedSystem"
|
||||
@change="handleCheckedCitiesChange"
|
||||
>
|
||||
<el-checkbox v-for="city in systems" :key="city" :label="city">{{
|
||||
city
|
||||
}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div class="dialog-box-content-item">
|
||||
<div class="on-device">开机设备</div>
|
||||
<div class="system">
|
||||
<div class="select-system" v-for="(item,index) in checkedSystem">
|
||||
<span>{{item}}</span>
|
||||
<span class="close" @click="toggleClose(index)"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.dialog-box{
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
&-content{
|
||||
//background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 86%;
|
||||
&-item{
|
||||
font-size: .875rem;
|
||||
padding: 2%;
|
||||
box-sizing: border-box;
|
||||
width: 47%;
|
||||
height: 90%;
|
||||
background-image: url('@/assets/images/air-conditioning/dialog-item-bg.png');
|
||||
background-size: 100% 100%;
|
||||
.on-device{
|
||||
height: 20%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
.system{
|
||||
height: 80%;
|
||||
.select-system{
|
||||
margin-bottom: 2%;
|
||||
width: 60%;
|
||||
padding-left: 1rem;
|
||||
padding-right: .5rem;
|
||||
box-sizing: border-box;
|
||||
height: 20%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-image: url("@/assets/images/air-conditioning/system-border.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
align-items: center;
|
||||
.close{
|
||||
width: 8%;
|
||||
cursor: pointer;
|
||||
height: 40%;
|
||||
background-image: url("@/assets/images/air-conditioning/close-btn.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-input__inner){
|
||||
color:rgba(255, 255, 255, 1);
|
||||
}
|
||||
:deep(.el-input__wrapper){
|
||||
background-color: transparent !important;
|
||||
}
|
||||
:deep(.el-form-item__label){
|
||||
color:rgba(255, 255, 255, 1);
|
||||
font-size: .875rem;
|
||||
}
|
||||
:deep(.el-input){
|
||||
width: 50%;
|
||||
height: 65%;
|
||||
}
|
||||
:deep(.el-input__wrapper){
|
||||
border-radius: 0;
|
||||
}
|
||||
:deep(.el-form-item){
|
||||
margin-bottom: 1%;
|
||||
}
|
||||
:deep(.el-checkbox){
|
||||
height: 20%;
|
||||
width: 100%;
|
||||
margin-bottom: 2%;
|
||||
color:rgba(221, 255, 253, 1);
|
||||
}
|
||||
:deep(.el-checkbox-group){
|
||||
height: 80%;
|
||||
|
||||
}
|
||||
:deep(.el-checkbox__input.is-checked+.el-checkbox__label){
|
||||
color:rgba(221, 255, 253, 1);
|
||||
}
|
||||
:deep(.el-checkbox__input.is-checked .el-checkbox__inner::after){
|
||||
border-color:#000;
|
||||
}
|
||||
:deep(.el-checkbox__input.is-checked .el-checkbox__inner){
|
||||
background-color: rgba(255, 221, 0, 1);
|
||||
border-color: rgba(255, 221, 0, 1);
|
||||
}
|
||||
:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner::before){
|
||||
background-color: #000;
|
||||
}
|
||||
:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner){
|
||||
background-color: rgba(221, 255, 253, 1);
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup>
|
||||
import {ref, reactive} from "vue";
|
||||
import getPath from "@/utils/getPath.js";
|
||||
|
||||
import dialogBox from './components/dialogBox.vue'
|
||||
const systemNumList = ref([
|
||||
{
|
||||
name: '运行设备数量',
|
||||
|
|
@ -153,10 +153,23 @@ const maintenanceList = ref([
|
|||
date: '09',
|
||||
}
|
||||
])
|
||||
|
||||
// 弹窗
|
||||
const dialogBoxShow = ref(false)
|
||||
const dialogName = ref('')
|
||||
const openDialog = (name) =>{
|
||||
dialogBoxShow.value = true
|
||||
dialogName.value = name
|
||||
}
|
||||
const closeDialog = (val) =>{
|
||||
dialogBoxShow.value = val
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page m100">
|
||||
<!-- 弹窗-->
|
||||
<dialogBox v-show="dialogBoxShow" @update="closeDialog" :dialogName="dialogName"/>
|
||||
<div class="page-left-box">
|
||||
<!-- 概况-->
|
||||
<div class="title">
|
||||
|
|
@ -236,7 +249,7 @@ const maintenanceList = ref([
|
|||
>
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<el-switch v-model="item.value" style="left: 8px" />
|
||||
<span>编辑</span>
|
||||
<span @click="openDialog(item.name)" style="cursor: pointer">编辑</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<div
|
||||
v-for="(item, index) in overviewDate"
|
||||
:key="index"
|
||||
:class="[activeDate == index ? 'dateAc' : 'date']"
|
||||
:class="[activeDate === index ? 'dateAc' : 'date']"
|
||||
@click="switchDate(index)"
|
||||
>
|
||||
{{ item.name }}
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
<div class="title margin10">
|
||||
<span>碳流图</span>
|
||||
</div>
|
||||
<div class="margin10 box-bg" id=""></div>
|
||||
<div class="margin10 box-bg" id="energyFlow"></div>
|
||||
<!-- 碳排放趋势-->
|
||||
<div class="title margin10">
|
||||
<span>碳排放趋势</span>
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
<div
|
||||
v-for="(item, index) in trendDate"
|
||||
:key="index"
|
||||
:class="[trendActiveDate == index ? 'dateAc' : 'date']"
|
||||
:class="[trendActiveDate === index ? 'dateAc' : 'date']"
|
||||
@click="trandSwitchDate(index)"
|
||||
>
|
||||
{{ item.name }}
|
||||
|
|
@ -89,9 +89,6 @@ import * as echarts from "echarts";
|
|||
import "echarts-gl";
|
||||
import { getPie3D, getParametricEquation } from "@/utils/carbonNeutrality";
|
||||
|
||||
const getImageUrl = (name) => {
|
||||
return new URL(name, import.meta.url).href;
|
||||
};
|
||||
const overviewDate = ref([
|
||||
{
|
||||
name: "年",
|
||||
|
|
@ -239,7 +236,7 @@ function getCarbonTrends() {
|
|||
myChart.setOption(option);
|
||||
}
|
||||
//碳排放强度
|
||||
function getCarbonIntensity() {
|
||||
const getCarbonIntensity=()=> {
|
||||
const offsetX = 10; //bar宽
|
||||
const offsetY = 5; //倾斜角度
|
||||
// 绘制左侧面
|
||||
|
|
@ -365,7 +362,7 @@ function getCarbonIntensity() {
|
|||
},
|
||||
axisLabel: {
|
||||
color: "rgba(221, 255, 253, 1)",
|
||||
fontSize: 14,
|
||||
fontSize: 12,
|
||||
interval: 0,
|
||||
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
|
||||
// formatter: function (value) {
|
||||
|
|
@ -408,7 +405,7 @@ function getCarbonIntensity() {
|
|||
},
|
||||
// y轴文字
|
||||
axisLabel: {
|
||||
fontSize: 14,
|
||||
fontSize: 12,
|
||||
color: "#DDFFFD",
|
||||
},
|
||||
},
|
||||
|
|
@ -540,7 +537,7 @@ function getCarbonIntensity() {
|
|||
myChart.setOption(option);
|
||||
}
|
||||
//各系统碳排放量统计
|
||||
function getCarbonEmissionStatistics() {
|
||||
const getCarbonEmissionStatistics = ()=> {
|
||||
let myChart = echarts.init(
|
||||
document.getElementById("carbonEmissionStatistics")
|
||||
);
|
||||
|
|
@ -684,7 +681,7 @@ const color = [
|
|||
"rgba(1, 225, 242, 1)",
|
||||
"rgba(27, 255, 118, 1)",
|
||||
];
|
||||
function setLabel() {
|
||||
const setLabel = ()=> {
|
||||
optionData.value.forEach((item, index) => {
|
||||
item.itemStyle = {
|
||||
color: color[index],
|
||||
|
|
@ -739,7 +736,7 @@ function setLabel() {
|
|||
});
|
||||
}
|
||||
//碳中和
|
||||
function getCarbonNeutrality() {
|
||||
const getCarbonNeutrality = () => {
|
||||
setLabel();
|
||||
let myChart = echarts.init(document.getElementById("carbonNeutrality"));
|
||||
let option = getPie3D(optionData.value, 0, 270, 26, 40, 1);
|
||||
|
|
@ -767,6 +764,160 @@ function getCarbonNeutrality() {
|
|||
myChart.setOption(option);
|
||||
// bindListen(myChart);
|
||||
}
|
||||
// 碳流图
|
||||
const drawEnergyFlow = () => {
|
||||
let myChart = echarts.init(document.getElementById("energyFlow"));
|
||||
let sourceData = [
|
||||
{
|
||||
name: "电",
|
||||
nameValue: 1562,
|
||||
valueUnit: "KWh",
|
||||
},
|
||||
{
|
||||
name: "空调",
|
||||
nameValue: 562,
|
||||
valueUnit: "kWh",
|
||||
},
|
||||
{
|
||||
name: "照明",
|
||||
nameValue: 490,
|
||||
valueUnit: "kWh",
|
||||
},
|
||||
{
|
||||
name: "电梯",
|
||||
nameValue: 510,
|
||||
valueUnit: "kWh",
|
||||
},
|
||||
{
|
||||
name: "其他",
|
||||
nameValue:320,
|
||||
valueUnit: "kWh",
|
||||
},
|
||||
];
|
||||
let sangjiColor = [
|
||||
"rgba(91, 250, 241, 1)",
|
||||
"rgba(91, 250, 241, 1)",
|
||||
"rgba(91, 250, 241, 1)",
|
||||
"rgba(91, 250, 241, 1)",
|
||||
"rgba(91, 250, 241, 1)",
|
||||
];
|
||||
let itemStyleSource = [];
|
||||
for (let d = 0; d < sourceData.length; d++) {
|
||||
if (sourceData[d].name === "电") {
|
||||
sourceData[d].label = {
|
||||
position: "right",
|
||||
};
|
||||
}
|
||||
sourceData[d].itemStyle = {
|
||||
color: sangjiColor[d],
|
||||
};
|
||||
itemStyleSource.push(sourceData[d]);
|
||||
}
|
||||
|
||||
let option = {
|
||||
series: [
|
||||
{
|
||||
// select:{
|
||||
// disabled:true
|
||||
// },
|
||||
type: "sankey",
|
||||
layout: "none",
|
||||
top: "5%",
|
||||
bottom: "4%",
|
||||
left: "6%",
|
||||
right: "5%",
|
||||
nodeAlign:'right',
|
||||
nodeWidth: "13",
|
||||
// nodeAlign:'right',
|
||||
focusNodeAdjacency: "allEdges",
|
||||
data: itemStyleSource,
|
||||
links: [
|
||||
{
|
||||
source: "电",
|
||||
target: "空调",
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
source: "电",
|
||||
target: "照明",
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
source: "电",
|
||||
target: "电梯",
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
source: "电",
|
||||
target: "其他",
|
||||
value: 8,
|
||||
},
|
||||
],
|
||||
label: {
|
||||
position: "left",
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
formatter: function (params) {
|
||||
|
||||
if (params.dataIndex === 0) {
|
||||
return (
|
||||
"{a|" +
|
||||
params.data.name +
|
||||
"}\n" +
|
||||
"{b|" +
|
||||
params.data.nameValue +
|
||||
"}" +
|
||||
" " +
|
||||
params.data.valueUnit
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
"{name|" +
|
||||
params.data.name +
|
||||
"}" +
|
||||
"{value|" +
|
||||
params.data.nameValue +
|
||||
"}" +
|
||||
// " " +
|
||||
params.data.valueUnit
|
||||
);
|
||||
}
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
padding: [0, 15, 10, 0],
|
||||
fontSize: "14",
|
||||
},
|
||||
b: {
|
||||
color: "rgba(91, 250, 241, 1)",
|
||||
fontWeight: "600",
|
||||
fontSize: "16",
|
||||
},
|
||||
name: {
|
||||
fontSize: 14,
|
||||
// padding: [10, 0, 0, 0],
|
||||
},
|
||||
value: {
|
||||
color: "rgba(91, 250, 241, 1)",
|
||||
fontWeight: "600",
|
||||
fontSize: "16",
|
||||
padding: [0, 10, 0, 10],
|
||||
},
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
color: "source",
|
||||
// curveness: 0.5,
|
||||
},
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderColor: "transparent",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
};
|
||||
//加载完dom执行
|
||||
onMounted(() => {
|
||||
//碳趋势图表
|
||||
|
|
@ -777,6 +928,8 @@ onMounted(() => {
|
|||
getCarbonEmissionStatistics();
|
||||
//碳中和
|
||||
getCarbonNeutrality();
|
||||
// 碳流图
|
||||
drawEnergyFlow()
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -73,6 +73,23 @@ const systemRightList = ref([
|
|||
}
|
||||
]//年
|
||||
])
|
||||
|
||||
// 能耗总量时间点击事件
|
||||
const totalEnergyDate = ref('month')
|
||||
const toggleTotalEnergy = (event) =>{
|
||||
totalEnergyDate.value = event.srcElement.className
|
||||
}
|
||||
// 能效对标时间点击时间
|
||||
const managementDate = ref('month')
|
||||
|
||||
const toggleManagement = (event) => {
|
||||
managementDate.value = event.srcElement.className
|
||||
}
|
||||
// 复费率的时间点击事件
|
||||
const exhibitionLoadDate = ref('month')
|
||||
const toggleExhibitionLoad = (event) =>{
|
||||
exhibitionLoadDate.value = event.srcElement.className
|
||||
}
|
||||
const selectSystemTab = (index) => {
|
||||
systemTabIndex.value = index;
|
||||
};
|
||||
|
|
@ -909,6 +926,7 @@ const drawElectricityPrice = () => {
|
|||
};
|
||||
myChart.setOption(option)
|
||||
}
|
||||
|
||||
// dom加载
|
||||
onMounted(() => {
|
||||
// 能耗总量
|
||||
|
|
@ -933,8 +951,8 @@ onMounted(() => {
|
|||
<div class="title">
|
||||
<span>能耗总量</span>
|
||||
<p>
|
||||
<span class="month">月</span>
|
||||
<span class="day">日</span>
|
||||
<span class="month" :class="totalEnergyDate === 'month'?'selectMonth':''" @click="toggleTotalEnergy">月</span>
|
||||
<span class="day" :class="totalEnergyDate === 'day'?'selectDay':''" @click="toggleTotalEnergy">日</span>
|
||||
</p>
|
||||
</div>
|
||||
<div id="totalEnergy" class="margin10 box-bg"></div>
|
||||
|
|
@ -942,8 +960,8 @@ onMounted(() => {
|
|||
<div class="title margin10">
|
||||
<span>能效对标（定额管理）</span>
|
||||
<p>
|
||||
<span class="year">年</span>
|
||||
<span class="month">月</span>
|
||||
<span class="year" :class="managementDate === 'year'?'selectYear':''" @click="toggleManagement">年</span>
|
||||
<span class="month" :class="managementDate === 'month'?'selectMonth':''" @click="toggleManagement">月</span>
|
||||
</p>
|
||||
</div>
|
||||
<div id="management" class="margin10 box-bg"></div>
|
||||
|
|
@ -996,9 +1014,9 @@ onMounted(() => {
|
|||
<div class="title margin10">
|
||||
<span>复费率</span>
|
||||
<p>
|
||||
<span class="year">年</span>
|
||||
<span class="month">月</span>
|
||||
<span class="day">日</span>
|
||||
<span class="year" :class="exhibitionLoadDate === 'year'?'selectYear':''" @click="toggleExhibitionLoad">年</span>
|
||||
<span class="month" :class="exhibitionLoadDate === 'month'?'selectMonth':''" @click="toggleExhibitionLoad">月</span>
|
||||
<span class="day" :class="exhibitionLoadDate === 'day'?'selectDay':''" @click="toggleExhibitionLoad">日</span>
|
||||
</p>
|
||||
</div>
|
||||
<div id="exhibitionLoad" class="margin10 box-bg"></div>
|
||||
|
|
|
|||
|
|
@ -44,8 +44,9 @@ const getImageUrl = (name) => {
|
|||
return new URL(name, import.meta.url).href;
|
||||
};
|
||||
//实时负荷
|
||||
function getRealTimeLoad() {
|
||||
let myChart = echarts.init(document.getElementById("realTimeLoad"));
|
||||
const getRealTimeLoad = ()=> {
|
||||
let myChart
|
||||
myChart = echarts.init(document.getElementById("realTimeLoad"));
|
||||
const option = {
|
||||
// backgroundColor: "#05224d",
|
||||
tooltip: {},
|
||||
|
|
@ -125,7 +126,7 @@ function getRealTimeLoad() {
|
|||
myChart.setOption(option);
|
||||
}
|
||||
//当日累计用电量
|
||||
function getDailyElectricityConsumption() {
|
||||
const getDailyElectricityConsumption = () => {
|
||||
const offsetX = 10; //bar宽
|
||||
const offsetY = 5; //倾斜角度
|
||||
// 绘制左侧面
|
||||
|
|
@ -252,7 +253,7 @@ function getDailyElectricityConsumption() {
|
|||
},
|
||||
axisLabel: {
|
||||
color: "rgba(221, 255, 253, 1)",
|
||||
fontSize: 14,
|
||||
fontSize: 12,
|
||||
interval: 1,
|
||||
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
|
||||
// formatter: function (value) {
|
||||
|
|
@ -293,7 +294,7 @@ function getDailyElectricityConsumption() {
|
|||
},
|
||||
// y轴文字
|
||||
axisLabel: {
|
||||
fontSize: 14,
|
||||
fontSize: 12,
|
||||
color: "#DDFFFD",
|
||||
},
|
||||
},
|
||||
|
|
@ -408,7 +409,7 @@ function getDailyElectricityConsumption() {
|
|||
}
|
||||
|
||||
//空调负荷
|
||||
function drawAirConditioningLoad() {
|
||||
const drawAirConditioningLoad = ()=> {
|
||||
let myChart = echarts.init(document.getElementById("airConditioningLoad"));
|
||||
const option = {
|
||||
// backgroundColor: "#05224d",
|
||||
|
|
@ -508,7 +509,7 @@ function drawAirConditioningLoad() {
|
|||
myChart.setOption(option);
|
||||
}
|
||||
// 展陈负荷
|
||||
function drawExhibitionLoad() {
|
||||
const drawExhibitionLoad =()=> {
|
||||
let myChart = echarts.init(document.getElementById("exhibitionLoad"));
|
||||
const option = {
|
||||
// backgroundColor: "#05224d",
|
||||
|
|
@ -608,7 +609,7 @@ function drawExhibitionLoad() {
|
|||
myChart.setOption(option);
|
||||
}
|
||||
// 配电回路排名
|
||||
function drawRanking() {
|
||||
const drawRanking = ()=> {
|
||||
let myChart = echarts.init(document.getElementById("ranking"));
|
||||
let option = {
|
||||
grid: {
|
||||
|
|
@ -744,7 +745,7 @@ function drawRanking() {
|
|||
myChart.setOption(option);
|
||||
}
|
||||
//负荷分类
|
||||
function getLoadClassification() {
|
||||
const getLoadClassification=()=> {
|
||||
var trafficWay = [
|
||||
{
|
||||
name: "一级",
|
||||
|
|
@ -954,7 +955,7 @@ onMounted(() => {
|
|||
drawRanking();
|
||||
//负荷分类
|
||||
getLoadClassification();
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,144 @@
|
|||
<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
|
||||
}
|
||||
|
||||
])
|
||||
// 照明控制
|
||||
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 props = defineProps(
|
||||
{
|
||||
show:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
},
|
||||
name:{
|
||||
type:String,
|
||||
default:"",
|
||||
}
|
||||
}
|
||||
)
|
||||
const emit = defineEmits(['update'])
|
||||
const closeDialog = () => {
|
||||
// 向父组件传值
|
||||
emit('update',false)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dialog" v-if="props.show">
|
||||
<div class="close-btn" @click="closeDialog"></div>
|
||||
<div class="dialog-title">
|
||||
<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>
|
||||
</div>
|
||||
<div class="dialog-content">
|
||||
<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><el-switch v-model="item.state" style="left: 8px" /></span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.dialog-content{
|
||||
width: 100%;
|
||||
height: 74%;
|
||||
box-sizing: border-box;
|
||||
//padding: 1rem .5rem 0 1rem;
|
||||
}
|
||||
.control-btn{
|
||||
padding-left: 1rem;
|
||||
padding-top: .8rem;
|
||||
box-sizing: border-box;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
:deep(.el-switch__core) {
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(223, 94, 94, 1);
|
||||
}
|
||||
|
||||
:deep(.el-switch.is-checked .el-switch__core) {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(80, 233, 83, 1);
|
||||
}
|
||||
:deep(.el-switch__core .el-switch__action) {
|
||||
border-radius: 0;
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
background: rgba(223, 94, 94, 1);
|
||||
}
|
||||
:deep(.el-switch.is-checked .el-switch__action) {
|
||||
border-radius: 0;
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
background: rgba(80, 233, 83, 1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
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([
|
||||
{
|
||||
|
|
@ -73,6 +74,27 @@ const lightControl = ref([
|
|||
}
|
||||
|
||||
])
|
||||
// 照明负荷的时间切换
|
||||
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 = [
|
||||
|
|
@ -535,7 +557,6 @@ const drawHallLightingChart =()=>{
|
|||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
|
||||
// 照明负荷
|
||||
const drawLightLoadChart = () =>{
|
||||
let myChart = echarts.init(document.getElementById("lightLoad"));
|
||||
|
|
@ -679,6 +700,7 @@ onMounted(()=>{
|
|||
|
||||
<template>
|
||||
<div class="page m100">
|
||||
<dialogBox ref="box" :show="dialogShow" @update="closeDialog" :name="dialogTitle"/>
|
||||
<div class="page-left-box">
|
||||
<!-- 照明监测-->
|
||||
<div class="title">
|
||||
|
|
@ -721,9 +743,9 @@ onMounted(()=>{
|
|||
<div class="title margin10">
|
||||
<span>照明负荷</span>
|
||||
<p>
|
||||
<span class="year">年</span>
|
||||
<span class="month">月</span>
|
||||
<span class="day">日</span>
|
||||
<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>
|
||||
|
|
@ -737,6 +759,10 @@ onMounted(()=>{
|
|||
<!-- 照明控制-->
|
||||
<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">
|
||||
|
|
@ -751,7 +777,7 @@ onMounted(()=>{
|
|||
>
|
||||
<span class="name">{{ item.name }}</span>
|
||||
|
||||
<span class="control">照明控制</span>
|
||||
<span class="control" @click="openDialog(item.name)">照明控制</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -820,5 +846,25 @@ width: 1.1rem;
|
|||
//照明控制
|
||||
.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>
|
||||
|
|
@ -30,7 +30,17 @@ onMounted(()=>{
|
|||
//碳排放
|
||||
getCarbonEmission()
|
||||
})
|
||||
// 用电量时间切换
|
||||
const powerDate = ref('year')
|
||||
|
||||
const togglePower = (event) =>{
|
||||
powerDate.value = event.srcElement.className
|
||||
}
|
||||
// 碳排放时间切换
|
||||
const carbonEmissionDate = ref('month')
|
||||
const toggleCarbonEmission = (event) =>{
|
||||
carbonEmissionDate.value = event.srcElement.className
|
||||
}
|
||||
const drawPowerEcharts = () =>{
|
||||
let myChart = echarts.init(document.getElementById('power'))
|
||||
const option = {
|
||||
|
|
@ -386,7 +396,7 @@ function getCarbonEmission() {
|
|||
},
|
||||
axisLabel: {
|
||||
color: "rgba(221, 255, 253, 1)",
|
||||
fontSize: 14,
|
||||
fontSize: 12,
|
||||
interval: 0,
|
||||
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
|
||||
// formatter: function (value) {
|
||||
|
|
@ -427,7 +437,7 @@ function getCarbonEmission() {
|
|||
},
|
||||
// y轴文字
|
||||
axisLabel: {
|
||||
fontSize: 14,
|
||||
fontSize: 12,
|
||||
color: "#DDFFFD",
|
||||
},
|
||||
},
|
||||
|
|
@ -551,8 +561,8 @@ function getCarbonEmission() {
|
|||
<div class="title">
|
||||
<span>用电量</span>
|
||||
<p>
|
||||
<span class="year">年</span>
|
||||
<span class="month">月</span>
|
||||
<span class="year" :class="powerDate === 'year'?'selectYear':''" @click="togglePower">年</span>
|
||||
<span class="month" :class="powerDate === 'month'?'selectMonth':''" @click="togglePower">月</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="margin10 box-bg" id="power">
|
||||
|
|
@ -572,8 +582,8 @@ function getCarbonEmission() {
|
|||
<div class="title margin10">
|
||||
<span>碳排放</span>
|
||||
<p>
|
||||
<span class="year">年</span>
|
||||
<span class="month">月</span>
|
||||
<span class="year" :class="carbonEmissionDate === 'year'?'selectYear':''" @click="toggleCarbonEmission">年</span>
|
||||
<span class="month" :class="carbonEmissionDate === 'month'?'selectMonth':''" @click="toggleCarbonEmission">月</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="margin10 box-bg" id="carbonEmission">
|
||||
|
|
|
|||
|
|
@ -110,7 +110,86 @@ const runTimeList = ref([
|
|||
name: "西大厅4",
|
||||
value: true,
|
||||
},
|
||||
|
||||
{
|
||||
name: "西大厅5",
|
||||
value: false,
|
||||
},
|
||||
{
|
||||
name: "西大厅6",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅7",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅8",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅9",
|
||||
value: false,
|
||||
},
|
||||
{
|
||||
name: "西大厅10",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅11",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅12",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅13",
|
||||
value: false,
|
||||
},
|
||||
{
|
||||
name: "西大厅14",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅15",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅16",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅17",
|
||||
value: false,
|
||||
},
|
||||
{
|
||||
name: "西大厅18",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅19",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅20",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅21",
|
||||
value: false,
|
||||
},
|
||||
{
|
||||
name: "西大厅22",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅23",
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
name: "西大厅24",
|
||||
value: true,
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue