feat: 雨量监测页面添加以及部分接口对接
This commit is contained in:
kun
parent
ad4b56defc
commit
73ae858af9
@ -4,7 +4,7 @@ NODE_ENV = 'development'
|
||||
# 本地环境接口地址(/api/index.ts文件中使用)
|
||||
# 后端本地
|
||||
# VITE_API_URL = 'http://192.168.34.155:19111'
|
||||
# VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
|
||||
VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
|
||||
# VITE_API_URL = 'http://182.90.224.237:51234' #雄哥远程
|
||||
# VITE_API_URL = 'http://192.168.34.221:28889'
|
||||
# VITE_API_URL = 'http://121.196.214.246/api'
|
||||
@ -23,7 +23,7 @@ NODE_ENV = 'development'
|
||||
# 七参数标准版(测试平台)
|
||||
# VITE_API_URL = 'http://182.90.224.237:15551'
|
||||
# 七参数标准版(演示平台)
|
||||
VITE_API_URL = 'http://jxj.zhgdyun.com:9809'
|
||||
# VITE_API_URL = 'http://jxj.zhgdyun.com:9809'
|
||||
# agjt
|
||||
# VITE_API_URL = 'http://42.180.188.17:9809' #生产环境
|
||||
# VITE_API_URL = 'http://42.180.188.17:11211' #测试环境
|
||||
|
||||
@ -12,7 +12,7 @@ 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'
|
||||
@ -30,7 +30,7 @@ VITE_API_URL = 'http://101.43.164.214:11111'
|
||||
# 中科佳成
|
||||
# VITE_API_URL = 'http://1.13.185.209:8089'
|
||||
# 合肥启程(乌丹)
|
||||
# VITE_API_URL = 'http://192.168.100.4:9809'
|
||||
VITE_API_URL = 'http://192.168.100.4:9809'
|
||||
# 打包
|
||||
VITE_ULD_API_URL = 'http://jxj.zhgdyun.com:8012/onlinePreview?url='
|
||||
|
||||
|
||||
@ -42,3 +42,25 @@ export const getAirQualityStatisticsApi = (params: {}) => {
|
||||
export const getAlarmCountTotalApi = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/environmentAlarm/selectEnvironmentAlarmCountTotal`, params);
|
||||
};
|
||||
|
||||
// 雨量监测
|
||||
// 环境监测
|
||||
export const getRainCurrentDayAirQualityApi = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/rainBigScreen/getCurrentDayAirQuality`, params);
|
||||
};
|
||||
// 设备情况
|
||||
export const getRainDevlApi = (params: {}) => {
|
||||
return http.get(BASEURL + `/xmgl/rainDev/list`, params);
|
||||
};
|
||||
// 趋势图
|
||||
export const selectRainDustNoiseDataApi = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/rainBigScreen/queryTodayTrendGroupByHour`, params);
|
||||
};
|
||||
//实时数据
|
||||
export const getRealTimeRainRecordApi = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/rainBigScreen/getRealTimeRainRecord`, params);
|
||||
};
|
||||
// 晴雨表
|
||||
export const getRainWeatherDataApi = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/rainBigScreen/getWeatherData`, params);
|
||||
};
|
||||
@ -213,6 +213,11 @@ export const staticRouter: RouteRecordRaw[] = [
|
||||
name: "污水监测",
|
||||
component: () => import("@/views/sevenLargeScreen/greenConstruct/sewageMonitor/index.vue")
|
||||
},
|
||||
{
|
||||
path: "/rainfallMonitoring",
|
||||
name: "雨量监测",
|
||||
component: () => import("@/views/sevenLargeScreen/rainfallMonitoring/index.vue")
|
||||
},
|
||||
{
|
||||
path: "/gantryCrane",
|
||||
name: "龙门吊监测",
|
||||
|
||||
@ -376,7 +376,11 @@ let menuList = ref([
|
||||
{
|
||||
companyPath: "/sewageMonitor",
|
||||
menuName: "污水监测"
|
||||
}
|
||||
},
|
||||
// {
|
||||
// companyPath: "/rainfallMonitoring",
|
||||
// menuName: "雨量监测"
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
138
src/views/sevenLargeScreen/rainfallMonitoring/centerBottom.vue
Normal file
138
src/views/sevenLargeScreen/rainfallMonitoring/centerBottom.vue
Normal file
@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div class="CenterBox">
|
||||
<Card title="晴雨表">
|
||||
<div class="weatherBox">
|
||||
<div class="weatherItem" v-for="(item, index) in weatherList" :key="index">
|
||||
<p>{{ item.day }}</p>
|
||||
<p class="imgBox">
|
||||
<img :src="item.url" />
|
||||
<!-- <img v-else src="@/assets/images/dustNoise/weatherIcon/yu.png" /> -->
|
||||
</p>
|
||||
<div class="weather">{{ item.wea }}</div>
|
||||
<div class="temp">{{ item.tem2 }} ~ {{ item.tem1 }}</div>
|
||||
<p>
|
||||
{{ item.win_speed }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import { reactive, onMounted, ref } from "vue";
|
||||
import { getRainWeatherDataApi } from "@/api/modules/headNoise";
|
||||
import { getTaskTimeDetail } from "@/api/modules/schedulePlan";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
|
||||
const weatherList = ref([]);
|
||||
//获取项目信息
|
||||
const projectTimeInfo = ref({} as any);
|
||||
const getProjectInfo = async () => {
|
||||
const res: any = await getTaskTimeDetail({ projectSn: store.sn });
|
||||
console.log("获取项目信息", res);
|
||||
projectTimeInfo.value = res.result;
|
||||
loadWeather();
|
||||
};
|
||||
//获取天气
|
||||
const loadWeather = async () => {
|
||||
const res = await getRainWeatherDataApi({ cityid: "", areaId: projectTimeInfo.value.areaCode});
|
||||
let json = JSON.parse(res.result);
|
||||
let list = json;
|
||||
console.log("获取天气", res.result);
|
||||
list.forEach(element => {
|
||||
const weatherImg = weatherIcon.value.find(icon => icon.Image.includes(element.wea_img));
|
||||
if (weatherImg) {
|
||||
const imageUrl = weatherImg.Image;
|
||||
// 将拼接好的URL赋值给element.url字段
|
||||
element.url = imageUrl;
|
||||
}
|
||||
weatherList.value.push(element);
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
getProjectInfo();
|
||||
});
|
||||
const weatherIcon = ref([
|
||||
{
|
||||
Image: new URL("@/assets/images/dustNoise/bingbao.png", import.meta.url).href
|
||||
},
|
||||
{
|
||||
Image: new URL("@/assets/images/dustNoise/qing.png", import.meta.url).href
|
||||
},
|
||||
{
|
||||
Image: new URL("@/assets/images/dustNoise/shachen.png", import.meta.url).href
|
||||
},
|
||||
{
|
||||
Image: new URL("@/assets/images/dustNoise/weather4.png", import.meta.url).href
|
||||
},
|
||||
{
|
||||
Image: new URL("@/assets/images/dustNoise/weather5.png", import.meta.url).href
|
||||
},
|
||||
{
|
||||
Image: new URL("@/assets/images/dustNoise/wu.png", import.meta.url).href
|
||||
},
|
||||
{
|
||||
Image: new URL("@/assets/images/dustNoise/xue.png", import.meta.url).href
|
||||
},
|
||||
{
|
||||
Image: new URL("@/assets/images/dustNoise/yin.png", import.meta.url).href
|
||||
},
|
||||
{
|
||||
Image: new URL("@/assets/images/dustNoise/yu.png", import.meta.url).href
|
||||
},
|
||||
{
|
||||
Image: new URL("@/assets/images/dustNoise/yu1.png", import.meta.url).href
|
||||
},
|
||||
{
|
||||
Image: new URL("@/assets/images/dustNoise/yun.png", import.meta.url).href
|
||||
},
|
||||
{
|
||||
Image: new URL("@/assets/images/dustNoise/yun1.png", import.meta.url).href
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.CenterBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.weatherBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
.weatherItem {
|
||||
height: 100%;
|
||||
width: 15%;
|
||||
border-right: 1px solid #14346c;
|
||||
text-align: center;
|
||||
|
||||
.imgBox {
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
|
||||
img {
|
||||
width: 70%;
|
||||
height: 95%;
|
||||
margin-top: -2%;
|
||||
}
|
||||
}
|
||||
|
||||
.weather {
|
||||
margin-top: -20%;
|
||||
}
|
||||
|
||||
.temp {
|
||||
margin-top: 10%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .h-card .content{
|
||||
margin-top: 1%;
|
||||
}
|
||||
</style>
|
||||
208
src/views/sevenLargeScreen/rainfallMonitoring/centerTop.vue
Normal file
208
src/views/sevenLargeScreen/rainfallMonitoring/centerTop.vue
Normal file
@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<div class="CenterBox">
|
||||
<div class="title"><i>实时数据</i></div>
|
||||
<div class="content">
|
||||
<div class="selectRight">
|
||||
<el-select v-model="deviceName" class="m-2" placeholder="Select" size="small">
|
||||
<el-option
|
||||
v-for="(item, index) in noiseList"
|
||||
:key="index"
|
||||
:label="item.devName"
|
||||
:value="item.id"
|
||||
@click="realTimeMonitor(item)"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="gifImg">
|
||||
<img src="@/assets/images/dustNoise/centerGif.gif" alt="" />
|
||||
</div>
|
||||
<div class="menListWd menu">温度:{{ plantCap.temperature || plantCap.temperature == '0' ? plantCap.temperature : "--" }}℃</div>
|
||||
<div class="menListSd menu">湿度:{{ plantCap.humidity || plantCap.humidity == '0' ? plantCap.humidity : "--" }}%RH</div>
|
||||
<div class="menListPm2 menu">PM2.5:{{ plantCap.pm25 || plantCap.pm25 == '0' ? plantCap.pm25 : "--" }}ug/m³</div>
|
||||
<div class="menListTs menu">TSP:{{ plantCap.tsp || plantCap.tsp == '0' ? plantCap.tsp : "--" }}ug/m³</div>
|
||||
<div class="menListPm10 menu">PM10:{{ plantCap.pm10 || plantCap.pm10 == '0' ? plantCap.pm10 : "--" }}ug/m³</div>
|
||||
<div class="menListZs menu">噪声:{{ plantCap.noise || plantCap.noise == '0' ? plantCap.noise : "--" }}dB</div>
|
||||
<div class="menListFs menu">风速:{{ plantCap.windspeed || plantCap.windspeed == '0' ? plantCap.windspeed : "--" }}m/s</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { getRainDevlApi, getRealTimeRainRecordApi } from "@/api/modules/headNoise";
|
||||
import mitts from "@/utils/bus"; //兄弟组件传值
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
const store = GlobalStore();
|
||||
let deviceName = ref("");
|
||||
let noiseList = ref([]);
|
||||
let plantCap = ref({
|
||||
crc: "--",
|
||||
humidity: "--",
|
||||
noise: "--",
|
||||
plateHumidity: "--",
|
||||
plateTemperature: "--",
|
||||
pm10: "--",
|
||||
pm25: "--",
|
||||
pressure: "--",
|
||||
temperature: "--",
|
||||
tsp: "--",
|
||||
voltage: "--",
|
||||
winddirectionName: "--",
|
||||
windspeed: "--"
|
||||
});
|
||||
let currentDevDetail = reactive({});
|
||||
//切换设备
|
||||
const realTimeMonitor = val => {
|
||||
currentDevDetail = val;
|
||||
getRealTimeDustNoiseData();
|
||||
};
|
||||
//获取设备下拉
|
||||
const getList = async () => {
|
||||
const res = await getRainDevlApi({ projectSn: store.sn });
|
||||
console.log("获取设备下拉", res);
|
||||
if (res.result.length > 0) {
|
||||
noiseList.value = res.result;
|
||||
deviceName.value = res.result[0].devName;
|
||||
currentDevDetail = res.result[0];
|
||||
|
||||
getRealTimeDustNoiseData();
|
||||
}
|
||||
};
|
||||
//获取环境设备详情数据
|
||||
const getRealTimeDustNoiseData = async () => {
|
||||
const res = await getRealTimeRainRecordApi({
|
||||
devSn: currentDevDetail.devSn,
|
||||
projectSn: store.sn
|
||||
});
|
||||
if (res.result) {
|
||||
plantCap.value = res.result;
|
||||
}
|
||||
// else {
|
||||
// plantCap.value = {
|
||||
// crc: "--",
|
||||
// humidity: "--",
|
||||
// noise: "--",
|
||||
// plateHumidity: "--",
|
||||
// plateTemperature: "--",
|
||||
// pm10: "--",
|
||||
// pm25: "--",
|
||||
// pressure: "--",
|
||||
// temperature: "--",
|
||||
// tsp: "--",
|
||||
// voltage: "--",
|
||||
// winddirectionName: "--",
|
||||
// windspeed: "--"
|
||||
// };
|
||||
// }
|
||||
//发送编号
|
||||
mitts.emit("currentDevDetail", currentDevDetail);
|
||||
};
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.CenterBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("@/assets/images/dustNoise/centerImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.title {
|
||||
height: 7%;
|
||||
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 {
|
||||
margin-left: 50px;
|
||||
font-family: OPPOSansH;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.selectRight {
|
||||
position: absolute;
|
||||
left: 78%;
|
||||
width: 13%;
|
||||
top: 4%;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.gifImg {
|
||||
position: absolute;
|
||||
left: 42%;
|
||||
top: 10%;
|
||||
|
||||
img {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 15%;
|
||||
height: 5%;
|
||||
color: #fff;
|
||||
background: url("@/assets/images/dustNoise/menuImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
line-height: 28px;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
}
|
||||
|
||||
.menListWd {
|
||||
left: 13%;
|
||||
top: 30%;
|
||||
}
|
||||
|
||||
.menListSd {
|
||||
top: 43%;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.menListPm2 {
|
||||
top: 57%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
.menListTs {
|
||||
top: 66%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
.menListPm10 {
|
||||
top: 58%;
|
||||
left: 64%;
|
||||
}
|
||||
|
||||
.menListZs {
|
||||
top: 43%;
|
||||
left: 72%;
|
||||
}
|
||||
|
||||
.menListFs {
|
||||
top: 30%;
|
||||
left: 68%;
|
||||
}
|
||||
}
|
||||
|
||||
::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>
|
||||
97
src/views/sevenLargeScreen/rainfallMonitoring/index.vue
Normal file
97
src/views/sevenLargeScreen/rainfallMonitoring/index.vue
Normal file
@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<!-- 扬程噪声 -->
|
||||
<div class="headerNoise">
|
||||
<div class="left">
|
||||
<div class="leftTop"><LeftTop /></div>
|
||||
<div class="leftCenter"><LeftCenter /></div>
|
||||
<div class="leftBottom"><LeftBottom /></div>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="centerTop"><CenterTop /></div>
|
||||
<div class="centerBottom"><CenterBottom /></div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="rightTop"><RightTop /></div>
|
||||
<div class="rightCenter"><RightCenter /></div>
|
||||
<div class="rightbottom"><RightBottom /></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LeftTop from "./leftTop.vue";
|
||||
import LeftCenter from "./leftCenter.vue";
|
||||
import LeftBottom from "./leftBottom.vue";
|
||||
import CenterTop from "./centerTop.vue";
|
||||
import CenterBottom from "./centerBottom.vue";
|
||||
import RightTop from "./rightTop.vue";
|
||||
import RightCenter from "./rightCenter.vue";
|
||||
import RightBottom from "./rightBottom.vue";
|
||||
export default {
|
||||
components: {
|
||||
LeftTop,
|
||||
LeftCenter,
|
||||
LeftBottom,
|
||||
CenterTop,
|
||||
CenterBottom,
|
||||
RightTop,
|
||||
RightCenter,
|
||||
RightBottom
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.headerNoise {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&::-webkit-scrollbar {
|
||||
display: none; //隐藏滚动条
|
||||
}
|
||||
.left {
|
||||
width: 29%;
|
||||
height: 100%;
|
||||
.leftTop {
|
||||
height: 29%;
|
||||
}
|
||||
.leftCenter {
|
||||
margin-top: 8%;
|
||||
height: 31%;
|
||||
}
|
||||
.leftBottom {
|
||||
margin-top: 8%;
|
||||
height: 29%;
|
||||
}
|
||||
}
|
||||
.center {
|
||||
// width: calc(40% - 40px);
|
||||
margin: 0% 1%;
|
||||
width: 55%;
|
||||
height: 100%;
|
||||
.centerTop {
|
||||
height: 68%;
|
||||
}
|
||||
.centerBottom {
|
||||
height: 30%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 29%;
|
||||
height: 100%;
|
||||
.rightTop {
|
||||
height: 29%;
|
||||
}
|
||||
.rightCenter {
|
||||
margin-top: 8%;
|
||||
height: 31%;
|
||||
}
|
||||
.rightbottom {
|
||||
margin-top: 8%;
|
||||
height: 29%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
377
src/views/sevenLargeScreen/rainfallMonitoring/leftBottom.vue
Normal file
377
src/views/sevenLargeScreen/rainfallMonitoring/leftBottom.vue
Normal file
@ -0,0 +1,377 @@
|
||||
<template>
|
||||
<Card title="趋势图">
|
||||
<div class="box">
|
||||
<div class="selectRight">
|
||||
<!-- <el-date-picker
|
||||
style="width:100%"
|
||||
v-model="value1"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
>
|
||||
</el-date-picker> -->
|
||||
<el-select class="m-2" placeholder="Select" size="small" v-model="selectValue">
|
||||
<el-option
|
||||
v-for="(item, index) in noiseList"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
@click="checkChange(item.label)"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<div id="myEcharts" ref="myEcharts" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { selectRainDustNoiseDataApi } from "@/api/modules/headNoise";
|
||||
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import Card from "@/components/card.vue";
|
||||
import mitts from "@/utils/bus"; //兄弟组件传值
|
||||
const store = GlobalStore();
|
||||
let dustData_24 = ref([]);
|
||||
let xData = ref([]);
|
||||
let yData = ref([]);
|
||||
let chart = ref();
|
||||
let yUnit = ref("单位:ug/m³") as any;
|
||||
const noiseList = [
|
||||
{
|
||||
value: 0,
|
||||
label: "PM2.5"
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: "PM10"
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: "噪声"
|
||||
},
|
||||
// {
|
||||
// value: 3,
|
||||
// label: "夜晚噪音"
|
||||
// },
|
||||
{
|
||||
value: 4,
|
||||
label: "风速"
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
label: "TSP"
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
label: "温度"
|
||||
},
|
||||
{
|
||||
value: 7,
|
||||
label: "湿度"
|
||||
}
|
||||
];
|
||||
let receive = ref("" as any);
|
||||
let selectValue = ref("PM2.5" as any);
|
||||
function drawChart() {
|
||||
let myEchart = echarts.init(document.getElementById("myEcharts"));
|
||||
let option = {
|
||||
// backgroundColor: '#071c3a',
|
||||
title: {
|
||||
// text: '日用气量分析',
|
||||
textStyle: {
|
||||
align: "center",
|
||||
color: "#fff",
|
||||
fontSize: 20
|
||||
},
|
||||
top: "2%",
|
||||
left: "center"
|
||||
},
|
||||
// legend: {
|
||||
// color: ["#17B4FA", "#47D8BE", "#F9A589"],
|
||||
// // data: ['日用气量分析'],
|
||||
// left: 'center',
|
||||
// top: "8%",
|
||||
// textStyle: {
|
||||
// color: "#ffffff"
|
||||
// }
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(0, 255, 233,0)"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "rgba(255, 255, 255,1)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(0, 255, 233,0)"
|
||||
}
|
||||
],
|
||||
global: false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: "30%",
|
||||
left: "12%",
|
||||
right: "5%",
|
||||
bottom: "15%"
|
||||
// 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: xData.value
|
||||
}
|
||||
],
|
||||
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: yUnit.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://./static/images/guang-circle.png',
|
||||
symbol: "circle",
|
||||
symbolSize: 5,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: "#fff",
|
||||
shadowBlur: 0
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: "top",
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#A3EAFF",
|
||||
borderColor: "#82FBEA",
|
||||
borderWidth: 5,
|
||||
shadowColor: "rgba(0, 0, 0, .6)",
|
||||
shadowBlur: 0
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
show: true
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(130, 251, 234,0.5)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(130, 251, 234,0.1)"
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: "rgba(130, 251, 234, 0.2",
|
||||
shadowBlur: 20
|
||||
}
|
||||
},
|
||||
data: yData.value
|
||||
}
|
||||
]
|
||||
};
|
||||
myEchart.setOption(option);
|
||||
// window.onresize = function () {
|
||||
// myEchart.resize();
|
||||
// }
|
||||
}
|
||||
//获取趋势图数据
|
||||
const getList = async type => {
|
||||
//当前日期
|
||||
// let now = new Date();
|
||||
// let yy = now.getFullYear(); //年
|
||||
// let mm = now.getMonth() + 1; //月
|
||||
// let dd = now.getDate(); //日
|
||||
// let time = yy + "-";
|
||||
// if (mm < 10) time += "0";
|
||||
// time += mm + "-";
|
||||
// if (dd < 10) time += "0";
|
||||
// time += dd;
|
||||
const res = await selectRainDustNoiseDataApi({
|
||||
// searchDate: time,
|
||||
deviceId: type,
|
||||
projectSn: store.sn
|
||||
});
|
||||
console.log("左下角趋势图", res.result);
|
||||
dustData_24.value = res.result;
|
||||
xData.value = [];
|
||||
yData.value = [];
|
||||
res.result.forEach(item => {
|
||||
xData.value.push(item.time);
|
||||
yData.value.push(item.pm25);
|
||||
});
|
||||
drawChart();
|
||||
};
|
||||
const checkChange = (val: any) => {
|
||||
yData.value = [];
|
||||
dustData_24.value.forEach(item => {
|
||||
if (val == "PM2.5") {
|
||||
yData.value.push(item.pm25);
|
||||
yUnit.value = "ug/m³";
|
||||
} else if (val == "PM10") {
|
||||
yData.value.push(item.pm10);
|
||||
yUnit.value = "ug/m³";
|
||||
} else if (val == "噪声") {
|
||||
yData.value.push(item.noise);
|
||||
yUnit.value = "dB";
|
||||
} else if (val == "夜晚噪音") {
|
||||
yData.value.push(item.nightNoise);
|
||||
yUnit.value = "dB";
|
||||
} else if (val == "风速") {
|
||||
yData.value.push(item.windspeed);
|
||||
yUnit.value = "m/s";
|
||||
} else if (val == "TSP") {
|
||||
yData.value.push(item.tsp);
|
||||
yUnit.value = "ug/m³";
|
||||
} else if (val == "温度") {
|
||||
yData.value.push(item.temperature);
|
||||
yUnit.value = "℃";
|
||||
} else if (val == "湿度") {
|
||||
yData.value.push(item.humidity);
|
||||
yUnit.value = "%RH";
|
||||
}
|
||||
});
|
||||
drawChart();
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
// const myChart = echarts.init(chart.vaule);
|
||||
|
||||
// window.addEventListener(
|
||||
// "resize",
|
||||
// () => {
|
||||
// myChart.resize();
|
||||
// },
|
||||
// false
|
||||
// );
|
||||
checkChange(selectValue.value);
|
||||
mitts.on("currentDevDetail", e => {
|
||||
receive.value = e.deviceId;
|
||||
getList(e.deviceId);
|
||||
});
|
||||
|
||||
});
|
||||
//
|
||||
onBeforeUnmount(async () => {
|
||||
mitts.off("currentDevDetail");
|
||||
echarts.dispose;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.selectRight {
|
||||
position: absolute;
|
||||
left: 75%;
|
||||
width: 20%;
|
||||
top: 6%;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
::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>
|
||||
136
src/views/sevenLargeScreen/rainfallMonitoring/leftCenter.vue
Normal file
136
src/views/sevenLargeScreen/rainfallMonitoring/leftCenter.vue
Normal file
@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<Card title="设备情况">
|
||||
<div class="deviceData">
|
||||
<div class="onlineDev">
|
||||
<div class="dev">在线设备</div>
|
||||
<div class="num">{{ onlineDevNum }}</div>
|
||||
</div>
|
||||
<div class="lineDev">
|
||||
<div class="dev">离线设备</div>
|
||||
<div class="num">{{ offlineDevNum }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="decivList">
|
||||
<div class="menuDev" v-for="item in deciData" :class="item.online == 1 ? 'online' : 'offline'">
|
||||
<div class="decName">
|
||||
<span v-show="item.online == 1"><img src="@/assets/images/dustNoise/onlineImg.png" alt="" /></span>
|
||||
<span v-show="item.online == 0"><img src="@/assets/images/dustNoise/offImg.png" alt="" /></span>
|
||||
<span> {{ item.devName }}</span>
|
||||
</div>
|
||||
<div class="status">{{ item.online == 1 ? "在线" : "离线" }}</div>
|
||||
</div>
|
||||
<div class="notoDta" v-if="deciData.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { GlobalStore } from "@/stores";
|
||||
|
||||
import { getRainDevlApi } from "@/api/modules/headNoise";
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
import Card from "@/components/card.vue";
|
||||
|
||||
const deciData = ref([]);
|
||||
const onlineDevNum = ref(0);
|
||||
const offlineDevNum = ref(0);
|
||||
const store = GlobalStore();
|
||||
//获取设备情况数据
|
||||
const getList = async () => {
|
||||
const res = await getRainDevlApi({ projectSn: store.sn });
|
||||
deciData.value = res.result;
|
||||
if (res.result.length > 0) {
|
||||
onlineDevNum.value = 0;
|
||||
offlineDevNum.value = 0;
|
||||
deciData.value.forEach(element => {
|
||||
if (element.online == 0) {
|
||||
offlineDevNum.value++;
|
||||
} else {
|
||||
onlineDevNum.value++;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.deviceData {
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
background: pink;
|
||||
display: flex;
|
||||
background: url("@/assets/images/dustNoise/devImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
justify-content: space-around;
|
||||
.onlineDev {
|
||||
margin: 2% 0;
|
||||
.num {
|
||||
color: #82fbea;
|
||||
}
|
||||
}
|
||||
.lineDev {
|
||||
margin: 2% 0;
|
||||
.num {
|
||||
color: #ec6266;
|
||||
}
|
||||
}
|
||||
.num {
|
||||
text-align: center;
|
||||
font-size: calc(100vw * 20 / 1920);
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
.decivList {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
.menuDev {
|
||||
height: 20%;
|
||||
background: url("@/assets/images/dustNoise/listImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
line-height: 31px;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
margin: 1% 3%;
|
||||
.decName {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
span {
|
||||
margin-left: 2%;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.status {
|
||||
// margin-left: 60%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.online {
|
||||
.status {
|
||||
color: #65d7f9;
|
||||
}
|
||||
}
|
||||
.offline {
|
||||
.status {
|
||||
color: #ec6266;
|
||||
}
|
||||
}
|
||||
.notoDta {
|
||||
img {
|
||||
width: 16%;
|
||||
margin: 6% 36%;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
margin: -5% 38%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
523
src/views/sevenLargeScreen/rainfallMonitoring/leftTop.vue
Normal file
523
src/views/sevenLargeScreen/rainfallMonitoring/leftTop.vue
Normal file
@ -0,0 +1,523 @@
|
||||
<template>
|
||||
<Card title="环境监测">
|
||||
<div class="box">
|
||||
<div id="leftTopEcharts" ref="leftTopEcharts" style="width: 100%; height: 100%"></div>
|
||||
<div class="footerData">{{ analysisData }}</div>
|
||||
<div class="colour">
|
||||
<div class="colour_content">
|
||||
<div class="bg" style="background: #65d7f9; border-top-left-radius: 8px; border-bottom-left-radius: 8px"></div>
|
||||
<div class="size">优</div>
|
||||
</div>
|
||||
<div class="colour_content">
|
||||
<div class="bg" style="background: #ffbb38"></div>
|
||||
<div class="size">良</div>
|
||||
</div>
|
||||
<div class="colour_content">
|
||||
<div class="bg" style="background: #fe7a18"></div>
|
||||
<div class="size">轻度污染</div>
|
||||
</div>
|
||||
<div class="colour_content">
|
||||
<div class="bg" style="background: #7718fe"></div>
|
||||
<div class="size">中度污染</div>
|
||||
</div>
|
||||
<div class="colour_content">
|
||||
<div class="bg" style="background: #890ea1"></div>
|
||||
<div class="size">重度污染</div>
|
||||
</div>
|
||||
<div class="colour_content">
|
||||
<div class="bg" style="background: #970c0c; border-top-right-radius: 8px; border-bottom-right-radius: 8px"></div>
|
||||
<div class="size">严重污染</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { getRainCurrentDayAirQualityApi } from "@/api/modules/headNoise";
|
||||
import { ref, onMounted, reactive } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import Card from "@/components/card.vue";
|
||||
const store = GlobalStore();
|
||||
const analysisType = ref("" as any);
|
||||
const analysisData = ref(0 as any);
|
||||
const posCenter = ref(["50%", "64%"]);
|
||||
|
||||
function drawChart() {
|
||||
let leftTopEcharts = echarts.init(document.getElementById("leftTopEcharts"));
|
||||
let option = {
|
||||
series: [
|
||||
{
|
||||
// 外围刻度
|
||||
type: "gauge",
|
||||
radius: "100%",
|
||||
center: posCenter.value,
|
||||
splitNumber: 10,
|
||||
min: 0,
|
||||
max: 500,
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 18,
|
||||
shadowBlur: 0,
|
||||
color: [
|
||||
[
|
||||
1,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(151, 12, 12, 1)"
|
||||
// },
|
||||
// {
|
||||
// offset: 0.2,
|
||||
// color: "rgba(137, 14, 161, 1)"
|
||||
// },
|
||||
// {
|
||||
// offset: 0.4,
|
||||
// color: "rgba(119, 24, 254, 1)"
|
||||
// },
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: "rgba(254, 122, 24, 1)"
|
||||
// },
|
||||
// {
|
||||
// offset: 0.8,
|
||||
// color: "rgba(255, 187, 56, 1)"
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(101, 215, 249, 1)"
|
||||
// }
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(101, 215, 249, 1)"
|
||||
},
|
||||
{
|
||||
offset: 0.2,
|
||||
color: "rgba(255, 187, 56, 1)"
|
||||
},
|
||||
{
|
||||
offset: 0.4,
|
||||
color: "rgba(254, 122, 24, 1)"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "rgba(119, 24, 254, 1)"
|
||||
},
|
||||
{
|
||||
offset: 0.8,
|
||||
color: "rgba(137, 14, 161, 1)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(151, 12, 12, 1)"
|
||||
}
|
||||
])
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
distance: -40
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
// 内侧指针、数值显示
|
||||
name: "",
|
||||
type: "gauge",
|
||||
radius: "95%",
|
||||
center: posCenter.value,
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0, //最小刻度
|
||||
max: 500, //最大刻度
|
||||
splitNumber: 100, //刻度数量
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
}, //刻度标签。
|
||||
axisTick: {
|
||||
show: false
|
||||
}, //刻度样式
|
||||
splitLine: {
|
||||
show: true,
|
||||
length: 5,
|
||||
lineStyle: {
|
||||
color: "#87E0FB",
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: analysisData.value
|
||||
}
|
||||
],
|
||||
z: 9
|
||||
},
|
||||
// 第三个圆
|
||||
{
|
||||
type: "gauge",
|
||||
radius: "70%",
|
||||
center: posCenter.value,
|
||||
splitNumber: 4,
|
||||
min: 0,
|
||||
max: 100,
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
shadowBlur: 0,
|
||||
color: [
|
||||
[
|
||||
1,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgb(1,192,229)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#87E0FB "
|
||||
}
|
||||
])
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
// 第二个圆
|
||||
{
|
||||
type: "gauge",
|
||||
radius: "45%",
|
||||
center: posCenter.value,
|
||||
splitNumber: 4,
|
||||
min: 0,
|
||||
max: 100,
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
shadowBlur: 0,
|
||||
color: [
|
||||
[
|
||||
1,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgb(1,192,229)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#87E0FB "
|
||||
}
|
||||
])
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
// 第一个圆
|
||||
{
|
||||
type: "gauge",
|
||||
radius: "25%",
|
||||
center: posCenter.value,
|
||||
splitNumber: 4,
|
||||
min: 0,
|
||||
max: 100,
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 200,
|
||||
shadowBlur: 0,
|
||||
color: [
|
||||
[
|
||||
1,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(135, 224, 251, 0.2)"
|
||||
},
|
||||
{
|
||||
offset: 0.2,
|
||||
color: "rgba(135, 224, 251, 0.7)"
|
||||
}
|
||||
])
|
||||
],
|
||||
[1, "transparent"]
|
||||
]
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "gauge",
|
||||
radius: "70%",
|
||||
center: posCenter.value,
|
||||
splitNumber: 0, //刻度数量
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 26,
|
||||
color: [
|
||||
[
|
||||
analysisData.value / 500,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "rgba(135, 224, 251, 1)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#fff"
|
||||
}
|
||||
])
|
||||
],
|
||||
[1, "transparent"]
|
||||
]
|
||||
}
|
||||
},
|
||||
//分隔线样式。
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
title: {
|
||||
show: false
|
||||
},
|
||||
//仪表盘详情，用于显示数据。
|
||||
detail: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: analysisData.value,
|
||||
itemStyle: {
|
||||
color: "red"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
//指针外环
|
||||
type: "pie",
|
||||
hoverAnimation: false,
|
||||
legendHoverLink: false,
|
||||
center: posCenter.value,
|
||||
radius: ["8%", "6%"],
|
||||
// width:5,
|
||||
z: 10,
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: analysisData.value,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#87E0FB"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
//指针内环
|
||||
type: "pie",
|
||||
hoverAnimation: false,
|
||||
legendHoverLink: false,
|
||||
center: posCenter.value,
|
||||
radius: ["-2%", "4%"],
|
||||
z: 10,
|
||||
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
|
||||
data: [
|
||||
{
|
||||
value: analysisData.value,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(7, 31, 60) "
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
leftTopEcharts.setOption(option);
|
||||
// window.onresize = function () {
|
||||
// myEchart.resize();
|
||||
// }
|
||||
}
|
||||
//获取环境监测数据
|
||||
const getList = async () => {
|
||||
const res = await getRainCurrentDayAirQualityApi({ projectSn: store.sn });
|
||||
console.log("获取环境监测数据", res);
|
||||
if (res.result) {
|
||||
analysisType.value = res.result.analysisType;
|
||||
analysisData.value = res.result.analysisData;
|
||||
}
|
||||
console.log("analysisType", analysisType.value);
|
||||
console.log("analysisData", analysisData.value);
|
||||
drawChart();
|
||||
};
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.footerData {
|
||||
position: absolute;
|
||||
top: 69%;
|
||||
left: 48%;
|
||||
font-family: sadigitalNumber;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
color: #fff;
|
||||
}
|
||||
.colour {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
font-size: calc(100vw * 10 / 1920);
|
||||
left: 8%;
|
||||
top: 80%;
|
||||
color: #fff;
|
||||
|
||||
.colour_content {
|
||||
width: 14%;
|
||||
text-align: center;
|
||||
float: left;
|
||||
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.size {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .flex5 {
|
||||
// display: flex;
|
||||
// justify-content: space-evenly;
|
||||
// align-items: center;
|
||||
// flex-wrap: wrap;
|
||||
// }
|
||||
</style>
|
||||
110
src/views/sevenLargeScreen/rainfallMonitoring/rightBottom.vue
Normal file
110
src/views/sevenLargeScreen/rainfallMonitoring/rightBottom.vue
Normal file
@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div class="tableBox">
|
||||
<Card title="报警记录">
|
||||
<div class="tabList">
|
||||
<div>报警设备</div>
|
||||
<div>报警时间</div>
|
||||
<div>报警类型</div>
|
||||
</div>
|
||||
<div class="listBox" ref="scrollRef">
|
||||
<el-scrollbar style="height: 80%">
|
||||
<div v-for="item in list" class="listStyle">
|
||||
<div style="margin-left: 10px" class="dev">{{ item.deviceName }}</div>
|
||||
<div>{{ item.tempAlarmTime }}</div>
|
||||
<div>{{ item.alarmTypeName }}</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<div class="notoDta" v-if="list.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import { selectNewEnvironmentAlarmListApi } from "@/api/modules/headNoise";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { ref, onMounted } from "vue";
|
||||
const store = GlobalStore();
|
||||
|
||||
const list = ref([]);
|
||||
//获取报警记录
|
||||
const getList = async () => {
|
||||
const res = await selectNewEnvironmentAlarmListApi({ projectSn: store.sn });
|
||||
console.log("获取报警记录", res);
|
||||
list.value = res.result;
|
||||
};
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.tabList {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 14%;
|
||||
background: url("@/assets/images/dustNoise/rightBottom.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// position: absolute;
|
||||
left: 75.5%;
|
||||
top: 75%;
|
||||
color: #7b86a3;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
line-height: 30px;
|
||||
justify-content: space-around;
|
||||
div {
|
||||
text-align: center;
|
||||
width: 30%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.listBox {
|
||||
height: 91%;
|
||||
.listStyle {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
color: #fff;
|
||||
height: 12%;
|
||||
line-height: 25px;
|
||||
font-size: calc(100vw * 12 / 1920);
|
||||
div {
|
||||
text-align: center;
|
||||
|
||||
width: 30%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.listStyle:hover {
|
||||
background: #091f3f;
|
||||
}
|
||||
}
|
||||
.notoDta {
|
||||
top: 75%;
|
||||
width: 12%;
|
||||
margin: 5% -40%;
|
||||
left: 120%;
|
||||
position: absolute;
|
||||
img {
|
||||
width: 40%;
|
||||
margin: 5% 30%;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
margin: -6% 37%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
511
src/views/sevenLargeScreen/rainfallMonitoring/rightCenter.vue
Normal file
511
src/views/sevenLargeScreen/rainfallMonitoring/rightCenter.vue
Normal file
@ -0,0 +1,511 @@
|
||||
<template>
|
||||
<Card title="今日报警统计">
|
||||
<div class="top-bg">
|
||||
<div class="num">{{ totalAlarm }}</div>
|
||||
<div class="styleImg"></div>
|
||||
<div id="echartsTest" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import Card from "@/components/card.vue";
|
||||
import { getAlarmCountTotalApi } from "@/api/modules/headNoise";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
// let timer = ref(null);
|
||||
// //角度，用来做简单的动画效果的
|
||||
// let angle = ref(0);
|
||||
// let value = ref(55.33);
|
||||
const totalAlarm = ref(0);
|
||||
//图形右侧数据
|
||||
let totalData = ref([
|
||||
{
|
||||
name: "噪声报警",
|
||||
value: 0,
|
||||
radio: 0
|
||||
},
|
||||
{
|
||||
name: "PM2.5超标报警",
|
||||
value: 0,
|
||||
radio: 0
|
||||
},
|
||||
{
|
||||
name: "PM10超标报警",
|
||||
value: 0,
|
||||
radio: 0
|
||||
},
|
||||
{
|
||||
name: "TSP报警",
|
||||
value: 0,
|
||||
radio: 0
|
||||
},
|
||||
{
|
||||
name: "温度报警",
|
||||
value: 0,
|
||||
radio: 0
|
||||
},
|
||||
{
|
||||
name: "湿度报警",
|
||||
value: 0,
|
||||
radio: 0
|
||||
},
|
||||
{
|
||||
name: "风速报警",
|
||||
value: 0,
|
||||
radio: 0
|
||||
}
|
||||
]);
|
||||
//控制图形数据比例
|
||||
let trafficWay = reactive([
|
||||
{
|
||||
name: "噪声报警",
|
||||
value: 10
|
||||
},
|
||||
{
|
||||
name: "PM2.5超标报警",
|
||||
value: 10
|
||||
},
|
||||
{
|
||||
name: "PM10超标报警",
|
||||
value: 10
|
||||
},
|
||||
{
|
||||
name: "TSP报警",
|
||||
value: 10
|
||||
},
|
||||
{
|
||||
name: "温度报警",
|
||||
value: 10
|
||||
},
|
||||
{
|
||||
name: "湿度报警",
|
||||
value: 10
|
||||
},
|
||||
{
|
||||
name: "风速报警",
|
||||
value: 10
|
||||
}
|
||||
]);
|
||||
let data = reactive([]);
|
||||
// let color = reactive(["#5A5EE0", "#34B1FA", "#53E4D8", "#52B06A", "#E8E65A", "#F06C48"]);
|
||||
let color = reactive(["#82FBEA", "#EEA959", "#4CC4F8 ", "#E0D838", "#EC6266", "#6375C7", "#81F279"]);
|
||||
for (var i = 0; i < trafficWay.length; i++) {
|
||||
data.push(
|
||||
{
|
||||
value: trafficWay[i].value,
|
||||
name: trafficWay[i].name,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 0,
|
||||
shadowBlur: 2,
|
||||
borderColor: color[i],
|
||||
shadowColor: color[i]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
name: "",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
color: "rgba(0, 0, 0, 0)",
|
||||
borderColor: "rgba(0, 0, 0, 0)",
|
||||
borderWidth: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
const seriesOption = ref([
|
||||
// {
|
||||
// name: "ring5",
|
||||
// type: "custom",
|
||||
// coordinateSystem: "none",
|
||||
// renderItem: function (params, api) {
|
||||
// return {
|
||||
// type: "arc",
|
||||
// shape: {
|
||||
// cx: api.getWidth() / 4,
|
||||
// cy: api.getHeight() / 2,
|
||||
// r: 80,
|
||||
// startAngle: ((0 + angle.value) * Math.PI) / 180,
|
||||
// endAngle: ((90 + angle.value) * Math.PI) / 180
|
||||
// },
|
||||
// style: {
|
||||
// stroke: "#0CD3DB",
|
||||
// fill: "transparent",
|
||||
// lineWidth: 1.5
|
||||
// },
|
||||
// silent: true
|
||||
// };
|
||||
// },
|
||||
// data: [0]
|
||||
// },
|
||||
// {
|
||||
// name: "ring5",
|
||||
// type: "custom",
|
||||
// coordinateSystem: "none",
|
||||
// renderItem: function (params, api) {
|
||||
// return {
|
||||
// type: "arc",
|
||||
// shape: {
|
||||
// cx: api.getWidth() / 4,
|
||||
// cy: api.getHeight() / 2,
|
||||
// r: 80,
|
||||
// startAngle: ((180 + angle.value) * Math.PI) / 180,
|
||||
// endAngle: ((270 + angle.value) * Math.PI) / 180
|
||||
// },
|
||||
// style: {
|
||||
// stroke: "#0CD3DB",
|
||||
// fill: "transparent",
|
||||
// lineWidth: 1.5
|
||||
// },
|
||||
// silent: true
|
||||
// };
|
||||
// },
|
||||
// data: [0]
|
||||
// },
|
||||
// {
|
||||
// name: "ring5",
|
||||
// type: "custom",
|
||||
// coordinateSystem: "none",
|
||||
// renderItem: function (params, api) {
|
||||
// return {
|
||||
// type: "arc",
|
||||
// shape: {
|
||||
// cx: api.getWidth() / 4,
|
||||
// cy: api.getHeight() / 2,
|
||||
// r: 90,
|
||||
// startAngle: ((270 + -angle.value) * Math.PI) / 180,
|
||||
// endAngle: ((40 + -angle.value) * Math.PI) / 180
|
||||
// },
|
||||
// style: {
|
||||
// stroke: "#0CD3DB",
|
||||
// fill: "transparent",
|
||||
// lineWidth: 1.5
|
||||
// },
|
||||
// silent: true
|
||||
// };
|
||||
// },
|
||||
// data: [0]
|
||||
// },
|
||||
// {
|
||||
// name: "ring5",
|
||||
// type: "custom",
|
||||
// coordinateSystem: "none",
|
||||
// renderItem: function (params, api) {
|
||||
// return {
|
||||
// type: "arc",
|
||||
// shape: {
|
||||
// cx: api.getWidth() / 4,
|
||||
// cy: api.getHeight() / 2,
|
||||
// r: 90,
|
||||
// startAngle: ((90 + -angle.value) * Math.PI) / 180,
|
||||
// endAngle: ((220 + -angle.value) * Math.PI) / 180
|
||||
// },
|
||||
// style: {
|
||||
// stroke: "#0CD3DB",
|
||||
// fill: "transparent",
|
||||
// lineWidth: 1.5
|
||||
// },
|
||||
// silent: true
|
||||
// };
|
||||
// },
|
||||
// data: [0]
|
||||
// },
|
||||
// {
|
||||
// name: "ring5",
|
||||
// type: "custom",
|
||||
// coordinateSystem: "none",
|
||||
// renderItem: function (params, api) {
|
||||
// let x0 = api.getWidth() / 4;
|
||||
// let y0 = api.getHeight() / 2;
|
||||
// let r = 90;
|
||||
// let point = getCirlPoint(x0, y0, r, 90 + -angle.value);
|
||||
// return {
|
||||
// type: "circle",
|
||||
// shape: {
|
||||
// cx: point.x,
|
||||
// cy: point.y,
|
||||
// r: 4
|
||||
// },
|
||||
// style: {
|
||||
// stroke: "#0CD3DB", //粉
|
||||
// fill: "#0CD3DB"
|
||||
// },
|
||||
// silent: true
|
||||
// };
|
||||
// },
|
||||
// data: [0]
|
||||
// },
|
||||
// {
|
||||
// name: "ring5", //绿点
|
||||
// type: "custom",
|
||||
// coordinateSystem: "none",
|
||||
// renderItem: function (params, api) {
|
||||
// let x0 = api.getWidth() / 4;
|
||||
// let y0 = api.getHeight() / 2;
|
||||
// let r = 90;
|
||||
// let point = getCirlPoint(x0, y0, r, 270 + -angle.value);
|
||||
// return {
|
||||
// type: "circle",
|
||||
// shape: {
|
||||
// cx: point.x,
|
||||
// cy: point.y,
|
||||
// r: 4
|
||||
// },
|
||||
// style: {
|
||||
// stroke: "#0CD3DB", //绿
|
||||
// fill: "#0CD3DB"
|
||||
// },
|
||||
// silent: true
|
||||
// };
|
||||
// },
|
||||
// data: [0]
|
||||
// },
|
||||
|
||||
{
|
||||
name: "",
|
||||
type: "pie",
|
||||
center: ["25%", "55%"],
|
||||
clockWise: false,
|
||||
radius: [70, 60],
|
||||
hoverAnimation: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
data: data
|
||||
},
|
||||
//
|
||||
// {
|
||||
// type: 'pie',
|
||||
// radius: [70, 70],
|
||||
// hoverAnimation: false,
|
||||
// clockWise: false,
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// borderColor: '#34B0FA',
|
||||
// borderWidth: 1,
|
||||
// }
|
||||
// },
|
||||
// label: {
|
||||
// show: false
|
||||
// },
|
||||
// data: [200]
|
||||
// },
|
||||
{
|
||||
type: "pie",
|
||||
center: ["25%", "54%"],
|
||||
|
||||
radius: [50, 50],
|
||||
zlevel: 2,
|
||||
silent: true,
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: _pie3()
|
||||
}
|
||||
]);
|
||||
|
||||
let option = ref({
|
||||
// backgroundColor: "#0A2E5D",
|
||||
color: color,
|
||||
center: ["25%", "50%"],
|
||||
|
||||
title: {
|
||||
text: "报警总数",
|
||||
top: "57%",
|
||||
textAlign: "center",
|
||||
left: "24%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
fontWeight: "400"
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
icon: "rect",
|
||||
itemGap: 20,
|
||||
itemWidth: 15,
|
||||
itemHeight: 15,
|
||||
orient: "vertical",
|
||||
x: "right",
|
||||
formatter: function (name) {
|
||||
let num;
|
||||
for (let i = 0; i < totalData.value.length; i++) {
|
||||
if (totalData.value[i].name === name) {
|
||||
let cont = 9;
|
||||
let stringArr = " ";
|
||||
// if (name.length == 4) {
|
||||
// cont = 19;
|
||||
// } else if (name.length == 5) {
|
||||
// cont = 20;
|
||||
// }
|
||||
// for (let j = 0; j < cont; j++) {
|
||||
// stringArr += "";
|
||||
// }
|
||||
num = name + stringArr + totalData.value[i].value;
|
||||
}
|
||||
}
|
||||
return num;
|
||||
},
|
||||
data: ["噪声报警", "PM2.5超标报警", "PM10超标报警", "TSP报警", "温度报警", "湿度报警", "风速报警"],
|
||||
top: 20,
|
||||
right: 300,
|
||||
left: 280,
|
||||
bottom: 10,
|
||||
align: "left",
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
},
|
||||
itemGap: 15
|
||||
},
|
||||
toolbox: {
|
||||
show: false
|
||||
},
|
||||
series: seriesOption.value
|
||||
});
|
||||
|
||||
function _pie3() {
|
||||
let dataArr = [];
|
||||
for (var i = 0; i < 100; i++) {
|
||||
if (i % 2 === 0) {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#5A5DE0",
|
||||
borderWidth: 4,
|
||||
borderColor: "#87E0FB"
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 20,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(0,0,0,0)",
|
||||
borderWidth: 0,
|
||||
borderColor: "rgba(0,0,0,0)"
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
return dataArr;
|
||||
}
|
||||
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
|
||||
function getCirlPoint(x0, y0, r, angle) {
|
||||
let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
|
||||
let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
|
||||
return {
|
||||
x: x1,
|
||||
y: y1
|
||||
};
|
||||
}
|
||||
|
||||
// function draw(echartsTest) {
|
||||
// angle.value = angle.value + 3;
|
||||
// echartsTest.setOption(option, true);
|
||||
// //window.requestAnimationFrame(draw);
|
||||
// }
|
||||
//获取今日报警统计
|
||||
const getList = async () => {
|
||||
const res = await getAlarmCountTotalApi({
|
||||
sn: store.sn,
|
||||
selectType: 1
|
||||
});
|
||||
// console.log("获取今日报警统计", res);
|
||||
if (res.result) {
|
||||
totalAlarm.value = res.result.totalAlarm;
|
||||
for (let i = 0; i < totalData.value.length; i++) {
|
||||
if (totalData.value[i].name == "噪声报警") {
|
||||
totalData.value[i].value = res.result.noiseNum;
|
||||
} else if (totalData.value[i].name == "PM2.5超标报警") {
|
||||
totalData.value[i].value = res.result.pm25Num;
|
||||
} else if (totalData.value[i].name == "PM10超标报警") {
|
||||
totalData.value[i].value = res.result.pm10Num;
|
||||
} else if (totalData.value[i].name == "TSP报警") {
|
||||
totalData.value[i].value = res.result.tspNum;
|
||||
} else if (totalData.value[i].name == "温度报警") {
|
||||
totalData.value[i].value = res.result.temperatureNum;
|
||||
} else if (totalData.value[i].name == "湿度报警") {
|
||||
totalData.value[i].value = res.result.humidityNum;
|
||||
} else if (totalData.value[i].name == "风速报警") {
|
||||
totalData.value[i].value = res.result.windspeedNum;
|
||||
}
|
||||
}
|
||||
console.log("获取今日报警统计", totalData.value);
|
||||
draw();
|
||||
}
|
||||
};
|
||||
|
||||
function draw() {
|
||||
console.log("绘图数据", option.value);
|
||||
let echartsTest = echarts.init(document.getElementById("echartsTest"));
|
||||
echartsTest.setOption(option.value);
|
||||
}
|
||||
onMounted(async () => {
|
||||
getList();
|
||||
// setTimeout(function () {
|
||||
// timer = setInterval(function () {
|
||||
// // //用setInterval做动画感觉有问题
|
||||
// draw(echartsTest);
|
||||
// }, 100);
|
||||
// }, 700);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.top-bg {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
.num {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
font-family: sadigitalNumber;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 41%;
|
||||
left: 15%;
|
||||
z-index: 9;
|
||||
}
|
||||
.styleImg {
|
||||
left: 5%;
|
||||
top: 17%;
|
||||
width: 40%;
|
||||
position: absolute;
|
||||
height: 75%;
|
||||
background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
244
src/views/sevenLargeScreen/rainfallMonitoring/rightTop.vue
Normal file
244
src/views/sevenLargeScreen/rainfallMonitoring/rightTop.vue
Normal file
@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<Card title="空气分析">
|
||||
<div class="box">
|
||||
<div class="rightHeader">
|
||||
<div
|
||||
class="day"
|
||||
:class="airType == 1 ? 'active' : ''"
|
||||
@click="
|
||||
airType = 1;
|
||||
getAirQualityStatistics();
|
||||
"
|
||||
>
|
||||
最近30天
|
||||
</div>
|
||||
<div
|
||||
class="year"
|
||||
:class="airType == 2 ? 'active' : ''"
|
||||
@click="
|
||||
airType = 2;
|
||||
getAirQualityStatistics();
|
||||
"
|
||||
>
|
||||
最近一年
|
||||
</div>
|
||||
</div>
|
||||
<div id="rightEcharts" ref="rightEcharts" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { getAirQualityStatisticsApi } from "@/api/modules/headNoise";
|
||||
import * as echarts from "echarts";
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import Card from "@/components/card.vue";
|
||||
const store = GlobalStore();
|
||||
const airType = ref(1);
|
||||
const airTypeEchart = ref([]);
|
||||
const airTypeData = ref([]);
|
||||
const option = reactive({
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
bottom: "-8%",
|
||||
top: "15%",
|
||||
containLabel: true
|
||||
},
|
||||
// backgroundColor: '#101129',
|
||||
xAxis: {
|
||||
show: false,
|
||||
type: "value",
|
||||
max: 100
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
inverse: true,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
fontSize: "14",
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
data: airTypeEchart.value
|
||||
},
|
||||
{
|
||||
axisTick: "none",
|
||||
inverse: true,
|
||||
axisLine: "none",
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: "12"
|
||||
}
|
||||
},
|
||||
data: airTypeData.value
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
inverse: true,
|
||||
axisTick: "none",
|
||||
axisLine: "none",
|
||||
show: true,
|
||||
data: airTypeData.value
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: "#14346c",
|
||||
borderRadius: 30
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
// position:'right',
|
||||
// formatter:'{@score}%',
|
||||
textStyle: {
|
||||
color: "#03fcfe",
|
||||
fontSize: "12"
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 10,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#194077"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#4CC4F8"
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
barWidth: 3,
|
||||
data: airTypeData.value
|
||||
},
|
||||
{
|
||||
name: "内圆",
|
||||
type: "scatter",
|
||||
stack: "圆",
|
||||
yAxisIndex: 0,
|
||||
data: airTypeData.value, //小白点，数据静态
|
||||
label: false,
|
||||
symbolSize: 2,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: "#fff",
|
||||
borderWidth: 4,
|
||||
color: "#fff",
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
z: 3
|
||||
},
|
||||
{
|
||||
name: "内圆框",
|
||||
type: "scatter",
|
||||
stack: "圆",
|
||||
yAxisIndex: 0,
|
||||
data: [0, 0, 0, 0, 0, 0], //小白点外圈，数据静态
|
||||
label: false,
|
||||
symbolSize: 15,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: "#4CC4F8",
|
||||
borderWidth: 2,
|
||||
color: "#14346c",
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
z: 2
|
||||
}
|
||||
]
|
||||
});
|
||||
function rightChart() {
|
||||
let chartDom = document.getElementById("rightEcharts");
|
||||
if (chartDom) {
|
||||
chartDom.removeAttribute("_echarts_instance_");
|
||||
}
|
||||
let rightEcharts = echarts.init(document.getElementById("rightEcharts"));
|
||||
rightEcharts.setOption(option);
|
||||
// window.onresize = function () {
|
||||
// myEchart.resize();
|
||||
// }
|
||||
}
|
||||
|
||||
//获取空气分析
|
||||
const getAirQualityStatistics = async () => {
|
||||
const res = await getAirQualityStatisticsApi({
|
||||
type: airType.value,
|
||||
projectSn: store.sn
|
||||
});
|
||||
// console.log("倒叙前的", res.result);
|
||||
// let data = res.result;
|
||||
// data.sort();
|
||||
// console.log("data倒叙后的", data);
|
||||
if (res.result) {
|
||||
for (let index = 0; index < res.result.length; index++) {
|
||||
airTypeEchart.value[index] = res.result[index].type;
|
||||
airTypeData.value[index] = res.result[index].num;
|
||||
}
|
||||
|
||||
rightChart();
|
||||
}
|
||||
};
|
||||
onMounted(async () => {
|
||||
getAirQualityStatistics();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.rightHeader {
|
||||
width: 30%;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
left: 63%;
|
||||
top: 4%;
|
||||
.active {
|
||||
height: 5%;
|
||||
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.day {
|
||||
width: 80%;
|
||||
margin-right: 5%;
|
||||
z-index:99;
|
||||
}
|
||||
.year {
|
||||
width: 80%;
|
||||
margin-right: 8%;
|
||||
z-index:99;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user