admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

中建四(大屏):布局细节调整

Browse Source
This commit is contained in:
骆乐 2022-09-14 14:34:38 +08:00
parent a3460f5817
commit 7753fbaeb0
9 changed files with 75 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/store/index.js
View File

@ -45,8 +45,8 @@ export default new Vuex.Store({
// UPLOADURL:'http://10.0.1.43:6023/upload/image',//测试 // UPLOADURL:'http://10.0.1.43:6023/upload/image',//测试
// FILEURL:'http://10.0.1.43:6023/image/',//测试 // FILEURL:'http://10.0.1.43:6023/image/',//测试
BASEURL: baseUrl ? baseUrl : window.location.protocol + '//' + window.location.host + '/', // BASEURL: baseUrl ? baseUrl : window.location.protocol + '//' + window.location.host + '/', //
UPLOADURL: window.location.protocol + '//' + window.location.host + '/upload/image', // // UPLOADURL: window.location.protocol + '//' + window.location.host + '/upload/image', //
FILEURL: window.location.protocol + '//' + window.location.host + '/image/', //测试 // tag: 本地测试接口 // FILEURL: window.location.protocol + '//' + window.location.host + '/image/', //测试 // tag: 本地测试接口
/* 2022-05-16 */ /* 2022-05-16 */
// tag: 部署河南项目时，需要打开这两行代码 // tag: 部署河南项目时，需要打开这两行代码
// UPLOADURL: 'http://124.71.178.44:100/upload/image', // UPLOADURL: 'http://124.71.178.44:100/upload/image',
@ -56,8 +56,8 @@ export default new Vuex.Store({
// UPLOADURL: 'http://182.90.224.237:7000/upload/image', // UPLOADURL: 'http://182.90.224.237:7000/upload/image',
// FILEURL: 'http://182.90.224.237:7000/image/', // FILEURL: 'http://182.90.224.237:7000/image/',
// 邱平毅的 // 邱平毅的
// UPLOADURL: 'http://192.168.34.216:6023/upload/image', UPLOADURL: 'http://192.168.34.216:6023/upload/image',
// FILEURL: 'http://192.168.34.216:6023/image/', FILEURL: 'http://192.168.34.216:6023/image/',
// UPLOADURL:'http://'+"61.190.32.219:9050"+'/upload/image',//正式 // UPLOADURL:'http://'+"61.190.32.219:9050"+'/upload/image',//正式
// FILEURL:'http://'+"61.190.32.219:9050"+'/image/',//正式 // FILEURL:'http://'+"61.190.32.219:9050"+'/image/',//正式

10
src/views/projectAdmin/zjsj/carbon/centerBottom.vue
View File

@ -10,18 +10,18 @@
:key="index" :key="index"
> >
<p> <p>
<span>{{ item.week }}</span> <span style="font-size:14px;">{{ item.week }}</span>
<!-- <span>{{ item.date }}</span> --> <!-- <span>{{ item.date }}</span> -->
<!-- <span>（{{ item.week }}）</span> --> <!-- <span>（{{ item.week }}）</span> -->
</p> </p>
<div style="height: 15%"></div> <div style="height: 20%"></div>
<div class="imgBox"> <div class="imgBox">
<img :src="item.url" /> <img :src="item.url" />
</div> </div>
<div style="height: 15%"></div> <div style="height: 15%"></div>
<p class="weather">{{ item.wea }}</p> <p class="weather">{{ item.wea }}</p>
<p class="temp">{{ item.tem2 }} ~ {{ item.tem1 }}</p> <p class="temp">{{ item.tem2 }} ~ {{ item.tem1 }}</p>
<div style="height: 6%"></div> <div style="height: 8%"></div>
<p> <p>
{{ $t("message.environmentalOverview.wind_power") }} {{ $t("message.environmentalOverview.wind_power") }}
{{ item.win_speed }} {{ item.win_speed }}
@ -90,10 +90,10 @@ export default {
width: 13.28%; width: 13.28%;
text-align: center; text-align: center;
padding-top: 13px; padding-top: 13px;
margin-top: -5px; margin-top: 5px;
// margin-bottom: 110px; // margin-bottom: 110px;
// height: calc(100% - 13px); // height: calc(100% - 13px);
height: 205px; height: 265px;
padding-bottom: 13px; padding-bottom: 13px;
background: linear-gradient( background: linear-gradient(
rgba(21, 25, 33, 0.06), rgba(21, 25, 33, 0.06),

67
src/views/projectAdmin/zjsj/carbon/centerTop.vue
View File

@ -2,7 +2,7 @@
<Card title="实时数据"> <Card title="实时数据">
<div class="containerBox"> <div class="containerBox">
<div class="dataBoardContent"> <div class="dataBoardContent">
<el-popover style="margin-left:900px" placement="bottom" width="70" trigger="click"> <el-popover style="margin-left:750px" placement="bottom" width="70" trigger="click">
<ul class="devList"> <ul class="devList">
<li <li
v-for="(item, index) in devList" v-for="(item, index) in devList"
@ -30,11 +30,11 @@
<div class="realTimeData"> <div class="realTimeData">
<div class="realTimeData_item"> <div class="realTimeData_item">
<div class="realTimeData_item_img"> <div class="realTimeData_item_img">
<img src="@/assets/images/greenOverview/PM2.5@1x.png" alt /> <img class="imageBox" src="@/assets/images/greenOverview/PM2.5@1x.png" alt />
</div> </div>
<div class="realTimeData_item_text"> <div class="realTimeData_item_text">
<p>PM2.5</p> <p>PM2.5</p>
<p>{{plantCap.pm25?plantCap.pm25:'--'}}μg/m3</p> <p style="color:#f24c32 ;">{{plantCap.pm25?plantCap.pm25:'--'}}μg/m3</p>
<!-- <img src="@/assets/images/greenOverview/形状.gif" alt="">--> <!-- <img src="@/assets/images/greenOverview/形状.gif" alt="">-->
<!-- v-if="plantCap.pm25AlarmType == 1"--> <!-- v-if="plantCap.pm25AlarmType == 1"-->
<img <img
@ -49,7 +49,7 @@
</div> </div>
<div class="realTimeData_item_text"> <div class="realTimeData_item_text">
<p>PM10</p> <p>PM10</p>
<p>{{plantCap.pm10?plantCap.pm10:'--'}}μg/m3</p> <p style="color:#f24c32 ;">{{plantCap.pm10?plantCap.pm10:'--'}}μg/m3</p>
<!-- <img src="@/assets/images/greenOverview/形状.gif" alt=""> --> <!-- <img src="@/assets/images/greenOverview/形状.gif" alt=""> -->
<!-- 显示条件 v-if="plantCap.pm10AlarmType == 1" --> <!-- 显示条件 v-if="plantCap.pm10AlarmType == 1" -->
<img <img
@ -64,10 +64,9 @@
</div> </div>
<div class="realTimeData_item_text"> <div class="realTimeData_item_text">
<p> <p>
<!-- 温度 -->
{{'气压'}} {{'气压'}}
</p> </p>
<p>{{plantCap.temperature?plantCap.temperature:'--'}}℃</p> <p style="color:#f24c32 ;">{{plantCap.crc?plantCap.crc:'--'}}μg/m3</p>
<!-- <img src="@/assets/images/greenOverview/形状.gif" alt="">--> <!-- <img src="@/assets/images/greenOverview/形状.gif" alt="">-->
<!-- v-if="plantCap.temperatureAlarmType == 1" --> <!-- v-if="plantCap.temperatureAlarmType == 1" -->
<img <img
@ -85,13 +84,10 @@
<!-- 温度 --> <!-- 温度 -->
{{$t('message.dataBoard.temperature')}} {{$t('message.dataBoard.temperature')}}
</p> </p>
<p>{{plantCap.temperature?plantCap.temperature:'--'}}℃</p> <p style="color: #66d4d9;">{{plantCap.temperature?plantCap.temperature:'--'}}℃</p>
<!-- <img src="@/assets/images/greenOverview/形状.gif" alt="">--> <!-- <img src="@/assets/images/greenOverview/形状.gif" alt="">-->
<!-- v-if="plantCap.temperatureAlarmType == 1"--> <!-- v-if="plantCap.temperatureAlarmType == 1"-->
<img <img src="@/assets/images/greenOverview/blue_lb.png" alt="">
src="@/assets/images/greenOverview/形状备份-2.gif"
alt
/>
</div> </div>
</div> </div>
<div class="realTimeData_item"> <div class="realTimeData_item">
@ -103,13 +99,10 @@
<!-- 湿度 --> <!-- 湿度 -->
{{$t('message.dataBoard.humidity')}} {{$t('message.dataBoard.humidity')}}
</p> </p>
<p>{{plantCap.humidity?plantCap.humidity:'--'}}%</p> <p style="color: #66d4d9;">{{plantCap.humidity?plantCap.humidity:'--'}}%</p>
<!-- <img src="@/assets/images/greenOverview/形状.gif" alt="">--> <!-- <img src="@/assets/images/greenOverview/形状.gif" alt="">-->
<!-- v-if="plantCap.humidityAlarmType == 1" --> <!-- v-if="plantCap.humidityAlarmType == 1" -->
<img <img src="@/assets/images/greenOverview/blue_lb.png" alt="">
src="@/assets/images/greenOverview/形状备份-2.gif"
alt
/>
</div> </div>
</div> </div>
<div class="realTimeData_item"> <div class="realTimeData_item">
@ -118,7 +111,7 @@
</div> </div>
<div class="realTimeData_item_text"> <div class="realTimeData_item_text">
<p>TSP</p> <p>TSP</p>
<p>{{plantCap.tsp?plantCap.tsp:'--'}}μg/m3</p> <p style="color: #66d4d9;">{{plantCap.tsp?plantCap.tsp:'--'}}μg/m3</p>
<img src="@/assets/images/greenOverview/blue_lb.png" alt=""> <img src="@/assets/images/greenOverview/blue_lb.png" alt="">
<!-- <img <!-- <img
v-if="plantCap.tspAlarmType == 1" v-if="plantCap.tspAlarmType == 1"
@ -143,6 +136,7 @@
src="@/assets/images/greenOverview/形状备份-2.gif" src="@/assets/images/greenOverview/形状备份-2.gif"
alt alt
/> />
<img src="@/assets/images/greenOverview/blue_lb.png" alt=""></img>
</div> </div>
</div> </div>
<div class="realTimeData_item"> <div class="realTimeData_item">
@ -161,6 +155,7 @@
src="@/assets/images/greenOverview/形状备份-2.gif" src="@/assets/images/greenOverview/形状备份-2.gif"
alt alt
/> />
<img src="@/assets/images/greenOverview/blue_lb.png" alt=""></img>
</div> </div>
</div> </div>
</div> </div>
@ -187,19 +182,14 @@ export default {
offlineDevNum: 0, offlineDevNum: 0,
realTimeDustNoiseDataTime: null, //圆形图实时刷新计时器 realTimeDustNoiseDataTime: null, //圆形图实时刷新计时器
plantCap: { plantCap: {
crc: "--", pm25: "21",
humidity: "--", pm10: "21",
noise: "--", temperature: "25",
plateHumidity: "--", humidity: "75",
plateTemperature: "--", tsp: "21",
pm10: "--", crc: "21",
pm25: "--", noise: "58",
pressure: "--", windspeed: "0.4",
temperature: "--",
tsp: "--",
voltage: "--",
winddirectionName: "--",
windspeed: "--"
} }
}; };
}, },
@ -299,17 +289,28 @@ export default {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
/*justify-content:space-between;*/ /*justify-content:space-between;*/
padding: 20px 100px; padding: 20px;
.realTimeData_item { .realTimeData_item {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
width: 280px; width: 260px;
height: 100px; height: 100px;
padding: 0px 50px; padding: 0px 60px;
margin-top: 40px; margin-top: 40px;
.realTimeData_item_img { .realTimeData_item_img {
box-sizing: border-box; box-sizing: border-box;
margin-right: 20px; margin-right: 20px;
// .imageBox{
// width:50px;
// height: 50px;
// }
}
.realTimeData_item_text{
p{
margin-top: 5px;
font-size: 20px;
}
} }
} }
/*margin: auto;*/ /*margin: auto;*/

14
src/views/projectAdmin/zjsj/carbon/index.vue
View File

@ -40,26 +40,26 @@ export default {
// background: url(../assets/temp/7.png) no-repeat; // background: url(../assets/temp/7.png) no-repeat;
// background-size: 100% 100%; // background-size: 100% 100%;
.between { .between {
width: 20%; width: 25%;
height: 100%; height: 100%;
.top { .top {
height: 33.33%; height: 30%;
} }
.center { .center {
height: 33.33%; height: 30%;
} }
.bottom { .bottom {
height: 33.33%; height: 40%;
} }
} }
> .center { > .center {
width: calc(60% - 40px); width: calc(50% - 40px);
height: 100%; height: 100%;
.top { .top {
height: 66.5%; height: 60%;
} }
.bottom { .bottom {
height: 33.5%; height: 40%;
} }
} }
} }

15
src/views/projectAdmin/zjsj/carbon/leftBottom.vue
View File

@ -2,7 +2,8 @@
<Card title="趋势图"> <Card title="趋势图">
<div class="contentBox"> <div class="contentBox">
<div class="dataBoardContent"> <div class="dataBoardContent">
<span class="greenBtn" @click="switchingData(1)" :class="checked == 1 ? 'active' : ''"> <div style="margin-left: 30px;">
<span class="greenBtn" @click="switchingData(1)" :class="checked == 1 ? 'active' : ''">
<img <img
v-for="item in 4" v-for="item in 4"
:key="item" :key="item"
@ -42,7 +43,7 @@
/> />
{{ $t("message.environmentalOverview.e6SelectArr")[3].title }} {{ $t("message.environmentalOverview.e6SelectArr")[3].title }}
</span> </span>
</div>
<div class="myChart" ref="myChart" /> <div class="myChart" ref="myChart" />
</div> </div>
@ -136,8 +137,11 @@ export default {
x: "10%",//x 偏移量 x: "10%",//x 偏移量
y: "5%", // y 偏移量 y: "5%", // y 偏移量
width: "85%", // 宽度 width: "85%", // 宽度
height: "60%"// 高度 height: "80%"// 高度
}, },
tooltip: {
trigger: "axis"
},
xAxis: { xAxis: {
type: "category", type: "category",
boundaryGap: false, boundaryGap: false,
@ -189,10 +193,11 @@ export default {
data: this.data, data: this.data,
type: "line", type: "line",
smooth: true, smooth: true,
showSymbol: false,
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: "rgba(53, 98, 111,0.5)" }, { offset: 0,color: "rgb(33, 55, 76)"},
{ offset: 1, color: "rgba(53, 98, 111,0.3)" } { offset: 1,color: "rgb(85, 175, 186)" }
]) ])
} }
} }

