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',//测试
// FILEURL:'http://10.0.1.43:6023/image/',//测试
BASEURL: baseUrl ? baseUrl : window.location.protocol + '//' + window.location.host + '/', //
UPLOADURL: window.location.protocol + '//' + window.location.host + '/upload/image', //
FILEURL: window.location.protocol + '//' + window.location.host + '/image/', //测试 // tag: 本地测试接口
// UPLOADURL: window.location.protocol + '//' + window.location.host + '/upload/image', //
// FILEURL: window.location.protocol + '//' + window.location.host + '/image/', //测试 // tag: 本地测试接口
/* 2022-05-16 */
// tag: 部署河南项目时，需要打开这两行代码
// 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',
// FILEURL: 'http://182.90.224.237:7000/image/',
// 邱平毅的
// UPLOADURL: 'http://192.168.34.216:6023/upload/image',
// FILEURL: 'http://192.168.34.216:6023/image/',
UPLOADURL: 'http://192.168.34.216:6023/upload/image',
FILEURL: 'http://192.168.34.216:6023/image/',
// UPLOADURL:'http://'+"61.190.32.219:9050"+'/upload/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"
>
<p>
<span>{{ item.week }}</span>
<span style="font-size:14px;">{{ item.week }}</span>
<!-- <span>{{ item.date }}</span> -->
<!-- <span>（{{ item.week }}）</span> -->
</p>
<div style="height: 15%"></div>
<div style="height: 20%"></div>
<div class="imgBox">
<img :src="item.url" />
</div>
<div style="height: 15%"></div>
<p class="weather">{{ item.wea }}</p>
<p class="temp">{{ item.tem2 }} ~ {{ item.tem1 }}</p>
<div style="height: 6%"></div>
<div style="height: 8%"></div>
<p>
{{ $t("message.environmentalOverview.wind_power") }}
{{ item.win_speed }}
@ -90,10 +90,10 @@ export default {
width: 13.28%;
text-align: center;
padding-top: 13px;
margin-top: -5px;
margin-top: 5px;
// margin-bottom: 110px;
// height: calc(100% - 13px);
height: 205px;
height: 265px;
padding-bottom: 13px;
background: linear-gradient(
rgba(21, 25, 33, 0.06),

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

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

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

@ -2,7 +2,8 @@
<Card title="趋势图">
<div class="contentBox">
<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
v-for="item in 4"
:key="item"
@ -42,7 +43,7 @@
/>
{{ $t("message.environmentalOverview.e6SelectArr")[3].title }}
</span>
</div>
<div class="myChart" ref="myChart" />
</div>
@ -136,8 +137,11 @@ export default {
x: "10%",//x 偏移量
y: "5%", // y 偏移量
width: "85%", // 宽度
height: "60%"// 高度
height: "80%"// 高度
},
tooltip: {
trigger: "axis"
},
xAxis: {
type: "category",
boundaryGap: false,
@ -189,10 +193,11 @@ export default {
data: this.data,
type: "line",
smooth: true,
showSymbol: false,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: "rgba(53, 98, 111,0.5)" },
{ offset: 1, color: "rgba(53, 98, 111,0.3)" }
{ offset: 0,color: "rgb(33, 55, 76)"},
{ 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 />
<p class="num1">45%</p>
<div class="text">
<p>环境总数/环境巡检率</p>
<p>环境巡检率/环境总数</p>
<p style="color:#d7d9dc;font-size:14px">
200/
<span style="color:#da580d">45</span>
/200
</p>
</div>
</div>
@ -18,10 +18,10 @@
<img src="../assets/images/common/echart_blue.png" alt />
<p class="num1">36%</p>
<div class="text">
<p>环境总数/环境巡检率</p>
<p>环境巡检率/环境总数</p>
<p style="color:#d7d9dc;font-size:14px">
200/
<span style="color:#72bdc9;">36</span>
/200
</p>
</div>
</div>
@ -42,7 +42,7 @@ export default {
height: 100%;
display: flex;
margin-top: 5%;
margin-left: 10%;
.left,
.right {
height: 65%;
@ -51,7 +51,7 @@ export default {
color: #c5c7cc;
.num1 {
position: absolute;
top: 40%;
top: 45%;
left: 43%;
}
.text {

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

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

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

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

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

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