|
|
@@ -12,39 +12,70 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="height: 10px"></div>
|
|
|
- <div class="substrate">
|
|
|
- <Map/>
|
|
|
- </div>
|
|
|
- <div class="upperLevel">
|
|
|
- <el-row>
|
|
|
- <el-col :span="6" style="height: 900px;background-color: rgba(45,64,125,0.5);">
|
|
|
- <div class="deviceBox">
|
|
|
- <img src="@/assets/main_top_left.png" alt=""/>
|
|
|
- <div class="titleIcon"></div>
|
|
|
- <div class="deviceBox_title">设备汇总</div>
|
|
|
- <div class="deviceOptionBox">
|
|
|
- <div class="deviceOption" v-for="item in deviceList">
|
|
|
- <img :src="item.url" style="width: 40px;height: 40px" alt=""/>
|
|
|
- <el-text style="padding-top: 8px;color: #ffffff">{{item.label + item.value}}</el-text>
|
|
|
- </div>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="5" style="height: 900px;">
|
|
|
+ <div class="deviceBox">
|
|
|
+ <img src="@/assets/main_top_left.png" alt=""/>
|
|
|
+ <div class="titleIcon"></div>
|
|
|
+ <div class="deviceBox_title">设备汇总</div>
|
|
|
+ <div class="deviceOptionBox">
|
|
|
+ <div class="deviceOption" v-for="item in deviceList">
|
|
|
+ <img :src="item.url" style="width: 35px;height: 35px" alt=""/>
|
|
|
+ <el-text style="padding-top: 8px;color: #ffffff" size="small">{{item.label + item.value}}</el-text>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="chartBox">
|
|
|
- <Chart/>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6" :offset="12" class="rightBox">
|
|
|
- <div class="chartBox">
|
|
|
- <lightChart/>
|
|
|
+ </div>
|
|
|
+ <div class="chartBox">
|
|
|
+ <Chart/>
|
|
|
+ </div>
|
|
|
+ <div class="chartBox">
|
|
|
+ <lightChart/>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="14" style="display: flex;justify-content: center">
|
|
|
+ <div class="centerBox">
|
|
|
+ <Map/>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5" class="rightBox">
|
|
|
+ <div style="height: 20px"></div>
|
|
|
+ <div class="panel">
|
|
|
+ <span class="panel-title">亮度调整</span>
|
|
|
+<!-- <el-slider-->
|
|
|
+<!-- v-model="transparency"-->
|
|
|
+<!-- :step="50"-->
|
|
|
+<!-- show-stops-->
|
|
|
+<!-- :show-tooltip="false"-->
|
|
|
+<!-- class="panel-slider"-->
|
|
|
+<!-- @change="changeTransparency"-->
|
|
|
+<!-- />-->
|
|
|
+ <div class="brightness" style="margin: 90px 0 0 50px;">
|
|
|
+ <span>低</span>
|
|
|
+ <span>中</span>
|
|
|
+ <span>高</span>
|
|
|
</div>
|
|
|
- <div class="warnBox">
|
|
|
- <img :src="warn" alt="" class="warnBoxExternal" />
|
|
|
- <img :src="warnTitle" alt="" class="warnBoxTitle"/>
|
|
|
- <span>警告列表</span>
|
|
|
+<!-- <el-slider-->
|
|
|
+<!-- v-model="transparencyTwo"-->
|
|
|
+<!-- :step="50"-->
|
|
|
+<!-- show-stops-->
|
|
|
+<!-- :show-tooltip="false"-->
|
|
|
+<!-- class="panel-slider2"-->
|
|
|
+<!-- @change="changeTransparencyTwo"-->
|
|
|
+<!-- />-->
|
|
|
+ <div class="brightness" style="margin: 50px 0 0 50px;">
|
|
|
+ <span>低</span>
|
|
|
+ <span>中</span>
|
|
|
+ <span>高</span>
|
|
|
</div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
+ <div class="panel-bottom"></div>
|
|
|
+ </div>
|
|
|
+ <div class="warnBox">
|
|
|
+ <img :src="warn" alt="" class="warnBoxExternal" />
|
|
|
+ <img :src="warnTitle" alt="" class="warnBoxTitle"/>
|
|
|
+ <span>警告列表</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -60,7 +91,10 @@ import warn from '@/assets/main_bottopm_top2.png'
|
|
|
import Map from './components/map.vue'
|
|
|
import warnTitle from '@/assets/warnTitle.png'
|
|
|
import lightChart from './components/lightChart.vue'
|
|
|
-import { reactive } from 'vue'
|
|
|
+import { queryAllTunnels } from '@/api/tunnel'
|
|
|
+import { reactive, onMounted } from 'vue'
|
|
|
+import {useScreenStore} from "@/pinia/modules/screen";
|
|
|
+const useScreen = useScreenStore()
|
|
|
|
|
|
const deviceList = reactive([
|
|
|
{url: environments, label: '环境：', value: '2/1'},
|
|
|
@@ -71,8 +105,13 @@ const deviceList = reactive([
|
|
|
const jumpScreen = (type) => {
|
|
|
console.log(type)
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
+onMounted(() => {
|
|
|
+ queryAllTunnels().then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ useScreen.setTunnelList(res.data)
|
|
|
+ }
|
|
|
+ })
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
@@ -117,30 +156,15 @@ const jumpScreen = (type) => {
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
}
|
|
|
- // 地图层
|
|
|
- .substrate{
|
|
|
- width: 100%;
|
|
|
- height: 900px;
|
|
|
- position: absolute;
|
|
|
- z-index: 0;
|
|
|
- }
|
|
|
- // 数据层
|
|
|
- .upperLevel{
|
|
|
- width: 100%;
|
|
|
- height: 820px;
|
|
|
- position: absolute;
|
|
|
- z-index: 1;
|
|
|
- pointer-events: none;
|
|
|
- background-color: transparent;
|
|
|
- .deviceBox{
|
|
|
- width: 450px;
|
|
|
- height: 200px;
|
|
|
+ .deviceBox {
|
|
|
+ width: 400px;
|
|
|
+ height: 180px;
|
|
|
margin: 20px;
|
|
|
position: relative;
|
|
|
pointer-events: auto;
|
|
|
img {
|
|
|
- width: 450px;
|
|
|
- height: 200px;
|
|
|
+ width: 400px;
|
|
|
+ height: 180px;
|
|
|
}
|
|
|
.deviceBox_title {
|
|
|
position: absolute;
|
|
|
@@ -149,15 +173,16 @@ const jumpScreen = (type) => {
|
|
|
font-size: 20px;
|
|
|
color: #0EFCFF;
|
|
|
}
|
|
|
- .deviceOptionBox{
|
|
|
+ .deviceOptionBox {
|
|
|
position: absolute;
|
|
|
top: 70px;
|
|
|
- width: 450px;
|
|
|
+ width: 400px;
|
|
|
height: 60px;
|
|
|
display: flex;
|
|
|
justify-content: space-around;
|
|
|
align-items: center;
|
|
|
- .deviceOption{
|
|
|
+
|
|
|
+ .deviceOption {
|
|
|
width: 90px;
|
|
|
height: 60px;
|
|
|
display: flex;
|
|
|
@@ -166,50 +191,127 @@ const jumpScreen = (type) => {
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
- .titleIcon{
|
|
|
- width: 5px;
|
|
|
- height: 20px;
|
|
|
- background-color: #0EFCFF;
|
|
|
+ }
|
|
|
+ .titleIcon{
|
|
|
+ width: 5px;
|
|
|
+ height: 20px;
|
|
|
+ background-color: #0EFCFF;
|
|
|
+ position: absolute;
|
|
|
+ left: 20px;
|
|
|
+ top: 16px;
|
|
|
+ }
|
|
|
+ .chartBox{
|
|
|
+ width: 400px;
|
|
|
+ height: 250px;
|
|
|
+ margin: 20px;
|
|
|
+ position: relative;
|
|
|
+ pointer-events: auto;
|
|
|
+ }
|
|
|
+ .rightBox{
|
|
|
+ height: 900px;
|
|
|
+ .warnBox{
|
|
|
+ position: relative;
|
|
|
+ width: 400px;
|
|
|
+ height: 300px;
|
|
|
+ margin: 20px 0 0 20px;
|
|
|
+ .warnBoxExternal{
|
|
|
+ width: 400px;
|
|
|
+ height: 270px;
|
|
|
+ }
|
|
|
+ .warnBoxTitle{
|
|
|
+ width: 200px;
|
|
|
+ height: 35px;
|
|
|
position: absolute;
|
|
|
left: 20px;
|
|
|
- top: 16px;
|
|
|
+ top: 30px;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ color:#ffffff;
|
|
|
+ font-size: 18px;
|
|
|
+ position: absolute;
|
|
|
+ left: 70px;
|
|
|
+ top: 37px;
|
|
|
}
|
|
|
}
|
|
|
- .chartBox{
|
|
|
- width: 450px;
|
|
|
- height: 300px;
|
|
|
- margin: 20px;
|
|
|
+ .panel{
|
|
|
position: relative;
|
|
|
- pointer-events: auto;
|
|
|
- }
|
|
|
- .rightBox{
|
|
|
- height: 900px;
|
|
|
- background-color: rgba(45,64,125,0.5);
|
|
|
- .warnBox{
|
|
|
- position: relative;
|
|
|
- width: 90%;
|
|
|
- height: 300px;
|
|
|
- margin-top: 20px;
|
|
|
- .warnBoxExternal{
|
|
|
- width: 100%;
|
|
|
- height: 300px;
|
|
|
- padding-left: 5%
|
|
|
- }
|
|
|
- .warnBoxTitle{
|
|
|
- width: 200px;
|
|
|
- height: 35px;
|
|
|
- position: absolute;
|
|
|
- left: 40px;
|
|
|
- top: 30px;
|
|
|
+ width: 400px;
|
|
|
+ height: 200px;
|
|
|
+ margin-left: 20px;
|
|
|
+ border: 1px solid rgba(25,186,139,0.17);
|
|
|
+ padding: 0 0.1875rem 0.5rem;
|
|
|
+ margin-bottom: 0.1875rem;
|
|
|
+ background: url(@/assets/line.png) rgba(255,255,255,0.04);
|
|
|
+ &::before{
|
|
|
+ .horn;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ border-left: 2px solid #02a6b5;
|
|
|
+ border-top: 2px solid #02a6b5;
|
|
|
+ }
|
|
|
+ &::after{
|
|
|
+ .horn;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ border-right: 2px solid #02a6b5;
|
|
|
+ border-top: 2px solid #02a6b5;
|
|
|
+ }
|
|
|
+ .panel-bottom{
|
|
|
+ &::before{
|
|
|
+ .horn;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ border-left: 2px solid #02a6b5;
|
|
|
+ border-bottom: 2px solid #02a6b5;
|
|
|
}
|
|
|
- span{
|
|
|
- color:#ffffff;
|
|
|
- font-size: 18px;
|
|
|
- position: absolute;
|
|
|
- left: 70px;
|
|
|
- top: 37px;
|
|
|
+ &::after{
|
|
|
+ .horn;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ border-right: 2px solid #02a6b5;
|
|
|
+ border-bottom: 2px solid #02a6b5;
|
|
|
}
|
|
|
}
|
|
|
+ .panel-title{
|
|
|
+ position: absolute;
|
|
|
+ left: 160px;
|
|
|
+ top: 10px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #0EFCFF;
|
|
|
+ }
|
|
|
+ .panelSwitchTitle{
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 16px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+ left:25px;
|
|
|
+ }
|
|
|
+ .panelSwitch{
|
|
|
+ position: absolute;
|
|
|
+ right: 25px;
|
|
|
+ bottom: 20px;
|
|
|
+ }
|
|
|
+ .panel-slider{
|
|
|
+ width: 300px;
|
|
|
+ position: absolute;
|
|
|
+ top: 60px;
|
|
|
+ left: 50px;
|
|
|
+ }
|
|
|
+ .panel-slider2{
|
|
|
+ width: 300px;
|
|
|
+ position: absolute;
|
|
|
+ top: 120px;
|
|
|
+ left: 50px;
|
|
|
+ }
|
|
|
+ .brightness{
|
|
|
+ width: 300px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: #909399;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -220,5 +322,12 @@ const jumpScreen = (type) => {
|
|
|
background-color: #283a72;
|
|
|
}
|
|
|
|
|
|
+.centerBox{
|
|
|
+ width: 1150px;
|
|
|
+ height: 700px;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
</style>
|
|
|
|
