shenzhen-dev #2
@ -11,10 +11,10 @@ NODE_ENV = "production"
|
||||
# VITE_API_URL = "http://183.249.224.118:9003"
|
||||
|
||||
# 百色 新项目通用地址
|
||||
VITE_API_URL = 'http://101.43.164.214:11111'
|
||||
# VITE_API_URL = 'http://101.43.164.214:11111'
|
||||
|
||||
# 七参数标准版(演示平台)
|
||||
# VITE_API_URL = 'http://jxj.zhgdyun.com:9809'
|
||||
VITE_API_URL = 'http://jxj.zhgdyun.com:9809'
|
||||
# 七参数标准版(测试平台)
|
||||
# VITE_API_URL = 'http://jxj.zhgdyun.com:15551'
|
||||
|
||||
|
||||
@ -22,3 +22,24 @@ export const getElectricityUseRecord = (params: {}) => {
|
||||
export const getElectricityUseTrend = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/ammeterRecordDetail/queryUseRecordTrend`, params);
|
||||
};
|
||||
|
||||
// ------- 用水监测 -------
|
||||
// 水表列表
|
||||
export const getWaterList = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/waterMeter/list`, params);
|
||||
};
|
||||
|
||||
// 统计水表读数
|
||||
export const getWaterTotal = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/waterMeterRecordDetail/countWaterMeterRecordDetail`, params);
|
||||
};
|
||||
|
||||
// 列表查询水表用水量 type = 1:昨日用水量
|
||||
export const getWaterUseRecord = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/waterMeterRecordDetail/queryUseRecord`, params);
|
||||
};
|
||||
|
||||
// 查询用水趋势 type 1近7天 2本月 3近半年 4近一年
|
||||
export const getWaterUseTrend = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/waterMeterRecordDetail/queryUseRecordTrend`, params);
|
||||
};
|
||||
|
||||
29
src/api/modules/standardCureRoom.ts
Normal file
29
src/api/modules/standardCureRoom.ts
Normal file
@ -0,0 +1,29 @@
|
||||
// 智慧党建接口API
|
||||
import http from "@/api";
|
||||
const BASEURL = import.meta.env.VITE_API_URL;
|
||||
|
||||
// 实时数据
|
||||
export const selectNewCurrentDataApi = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/standardCurrentData/selectNewCurrentData`, params);
|
||||
};
|
||||
|
||||
export const selectDayCurrentDataListApi = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/standardCurrentData/selectDayCurrentDataList`, params);
|
||||
};
|
||||
// 获取告警列表
|
||||
export const getStandardAlarmStatisticsApi = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/standardAlarm/getStandardAlarmStatistics`, params);
|
||||
};
|
||||
|
||||
export const getHistoryApi = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/standardCurrentData/list`, params);
|
||||
};
|
||||
// 设备列表
|
||||
export const getstandardDevListApi = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/standardDev/list`, params);
|
||||
};
|
||||
|
||||
// 设备列表
|
||||
export const getMonitorData = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/standardCurrentData/countStandardCurrentData`, params);
|
||||
};
|
||||
@ -23,9 +23,10 @@ export const BAIDU_MAP_KEY: string = "";
|
||||
export const BASE_IMAGE_URL = import.meta.env.VITE_BASE_IMAGE_URL;
|
||||
|
||||
// 项目环境标识配置 部署时需更改对应的项目
|
||||
export const COMPANY: string = ""; //标准版
|
||||
// export const COMPANY: string = ""; //标准版
|
||||
// export const COMPANY: string = "jsyc"; // 江苏盐城项目
|
||||
|
||||
// export const COMPANY: string = "syhy"; //沈阳合盈盘锦项目
|
||||
// export const COMPANY: string = "jxwjj"; //嘉兴王江泾公用码头项目
|
||||
// export const COMPANY: string = "phmw"; //鄱湖美湾医疗、医美产业集群项目
|
||||
export const COMPANY: string = "xjnb"; // 新建宁波项目
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
// 项目对应菜单配置
|
||||
// 新项目对应菜单配置
|
||||
export const commonMenu: Array<any> = [
|
||||
{
|
||||
moduleName: "综合管理",
|
||||
@ -243,3 +243,90 @@ export const JSYCMenu: Array<any> = [
|
||||
]
|
||||
}
|
||||
]; //江苏盐城项目
|
||||
|
||||
export const XJNBMenu: Array<any> = [
|
||||
{
|
||||
moduleName: "综合管理",
|
||||
modulePath: "/projectOverview",
|
||||
menuList: [
|
||||
{
|
||||
menuName: "工程概况",
|
||||
companyPath: "/projectOverview"
|
||||
},
|
||||
{
|
||||
menuName: "智慧党建",
|
||||
companyPath: "/smartPartyBuilding"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
moduleName: "劳务管理",
|
||||
modulePath: "/laborManagement",
|
||||
menuList: [
|
||||
{
|
||||
menuName: "劳务管理",
|
||||
companyPath: "/laborManagement"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
moduleName: "视频监控",
|
||||
modulePath: "/videoManagement",
|
||||
menuList: [
|
||||
{
|
||||
menuName: "视频监控",
|
||||
companyPath: "/videoManagement"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
moduleName: "安全管理",
|
||||
modulePath: "/securityManagement",
|
||||
menuList: [
|
||||
{
|
||||
menuName: "安全管理",
|
||||
companyPath: "/securityManagement"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
moduleName: "有毒气体监测",
|
||||
modulePath: "/toxicGasMonitor",
|
||||
menuList: [
|
||||
{
|
||||
menuName: "有毒气体监测",
|
||||
companyPath: "/toxicGasMonitor"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
moduleName: "AI预警",
|
||||
modulePath: "/aIEarlyWarning",
|
||||
menuList: [
|
||||
{
|
||||
menuName: "AI预警",
|
||||
companyPath: "/aIEarlyWarning"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
moduleName: "隧道定位监测",
|
||||
modulePath: "/tunnelPosition",
|
||||
menuList: [
|
||||
{
|
||||
menuName: "隧道定位监测",
|
||||
companyPath: "/tunnelPosition"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
moduleName: "进度计划",
|
||||
modulePath: "/schedulePlan",
|
||||
menuList: [
|
||||
{
|
||||
menuName: "进度计划",
|
||||
companyPath: "/schedulePlan"
|
||||
}
|
||||
]
|
||||
}
|
||||
]; // 新建宁波项目
|
||||
|
||||
@ -12,9 +12,9 @@
|
||||
<div v-for="(item, index) in list" class="list-style" :key="item.id">
|
||||
<div>{{ index + 1 }}</div>
|
||||
<!-- <div>{{ item.dev }}</div> -->
|
||||
<div>{{ item.devName }}</div>
|
||||
<div style="margin-right: 0.5%">{{ item.warnTime }}</div>
|
||||
<div>{{ item.warnType }}</div>
|
||||
<div>{{ item.laboratoryName }}</div>
|
||||
<div style="margin-right: 0.5%">{{ item.alarmTime }}</div>
|
||||
<div>{{ item.alarmType }}</div>
|
||||
</div>
|
||||
<div class="not-data" v-if="list.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
@ -28,109 +28,31 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
import { reactive, ref, onMounted, onBeforeUnmount } from "vue";
|
||||
import textIcon from "@/assets/images/vehicleManagement/car.png";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import mitts from "@/utils/bus"; //兄弟组件传值
|
||||
const store = GlobalStore();
|
||||
let showDialog = ref(false as any);
|
||||
const list = reactive([
|
||||
{
|
||||
id: 1,
|
||||
devName: "标养室设备",
|
||||
warnType: "温度过低报警",
|
||||
warnTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
devName: "标养室设备",
|
||||
warnType: "温度过低报警",
|
||||
warnTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
devName: "标养室设备",
|
||||
warnType: "温度过低报警",
|
||||
warnTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
devName: "标养室设备",
|
||||
warnType: "温度过低报警",
|
||||
warnTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
devName: "标养室设备",
|
||||
warnType: "温度过低报警",
|
||||
warnTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
devName: "标养室设备",
|
||||
warnType: "温度过低报警",
|
||||
warnTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
devName: "标养室设备",
|
||||
warnType: "温度过低报警",
|
||||
warnTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
const list = ref([]) as any;
|
||||
|
||||
{
|
||||
id: 8,
|
||||
devName: "标养室设备",
|
||||
dev: "未知",
|
||||
warnType: "温度过低报警",
|
||||
warnTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
devName: "标养室设备",
|
||||
dev: "未知",
|
||||
warnType: "温度过低报警",
|
||||
warnTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
devName: "标养室设备",
|
||||
dev: "未知",
|
||||
warnType: "温度过低报警",
|
||||
warnTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
devName: "标养室设备",
|
||||
dev: "未知",
|
||||
warnType: "温度过低报警",
|
||||
warnTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
devName: "标养室设备",
|
||||
dev: "未知",
|
||||
warnType: "温度过低报警",
|
||||
warnTime: "2023-01-01 12:00:00"
|
||||
}
|
||||
]);
|
||||
onMounted(async () => {
|
||||
mitts.on("standardAlarmList", e => {
|
||||
console.log("左侧告警列表接收", e);
|
||||
list.value = e;
|
||||
});
|
||||
});
|
||||
|
||||
onMounted(async () => {});
|
||||
onBeforeUnmount(async () => {
|
||||
mitts.off("standardAlarmList");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list-detail {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
background: rgba(7, 28, 49, 0.5);
|
||||
z-index: 20;
|
||||
}
|
||||
.bottom-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
padding: 2%;
|
||||
.left-content {
|
||||
height: 100%;
|
||||
@ -179,12 +101,13 @@ onMounted(async () => {});
|
||||
}
|
||||
}
|
||||
.not-data {
|
||||
top: 73%;
|
||||
width: 12%;
|
||||
left: 44%;
|
||||
top: 23%;
|
||||
width: 30%;
|
||||
left: 40%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 40%;
|
||||
width: 30%;
|
||||
margin: 5% 30%;
|
||||
}
|
||||
p {
|
||||
|
||||
@ -10,6 +10,10 @@
|
||||
</div>
|
||||
<div id="monitorRecord" ref="monitorRecord" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
<div class="not-data" v-if="twenty_four_time.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
@ -18,6 +22,7 @@
|
||||
import Card from "@/components/card.vue";
|
||||
import symbolIcon from "@/assets/images/lineSymbol.png";
|
||||
import symbolIcon2 from "@/assets/images/lineSymbol2.png";
|
||||
import { getMonitorData } from "@/api/modules/standardCureRoom";
|
||||
|
||||
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
@ -27,11 +32,11 @@ import { GlobalStore } from "@/stores";
|
||||
import mitts from "@/utils/bus"; //兄弟组件传值
|
||||
const store = GlobalStore();
|
||||
// x轴
|
||||
let twenty_four_time = ref(["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00"] as any);
|
||||
let twenty_four_time = ref([] as any);
|
||||
// Y轴单位
|
||||
let unit = ref("单位:V" as any);
|
||||
// Y轴数据
|
||||
let yData = ref([10, 5, 20, 25, 15, 25, 12, 13, 14, 20] as any);
|
||||
let yData = ref([] as any);
|
||||
// 图表数据项
|
||||
let option = ref(null as any);
|
||||
// 选中
|
||||
@ -42,13 +47,17 @@ function getNowData(type: any) {
|
||||
checked.value = type;
|
||||
nowType.value = "温度";
|
||||
// 初始化option
|
||||
// initOption();
|
||||
twenty_four_time.value = monitorRecordData.value.map((item: any) => item.time);
|
||||
yData.value = monitorRecordData.value.map((item: any) => Number(item.temperature));
|
||||
drawChart();
|
||||
}
|
||||
function getWeekData(type: any) {
|
||||
checked.value = type;
|
||||
nowType.value = "湿度";
|
||||
// 初始化option
|
||||
// initOption();
|
||||
twenty_four_time.value = monitorRecordData.value.map((item: any) => item.time);
|
||||
yData.value = monitorRecordData.value.map((item: any) => Number(item.humidity));
|
||||
drawChart();
|
||||
}
|
||||
|
||||
function initOption() {
|
||||
@ -261,14 +270,31 @@ function drawChart() {
|
||||
// timeArrays.forEach((item, index) => (timeArrays[index] = (index < 10 ? "0" + index : index) + ":00"));
|
||||
// return timeArrays;
|
||||
// }
|
||||
|
||||
onMounted(async () => {
|
||||
let monitorId = ref("") as any;
|
||||
let monitorRecordData = ref([]) as any;
|
||||
const getCurrentMonitor = async () => {
|
||||
const res: any = await getMonitorData({ projectSn: store.sn, devSn: monitorId.value });
|
||||
console.log("获取监测记录", res);
|
||||
monitorRecordData.value = res.result;
|
||||
twenty_four_time.value = res.result.map((item: any) => item.time);
|
||||
yData.value = res.result.map((item: any) => Number(item.temperature));
|
||||
drawChart();
|
||||
};
|
||||
|
||||
// onBeforeUnmount(async () => {
|
||||
// mitts.off("standardMonitor");
|
||||
// });
|
||||
onMounted(async () => {
|
||||
mitts.on("standardId", e => {
|
||||
console.log("监测记录接收", e);
|
||||
monitorId.value = e;
|
||||
getCurrentMonitor();
|
||||
});
|
||||
// getCurrentMonitor();
|
||||
});
|
||||
|
||||
// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
|
||||
onBeforeUnmount(async () => {
|
||||
mitts.off("devSn");
|
||||
mitts.off("standardId");
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -276,6 +302,7 @@ onBeforeUnmount(async () => {
|
||||
.bottom-right-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.title {
|
||||
height: 10%;
|
||||
line-height: 33px;
|
||||
@ -341,4 +368,20 @@ onBeforeUnmount(async () => {
|
||||
::v-deep .el-select .el-input .el-select__caret {
|
||||
color: #fff;
|
||||
}
|
||||
.not-data {
|
||||
top: 23%;
|
||||
width: 30%;
|
||||
left: 40%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 30%;
|
||||
margin: 5% 30%;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
margin: -6% 37%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
<Card title="今日报警">
|
||||
<div class="top-center">
|
||||
<div class="today-warn">
|
||||
<div class="warn-num">24</div>
|
||||
<div class="warn-num">{{ todayWarnTime }}</div>
|
||||
<div class="warn-text">今日报警次数</div>
|
||||
</div>
|
||||
<div class="select-right">
|
||||
<el-select v-model="selectDay" style="width: 85%" size="small">
|
||||
<el-option v-for="(item, index) in dayList" :key="index" :label="item.dayType" :value="item.value" />
|
||||
<el-select v-model="selectStandard" style="width: 85%" size="small" @change="selectChange">
|
||||
<el-option v-for="(item, index) in devList" :key="index" :label="item.laboratoryName" :value="item.devSn" />
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
@ -16,27 +16,78 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import Card from "@/components/card.vue";
|
||||
import { ref } from "vue";
|
||||
// 当前对应的种类
|
||||
let selectDay = ref(1);
|
||||
let dayList = ref([
|
||||
{
|
||||
value: 1,
|
||||
dayType: "标养室1"
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
dayType: "标养室2"
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
dayType: "标养室3"
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
dayType: "标养室4"
|
||||
}
|
||||
]);
|
||||
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||||
import {
|
||||
getstandardDevListApi,
|
||||
selectNewCurrentDataApi,
|
||||
getStandardAlarmStatisticsApi,
|
||||
selectDayCurrentDataListApi
|
||||
} from "@/api/modules/standardCureRoom";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
import mitts from "@/utils/bus"; //兄弟组件传值
|
||||
let todayWarnTime = ref(0) as any;
|
||||
let selectStandard = ref("" as any);
|
||||
// 获取标养室设备
|
||||
const devList = ref([] as any);
|
||||
const getStandardTotal = async () => {
|
||||
const res: any = await getstandardDevListApi({ projectSn: store.sn });
|
||||
console.log("获取设备", res);
|
||||
devList.value = res.result;
|
||||
selectStandard.value = res.result[0].devSn;
|
||||
mitts.emit("standardId", res.result[0].devSn);
|
||||
getTodayWarn();
|
||||
getNewCurrentData();
|
||||
// getTodayMonitor();
|
||||
};
|
||||
|
||||
const getTodayWarn = async () => {
|
||||
const res: any = await getStandardAlarmStatisticsApi({ projectSn: store.sn, devSn: selectStandard.value });
|
||||
console.log("获取当前设备报警数据", res);
|
||||
mitts.emit("standardAlarmList", res.result.alarmList);
|
||||
todayWarnTime.value = res.result.currentDayAlarmNum;
|
||||
};
|
||||
|
||||
// const getTodayMonitor = async () => {
|
||||
// const res: any = await selectDayCurrentDataListApi({ projectSn: store.sn, devSn: selectStandard.value });
|
||||
// console.log("获取当前设备监测数据", res);
|
||||
// mitts.emit("standardMonitor", res.result);
|
||||
// };
|
||||
|
||||
let currentData = ref({} as any);
|
||||
const getNewCurrentData = async () => {
|
||||
const res: any = await selectNewCurrentDataApi({ projectSn: store.sn, devSn: selectStandard.value });
|
||||
console.log("获取当前设备实时数据", res);
|
||||
currentData.value = res.result;
|
||||
mitts.emit("standardTemplate", Number(res.result.temperature));
|
||||
mitts.emit("standardHumidity", Number(res.result.humidity));
|
||||
// if (currentData.value) {
|
||||
// mitts.emit("standardTemplate", Number(res.result.temperature));
|
||||
// mitts.emit("standardHumidity", Number(res.result.humidity));
|
||||
// } else {
|
||||
// mitts.emit("standardTemplate", 0);
|
||||
// mitts.emit("standardHumidity", 0);
|
||||
// }
|
||||
};
|
||||
const selectChange = async (e: any) => {
|
||||
console.log("切换设备", e);
|
||||
selectStandard.value = e;
|
||||
mitts.emit("standardId", e);
|
||||
getTodayWarn();
|
||||
getNewCurrentData();
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
getStandardTotal();
|
||||
});
|
||||
|
||||
// 即时销毁事件总线派发，否则会执行两次mitts.on造成不必要的内存浪费 7.14 by CJP
|
||||
onBeforeUnmount(async () => {
|
||||
mitts.off("standardId");
|
||||
mitts.off("standardTemplate");
|
||||
mitts.off("standardHumidity");
|
||||
mitts.off("standardAlarmList");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<Card title="实时温度监测">
|
||||
<div class="top-left-box">
|
||||
<div class="humidity-pic">
|
||||
<div class="humidity-pic" v-if="realValue != null">
|
||||
<img src="@/assets/images/standardCureRoom/yuanZhu.png" alt="" />
|
||||
</div>
|
||||
<div class="humidity-detail">
|
||||
<div class="humidity-detail" v-if="realValue != null">
|
||||
<div class="text-detail">
|
||||
<i>温度: {{ realValue }}℃</i>
|
||||
</div>
|
||||
@ -12,7 +12,16 @@
|
||||
<img src="@/assets/images/standardCureRoom/thermometer.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="realtimeTemp" ref="realtimeTemp" style="width: 80%; height: 85%; padding-left: 12%; padding-top: 10%"></div>
|
||||
<div
|
||||
v-if="realValue != null"
|
||||
id="realtimeTemp"
|
||||
ref="realtimeTemp"
|
||||
style="width: 80%; height: 85%; padding-left: 12%; padding-top: 10%"
|
||||
></div>
|
||||
<div class="not-data" v-if="realValue === null">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
@ -21,11 +30,13 @@
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { getAirQualityStatisticsApi } from "@/api/modules/headNoise";
|
||||
import * as echarts from "echarts";
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { onBeforeUnmount, onMounted, reactive, ref } from "vue";
|
||||
import Card from "@/components/card.vue";
|
||||
const store = GlobalStore();
|
||||
import mitts from "@/utils/bus"; //兄弟组件传值
|
||||
|
||||
let option = ref();
|
||||
let realValue = ref(-12);
|
||||
let realValue = ref(-12) as any;
|
||||
function initOption() {
|
||||
let TP_value = 0; // 展示温度
|
||||
TP_value = realValue.value;
|
||||
@ -436,9 +447,19 @@ function drawChart() {
|
||||
// myEchart.resize();
|
||||
// }
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
mitts.on("standardTemplate", e => {
|
||||
console.log("左侧温度接收", e);
|
||||
realValue.value = Number(e);
|
||||
initOption();
|
||||
});
|
||||
initOption();
|
||||
});
|
||||
|
||||
onBeforeUnmount(async () => {
|
||||
mitts.off("standardTemplate");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -486,4 +507,20 @@ onMounted(async () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
.not-data {
|
||||
top: 30%;
|
||||
width: 50%;
|
||||
left: 20%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 40%;
|
||||
margin: 5% 30%;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
margin: -6% 37%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<Card title="实时湿度监测">
|
||||
<div class="top-right-box">
|
||||
<div class="humidity-pic">
|
||||
<div class="humidity-pic" v-if="realValue != null">
|
||||
<img src="@/assets/images/standardCureRoom/yuanZhu.png" alt="" />
|
||||
</div>
|
||||
<div class="humidity-detail">
|
||||
<div class="humidity-detail" v-if="realValue != null">
|
||||
<div class="text-detail">
|
||||
<i>湿度: {{ realValue }}%RH</i>
|
||||
</div>
|
||||
@ -13,10 +13,15 @@
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="realValue != null"
|
||||
id="realtimeHumidity"
|
||||
ref="realtimeHumidity"
|
||||
style="width: 80%; height: 85%; padding-left: 12%; padding-top: 10%"
|
||||
></div>
|
||||
<div class="not-data" v-if="realValue === null">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
@ -25,8 +30,10 @@
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { getAirQualityStatisticsApi } from "@/api/modules/headNoise";
|
||||
import * as echarts from "echarts";
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { onBeforeUnmount, onMounted, reactive, ref } from "vue";
|
||||
import Card from "@/components/card.vue";
|
||||
import mitts from "@/utils/bus"; //兄弟组件传值
|
||||
|
||||
const store = GlobalStore();
|
||||
let option = ref();
|
||||
let realValue = ref(120 as any);
|
||||
@ -61,7 +68,7 @@ function initOption() {
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log("刻度", kd);
|
||||
// console.log("刻度", kd);
|
||||
for (let i = 0, len = 145; i <= len; i++) {
|
||||
if (i < 10 || i > 130) {
|
||||
kd2.push("");
|
||||
@ -436,9 +443,19 @@ function drawChart() {
|
||||
// myEchart.resize();
|
||||
// }
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
mitts.on("standardHumidity", e => {
|
||||
console.log("右侧湿度接收", e);
|
||||
realValue.value = Number(e);
|
||||
initOption();
|
||||
});
|
||||
initOption();
|
||||
});
|
||||
|
||||
onBeforeUnmount(async () => {
|
||||
mitts.off("standardHumidity");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -486,4 +503,20 @@ onMounted(async () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
.not-data {
|
||||
top: 30%;
|
||||
width: 50%;
|
||||
left: 20%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 40%;
|
||||
margin: 5% 30%;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
margin: -6% 37%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
<template>
|
||||
<div class="blue-line-chart">
|
||||
<div :id="props.lineId" :ref="props.lineId" style="width: 100%; height: 100%"></div>
|
||||
<div class="not-data" v-if="props.xData.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -222,4 +226,18 @@ onBeforeUnmount(async () => {
|
||||
position: relative;
|
||||
// transform: rotate(90deg);
|
||||
}
|
||||
.not-data {
|
||||
top: 40%;
|
||||
width: 30%;
|
||||
left: 35%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 50%;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<Card title="短期用水趋势(t)">
|
||||
<Card title="短期用水趋势">
|
||||
<div class="ai-top-left">
|
||||
<div class="history-content">
|
||||
<div>
|
||||
@ -13,7 +13,7 @@
|
||||
<greenLineEchart
|
||||
:xData="xData"
|
||||
:yData="yData"
|
||||
:lineId="'waterShortTrend'"
|
||||
:lineId="'WaterShortTrend'"
|
||||
:lineSmooth="0"
|
||||
style="width: 100%; height: 100%"
|
||||
></greenLineEchart>
|
||||
@ -24,89 +24,47 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import symbolIcon from "@/assets/images/lineSymbol.png";
|
||||
import { getWaterUseTrend } from "@/api/modules/greenConstruct";
|
||||
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);
|
||||
let xData = ref([] as any);
|
||||
// Y轴数据
|
||||
let yData = ref([10, 5, 20, 35, 25, 15, 12] as any);
|
||||
// 图表数据项
|
||||
// let option = ref(null as any);
|
||||
let yData = ref([] 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];
|
||||
getShortTrend();
|
||||
}
|
||||
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;
|
||||
getShortTrend();
|
||||
}
|
||||
let meterId = ref("" as any);
|
||||
const getShortTrend = async () => {
|
||||
const res: any = await getWaterUseTrend({ projectSn: store.sn, type: checked.value, waterMeterNo: meterId.value });
|
||||
xData.value = res.result.map((item: any) => item.x);
|
||||
yData.value = res.result.map((item: any) => item.y);
|
||||
console.log("获取短期趋势", res);
|
||||
};
|
||||
|
||||
//获取近七天的日期
|
||||
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 () => {});
|
||||
onMounted(async () => {
|
||||
mitts.on("waterId", e => {
|
||||
// console.log("当前水表对应短期趋势", e);
|
||||
meterId.value = e;
|
||||
getShortTrend();
|
||||
});
|
||||
// getShortTrend();
|
||||
});
|
||||
|
||||
// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
|
||||
onBeforeUnmount(async () => {
|
||||
mitts.off("devSn");
|
||||
mitts.off("waterId");
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -118,7 +76,7 @@ onBeforeUnmount(async () => {
|
||||
height: 10%;
|
||||
line-height: 33px;
|
||||
text-align: left;
|
||||
font-size: calc(100vw * 18 / 1920);
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
background: url("@/assets/images/titleBig.webp") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
@ -1,19 +1,17 @@
|
||||
<template>
|
||||
<Card title="长期用水趋势(t)">
|
||||
<Card title="长期用水趋势">
|
||||
<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 class="week selected" @click="getHalfYearData(3)" :class="checked == 3 ? 'active' : ''">近半年</div>
|
||||
<div class="month selected" @click="getFullYearData(4)" :class="checked == 4 ? 'active' : ''">近一年</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div id="waterShortTerm" ref="waterShortTerm" style="width: 100%; height: 100%"></div>
|
||||
-->
|
||||
<blueLineEchart
|
||||
:xData="xData"
|
||||
:yData="yData"
|
||||
:lineId="'waterLongTrend'"
|
||||
:lineId="'WaterLongTrend'"
|
||||
:lineSmooth="0"
|
||||
style="width: 100%; height: 100%"
|
||||
></blueLineEchart>
|
||||
@ -24,98 +22,48 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import symbolIcon from "@/assets/images/lineSymbol.png";
|
||||
import { getWaterUseTrend } from "@/api/modules/greenConstruct";
|
||||
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);
|
||||
let xData = ref([] as any);
|
||||
// Y轴数据
|
||||
let yData = ref([10, 5, 20, 25, 15, 25] as any);
|
||||
// 图表数据项
|
||||
let option = ref(null as any);
|
||||
let yData = ref([] as any);
|
||||
|
||||
// 选中
|
||||
let checked = ref(1);
|
||||
let checked = ref(3);
|
||||
function getHalfYearData(type: any) {
|
||||
checked.value = type;
|
||||
let currentWeek = getLastSixMonths();
|
||||
// console.log(currentWeek, "近半年");
|
||||
// 模拟数据改变
|
||||
xData.value = currentWeek;
|
||||
yData.value = [20, 15, 25, 15, 25, 35];
|
||||
getLongTrend();
|
||||
}
|
||||
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];
|
||||
getLongTrend();
|
||||
}
|
||||
let meterId = ref("" as any);
|
||||
|
||||
// 获取近一年的日期数
|
||||
function getLastTwelveMonths() {
|
||||
let currentDate = new Date();
|
||||
let months = [];
|
||||
const getLongTrend = async () => {
|
||||
const res: any = await getWaterUseTrend({ projectSn: store.sn, type: checked.value, waterMeterNo: meterId.value });
|
||||
xData.value = res.result.map((item: any) => item.x);
|
||||
yData.value = res.result.map((item: any) => item.y);
|
||||
console.log("获取长期趋势", res);
|
||||
};
|
||||
|
||||
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 () => {});
|
||||
onMounted(async () => {
|
||||
mitts.on("waterId", e => {
|
||||
// console.log("当前水表对应长期趋势", e);
|
||||
meterId.value = e;
|
||||
getLongTrend();
|
||||
});
|
||||
// getLongTrend();
|
||||
});
|
||||
|
||||
// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
|
||||
onBeforeUnmount(async () => {
|
||||
mitts.off("devSn");
|
||||
mitts.off("waterId");
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
<template>
|
||||
<div class="green-line-chart">
|
||||
<div :id="props.lineId" :ref="props.lineId" style="width: 100%; height: 100%"></div>
|
||||
<div class="not-data" v-if="props.xData.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -22,8 +26,10 @@ type Props = {
|
||||
};
|
||||
// withDefaults 定义默认值(传入的数据类型同默认值)
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
xData: ["09-01", "09-02", "09-03", "09-04", "09-05", "09-06", "09-07"],
|
||||
yData: [10, 5, 15, 20, 15, 25, 12],
|
||||
// xData: ["09-01", "09-02", "09-03", "09-04", "09-05", "09-06", "09-07"],
|
||||
// yData: [10, 5, 15, 20, 15, 25, 12],
|
||||
xData: [],
|
||||
yData: [],
|
||||
lineId: "waterShortTerm",
|
||||
lineSmooth: 0,
|
||||
grid: {
|
||||
@ -221,4 +227,18 @@ onBeforeUnmount(async () => {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.not-data {
|
||||
top: 40%;
|
||||
width: 30%;
|
||||
left: 35%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 50%;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<Card title="实时监测">
|
||||
<div class="water-top-center">
|
||||
<div class="left-box">
|
||||
<div class="water-count">93 t</div>
|
||||
<div class="water-count">{{ meterRead.waterTonnage || 0 }} t</div>
|
||||
<div class="water-icon">
|
||||
<img src="@/assets/images/greenConstruct/water.png" alt="" />
|
||||
</div>
|
||||
@ -10,19 +10,25 @@
|
||||
<div class="right-box">
|
||||
<div class="yesterday-use">
|
||||
<div class="text">昨日用水(t)</div>
|
||||
<div class="num">93</div>
|
||||
<div class="num">{{ meterRead.yesterdayWaterConsumption || 0 }}</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 class="num">
|
||||
{{ meterRead.todayMonthOnMonthWaterConsumption || 0
|
||||
}}<span style="font-family: Source Han Sans CN-Medium, Source Han Sans CN">%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="month-use">
|
||||
<div class="text">本月用水(t)</div>
|
||||
<div class="num">100.2</div>
|
||||
<div class="num">{{ meterRead.thisMonthWaterConsumption || 0 }}</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 class="num">
|
||||
{{ meterRead.monthOnMonthWaterConsumptionThisMonth || 0
|
||||
}}<span style="font-family: Source Han Sans CN-Medium, Source Han Sans CN">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -31,6 +37,33 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import Card from "@/components/card.vue";
|
||||
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||||
import { getWaterTotal } from "@/api/modules/greenConstruct";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
import mitts from "@/utils/bus"; //兄弟组件传值
|
||||
|
||||
let meterId = ref("" as any);
|
||||
// 获取水表读数
|
||||
const meterRead = ref({} as any);
|
||||
const getMeterTotal = async () => {
|
||||
const res: any = await getWaterTotal({ projectSn: store.sn, waterMeterNo: meterId.value });
|
||||
console.log("获取水表实时读数", res);
|
||||
meterRead.value = res.result;
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
mitts.on("waterId", e => {
|
||||
// console.log("当前水表对应的waterId", e);
|
||||
meterId.value = e;
|
||||
getMeterTotal();
|
||||
});
|
||||
// getMeterTotal();
|
||||
});
|
||||
// 即时销毁事件总线派发，否则会执行两次mitts.on造成不必要的内存浪费 7.14 by CJP
|
||||
onBeforeUnmount(async () => {
|
||||
mitts.off("waterId");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -7,17 +7,23 @@
|
||||
<div style="width: 20%">当前读数</div>
|
||||
</div>
|
||||
<el-scrollbar class="list-box">
|
||||
<div v-for="(item, index) in list" class="listStyle" :key="item.id">
|
||||
<div
|
||||
v-for="(item, index) in list"
|
||||
class="listStyle"
|
||||
:key="item.id"
|
||||
:class="checked == item.id ? 'active' : ''"
|
||||
@click="selectList(item)"
|
||||
>
|
||||
<!-- <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 style="width: 60%">{{ item.waterMeterName || "" }}</div>
|
||||
<div style="width: 20%">{{ item.waterTonnage || 0 }}</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="not-data" v-if="list.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
@ -26,129 +32,38 @@
|
||||
import Card from "@/components/card.vue";
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import mitts from "@/utils/bus"; //兄弟组件传值
|
||||
import { getWaterList } from "@/api/modules/greenConstruct";
|
||||
const store = GlobalStore();
|
||||
let showDialog = ref(false as any);
|
||||
let rangeTime = ref("" as any);
|
||||
const list = reactive([
|
||||
{
|
||||
id: 1,
|
||||
waterName: "智能水表",
|
||||
currentNum: 93
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
waterName: "智能水表",
|
||||
currentNum: 93
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
waterName: "智能水表",
|
||||
currentNum: 93
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
waterName: "智能水表",
|
||||
currentNum: 93
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
waterName: "智能水表",
|
||||
currentNum: 93
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
waterName: "智能水表",
|
||||
currentNum: 93
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
waterName: "智能水表",
|
||||
currentNum: 93
|
||||
},
|
||||
|
||||
{
|
||||
id: 8,
|
||||
waterName: "智能水表",
|
||||
currentNum: 93
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
waterName: "智能水表",
|
||||
currentNum: 93
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
waterName: "智能水表",
|
||||
currentNum: 93
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
waterName: "智能水表",
|
||||
currentNum: 93
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
waterName: "智能水表",
|
||||
currentNum: 93
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
waterName: "智能水表",
|
||||
currentNum: 93
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
waterName: "智能水表",
|
||||
currentNum: 93
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
waterName: "智能水表",
|
||||
currentNum: 93
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
waterName: "智能水表",
|
||||
currentNum: 93
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
waterName: "智能水表",
|
||||
currentNum: 93
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
waterName: "智能水表",
|
||||
currentNum: 93
|
||||
},
|
||||
{
|
||||
id: 19,
|
||||
waterName: "智能水表",
|
||||
currentNum: 93
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
waterName: "智能水表",
|
||||
currentNum: 93
|
||||
},
|
||||
{
|
||||
id: 21,
|
||||
waterName: "智能水表",
|
||||
currentNum: 93
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
waterName: "智能水表",
|
||||
currentNum: 93
|
||||
},
|
||||
{
|
||||
id: 23,
|
||||
waterName: "智能水表",
|
||||
currentNum: 93
|
||||
const list = ref([]) as any;
|
||||
|
||||
// 选中
|
||||
let checked = ref(1);
|
||||
function selectList(item: any) {
|
||||
checked.value = item.id;
|
||||
mitts.emit("waterId", item.waterMeterNo);
|
||||
}
|
||||
|
||||
// const meterList = ref([] as any);
|
||||
//获取水表列表
|
||||
const getMeterList = async () => {
|
||||
const res: any = await getWaterList({ projectSn: store.sn });
|
||||
// console.log("获取水表列表", res);
|
||||
list.value = res.result;
|
||||
if (res.result.length > 0) {
|
||||
checked.value = res.result[0].id;
|
||||
mitts.emit("waterId", res.result[0].waterMeterNo);
|
||||
}
|
||||
]);
|
||||
};
|
||||
|
||||
onMounted(async () => {});
|
||||
onMounted(async () => {
|
||||
// let newList = list.value.map((item: any) => {
|
||||
// return { name: item.ammeterName };
|
||||
// });
|
||||
// console.log("新列表", newList);
|
||||
await getMeterList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -188,7 +103,7 @@ onMounted(async () => {});
|
||||
left: 75.5%;
|
||||
top: 75%;
|
||||
color: #ccc;
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
// justify-content: space-around;
|
||||
div {
|
||||
text-align: center;
|
||||
@ -200,12 +115,17 @@ onMounted(async () => {});
|
||||
.list-style:nth-child(even) {
|
||||
background: rgba(39, 88, 192, 0.06);
|
||||
}
|
||||
.active {
|
||||
background: rgba(39, 88, 192, 0.6);
|
||||
}
|
||||
.listStyle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
line-height: 45px;
|
||||
font-size: 14px;
|
||||
line-height: 36px;
|
||||
margin-top: 2%;
|
||||
cursor: pointer;
|
||||
div {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
@ -218,18 +138,17 @@ onMounted(async () => {});
|
||||
}
|
||||
}
|
||||
.not-data {
|
||||
top: 73%;
|
||||
width: 12%;
|
||||
left: 44%;
|
||||
top: 40%;
|
||||
width: 30%;
|
||||
left: 35%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 40%;
|
||||
margin: 5% 30%;
|
||||
width: 50%;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
margin: -6% 37%;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,28 +1,44 @@
|
||||
<template>
|
||||
<Card title="昨日用水量(t)">
|
||||
<Card title="昨日用水量">
|
||||
<div class="center-top">
|
||||
<div class="use-total">
|
||||
昨日总用水量:
|
||||
<span style="color: #65d7f9">222</span>
|
||||
<span style="color: #65d7f9">{{ yesterdayUse }}</span>
|
||||
吨
|
||||
</div>
|
||||
<div id="educationCenterTop" style="width: 100%; height: 100%"></div>
|
||||
<div id="WaterTopRight" style="width: 100%; height: 100%"></div>
|
||||
<div class="not-data" v-if="xData.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Card from "@/components/card.vue";
|
||||
import { onMounted } from "vue";
|
||||
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import symbolIcon from "@/assets/images/lineSymbol.png";
|
||||
import { getWaterUseRecord } from "@/api/modules/greenConstruct";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
import mitts from "@/utils/bus"; //兄弟组件传值
|
||||
|
||||
let yesterdayUse = ref(0 as any);
|
||||
// let xData = ref(["智能电表", "智能电表2", "智能电表3", "智能电表4", "智能电表5"] as any);
|
||||
let xData = ref([] as any);
|
||||
|
||||
// let yData = ref([100, 200, 300, 100, 20] as any);
|
||||
let yData = ref([] as any);
|
||||
|
||||
function draw() {
|
||||
let chartDom = document.getElementById("educationCenterTop");
|
||||
yesterdayUse.value = yData.value.reduce((acc: any, curr: any) => acc + curr, 0);
|
||||
let chartDom = document.getElementById("WaterTopRight");
|
||||
if (chartDom) {
|
||||
chartDom.removeAttribute("_echarts_instance_");
|
||||
}
|
||||
let echartsTest = echarts.init(document.getElementById("educationCenterTop"));
|
||||
let echartsTest = echarts.init(document.getElementById("WaterTopRight"));
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
@ -47,7 +63,7 @@ function draw() {
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
data: ["智能水表", "智能水表2", "智能水表3", "智能水表4", "智能水表5"],
|
||||
data: xData.value,
|
||||
triggerEvent: true,
|
||||
axisTick: {
|
||||
show: false,
|
||||
@ -128,7 +144,7 @@ function draw() {
|
||||
])
|
||||
// color: function (params) {
|
||||
// console.log(params, "颜色");
|
||||
// if (params.name === "智能水表2") {
|
||||
// if (params.name === "智能电表2") {
|
||||
// return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {
|
||||
// offset: 1,
|
||||
@ -164,7 +180,7 @@ function draw() {
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [100, 200, 300, 100, 20, 60, 120],
|
||||
data: yData.value,
|
||||
z: 10
|
||||
},
|
||||
{
|
||||
@ -178,15 +194,36 @@ function draw() {
|
||||
// color: "rgba(11,47,68,.8)"
|
||||
}
|
||||
},
|
||||
data: [100, 200, 300, 100, 20, 60, 120],
|
||||
data: yData.value,
|
||||
z: 9
|
||||
}
|
||||
]
|
||||
};
|
||||
echartsTest.setOption(option);
|
||||
}
|
||||
onMounted(() => {
|
||||
|
||||
const getYesterdayUseTotal = async () => {
|
||||
const res: any = await getWaterUseRecord({ projectSn: store.sn, type: 1 });
|
||||
let nameArr = res.result.data.map((item: any) => item.name);
|
||||
let useArr = res.result.data.map((item: any) => Number(item.count));
|
||||
xData.value = nameArr;
|
||||
yData.value = useArr;
|
||||
console.log("昨日用水量", res, nameArr, useArr);
|
||||
draw();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// mitts.on("waterId", e => {
|
||||
// console.log("昨日用水量接收到当前电表号", e);
|
||||
// getYesterdayUseTotal();
|
||||
// });
|
||||
// draw();
|
||||
getYesterdayUseTotal();
|
||||
});
|
||||
|
||||
// 即时销毁事件总线派发，否则会执行多次mitts.on造成不必要的内存浪费 7.14 by CJP
|
||||
onBeforeUnmount(async () => {
|
||||
mitts.off("waterId");
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -204,4 +241,18 @@ onMounted(() => {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.not-data {
|
||||
top: 40%;
|
||||
width: 30%;
|
||||
left: 35%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 50%;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -89,7 +89,7 @@ import ScaleBox from "vue3-scale-box";
|
||||
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
|
||||
import { getTaskTimeDetail } from "@/api/modules/schedulePlan";
|
||||
import { jumpLargeUserInfoApi } from "@/api/modules/login";
|
||||
import { JSYCMenu } from "@/config/staticMenu";
|
||||
import { JSYCMenu, XJNBMenu } from "@/config/staticMenu";
|
||||
import { COMPANY } from "@/config/config";
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
@ -383,6 +383,9 @@ onMounted(async () => {
|
||||
if (COMPANY === "jsyc") {
|
||||
menuList.value = JSYCMenu;
|
||||
}
|
||||
if (COMPANY === "xjnb") {
|
||||
menuList.value = XJNBMenu;
|
||||
}
|
||||
|
||||
console.log("配置菜单", menuList.value);
|
||||
console.log("当前路由", router.currentRoute.value);
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
</div>
|
||||
<div class="contain-row">
|
||||
<div class="text">速度</div>
|
||||
<div class="num">{{ currentData.largeCraneSpeed || 0 }} m/min</div>
|
||||
<div class="num">{{ currentData.largeCraneSpeed || 0 }} m/s</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-contain">
|
||||
@ -40,7 +40,7 @@
|
||||
</div>
|
||||
<div class="contain-row">
|
||||
<div class="text">速度</div>
|
||||
<div class="num">{{ currentData.smallCraneSpeed || 0 }} m/min</div>
|
||||
<div class="num">{{ currentData.smallCraneSpeed || 0 }} m/s</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-contain">
|
||||
@ -60,7 +60,7 @@
|
||||
</div>
|
||||
<div class="contain-row">
|
||||
<div class="text">速度</div>
|
||||
<div class="num">{{ currentData.secondSmallCraneSpeed || 0 }} m/min</div>
|
||||
<div class="num">{{ currentData.secondSmallCraneSpeed || 0 }} m/s</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -256,6 +256,7 @@ onBeforeUnmount(async () => {
|
||||
}
|
||||
.num {
|
||||
width: 30%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.state {
|
||||
width: 30%;
|
||||
@ -293,6 +294,7 @@ onBeforeUnmount(async () => {
|
||||
width: 30%;
|
||||
}
|
||||
.num {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.state {
|
||||
width: 40%;
|
||||
|
||||
@ -403,8 +403,7 @@ const setGantts = () => {
|
||||
let { finishDate, name, gantts } = project;
|
||||
const gantt = getGanttStyle(project);
|
||||
// gantt.background = colors.value[project.state - 1];
|
||||
gantt.background = colors.value[project.status];
|
||||
|
||||
gantt.background = colors.value[project.mppStatus];
|
||||
if (gantts) {
|
||||
gantts.push(gantt);
|
||||
} else {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user