productDev/dmvisit.git

			@@ -1,241 +1,243 @@
			<template>
			<div class="main_app">
			<img src="@/assets/images/bg_main_app.png" class="main_bg" alt="" />
			<div class="main_header">
			<img src="@/assets/images/maintitle@2x.png" class="main_header_bg" alt="" />
			<div class="title">安泰智慧物流园区-绿色低碳运营</div>
			<div class="time">
			<span class="date">{{ date }}</span>
			<span class="week">{{ week }}</span>
			<span class="time">{{ time }}</span>
			</div>
			</div>
			<div class="main_content">
			<div class="left_box">
			<div class="left_box_one">
			<div class="com_header">
			<div class="title">
			<img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
			<div>实时三相电流/电压</div>
			</div>
			<img src="@/assets/images/title@2x.png" class="bg" alt="" />
			</div>
			<div class="content">
			<div class="item">
			<div class="lab">A相电流(A)</div>
			<div class="val">60</div>
			</div>
			<div class="item">
			<div class="lab">B相电流(A)</div>
			<div class="val">60</div>
			</div>
			<div class="item">
			<div class="lab">C相电流(A)</div>
			<div class="val">60</div>
			</div>
			<div class="item">
			<div class="lab">有功功率(KW)</div>
			<div class="val">60</div>
			</div>
			<div class="item">
			<div class="lab">功率因数</div>
			<div class="val">60</div>
			</div>
			<div class="item">
			<div class="lab">有功电度(°)</div>
			<div class="val">60</div>
			</div>
			</div>
			</div>
			<div class="left_box_two">
			<div class="com_header">
			<div class="title">
			<img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
			<div>实时负荷曲线</div>
			</div>
			<img src="@/assets/images/title@2x.png" class="bg" alt="" />
			</div>
			<div class="load_wrap">
			<div class="loadRef"></div>
			</div>
			</div>
			<div class="left_box_three">
			<div class="com_header">
			<div class="title">
			<img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
			<div>月能耗分析</div>
			</div>
			<div class="tabs">
			<div class="tab active">用电</div>
			<div class="separate"></div>
			<div class="tab">用水</div>
			<div class="separate"></div>
			<div class="tab">用气</div>
			</div>
			<img src="@/assets/images/title@2x.png" class="bg" alt="" />
			</div>
			<div class="energy_wrap">
			<div class="energyRef"></div>
			</div>
			<v-scale-screen width="1920" height="960" :fullScreen="true">
			<div class="main_app">
			<img src="@/assets/images/bg_main_app.png" class="main_bg" alt="" />
			<div class="main_header">
			<img src="@/assets/images/maintitle@2x.png" class="main_header_bg" alt="" />
			<div class="title">安泰智慧物流园区-绿色低碳运营</div>
			<div class="time_wrap">
			<span class="date">{{ date }}</span>
			<span class="week">{{ week }}</span>
			<span class="time">{{ time }}</span>
			</div>
			</div>
			<div class="center_box">
			<div class="center_box_one">
			<div class="list">
			<div class="item">
			<div class="header">
			<img class="icon" src="@/assets/images/ic_yongdian@2x.png" alt="" />
			<div class="content">
			<div class="name">上月用电(kw·h)</div>
			<div class="num">450</div>
			<div class="main_content">
			<div class="left_box">
			<div class="left_box_one">
			<div class="com_header">
			<div class="title">
			<img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
			<div>实时三相电流/电压</div>
			</div>
			<img src="@/assets/images/title@2x.png" class="bg" alt="" />
			</div>
			<div class="content">
			<div class="item">
			<div class="lab">A相电流(A)</div>
			<div class="val">60</div>
			</div>
			<div class="item">
			<div class="lab">B相电流(A)</div>
			<div class="val">60</div>
			</div>
			<div class="item">
			<div class="lab">C相电流(A)</div>
			<div class="val">60</div>
			</div>
			<div class="item">
			<div class="lab">有功功率(KW)</div>
			<div class="val">60</div>
			</div>
			<div class="item">
			<div class="lab">功率因数</div>
			<div class="val">60</div>
			</div>
			<div class="item">
			<div class="lab">有功电度(°)</div>
			<div class="val">60</div>
			</div>
			</div>
			</div>
			<div class="left_box_two">
			<div class="com_header">
			<div class="title">
			<img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
			<div>实时负荷曲线</div>
			</div>
			<img src="@/assets/images/title@2x.png" class="bg" alt="" />
			</div>
			<div class="load_wrap">
			<div class="loadRef"></div>
			</div>
			</div>
			<div class="left_box_three">
			<div class="com_header">
			<div class="title">
			<img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
			<div>月能耗分析</div>
			</div>
			<div class="tabs">
			<div class="tab active">用电</div>
			<div class="separate"></div>
			<div class="tab">用水</div>
			<div class="separate"></div>
			<div class="tab">用气</div>
			</div>
			<img src="@/assets/images/title@2x.png" class="bg" alt="" />
			</div>
			<div class="energy_wrap">
			<div class="energyRef"></div>
			</div>
			</div>
			</div>
			<div class="center_box">
			<div class="center_box_one">
			<div class="list">
			<div class="item">
			<div class="header">
			<img class="icon" src="@/assets/images/ic_yongdian@2x.png" alt="" />
			<div class="content">
			<div class="name">上月用电(kw·h)</div>
			<div class="num">450</div>
			</div>
			</div>
			<div class="static">
			<span class="lab">同比</span>
			<img class="icon" src="@/assets/images/ic_up.webp" alt="" />
			<span class="val">11</span>
			<span class="lab">环比</span>
			<img class="icon" src="@/assets/images/ic_down.webp" alt="" />
			<span class="val">11</span>
			</div>
			</div>
			<div class="static">
			<span class="lab">同比</span>
			<img class="icon" src="@/assets/images/ic_up.webp" alt="" />
			<span class="val">11</span>
			<span class="lab">环比</span>
			<img class="icon" src="@/assets/images/ic_down.webp" alt="" />
			<span class="val">11</span>
			</div>
			</div>
			<div class="item">
			<div class="header">
			<img class="icon" src="@/assets/images/ic_yongshui@2x.png" alt="" />
			<div class="content">
			<div class="name">上月用水(t)</div>
			<div class="num">450</div>
			<div class="item">
			<div class="header">
			<img class="icon" src="@/assets/images/ic_yongshui@2x.png" alt="" />
			<div class="content">
			<div class="name">上月用水(t)</div>
			<div class="num">450</div>
			</div>
			</div>
			<div class="static">
			<span class="lab">同比</span>
			<img class="icon" src="@/assets/images/ic_up.webp" alt="" />
			<span class="val">11</span>
			<span class="lab">环比</span>
			<img class="icon" src="@/assets/images/ic_down.webp" alt="" />
			<span class="val">11</span>
			</div>
			</div>
			<div class="static">
			<span class="lab">同比</span>
			<img class="icon" src="@/assets/images/ic_up.webp" alt="" />
			<span class="val">11</span>
			<span class="lab">环比</span>
			<img class="icon" src="@/assets/images/ic_down.webp" alt="" />
			<span class="val">11</span>
			</div>
			</div>
			<div class="item">
			<div class="header">
			<img class="icon" src="@/assets/images/ic_yongqi@2x.png" alt="" />
			<div class="content">
			<div class="name">上月用气(t)</div>
			<div class="num">450</div>
			<div class="item">
			<div class="header">
			<img class="icon" src="@/assets/images/ic_yongqi@2x.png" alt="" />
			<div class="content">
			<div class="name">上月用气(t)</div>
			<div class="num">450</div>
			</div>
			</div>
			<div class="static">
			<span class="lab">同比</span>
			<img class="icon" src="@/assets/images/ic_up.webp" alt="" />
			<span class="val">11</span>
			<span class="lab">环比</span>
			<img class="icon" src="@/assets/images/ic_down.webp" alt="" />
			<span class="val">11</span>
			</div>
			</div>
			<div class="static">
			<span class="lab">同比</span>
			<img class="icon" src="@/assets/images/ic_up.webp" alt="" />
			<span class="val">11</span>
			<span class="lab">环比</span>
			<img class="icon" src="@/assets/images/ic_down.webp" alt="" />
			<span class="val">11</span>
			</div>
			</div>
			<div class="center_box_two">
			<img class="bg" src="@/assets/images/img_city@2x.png" alt="" />
			<div class="item item1">
			<div class="num fs_linear">240<span class="unit">kw·h</span></div>
			<div class="name">联合工房</div>
			<img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
			</div>
			<div class="item item2">
			<div class="num fs_linear">240<span class="unit">kw·h</span></div>
			<div class="name">联合工房</div>
			<img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
			</div>
			<div class="item item3">
			<div class="num fs_linear">240<span class="unit">kw·h</span></div>
			<div class="name">联合工房</div>
			<img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
			</div>
			<div class="item item4">
			<div class="num fs_linear">240<span class="unit">kw·h</span></div>
			<div class="name">联合工房</div>
			<img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
			</div>
			<div class="item item5">
			<div class="num fs_linear">240<span class="unit">kw·h</span></div>
			<div class="name">联合工房</div>
			<img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
			</div>
			<div class="bottom_wrap">
			<div class="bottom bottom1">
			<div class="num fs_linear">240</div>
			<div class="name">昨日用电</div>
			<div class="unit">kw·h</div>
			<img src="@/assets/images/ic_dianliang_b@2x.png" class="bg" alt="" />
			</div>
			<div class="bottom bottom2">
			<div class="num">240</div>
			<div class="name">今日用电</div>
			<div class="unit">kw·h</div>
			<img src="@/assets/images/ic_dianliang@2x.png" class="bg" alt="" />
			</div>
			<div class="bottom bottom3">
			<div class="num fs_linear">240</div>
			<div class="name">本月用电</div>
			<div class="unit">kw·h</div>
			<img src="@/assets/images/ic_dianliang_b@2x.png" class="bg" alt="" />
			</div>
			</div>
			</div>
			</div>
			<div class="center_box_two">
			<img class="bg" src="@/assets/images/img_city@2x.png" alt="" />
			<div class="item item1">
			<div class="num fs_linear">240<span class="unit">kw·h</span></div>
			<div class="name">联合工房</div>
			<img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
			</div>
			<div class="item item2">
			<div class="num fs_linear">240<span class="unit">kw·h</span></div>
			<div class="name">联合工房</div>
			<img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
			</div>
			<div class="item item3">
			<div class="num fs_linear">240<span class="unit">kw·h</span></div>
			<div class="name">联合工房</div>
			<img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
			</div>
			<div class="item item4">
			<div class="num fs_linear">240<span class="unit">kw·h</span></div>
			<div class="name">联合工房</div>
			<img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
			</div>
			<div class="item item5">
			<div class="num fs_linear">240<span class="unit">kw·h</span></div>
			<div class="name">联合工房</div>
			<img src="@/assets/images/bg_data@2x.png" class="bg" alt="" />
			</div>
			<div class="bottom_wrap">
			<div class="bottom bottom1">
			<div class="num fs_linear">240</div>
			<div class="name">昨日用电</div>
			<div class="unit">kw·h</div>
			<img src="@/assets/images/ic_dianliang_b@2x.png" class="bg" alt="" />
			</div>
			<div class="bottom bottom2">
			<div class="num">240</div>
			<div class="name">今日用电</div>
			<div class="unit">kw·h</div>
			<img src="@/assets/images/ic_dianliang@2x.png" class="bg" alt="" />
			</div>
			<div class="bottom bottom3">
			<div class="num fs_linear">240</div>
			<div class="name">本月用电</div>
			<div class="unit">kw·h</div>
			<img src="@/assets/images/ic_dianliang_b@2x.png" class="bg" alt="" />
			</div>
			</div>
			</div>
			</div>
			<div class="right_box">
			<div class="right_box_one">
			<div class="com_header">
			<div class="title">
			<img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
			<div>本月碳排放量统计</div>
			</div>
			<img src="@/assets/images/title@2x.png" class="bg" alt="" />
			</div>
			<div class="content">
			<img src="@/assets/images/ic_co2@2x.png" class="co2" alt="">
			<div>
			<div class="name">本月累计碳排放</div>
			<div><span class="num">22.22</span><span>吨</span></div>
			</div>
			</div>
			</div>
			<div class="right_box_two">
			<div class="com_header">
			<div class="title">
			<img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
			<div>上月油耗排行统计</div>
			</div>
			<div class="tabs">油耗：L</div>
			<img src="@/assets/images/title@2x.png" class="bg" alt="" />
			</div>
			<div class="list">
			<div class="line" v-for="item,i in 6">
			<div class="top"><span v-if="i < 3">top</span>{{ i }}</div>
			<div class="id_card">皖A12313</div>
			<div class="wrap">
			<ChargeRate :rate="15" :color />
			<div class="right_box">
			<div class="right_box_one">
			<div class="com_header">
			<div class="title">
			<img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
			<div>本月碳排放量统计</div>
			</div>
			<div class="num">1000</div>
			<img src="@/assets/images/title@2x.png" class="bg" alt="" />
			</div>
			<div class="content">
			<img src="@/assets/images/ic_co2@2x.png" class="co2" alt="">
			<div>
			<div class="name">本月累计碳排放</div>
			<div><span class="num">22.22</span><span>吨</span></div>
			</div>
			</div>
			</div>
			</div>
			<div class="right_box_three">
			<div class="com_header">
			<div class="title">
			<img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
			<div>月油耗分析</div>
			<div class="right_box_two">
			<div class="com_header">
			<div class="title">
			<img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
			<div>上月油耗排行统计</div>
			</div>
			<div class="tabs">油耗：L</div>
			<img src="@/assets/images/title@2x.png" class="bg" alt="" />
			</div>
			<img src="@/assets/images/title@2x.png" class="bg" alt="" />
			<div class="list">
			<div class="line" v-for="item, i in 6">
			<div class="top"><span v-if="i < 3">top</span>{{ i }}</div>
			<div class="id_card">皖A12313</div>
			<div class="wrap">
			<ChargeRate :rate="15" :color />
			</div>
			<div class="num">1000</div>
			</div>
			</div>
			</div>
			<div class="wrap">
			<div class="analyseRef"></div>
			<div class="right_box_three">
			<div class="com_header">
			<div class="title">
			<img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
			<div>月油耗分析</div>
			</div>
			<img src="@/assets/images/title@2x.png" class="bg" alt="" />
			</div>
			<div class="wrap">
			<div class="analyseRef"></div>
			</div>
			</div>
			</div>
			</div>
			</div>
			</div>
			</v-scale-screen>
			</template>

			<script setup>
			@@ -243,6 +245,8 @@
			import dayjs from 'dayjs'
			import ChargeRate from '@/components/ChargeRate.vue'
			import * as echarts from 'echarts'
			import VScaleScreen from 'v-scale-screen'


			const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
			const date = ref(dayjs().format('YYYY.MM.DD'))
			@@ -285,7 +289,7 @@
			xAxis: {
			type: 'category',
			boundaryGap: false,
			data: [1,2,3,4,5,5]
			data: [1, 2, 3, 4, 5, 5]
			},
			yAxis: {
			type: 'value',
			@@ -312,7 +316,7 @@
			},
			series: [
			{
			data: [1,2,3,4,4,5].map(i => {
			data: [1, 2, 3, 4, 4, 5].map(i => {
			return {
			name: i,
			value: i,
			@@ -397,7 +401,7 @@
			xAxis: {
			type: 'category',
			boundaryGap: false,
			data: [1,2,3,4,5,5]
			data: [1, 2, 3, 4, 5, 5]
			},
			yAxis: {
			type: 'value',
			@@ -424,7 +428,7 @@
			},
			series: [
			{
			data: [1,2,3,4,4,4000].map(i => {
			data: [1, 2, 3, 4, 4, 4000].map(i => {
			return {
			name: i,
			value: i,
			@@ -501,7 +505,7 @@
			},
			xAxis: {
			type: 'category',
			data: [1,2,3,4,4,5]
			data: [1, 2, 3, 4, 4, 5]
			},
			yAxis: {
			type: 'value',
			@@ -519,7 +523,7 @@
			},
			series: [
			{
			data: [1,2,3,4,5],
			data: [1, 2, 3, 4, 5],
			type: 'bar',
			barWidth: 10,
			itemStyle: {
			@@ -546,7 +550,7 @@
			initOperation()
			initLoadReal()
			initEnergy()
			})
			})


			</script>
			@@ -590,11 +594,13 @@

			.left_box_two {
			margin-bottom: 20px;
			.load_wrap{

			.load_wrap {
			width: 100%;
			height: 210px;
			padding: 12px 12px;
			.loadRef{

			.loadRef {
			width: 100%;
			height: 100%;
			}
			@@ -602,10 +608,11 @@
			}

			.left_box_three {
			.energy_wrap{
			.energy_wrap {
			width: 100%;
			height: 200px;
			.energyRef{

			.energyRef {
			width: 100%;
			height: 100%;
			}
			@@ -804,6 +811,7 @@

			.right_box_one {
			margin-bottom: 20px;

			.content {
			height: 164px;
			display: flex;
			@@ -824,15 +832,19 @@
			}
			}
			}
			.right_box_two{

			.right_box_two {
			margin-bottom: 20px;
			.list{

			.list {
			padding: 20px 24px 4px;
			.line{

			.line {
			display: flex;
			align-items: center;
			margin-bottom: 16px;
			.top{

			.top {
			font-weight: 500;
			font-size: 12px;
			width: 33px;
			@@ -843,19 +855,22 @@
			box-shadow: inset 0px 0px 3px 0px #01D9FE;
			margin-right: 10px;
			}
			.id_card{

			.id_card {
			color: #DBEAEA;
			font-weight: 500;
			margin-right: 14px;
			font-size: 14px;
			}
			.num{

			.num {
			font-weight: 500;
			font-size: 13px;
			color: #DBEAEA;
			margin-left: 15px;
			}
			.wrap{

			.wrap {
			flex: 1;
			height: 20px;
			border: 1px solid #686B6B;
			@@ -863,10 +878,12 @@
			}
			}
			}
			.right_box_three{
			.wrap{

			.right_box_three {
			.wrap {
			padding: 8px;
			.analyseRef{

			.analyseRef {
			width: 100%;
			height: 210px;
			}
			@@ -946,7 +963,7 @@
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 92px;
			height: 90px;
			position: relative;
			padding: 0px 40px 16px;
			font-weight: 600;
			@@ -962,7 +979,7 @@
			-webkit-text-fill-color: transparent;
			}

			.time {
			.time_wrap {
			font-size: 26px;
			font-weight: 600;
			background-image: -webkit-linear-gradient(top,
			@@ -976,15 +993,14 @@
			align-items: center;

			.time {
			width: 180px;
			width: 130px;
			display: flex;
			justify-content: flex-end;
			padding-bottom: 10px;
			font-size: 36px;
			font-size: 30px;
			}

			.week {
			margin-left: 36px;
			margin-left: 20px;
			}
			}

			@@ -1000,11 +1016,10 @@
			}

			.main_app {
			width: 100%;
			min-height: 100vh;
			width: 1920px;
			height: 980px;
			color: #ffffff;
			position: relative;

			.main_bg {
			position: absolute;
			left: 0;