Skip to content

长
长兴大屏
Commit 89fd8811 authored by 张牧越's avatar 张牧越
Browse files
Options

大屏改版

parent c0cf97b4
Show whitespace changes
Inline Side-by-side
Showing with 278 additions and 17 deletions
src/api/index.js
View file @ 89fd8811
......@@ -113,3 +113,11 @@ export async function getDustList(type) {
})
}
export async function getProjectListByType(type) {
return await request({
url: `/wisdom/screen/noise/${type}`,
method: 'get'
})
}
src/components/common/STable.vue
View file @ 89fd8811
......@@ -51,7 +51,14 @@
</div>
</div>
<div v-if="!tableData || tableData.length == 0" class="no-data">
<span>暂无数据</span>
<div class="no-data">
<img
style="width: 120px"
src="@/assets/images/common/no-data.png"
alt=""
/>
<div>暂无数据</div>
</div>
</div>
</div>
</div>
......@@ -155,11 +162,8 @@ export default {
height: 100%;
font-size: 20px;
position: relative;
span {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
}
.no-data {
padding: 12px 0;
}
</style>
\ No newline at end of file
src/views/DataStatis/Index.vue
View file @ 89fd8811
......@@ -2,7 +2,7 @@
<div id="data-statis">
<div id="map-container"></div>
<div class="left-area">
<Section class="sections" title="今日区域内扬尘噪音实时监测">
<!-- <Section class="sections" title="今日区域内扬尘噪音实时监测">
<div class="statis">
<div class="stat-container">
<div>
......@@ -59,11 +59,62 @@
</div>
</div>
</div>
</Section> -->
<Section
class="sections"
style="height: 15% !important"
title="气象站数据与当前工程平均值对比"
>
<div class="weather">
<div style="width: 100%">
<div class="weather-bg">
<div class="weather-value">
<div class="icon-span">
<img src="@/assets/images/index/weather.png" alt="" />
<div class="right-bg">气象站</div>
</div>
<div class="values">
<div class="value-bg">
<div class="label">PM2.5</div>
<div>{{ parseInt(todayDataInfo.pm25 || 0) }}</div>
</div>
<div class="value-bg">
<div class="label">PM10</div>
<div>{{ parseInt(todayDataInfo.pm10 || 0) }}</div>
</div>
<!-- <div>{{ todayDataInfo.noise }}</div> -->
</div>
</div>
<div class="project-value">
<div class="icon-span">
<img src="@/assets/images/index/project.png" alt="" />
<div class="right-bg">工&nbsp;&nbsp;程</div>
</div>
<div class="values">
<div class="value-bg">
<div class="label">PM2.5</div>
<div>{{ parseInt(projectDataInfo.pm25 || 0) }}</div>
</div>
<div class="value-bg">
<div class="label">PM10</div>
<div>{{ parseInt(projectDataInfo.pm10 || 0) }}</div>
</div>
<!-- <div>{{ projectDataInfo.noise }}</div> -->
</div>
</div>
</div>
</div>
</div>
</Section>
<Section class="sections" title="本年地区与工程PM10对比分析">
<Section
class="sections"
style="height: 25% !important"
title="本年地区与工程PM10对比分析"
>
<div id="line-bar-chart" ref="pm10chart"></div>
</Section>
<Section class="sections long">
<!-- <Section class="sections long">
<div class="switch-btns">
<div
:class="['bg-2-1', pm10rate == 'today' ? 'active' : '']"
......@@ -94,7 +145,70 @@
</template>
</template>
</STable>
</Section> -->
<Section
class="sections"
style="height: 30% !important"
title="当前超标工程"
>
<STable
:headers="header1"
:table-data="leftBtmProjectList"
@row-click="openProjectWindow"
>
<template slot-scope="scope">
<template v-if="scope.header.slot == 'over_name'">
<span :class="['span-status']" :style="{ color: '#5BDEA5' }"
>{{ scope.row.over_name }}/{{ scope.row.over_value }}</span
>
</template>
</template>
</STable>
</Section>
<Section
style="height: 30% !important"
class="sections"
title="当前离线工程"
>
<STable
:headers="header1_2"
:table-data="leftBtmProjectList2"
@row-click="openProjectWindow"
>
</STable>
</Section>
<!-- <Section class="sections long">
<div class="switch-btns">
<div
:class="['bg-2-1', projectType == 'overproject' ? 'active' : '']"
@click="switchProject('overproject')"
>
当前超标工程
</div>
<div
:class="['bg-2-1', projectType == 'offproject' ? 'active' : '']"
@click="switchProject('offproject')"
>
当前离线工程
</div>
</div>
<STable
style="height: calc(100% - 0.44rem)"
:headers="projectType == 'overproject' ? header1 : header1_2"
:table-data="leftBtmProjectList"
@row-click="openProjectWindow"
>
<template slot-scope="scope">
<template v-if="scope.header.slot == 'over_name'">
<span :class="['span-status']" :style="{ color: '#5BDEA5' }"
>{{ scope.row.over_name }}/{{ scope.row.over_value }}</span
>
</template>
</template>
</STable>
</Section> -->
<ProjectDialog
:visible="projectDialogVisible"
......@@ -290,6 +404,7 @@ import {
getVideoImportList,
getStatistics,
getDustList,
getProjectListByType,
} from "@/api/index";
export default {
name: "DataStatis",
......@@ -308,16 +423,31 @@ export default {
{
name: "工程名称",
props: "project_name",
width: "60%",
width: "50%",
style: {
textAlign: "left",
},
},
{
name: "PM10",
props: "pm10",
slot: "pm10",
width: "15%",
name: "超标内容",
props: "over_name",
slot: "over_name",
width: "25%",
},
],
header1_2: [
{
name: "所属区域",
props: "project_region_name",
width: "25%",
},
{
name: "工程名称",
props: "project_name",
width: "75%",
style: {
textAlign: "left",
},
},
],
data1: [
......@@ -444,6 +574,9 @@ export default {
currentAreaId: "",
dustType: "offline",
dustList: [],
projectType: "overproject",
leftBtmProjectList: [],
leftBtmProjectList2: [],
};
},
methods: {
......@@ -459,7 +592,8 @@ export default {
getPM10Analysis().then((res) => {
this.renderPM10Chart(res.data.pm10);
});
this.switchPm10Rate(this.pm10rate);
// this.switchPm10Rate(this.pm10rate);
this.switchProject();
this.switchDustList(this.dustType);
getVideoImportList().then((res) => {
this.videoData = res.data;
......@@ -781,6 +915,7 @@ export default {
itemStyle: {
color: "rgba(135, 206, 250, 0.6)", // 柱状图颜色，半透明蓝色
},
barWidth: 15,
},
{
name: "平均工程PM10",
......@@ -810,6 +945,15 @@ export default {
this.pm10rankList = res.data;
});
},
switchProject() {
getProjectListByType("overproject").then((res) => {
this.leftBtmProjectList = res.data;
});
getProjectListByType("offproject").then((res) => {
this.leftBtmProjectList2 = res.data;
});
},
switchDustList(type) {
this.dustType = type;
getDustList(type).then((res) => {
......@@ -1145,4 +1289,109 @@ export default {
}
}
}
.weather {
padding: 12px 0;
display: flex;
align-items: center;
height: 100%;
.top-label {
margin-left: 124px;
display: flex;
justify-content: space-between;
font-size: 14px;
color: #afcfed;
width: calc(100% - 124px);
div {
width: calc(100% / 3 - calc(56px / 3));
text-align: center;
}
}
}
.weather-value,
.project-value {
width: 100%;
.icon-span {
width: 110px;
display: flex;
justify-content: space-between;
font-size: 14px;
img {
width: 40px;
vertical-align: top;
}
.right-bg {
width: 70px;
line-height: 40px;
text-align: center;
color: #fff;
background: url("@/assets/images/index/right-bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
}
.weather-value {
margin-bottom: 4px;
display: flex;
justify-content: space-between;
.values {
display: flex;
justify-content: space-between;
width: calc(100% - 124px);
margin-left: 14px;
.label {
font-size: 14px;
color: #afcfed;
margin: 0 10px;
width: 40px;
}
.value-bg {
display: flex;
background: url("@/assets/images/index/top-value.png");
background-repeat: no-repeat;
background-size: 100% 100%;
width: calc(100% / 2 - 13px);
text-align: center;
line-height: 40px;
font-size: 18px;
color: #5bdea5;
}
}
}
.project-value {
display: flex;
justify-content: space-between;
.values {
display: flex;
justify-content: space-between;
width: calc(100% - 124px);
margin-left: 14px;
.label {
font-size: 14px;
color: #afcfed;
margin: 0 10px;
width: 40px;
}
.value-bg {
background: url("@/assets/images/index/btm-value.png");
background-repeat: no-repeat;
background-size: 100% 100%;
width: calc(100% / 2 - 13px);
text-align: center;
line-height: 40px;
font-size: 18px;
color: #5bdea5;
display: flex;
}
}
}
.weather-bg {
width: 100%;
background: url("@/assets/images/index/weather-bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
</style>
\ No newline at end of file
vue.config.js
View file @ 89fd8811
......@@ -23,7 +23,7 @@ module.exports = defineConfig({
port: 3000,
proxy: {
'/wisdom': {
target: 'http://cx.zhjd.io/',
target: 'https://cxzjz.vnet1000.net/',
changeOrigin: true,
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment