shenzhen-dev #2
@ -1,20 +1,177 @@
|
||||
<template>
|
||||
<Card title="短期用电趋势">
|
||||
<div class="edge-top-left">123</div>
|
||||
<div class="ai-top-left">
|
||||
<div class="history-content">
|
||||
<div>
|
||||
<div class="select-right">
|
||||
<div class="week selected" @click="getWeekData(1)" :class="checked == 1 ? 'active' : ''">近7日</div>
|
||||
<div class="month selected" @click="getMonthData(2)" :class="checked == 2 ? 'active' : ''">本月</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div id="waterShortTerm" ref="waterShortTerm" style="width: 100%; height: 100%"></div>
|
||||
-->
|
||||
<greenLineEchart
|
||||
:xData="xData"
|
||||
:yData="yData"
|
||||
:lineId="'electricityShortTrend'"
|
||||
:lineSmooth="0"
|
||||
style="width: 100%; height: 100%"
|
||||
></greenLineEchart>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import symbolIcon from "@/assets/images/lineSymbol.png";
|
||||
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||||
import greenLineEchart from "@/views/sevenLargeScreen/greenConstruct/waterMonitor/greenLineEchart.vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import mitts from "@/utils/bus"; //兄弟组件传值
|
||||
const store = GlobalStore();
|
||||
// x轴
|
||||
let xData = ref(["09-01", "09-02", "09-03", "09-04", "09-05", "09-06", "09-07"] as any);
|
||||
// Y轴单位
|
||||
let unit = ref("单位:V" as any);
|
||||
// Y轴数据
|
||||
let yData = ref([10, 5, 20, 25, 15, 25, 12] as any);
|
||||
// 图表数据项
|
||||
let option = ref(null as any);
|
||||
|
||||
// 选中
|
||||
let checked = ref(1);
|
||||
function getWeekData(type: any) {
|
||||
checked.value = type;
|
||||
let currentWeek = getRecentSevenDays();
|
||||
// console.log(currentWeek, "近七天");
|
||||
// 模拟数据改变
|
||||
xData.value = currentWeek;
|
||||
yData.value = [20, 15, 25, 15, 25, 35, 12];
|
||||
}
|
||||
function getMonthData(type: any) {
|
||||
checked.value = type;
|
||||
let currentWeek = getPassedDaysOfMonth();
|
||||
// console.log(currentWeek.length, "本月");
|
||||
let testyData: any = [];
|
||||
for (let i = 0; i < currentWeek.length; i++) {
|
||||
testyData.push((i % 2) + 10);
|
||||
}
|
||||
xData.value = currentWeek;
|
||||
yData.value = testyData;
|
||||
}
|
||||
|
||||
//获取近七天的日期
|
||||
function getRecentSevenDays() {
|
||||
const dates: any = [];
|
||||
const millisecondsPerDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
|
||||
const today = new Date(); // 当前日期
|
||||
|
||||
for (let i = 0; i < 7; i++) {
|
||||
const date = new Date(today.getTime() - i * millisecondsPerDay);
|
||||
const month = ("0" + (date.getMonth() + 1)).slice(-2);
|
||||
const day = ("0" + date.getDate()).slice(-2);
|
||||
dates.unshift(`${month}-${day}`);
|
||||
}
|
||||
return dates;
|
||||
}
|
||||
|
||||
// 获取本月到今天的日期
|
||||
function getPassedDaysOfMonth() {
|
||||
// 存放数据的数组
|
||||
const dates: any = [];
|
||||
// 获取当前时间的时间戳
|
||||
const today = new Date();
|
||||
// 获取年
|
||||
const year = today.getFullYear();
|
||||
// 获取月
|
||||
const month = today.getMonth();
|
||||
// 获取当前月份第一天的时间戳
|
||||
const startDate = new Date(year, month, 1); // 月份从 0 开始，所以 8 表示 9 月
|
||||
|
||||
let currentDate = startDate;
|
||||
// 遍历从这个月第一天到现在的日期数
|
||||
while (currentDate <= today) {
|
||||
const month = currentDate.getMonth() + 1;
|
||||
const day = currentDate.getDate();
|
||||
dates.push(`${("0" + month).slice(-2)}-${("0" + day).slice(-2)}`);
|
||||
|
||||
currentDate.setDate(currentDate.getDate() + 1);
|
||||
}
|
||||
|
||||
return dates;
|
||||
}
|
||||
|
||||
onMounted(async () => {});
|
||||
|
||||
// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
|
||||
onBeforeUnmount(async () => {
|
||||
mitts.off("devSn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.edge-top-left {
|
||||
<style lang="scss" scoped>
|
||||
.ai-top-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: 3%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.title {
|
||||
height: 10%;
|
||||
line-height: 33px;
|
||||
text-align: left;
|
||||
font-size: calc(100vw * 18 / 1920);
|
||||
color: #ffffff;
|
||||
background: url("@/assets/images/titleBig.webp") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
i {
|
||||
font-family: OPPOSansH;
|
||||
margin-left: 6%;
|
||||
}
|
||||
}
|
||||
.history-content {
|
||||
height: 100%;
|
||||
// background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
position: relative;
|
||||
.select-right {
|
||||
width: 20%;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
right: -5%;
|
||||
top: 5%;
|
||||
.selected {
|
||||
height: 5%;
|
||||
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.week {
|
||||
width: 30%;
|
||||
margin-right: 5%;
|
||||
z-index: 99;
|
||||
}
|
||||
.month {
|
||||
width: 30%;
|
||||
z-index: 99;
|
||||
}
|
||||
.active {
|
||||
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-input__wrapper {
|
||||
background: #112d59;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-select .el-input .el-select__caret {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,20 +1,184 @@
|
||||
<template>
|
||||
<Card title="长期用电趋势">
|
||||
<div class="edge-top-left">123</div>
|
||||
<div class="ai-top-left">
|
||||
<div class="history-content">
|
||||
<div>
|
||||
<div class="select-right">
|
||||
<div class="week selected" @click="getHalfYearData(1)" :class="checked == 1 ? 'active' : ''">近半年</div>
|
||||
<div class="month selected" @click="getFullYearData(2)" :class="checked == 2 ? 'active' : ''">近一年</div>
|
||||
</div>
|
||||
</div>
|
||||
<blueLineEchart
|
||||
:xData="xData"
|
||||
:yData="yData"
|
||||
:lineId="'electricityLongTrend'"
|
||||
:lineSmooth="0"
|
||||
style="width: 100%; height: 100%"
|
||||
></blueLineEchart>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import symbolIcon from "@/assets/images/lineSymbol.png";
|
||||
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||||
import blueLineEchart from "@/views/sevenLargeScreen/greenConstruct/waterMonitor/blueLineEchart.vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import mitts from "@/utils/bus"; //兄弟组件传值
|
||||
const store = GlobalStore();
|
||||
// x轴
|
||||
let xData = ref(["2023-04", "2023-05", "2023-06", "2023-07", "2023-08", "2023-09"] as any);
|
||||
// Y轴单位
|
||||
let unit = ref("单位:V" as any);
|
||||
// Y轴数据
|
||||
let yData = ref([10, 5, 20, 25, 15, 25] as any);
|
||||
// 图表数据项
|
||||
let option = ref(null as any);
|
||||
|
||||
// 选中
|
||||
let checked = ref(1);
|
||||
function getHalfYearData(type: any) {
|
||||
checked.value = type;
|
||||
let currentWeek = getLastSixMonths();
|
||||
// console.log(currentWeek, "近半年");
|
||||
// 模拟数据改变
|
||||
xData.value = currentWeek;
|
||||
yData.value = [20, 15, 25, 15, 25, 35];
|
||||
}
|
||||
function getFullYearData(type: any) {
|
||||
checked.value = type;
|
||||
let currentWeek = getLastTwelveMonths();
|
||||
// // console.log(currentWeek.length, "近一年");
|
||||
xData.value = currentWeek;
|
||||
yData.value = [20, 15, 25, 15, 25, 35, 20, 15, 25, 15, 25, 35];
|
||||
}
|
||||
|
||||
// 获取近一年的日期数
|
||||
function getLastTwelveMonths() {
|
||||
let currentDate = new Date();
|
||||
let months = [];
|
||||
|
||||
for (let i = 12; i >= 1; i--) {
|
||||
let year = currentDate.getFullYear();
|
||||
let month: any = currentDate.getMonth() + 1;
|
||||
|
||||
// 格式化月份和年份
|
||||
if (month < 10) {
|
||||
month = "0" + month;
|
||||
}
|
||||
|
||||
// 拼接成 yyyy-mm 格式
|
||||
let formattedDate: any = year + "-" + month;
|
||||
|
||||
// 将格式化后的日期添加到数组中
|
||||
months.unshift(formattedDate);
|
||||
|
||||
// 将当前日期减去一个月
|
||||
currentDate.setMonth(currentDate.getMonth() - 1);
|
||||
}
|
||||
|
||||
return months;
|
||||
}
|
||||
|
||||
// 获取近半年日期数
|
||||
function getLastSixMonths() {
|
||||
let currentDate = new Date();
|
||||
let months = [];
|
||||
|
||||
for (let i = 6; i >= 1; i--) {
|
||||
let year = currentDate.getFullYear();
|
||||
let month: any = currentDate.getMonth() + 1;
|
||||
|
||||
// 格式化月份和年份
|
||||
if (month < 10) {
|
||||
month = "0" + month;
|
||||
}
|
||||
|
||||
// 拼接成 yyyy-mm 格式
|
||||
let formattedDate: any = year + "-" + month;
|
||||
|
||||
// 将格式化后的日期添加到数组中
|
||||
months.unshift(formattedDate);
|
||||
|
||||
// 将当前日期减去一个月
|
||||
currentDate.setMonth(currentDate.getMonth() - 1);
|
||||
}
|
||||
|
||||
return months;
|
||||
}
|
||||
|
||||
onMounted(async () => {});
|
||||
|
||||
// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
|
||||
onBeforeUnmount(async () => {
|
||||
mitts.off("devSn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.edge-top-left {
|
||||
<style lang="scss" scoped>
|
||||
.ai-top-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: 3%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.title {
|
||||
height: 10%;
|
||||
line-height: 33px;
|
||||
text-align: left;
|
||||
font-size: calc(100vw * 18 / 1920);
|
||||
color: #ffffff;
|
||||
background: url("@/assets/images/titleBig.webp") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
i {
|
||||
font-family: OPPOSansH;
|
||||
margin-left: 6%;
|
||||
}
|
||||
}
|
||||
.history-content {
|
||||
height: 100%;
|
||||
// background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
position: relative;
|
||||
.select-right {
|
||||
width: 20%;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
right: -5%;
|
||||
top: 5%;
|
||||
.selected {
|
||||
height: 5%;
|
||||
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.week {
|
||||
width: 30%;
|
||||
margin-right: 5%;
|
||||
z-index: 99;
|
||||
}
|
||||
.month {
|
||||
width: 30%;
|
||||
z-index: 99;
|
||||
}
|
||||
.active {
|
||||
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-input__wrapper {
|
||||
background: #112d59;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-select .el-input .el-select__caret {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -43,20 +43,20 @@ export default {
|
||||
display: flex;
|
||||
margin-bottom: 1%;
|
||||
.topLeft {
|
||||
width: 33%;
|
||||
width: 26%;
|
||||
// background-color: orchid;
|
||||
}
|
||||
.topCenter {
|
||||
margin: 0% 1%;
|
||||
width: 33%;
|
||||
width: 45%;
|
||||
:deep(.h-card) {
|
||||
// .content {
|
||||
// margin-top: 1.5% !important;
|
||||
// }
|
||||
.content {
|
||||
margin-top: 1.6% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.topRight {
|
||||
width: 33%;
|
||||
width: 27%;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
@ -64,16 +64,16 @@ export default {
|
||||
height: 48%;
|
||||
display: flex;
|
||||
.bottomLeft {
|
||||
width: 33%;
|
||||
width: 50%;
|
||||
margin-right: 1%;
|
||||
:deep(.h-card) {
|
||||
.content {
|
||||
margin-top: 2% !important;
|
||||
margin-top: 1% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottomRight {
|
||||
width: 66%;
|
||||
width: 49%;
|
||||
:deep(.h-card) {
|
||||
.content {
|
||||
margin-top: 1% !important;
|
||||
|
||||
@ -1,6 +1,31 @@
|
||||
<template>
|
||||
<Card title="实时监测">
|
||||
<div class="edge-top-left">123</div>
|
||||
<div class="electricity-top-center">
|
||||
<div class="left-box">
|
||||
<div class="electricity-count">3308.84 kw·h</div>
|
||||
<div class="electricity-icon">
|
||||
<img src="@/assets/images/greenConstruct/electricity.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="yesterday-use">
|
||||
<div class="text">昨日用电(kw·h)</div>
|
||||
<div class="num">4.06</div>
|
||||
</div>
|
||||
<div class="yesterday-chain">
|
||||
<div class="text">环比</div>
|
||||
<div class="num">3<span style="font-family: Source Han Sans CN-Medium, Source Han Sans CN">%</span></div>
|
||||
</div>
|
||||
<div class="month-use">
|
||||
<div class="text">本月用电(kw·h)</div>
|
||||
<div class="num">100.2</div>
|
||||
</div>
|
||||
<div class="month-chain">
|
||||
<div class="text">环比</div>
|
||||
<div class="num">12<span style="font-family: Source Han Sans CN-Medium, Source Han Sans CN">%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
@ -9,12 +34,140 @@ import Card from "@/components/card.vue";
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.edge-top-left {
|
||||
.electricity-top-center {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: 3%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.left-box {
|
||||
width: 50%;
|
||||
.electricity-count {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 50%;
|
||||
height: 10%;
|
||||
margin: auto;
|
||||
margin-top: 8%;
|
||||
background: url("@/assets/images/listTitle.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-size: 20px;
|
||||
font-family: OPPOSans-Bold, OPPOSans;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
}
|
||||
.electricity-icon {
|
||||
width: 60%;
|
||||
height: 50%;
|
||||
margin: auto;
|
||||
margin-top: 15%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right-box {
|
||||
width: 50%;
|
||||
margin-left: 3%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
text-align: center;
|
||||
.yesterday-use {
|
||||
width: 30%;
|
||||
height: 30%;
|
||||
margin-top: 10%;
|
||||
margin-right: 15%;
|
||||
background: url("@/assets/images/aIEarlyWarning/monthWarn.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.text {
|
||||
font-size: 16px;
|
||||
color: #65d7f9;
|
||||
margin-top: 5%;
|
||||
}
|
||||
.num {
|
||||
transform: skew(-5deg);
|
||||
font-family: sadigitalNumber;
|
||||
font-size: 24px;
|
||||
margin-top: 7%;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(180deg, #65d7f9 0%, #ffffff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
.yesterday-chain {
|
||||
width: 30%;
|
||||
height: 30%;
|
||||
margin-top: 10%;
|
||||
margin-right: 15%;
|
||||
background: url("@/assets/images/aIEarlyWarning/monthWarn.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.text {
|
||||
font-size: 16px;
|
||||
color: #65d7f9;
|
||||
margin-top: 5%;
|
||||
}
|
||||
.num {
|
||||
transform: skew(-5deg);
|
||||
font-family: sadigitalNumber;
|
||||
font-size: 24px;
|
||||
margin-top: 7%;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(180deg, #65d7f9 0%, #ffffff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
.month-use {
|
||||
width: 30%;
|
||||
height: 30%;
|
||||
margin-right: 15%;
|
||||
background: url("@/assets/images/aIEarlyWarning/weekWarn.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
margin-top: 5%;
|
||||
}
|
||||
.num {
|
||||
transform: skew(-5deg);
|
||||
font-family: sadigitalNumber;
|
||||
font-size: 24px;
|
||||
margin-top: 7%;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(180deg, #dad8b4 0%, #f4d065 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
.month-chain {
|
||||
width: 30%;
|
||||
height: 30%;
|
||||
background: url("@/assets/images/aIEarlyWarning/weekWarn.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.text {
|
||||
margin-top: 5%;
|
||||
font-size: 16px;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
.num {
|
||||
transform: skew(-5deg);
|
||||
font-family: sadigitalNumber;
|
||||
font-size: 24px;
|
||||
margin-top: 7%;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(180deg, #dad8b4 0%, #f4d065 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,20 +1,235 @@
|
||||
<template>
|
||||
<Card title="电表列表">
|
||||
<div class="edge-top-left">123</div>
|
||||
<div class="electricity-list">
|
||||
<div class="list-content">
|
||||
<div class="tab-list">
|
||||
<div style="width: 60%">电表名称</div>
|
||||
<div style="width: 20%">当前读数</div>
|
||||
</div>
|
||||
<el-scrollbar class="list-box">
|
||||
<div v-for="(item, index) in list" class="listStyle" :key="item.id">
|
||||
<!-- <div style="width: 5%">{{ index + 1 }}</div> -->
|
||||
<div style="width: 60%">{{ item.waterName }}</div>
|
||||
<div style="width: 20%">{{ item.currentNum }}</div>
|
||||
</div>
|
||||
<div class="not-data" v-if="list.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
let showDialog = ref(false as any);
|
||||
let rangeTime = ref("" as any);
|
||||
const list = reactive([
|
||||
{
|
||||
id: 1,
|
||||
waterName: "智能电表",
|
||||
currentNum: 3308.84
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
waterName: "智能电表",
|
||||
currentNum: 3308.84
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
waterName: "智能电表",
|
||||
currentNum: 3308.84
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
waterName: "智能电表",
|
||||
currentNum: 3308.84
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
waterName: "智能电表",
|
||||
currentNum: 3308.84
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
waterName: "智能电表",
|
||||
currentNum: 3308.84
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
waterName: "智能电表",
|
||||
currentNum: 3308.84
|
||||
},
|
||||
|
||||
{
|
||||
id: 8,
|
||||
waterName: "智能电表",
|
||||
currentNum: 3308.84
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
waterName: "智能电表",
|
||||
currentNum: 3308.84
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
waterName: "智能电表",
|
||||
currentNum: 3308.84
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
waterName: "智能电表",
|
||||
currentNum: 3308.84
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
waterName: "智能电表",
|
||||
currentNum: 3308.84
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
waterName: "智能电表",
|
||||
currentNum: 3308.84
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
waterName: "智能电表",
|
||||
currentNum: 3308.84
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
waterName: "智能电表",
|
||||
currentNum: 3308.84
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
waterName: "智能电表",
|
||||
currentNum: 3308.84
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
waterName: "智能电表",
|
||||
currentNum: 3308.84
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
waterName: "智能电表",
|
||||
currentNum: 3308.84
|
||||
},
|
||||
{
|
||||
id: 19,
|
||||
waterName: "智能电表",
|
||||
currentNum: 3308.84
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
waterName: "智能电表",
|
||||
currentNum: 3308.84
|
||||
},
|
||||
{
|
||||
id: 21,
|
||||
waterName: "智能电表",
|
||||
currentNum: 3308.84
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
waterName: "智能电表",
|
||||
currentNum: 3308.84
|
||||
},
|
||||
{
|
||||
id: 23,
|
||||
waterName: "智能电表",
|
||||
currentNum: 3308.84
|
||||
}
|
||||
]);
|
||||
|
||||
onMounted(async () => {});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.edge-top-left {
|
||||
<style lang="scss" scoped>
|
||||
// 选择框样式
|
||||
:deep(.el-input__wrapper) {
|
||||
width: 100%;
|
||||
height: 1%;
|
||||
background: #0d2956;
|
||||
}
|
||||
:deep(.el-range-separator) {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
:deep(.el-range-input) {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
.electricity-list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: 3%;
|
||||
box-sizing: border-box;
|
||||
padding: 2%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.list-content {
|
||||
height: 95%;
|
||||
width: 100%;
|
||||
// background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
.tab-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 12%;
|
||||
background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// position: absolute;
|
||||
left: 75.5%;
|
||||
top: 75%;
|
||||
color: #ccc;
|
||||
font-size: 14px;
|
||||
// justify-content: space-around;
|
||||
div {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.list-box {
|
||||
height: 96%;
|
||||
.list-style:nth-child(even) {
|
||||
background: rgba(39, 88, 192, 0.06);
|
||||
}
|
||||
.listStyle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
line-height: 45px;
|
||||
div {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.listStyle:hover {
|
||||
background: #091f3f;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.not-data {
|
||||
top: 73%;
|
||||
width: 12%;
|
||||
left: 44%;
|
||||
position: absolute;
|
||||
img {
|
||||
width: 40%;
|
||||
margin: 5% 30%;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
margin: -6% 37%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,20 +1,207 @@
|
||||
<template>
|
||||
<Card title="昨日用电量">
|
||||
<div class="edge-top-left">123</div>
|
||||
<div class="center-top">
|
||||
<div class="use-total">
|
||||
昨日总用电量:
|
||||
<span style="color: #65d7f9">222</span>
|
||||
度
|
||||
</div>
|
||||
<div id="electricityTopRight" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Card from "@/components/card.vue";
|
||||
import { onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import symbolIcon from "@/assets/images/lineSymbol.png";
|
||||
|
||||
function draw() {
|
||||
let chartDom = document.getElementById("electricityTopRight");
|
||||
if (chartDom) {
|
||||
chartDom.removeAttribute("_echarts_instance_");
|
||||
}
|
||||
let echartsTest = echarts.init(document.getElementById("electricityTopRight"));
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
borderRadius: 5,
|
||||
borderWidth: 5,
|
||||
formatter: function (params) {
|
||||
let dot =
|
||||
'<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:#02C4DD"></span>';
|
||||
return params[0].name + "<br>" + params[0].value;
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: "4%",
|
||||
right: "4%",
|
||||
bottom: "5%",
|
||||
top: "15%",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
data: ["智能电表", "智能电表2", "智能电表3", "智能电表4", "智能电表5"],
|
||||
triggerEvent: true,
|
||||
axisTick: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "red"
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#193c81"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
rotate: 0,
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
padding: [0, 0, 0, 0],
|
||||
fontSize: 12,
|
||||
color: "#fff"
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
triggerEvent: true,
|
||||
interval: 30,
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
padding: [0, 0, 10, 0]
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#193c81"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#193c81"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
},
|
||||
// color: ["#e54035"],
|
||||
series: [
|
||||
{
|
||||
name: "数量",
|
||||
barMinHeight: 10,
|
||||
type: "pictorialBar",
|
||||
barCategoryGap: "5%",
|
||||
// symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
|
||||
symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
//barBorderRadius: 5,
|
||||
//渐变色
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(130, 251, 234, 0)"
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(130, 251, 234, 1)"
|
||||
}
|
||||
])
|
||||
// color: function (params) {
|
||||
// console.log(params, "颜色");
|
||||
// if (params.name === "智能电表2") {
|
||||
// return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(238, 169, 89, 0)"
|
||||
// },
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(238, 169, 89, 1)"
|
||||
// }
|
||||
// ]);
|
||||
// } else {
|
||||
// return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(130, 251, 234, 0)"
|
||||
// },
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(130, 251, 234, 1)"
|
||||
// }
|
||||
// ]);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: "top",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [100, 200, 300, 100, 20, 60, 120],
|
||||
z: 10
|
||||
},
|
||||
{
|
||||
name: "hill",
|
||||
type: "line",
|
||||
color: "rgba(0,0,0,0)",
|
||||
symbol: `image://${symbolIcon}`,
|
||||
symbolSize: 20,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// color: "rgba(11,47,68,.8)"
|
||||
}
|
||||
},
|
||||
data: [100, 200, 300, 100, 20, 60, 120],
|
||||
z: 9
|
||||
}
|
||||
]
|
||||
};
|
||||
echartsTest.setOption(option);
|
||||
}
|
||||
onMounted(() => {
|
||||
draw();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.edge-top-left {
|
||||
.center-top {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: 3%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.use-total {
|
||||
position: absolute;
|
||||
top: 3%;
|
||||
left: 5%;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<div class="blue-line-chart">
|
||||
<div :id="props.lineId" :ref="props.lineId" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import symbolIcon from "@/assets/images/lineSymbol.png";
|
||||
import { onMounted, watch, ref, onBeforeUnmount } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
// import { GlobalStore } from "@/stores";
|
||||
// const store = GlobalStore();
|
||||
import mitts from "@/utils/bus"; //兄弟组件传值
|
||||
|
||||
// ts
|
||||
type Props = {
|
||||
xData?: any; // 传入x轴对应的数据
|
||||
yData?: any; // 传入y轴对应的数据
|
||||
lineId?: any; // 传入折线图dom元素对应的id
|
||||
lineSmooth?: any; // 传入折线图的平滑度 0-1,(0:折线 1:圆滑)
|
||||
};
|
||||
// withDefaults 定义默认值(传入的数据类型同默认值)
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
xData: ["09-01", "09-02", "09-03", "09-04", "09-05", "09-06", "09-07"],
|
||||
yData: [10, 5, 20, 25, 15, 25, 12],
|
||||
lineId: "waterShortTerm",
|
||||
lineSmooth: 0
|
||||
// num: () => [12, 13, 14] // 复杂数据类型使用函数方式
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.xData,
|
||||
newVal => {
|
||||
// console.log(newVal, "newVal");
|
||||
if (newVal) {
|
||||
// props.xData = newVal;
|
||||
drawChart();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 图表数据项
|
||||
let option = ref(null as any);
|
||||
|
||||
function initOption() {
|
||||
option.value = {
|
||||
// backgroundColor: '#071c3a',
|
||||
title: {
|
||||
// text: '日用气量分析',
|
||||
textStyle: {
|
||||
align: "center",
|
||||
color: "#fff",
|
||||
fontSize: 20
|
||||
},
|
||||
top: "2%",
|
||||
left: "center"
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis"
|
||||
},
|
||||
grid: {
|
||||
top: "20%",
|
||||
left: "6%",
|
||||
right: "4%",
|
||||
bottom: "10%"
|
||||
// containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
// show: true,
|
||||
color: "#f00",
|
||||
lineStyle: {
|
||||
color: "#f00"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff"
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
boundaryGap: false,
|
||||
data: props.xData
|
||||
}
|
||||
],
|
||||
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
// name: unit.value,
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
nameLocation: "start"
|
||||
},
|
||||
min: 0,
|
||||
// max: 140,
|
||||
splitNumber: 3,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
margin: 20,
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "line",
|
||||
// smooth: true, //是否平滑
|
||||
showAllSymbol: true,
|
||||
symbol: `image://${symbolIcon}`,
|
||||
// symbol: "circle",
|
||||
smooth: props.lineSmooth,
|
||||
symbolSize: 30,
|
||||
label: {
|
||||
show: false,
|
||||
position: "top",
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#97c6c8",
|
||||
borderColor: "#97c6c8",
|
||||
borderWidth: 5,
|
||||
shadowColor: "rgba(0, 0, 0, .6)",
|
||||
shadowBlur: 0,
|
||||
lineStyle: {
|
||||
width: 0.1,
|
||||
normal: {
|
||||
color: "#fff",
|
||||
shadowBlur: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
show: true
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(74, 192, 243,1)"
|
||||
},
|
||||
{
|
||||
offset: 0.9,
|
||||
color: "rgba(74, 192, 243,0.2)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(74, 192, 243, 0.1)"
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
// shadowColor: "rgba(74, 192, 243, 0.1)",
|
||||
shadowBlur: 20
|
||||
}
|
||||
},
|
||||
data: props.yData
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
function drawChart() {
|
||||
initOption();
|
||||
// console.log("绘制前数据", props.yData);
|
||||
let chartDom = document.getElementById(props.lineId);
|
||||
if (chartDom) {
|
||||
chartDom.removeAttribute("_echarts_instance_");
|
||||
}
|
||||
let waterShortTerm = echarts.init(document.getElementById(props.lineId));
|
||||
waterShortTerm.setOption(option.value);
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
drawChart();
|
||||
});
|
||||
|
||||
// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
|
||||
onBeforeUnmount(async () => {
|
||||
mitts.off("devSn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.blue-line-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
@ -1,20 +1,177 @@
|
||||
<template>
|
||||
<Card title="短期用水趋势(t)">
|
||||
<div class="edge-top-left">123</div>
|
||||
<div class="ai-top-left">
|
||||
<div class="history-content">
|
||||
<div>
|
||||
<div class="select-right">
|
||||
<div class="week selected" @click="getWeekData(1)" :class="checked == 1 ? 'active' : ''">近7日</div>
|
||||
<div class="month selected" @click="getMonthData(2)" :class="checked == 2 ? 'active' : ''">本月</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div id="waterShortTerm" ref="waterShortTerm" style="width: 100%; height: 100%"></div>
|
||||
-->
|
||||
<greenLineEchart
|
||||
:xData="xData"
|
||||
:yData="yData"
|
||||
:lineId="'waterShortTrend'"
|
||||
:lineSmooth="0"
|
||||
style="width: 100%; height: 100%"
|
||||
></greenLineEchart>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import symbolIcon from "@/assets/images/lineSymbol.png";
|
||||
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||||
import greenLineEchart from "@/views/sevenLargeScreen/greenConstruct/waterMonitor/greenLineEchart.vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import mitts from "@/utils/bus"; //兄弟组件传值
|
||||
const store = GlobalStore();
|
||||
// x轴
|
||||
let xData = ref(["09-01", "09-02", "09-03", "09-04", "09-05", "09-06", "09-07"] as any);
|
||||
// Y轴单位
|
||||
let unit = ref("单位:V" as any);
|
||||
// Y轴数据
|
||||
let yData = ref([10, 5, 20, 25, 15, 25, 12] as any);
|
||||
// 图表数据项
|
||||
let option = ref(null as any);
|
||||
|
||||
// 选中
|
||||
let checked = ref(1);
|
||||
function getWeekData(type: any) {
|
||||
checked.value = type;
|
||||
let currentWeek = getRecentSevenDays();
|
||||
// console.log(currentWeek, "近七天");
|
||||
// 模拟数据改变
|
||||
xData.value = currentWeek;
|
||||
yData.value = [20, 15, 25, 15, 25, 35, 12];
|
||||
}
|
||||
function getMonthData(type: any) {
|
||||
checked.value = type;
|
||||
let currentWeek = getPassedDaysOfMonth();
|
||||
// console.log(currentWeek.length, "本月");
|
||||
let testyData: any = [];
|
||||
for (let i = 0; i < currentWeek.length; i++) {
|
||||
testyData.push((i % 2) + 10);
|
||||
}
|
||||
xData.value = currentWeek;
|
||||
yData.value = testyData;
|
||||
}
|
||||
|
||||
//获取近七天的日期
|
||||
function getRecentSevenDays() {
|
||||
const dates: any = [];
|
||||
const millisecondsPerDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
|
||||
const today = new Date(); // 当前日期
|
||||
|
||||
for (let i = 0; i < 7; i++) {
|
||||
const date = new Date(today.getTime() - i * millisecondsPerDay);
|
||||
const month = ("0" + (date.getMonth() + 1)).slice(-2);
|
||||
const day = ("0" + date.getDate()).slice(-2);
|
||||
dates.unshift(`${month}-${day}`);
|
||||
}
|
||||
return dates;
|
||||
}
|
||||
|
||||
// 获取本月到今天的日期
|
||||
function getPassedDaysOfMonth() {
|
||||
// 存放数据的数组
|
||||
const dates: any = [];
|
||||
// 获取当前时间的时间戳
|
||||
const today = new Date();
|
||||
// 获取年
|
||||
const year = today.getFullYear();
|
||||
// 获取月
|
||||
const month = today.getMonth();
|
||||
// 获取当前月份第一天的时间戳
|
||||
const startDate = new Date(year, month, 1); // 月份从 0 开始，所以 8 表示 9 月
|
||||
|
||||
let currentDate = startDate;
|
||||
// 遍历从这个月第一天到现在的日期数
|
||||
while (currentDate <= today) {
|
||||
const month = currentDate.getMonth() + 1;
|
||||
const day = currentDate.getDate();
|
||||
dates.push(`${("0" + month).slice(-2)}-${("0" + day).slice(-2)}`);
|
||||
|
||||
currentDate.setDate(currentDate.getDate() + 1);
|
||||
}
|
||||
|
||||
return dates;
|
||||
}
|
||||
|
||||
onMounted(async () => {});
|
||||
|
||||
// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
|
||||
onBeforeUnmount(async () => {
|
||||
mitts.off("devSn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.edge-top-left {
|
||||
<style lang="scss" scoped>
|
||||
.ai-top-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: 3%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.title {
|
||||
height: 10%;
|
||||
line-height: 33px;
|
||||
text-align: left;
|
||||
font-size: calc(100vw * 18 / 1920);
|
||||
color: #ffffff;
|
||||
background: url("@/assets/images/titleBig.webp") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
i {
|
||||
font-family: OPPOSansH;
|
||||
margin-left: 6%;
|
||||
}
|
||||
}
|
||||
.history-content {
|
||||
height: 100%;
|
||||
// background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
position: relative;
|
||||
.select-right {
|
||||
width: 20%;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
right: -5%;
|
||||
top: 5%;
|
||||
.selected {
|
||||
height: 5%;
|
||||
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.week {
|
||||
width: 30%;
|
||||
margin-right: 5%;
|
||||
z-index: 99;
|
||||
}
|
||||
.month {
|
||||
width: 30%;
|
||||
z-index: 99;
|
||||
}
|
||||
.active {
|
||||
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-input__wrapper {
|
||||
background: #112d59;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-select .el-input .el-select__caret {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,20 +1,186 @@
|
||||
<template>
|
||||
<Card title="长期用水趋势(t)">
|
||||
<div class="edge-top-left">123</div>
|
||||
<div class="ai-top-left">
|
||||
<div class="history-content">
|
||||
<div>
|
||||
<div class="select-right">
|
||||
<div class="week selected" @click="getHalfYearData(1)" :class="checked == 1 ? 'active' : ''">近半年</div>
|
||||
<div class="month selected" @click="getFullYearData(2)" :class="checked == 2 ? 'active' : ''">近一年</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div id="waterShortTerm" ref="waterShortTerm" style="width: 100%; height: 100%"></div>
|
||||
-->
|
||||
<blueLineEchart
|
||||
:xData="xData"
|
||||
:yData="yData"
|
||||
:lineId="'waterLongTrend'"
|
||||
:lineSmooth="0"
|
||||
style="width: 100%; height: 100%"
|
||||
></blueLineEchart>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import symbolIcon from "@/assets/images/lineSymbol.png";
|
||||
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||||
import blueLineEchart from "@/views/sevenLargeScreen/greenConstruct/waterMonitor/blueLineEchart.vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import mitts from "@/utils/bus"; //兄弟组件传值
|
||||
const store = GlobalStore();
|
||||
// x轴
|
||||
let xData = ref(["2023-04", "2023-05", "2023-06", "2023-07", "2023-08", "2023-09"] as any);
|
||||
// Y轴单位
|
||||
let unit = ref("单位:V" as any);
|
||||
// Y轴数据
|
||||
let yData = ref([10, 5, 20, 25, 15, 25] as any);
|
||||
// 图表数据项
|
||||
let option = ref(null as any);
|
||||
|
||||
// 选中
|
||||
let checked = ref(1);
|
||||
function getHalfYearData(type: any) {
|
||||
checked.value = type;
|
||||
let currentWeek = getLastSixMonths();
|
||||
// console.log(currentWeek, "近半年");
|
||||
// 模拟数据改变
|
||||
xData.value = currentWeek;
|
||||
yData.value = [20, 15, 25, 15, 25, 35];
|
||||
}
|
||||
function getFullYearData(type: any) {
|
||||
checked.value = type;
|
||||
let currentWeek = getLastTwelveMonths();
|
||||
// // console.log(currentWeek.length, "近一年");
|
||||
xData.value = currentWeek;
|
||||
yData.value = [20, 15, 25, 15, 25, 35, 20, 15, 25, 15, 25, 35];
|
||||
}
|
||||
|
||||
// 获取近一年的日期数
|
||||
function getLastTwelveMonths() {
|
||||
let currentDate = new Date();
|
||||
let months = [];
|
||||
|
||||
for (let i = 12; i >= 1; i--) {
|
||||
let year = currentDate.getFullYear();
|
||||
let month: any = currentDate.getMonth() + 1;
|
||||
|
||||
// 格式化月份和年份
|
||||
if (month < 10) {
|
||||
month = "0" + month;
|
||||
}
|
||||
|
||||
// 拼接成 yyyy-mm 格式
|
||||
let formattedDate: any = year + "-" + month;
|
||||
|
||||
// 将格式化后的日期添加到数组中
|
||||
months.unshift(formattedDate);
|
||||
|
||||
// 将当前日期减去一个月
|
||||
currentDate.setMonth(currentDate.getMonth() - 1);
|
||||
}
|
||||
|
||||
return months;
|
||||
}
|
||||
|
||||
// 获取近半年日期数
|
||||
function getLastSixMonths() {
|
||||
let currentDate = new Date();
|
||||
let months = [];
|
||||
|
||||
for (let i = 6; i >= 1; i--) {
|
||||
let year = currentDate.getFullYear();
|
||||
let month: any = currentDate.getMonth() + 1;
|
||||
|
||||
// 格式化月份和年份
|
||||
if (month < 10) {
|
||||
month = "0" + month;
|
||||
}
|
||||
|
||||
// 拼接成 yyyy-mm 格式
|
||||
let formattedDate: any = year + "-" + month;
|
||||
|
||||
// 将格式化后的日期添加到数组中
|
||||
months.unshift(formattedDate);
|
||||
|
||||
// 将当前日期减去一个月
|
||||
currentDate.setMonth(currentDate.getMonth() - 1);
|
||||
}
|
||||
|
||||
return months;
|
||||
}
|
||||
|
||||
onMounted(async () => {});
|
||||
|
||||
// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
|
||||
onBeforeUnmount(async () => {
|
||||
mitts.off("devSn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.edge-top-left {
|
||||
<style lang="scss" scoped>
|
||||
.ai-top-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: 3%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.title {
|
||||
height: 10%;
|
||||
line-height: 33px;
|
||||
text-align: left;
|
||||
font-size: calc(100vw * 18 / 1920);
|
||||
color: #ffffff;
|
||||
background: url("@/assets/images/titleBig.webp") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
i {
|
||||
font-family: OPPOSansH;
|
||||
margin-left: 6%;
|
||||
}
|
||||
}
|
||||
.history-content {
|
||||
height: 100%;
|
||||
// background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
position: relative;
|
||||
.select-right {
|
||||
width: 20%;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
right: -5%;
|
||||
top: 5%;
|
||||
.selected {
|
||||
height: 5%;
|
||||
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.week {
|
||||
width: 30%;
|
||||
margin-right: 5%;
|
||||
z-index: 99;
|
||||
}
|
||||
.month {
|
||||
width: 30%;
|
||||
z-index: 99;
|
||||
}
|
||||
.active {
|
||||
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-input__wrapper {
|
||||
background: #112d59;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-select .el-input .el-select__caret {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<div class="green-line-chart">
|
||||
<div :id="props.lineId" :ref="props.lineId" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import symbolIcon from "@/assets/images/lineSymbol.png";
|
||||
import { onMounted, watch, ref, onBeforeUnmount } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
// import { GlobalStore } from "@/stores";
|
||||
// const store = GlobalStore();
|
||||
import mitts from "@/utils/bus"; //兄弟组件传值
|
||||
|
||||
// ts
|
||||
type Props = {
|
||||
xData?: any; // 传入x轴对应的数据
|
||||
yData?: any; // 传入y轴对应的数据
|
||||
lineId?: any; // 传入折线图dom元素对应的id
|
||||
lineSmooth?: any; // 传入折线图的平滑度 0-1,(0:折线 1:圆滑)
|
||||
};
|
||||
// withDefaults 定义默认值(传入的数据类型同默认值)
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
xData: ["09-01", "09-02", "09-03", "09-04", "09-05", "09-06", "09-07"],
|
||||
yData: [10, 5, 20, 25, 15, 25, 12],
|
||||
lineId: "waterShortTerm",
|
||||
lineSmooth: 0
|
||||
// num: () => [12, 13, 14] // 复杂数据类型使用函数方式
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.xData,
|
||||
newVal => {
|
||||
// console.log(newVal, "newVal");
|
||||
if (newVal) {
|
||||
// props.xData = newVal;
|
||||
drawChart();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 图表数据项
|
||||
let option = ref(null as any);
|
||||
|
||||
function initOption() {
|
||||
option.value = {
|
||||
// backgroundColor: '#071c3a',
|
||||
title: {
|
||||
// text: '日用气量分析',
|
||||
textStyle: {
|
||||
align: "center",
|
||||
color: "#fff",
|
||||
fontSize: 20
|
||||
},
|
||||
top: "2%",
|
||||
left: "center"
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis"
|
||||
},
|
||||
grid: {
|
||||
top: "20%",
|
||||
left: "6%",
|
||||
right: "4%",
|
||||
bottom: "10%"
|
||||
// containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
// show: true,
|
||||
color: "#f00",
|
||||
lineStyle: {
|
||||
color: "#f00"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff"
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
boundaryGap: false,
|
||||
data: props.xData
|
||||
}
|
||||
],
|
||||
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
// name: unit.value,
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
nameLocation: "start"
|
||||
},
|
||||
min: 0,
|
||||
// max: 140,
|
||||
splitNumber: 3,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
margin: 20,
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "line",
|
||||
// smooth: true, //是否平滑
|
||||
showAllSymbol: true,
|
||||
symbol: `image://${symbolIcon}`,
|
||||
// symbol: "circle",
|
||||
smooth: props.lineSmooth,
|
||||
symbolSize: 30,
|
||||
label: {
|
||||
show: false,
|
||||
position: "top",
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#97c6c8",
|
||||
borderColor: "#97c6c8",
|
||||
borderWidth: 5,
|
||||
shadowColor: "rgba(0, 0, 0, .6)",
|
||||
shadowBlur: 0,
|
||||
lineStyle: {
|
||||
width: 0.1,
|
||||
normal: {
|
||||
color: "#fff",
|
||||
shadowBlur: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
show: true
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(130, 251, 234,0.7)"
|
||||
},
|
||||
{
|
||||
offset: 0.8,
|
||||
color: "rgba(130, 251, 234,0.1)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(130, 251, 234, 0)"
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
// shadowColor: "rgba(130, 251, 234, 0.2)",
|
||||
shadowBlur: 20
|
||||
}
|
||||
},
|
||||
data: props.yData
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
function drawChart() {
|
||||
initOption();
|
||||
// console.log("绘制前数据", props.yData);
|
||||
let chartDom = document.getElementById(props.lineId);
|
||||
if (chartDom) {
|
||||
chartDom.removeAttribute("_echarts_instance_");
|
||||
}
|
||||
let waterShortTerm = echarts.init(document.getElementById(props.lineId));
|
||||
waterShortTerm.setOption(option.value);
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
drawChart();
|
||||
});
|
||||
|
||||
// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
|
||||
onBeforeUnmount(async () => {
|
||||
mitts.off("devSn");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.green-line-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
@ -64,16 +64,16 @@ export default {
|
||||
height: 48%;
|
||||
display: flex;
|
||||
.bottomLeft {
|
||||
width: 33%;
|
||||
width: 50%;
|
||||
margin-right: 1%;
|
||||
:deep(.h-card) {
|
||||
.content {
|
||||
margin-top: 2% !important;
|
||||
margin-top: 1% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottomRight {
|
||||
width: 66%;
|
||||
width: 49%;
|
||||
:deep(.h-card) {
|
||||
.content {
|
||||
margin-top: 1% !important;
|
||||
|
||||
@ -1,6 +1,11 @@
|
||||
<template>
|
||||
<Card title="昨日用水量(t)">
|
||||
<div class="center-top">
|
||||
<div class="use-total">
|
||||
昨日总用水量:
|
||||
<span style="color: #65d7f9">222</span>
|
||||
吨
|
||||
</div>
|
||||
<div id="educationCenterTop" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</Card>
|
||||
@ -189,5 +194,14 @@ onMounted(() => {
|
||||
.center-top {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.use-total {
|
||||
position: absolute;
|
||||
top: 3%;
|
||||
left: 5%;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user