12
src/views/projectAdmin/zjsj/carbon/leftTop.vue
View File

@ -6,10 +6,10 @@
<img src="../assets/images/common/echart_orange.png" alt /> <img src="../assets/images/common/echart_orange.png" alt />
<p class="num1">45%</p> <p class="num1">45%</p>
<div class="text"> <div class="text">
<p>环境总数/环境巡检率</p> <p>环境巡检率/环境总数</p>
<p style="color:#d7d9dc;font-size:14px"> <p style="color:#d7d9dc;font-size:14px">
200/
<span style="color:#da580d">45</span> <span style="color:#da580d">45</span>
/200
</p> </p>
</div> </div>
</div> </div>
@ -18,10 +18,10 @@
<img src="../assets/images/common/echart_blue.png" alt /> <img src="../assets/images/common/echart_blue.png" alt />
<p class="num1">36%</p> <p class="num1">36%</p>
<div class="text"> <div class="text">
<p>环境总数/环境巡检率</p> <p>环境巡检率/环境总数</p>
<p style="color:#d7d9dc;font-size:14px"> <p style="color:#d7d9dc;font-size:14px">
200/
<span style="color:#72bdc9;">36</span> <span style="color:#72bdc9;">36</span>
/200
</p> </p>
</div> </div>
</div> </div>
@ -42,7 +42,7 @@ export default {
height: 100%; height: 100%;
display: flex; display: flex;
margin-top: 5%; margin-top: 5%;
margin-left: 10%;
.left, .left,
.right { .right {
height: 65%; height: 65%;
@ -51,7 +51,7 @@ export default {
color: #c5c7cc; color: #c5c7cc;
.num1 { .num1 {
position: absolute; position: absolute;
top: 40%; top: 45%;
left: 43%; left: 43%;
} }
.text { .text {

4
src/views/projectAdmin/zjsj/carbon/rightBottom.vue
View File

@ -37,7 +37,9 @@ export default {
components: { Card }, components: { Card },
data() { data() {
return { return {
alarmList: [] alarmList: [
// {deviceName:'扬尘设备1',tempAlarmTime:"2022.09.10 15:12:23",alarmTypeName:'PM2.5超标'}
]
} }
}, },
created() { created() {

2
src/views/projectAdmin/zjsj/carbon/rightCenter.vue
View File

@ -59,7 +59,7 @@ export default {
align-items: center; align-items: center;
.chart { .chart {
box-sizing: border-box; box-sizing: border-box;
padding-top: 20px; // padding-top: 20px;
height: 100%; height: 100%;
width: 50%; width: 50%;
} }

7
src/views/projectAdmin/zjsj/security/centerTop.vue
View File

@ -178,8 +178,11 @@ export default {
display: block; display: block;
color: #6ee4f0; color: #6ee4f0;
text-align: center; text-align: center;
font-size: 12px; font-size: 14px;
margin-top: 12%; margin-top: 10%;
}
p{
font-size: 26px;
} }
} }
.item.margin { .item.margin {