|
|
@@ -1,139 +1,61 @@
|
|
|
<template>
|
|
|
- <div style="background-color: #0e122d;width: 100%;height: 1200px">
|
|
|
- <div class="screenTitle">
|
|
|
- <img
|
|
|
- :src="topBg"
|
|
|
- alt=""
|
|
|
- >
|
|
|
- <span>龙弛智慧隧道系统</span>
|
|
|
+<!-- #0e122d-->
|
|
|
+ <div class="totalContainer">
|
|
|
+ <div style="z-index: 0;position: absolute">
|
|
|
+ <Map/>
|
|
|
</div>
|
|
|
- <div class="screen">
|
|
|
- <div class="leftBox">
|
|
|
- <div class="deviceSummary">
|
|
|
- <div class="deviceSummary_title">
|
|
|
- <img
|
|
|
- alt=""
|
|
|
- :src="Device"
|
|
|
- style="padding-left: 15px"
|
|
|
- >
|
|
|
- <span style="padding-left: 10px;">设备汇总</span>
|
|
|
- </div>
|
|
|
- <div class="deviceOptionBox">
|
|
|
- <div
|
|
|
- v-for="item in deviceTypeList"
|
|
|
- :key="item.id"
|
|
|
- class="deviceOptionRow"
|
|
|
- >
|
|
|
- <div
|
|
|
- v-for="item2 in item"
|
|
|
- :key="item2.ID"
|
|
|
- class="deviceOption"
|
|
|
- >
|
|
|
- <div style="width: 35px;height: 35px">
|
|
|
- <el-tooltip
|
|
|
- :content="item2.name"
|
|
|
- placement="bottom"
|
|
|
- effect="light"
|
|
|
- >
|
|
|
- <el-icon
|
|
|
- size="35"
|
|
|
- color="#1b92fd"
|
|
|
- >
|
|
|
- <component :is="item2.iconAddress" />
|
|
|
- </el-icon>
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
- <el-text
|
|
|
- style="padding-top: 8px;color: #ffffff"
|
|
|
- size="small"
|
|
|
- >
|
|
|
- 数量：{{ item2.Count }}
|
|
|
- </el-text>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="warn">
|
|
|
- <div class="warnTitle">
|
|
|
- <img
|
|
|
- alt=""
|
|
|
- :src="Warn"
|
|
|
- style="padding-left: 15px"
|
|
|
- >
|
|
|
- <span style="padding-left: 10px;">警告列表</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="centerBox">
|
|
|
- <div style="width: 1200px;height: 600px;border: 3px solid #1b92fd; padding: 2px">
|
|
|
- <Map />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="rightBox" />
|
|
|
+ <div class="titleBox">
|
|
|
+
|
|
|
</div>
|
|
|
- <div class="centerBox_chart">
|
|
|
- <div class="centerBox_environment">
|
|
|
- <div class="centerBox_environment_title">
|
|
|
- <img
|
|
|
+ <div class="testBox" style="left: 10px;top: 100px;width: 600px">
|
|
|
+ <div class="container" @click="openData">
|
|
|
+ <img
|
|
|
:src="Setting"
|
|
|
alt=""
|
|
|
style="padding-left: 10px"
|
|
|
- >
|
|
|
- <span style="padding-left: 15px;">环境</span>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- id="environment"
|
|
|
- class="centerBox_environment_chart"
|
|
|
- style="width: 600px"
|
|
|
- />
|
|
|
+ >
|
|
|
+ <span>环境</span>
|
|
|
+ <div style="width: 350px"></div>
|
|
|
+ <img :src="Expand" alt="" :style="{ transform: `rotate(${rotation}deg)` }">
|
|
|
</div>
|
|
|
- <div class="centerBox_environment">
|
|
|
- <div class="centerBox_environment_title">
|
|
|
- <img
|
|
|
- :src="Sunlight"
|
|
|
- alt=""
|
|
|
- style="padding-left: 10px"
|
|
|
- >
|
|
|
- <span style="padding-left: 15px;">光照度</span>
|
|
|
+ <Transition name="slide">
|
|
|
+ <div v-show="isExpanded" class="content">
|
|
|
+ <div
|
|
|
+ id="environment"
|
|
|
+ class="content_chart"
|
|
|
+ style="width: 500px"
|
|
|
+ />
|
|
|
</div>
|
|
|
- <div
|
|
|
- id="lamp"
|
|
|
- class="centerBox_environment_chart"
|
|
|
- style="width: 600px"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="centerBox_environment">
|
|
|
- <div class="centerBox_environment_title">
|
|
|
- <img
|
|
|
- :src="Power"
|
|
|
+ </Transition>
|
|
|
+ </div>
|
|
|
+ <div class="testBox" style="left: 10px;top: 450px">
|
|
|
+ <div class="container" @click="openData">
|
|
|
+ <img
|
|
|
+ :src="Setting"
|
|
|
alt=""
|
|
|
style="padding-left: 10px"
|
|
|
- >
|
|
|
- <span style="padding-left: 15px;">电感</span>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- id="main"
|
|
|
- class="inductanceBox"
|
|
|
- />
|
|
|
- <div class="custom-select">
|
|
|
- <select @change="changePowerDevice($event.target.value)">
|
|
|
- <option
|
|
|
- v-for="(item,index) in powerList"
|
|
|
- :key="item.ID"
|
|
|
- :value="index"
|
|
|
- >
|
|
|
- {{ item.name }}
|
|
|
- </option>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
+ >
|
|
|
+ <span>光照度</span>
|
|
|
+ <div style="width: 350px"></div>
|
|
|
+ <img :src="Expand" alt="" :style="{ transform: `rotate(${rotation}deg)` }">
|
|
|
</div>
|
|
|
+ <Transition name="slide">
|
|
|
+ <div v-show="isExpanded" class="content">
|
|
|
+ <div
|
|
|
+ id="lamp"
|
|
|
+ class="content_chart"
|
|
|
+ style="width: 600px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </Transition>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import Device from '@/assets/icons/device.png'
|
|
|
-import { reactive, onMounted, watch } from 'vue'
|
|
|
+import Expand from '@/assets/icons/expand.png'
|
|
|
+import { ref, reactive, onMounted, watch } from 'vue'
|
|
|
// import environments from '@/assets/icons/environment.png'
|
|
|
// import fourWays from '@/assets/icons/fourWays.png'
|
|
|
// import inductance from '@/assets/icons/inductance.png'
|
|
|
@@ -148,6 +70,7 @@ import * as echarts from 'echarts'
|
|
|
import { useScreenStore } from '@/pinia/modules/screen'
|
|
|
import { queryTunnelList } from '@/api/tunnel'
|
|
|
import { queryAllDeviceGenres } from '@/api/device'
|
|
|
+const rotation = ref(0)
|
|
|
const useScreen = useScreenStore()
|
|
|
// .................................................................
|
|
|
const deviceTypeList = reactive([])
|
|
|
@@ -164,6 +87,8 @@ const condition = {
|
|
|
|
|
|
const lampData = reactive({})
|
|
|
const powerList = reactive([])
|
|
|
+
|
|
|
+const isExpanded = ref(false)
|
|
|
onMounted(() => {
|
|
|
queryTunnelList(condition).then(res => {
|
|
|
if (res.code === 0) {
|
|
|
@@ -414,210 +339,119 @@ const changePowerDevice = (e) => {
|
|
|
loadInductance(powerList[e].inductanceDetails)
|
|
|
}
|
|
|
|
|
|
+const openData = () => {
|
|
|
+ console.log('点击展开')
|
|
|
+ isExpanded.value = !isExpanded.value
|
|
|
+ isExpanded.value ? rotation.value = 180 : rotation.value = 0
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
-// 公共样式
|
|
|
-.title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-size: 20px;
|
|
|
- font-family: PingFang-SC-Medium,serif;
|
|
|
- color: rgba(27, 146, 253, 1);
|
|
|
-}
|
|
|
-.boxShape {
|
|
|
- width: 370px;
|
|
|
- border: 1px solid rgba(27,146,253,0.5);
|
|
|
- background: rgba(50, 72, 106, 0.2);
|
|
|
- margin-left: 20px;
|
|
|
+.common {
|
|
|
+
|
|
|
}
|
|
|
-//.....................
|
|
|
-.screenTitle{
|
|
|
+.totalContainer {
|
|
|
width: 100%;
|
|
|
- height: 100px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- //background: linear-gradient(to bottom, #2583e0, #80aad8); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
|
|
- //-webkit-background-clip: text;/*将设置的背景颜色限制在文字中*/
|
|
|
- //-webkit-text-fill-color: transparent;/*给文字设置成透明*/
|
|
|
+ height: 100vh;
|
|
|
+ overflow-y: auto;
|
|
|
position: relative;
|
|
|
- span{
|
|
|
- position: absolute;
|
|
|
- top: 30px;
|
|
|
- left: 890px;
|
|
|
- font-size: 30px;
|
|
|
- color: #ffffff;
|
|
|
- padding-left: 20px;
|
|
|
- letter-spacing: 10px;
|
|
|
- }
|
|
|
- img{
|
|
|
- height: 80px;
|
|
|
- }
|
|
|
}
|
|
|
-.screen{
|
|
|
- width: 100%;
|
|
|
- height: 600px;
|
|
|
- background-color: #0e122d;
|
|
|
- display: flex;
|
|
|
- margin-top: 20px;
|
|
|
- .leftBox {
|
|
|
- width: 20%;
|
|
|
- height: 600px;
|
|
|
- .deviceSummary {
|
|
|
- height: 240px;
|
|
|
- .boxShape;
|
|
|
- .deviceSummary_title {
|
|
|
- width: 370px;
|
|
|
- height: 50px;
|
|
|
- .title;
|
|
|
- img{
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- }
|
|
|
- }
|
|
|
- .deviceOptionBox {
|
|
|
- width: 370px;
|
|
|
- height: 190px;
|
|
|
- margin-top: 20px;
|
|
|
- .deviceOptionRow {
|
|
|
- width: 100%;
|
|
|
- height: 60px;
|
|
|
- display: flex;
|
|
|
- margin-top: 20px;
|
|
|
- .deviceOption {
|
|
|
- width: 90px;
|
|
|
- height: 60px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+.testBox {
|
|
|
+ position: absolute;
|
|
|
+ height: 400px;
|
|
|
+ z-index: 1;
|
|
|
+ .container {
|
|
|
+ height: 40px;
|
|
|
+ background-color: rgba(50, 58, 64, 0.95);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid #409eff;
|
|
|
+ img{
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
|
}
|
|
|
- .inductance {
|
|
|
- height: 200px;
|
|
|
- margin-top: 20px;
|
|
|
- position: relative;
|
|
|
- .boxShape;
|
|
|
- .inductanceTitle {
|
|
|
- width: 370px;
|
|
|
- height: 50px;
|
|
|
- .title;
|
|
|
- img{
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .warn {
|
|
|
- height: 340px;
|
|
|
- margin-top: 20px;
|
|
|
- .boxShape;
|
|
|
- .warnTitle {
|
|
|
- width: 370px;
|
|
|
- height: 50px;
|
|
|
- .title;
|
|
|
- img{
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- }
|
|
|
- }
|
|
|
+ span{
|
|
|
+ font-size: 20px;
|
|
|
+ padding-left: 5px;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
- .centerBox {
|
|
|
- width: 60%;
|
|
|
- height: 600px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
+ .fold-enter-active,
|
|
|
+ .fold-leave-active {
|
|
|
+ transition: max-height 0.5s ease, opacity 0.5s ease;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
- .rightBox {
|
|
|
- width: 20%;
|
|
|
- height: 600px;
|
|
|
+ .fold-enter-from,
|
|
|
+ .fold-leave-to {
|
|
|
+ max-height: 0 !important;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ /* 必须设置明确最大高度（略大于实际内容高度） */
|
|
|
+ height: 270px;
|
|
|
+ width: 500px;
|
|
|
+ padding-top: 10px;
|
|
|
+ background-color: rgba(50, 58, 64, 1);
|
|
|
+ .content_chart {
|
|
|
+ height: 250px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-.centerBox_chart {
|
|
|
- width: 2080px;
|
|
|
- height: 220px;
|
|
|
- margin-top: 40px;
|
|
|
- margin-left: 20px;
|
|
|
+
|
|
|
+.titleBox {
|
|
|
+ width: 100%;
|
|
|
+ height: 80px;
|
|
|
+ background-color: #000000;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ z-index: 1;
|
|
|
+ opacity: 0.5;
|
|
|
+}
|
|
|
+// 公共样式
|
|
|
+.title {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: PingFang-SC-Medium,serif;
|
|
|
+ color: rgba(27, 146, 253, 1);
|
|
|
+}
|
|
|
+.boxShape {
|
|
|
+ width: 370px;
|
|
|
border: 1px solid rgba(27,146,253,0.5);
|
|
|
background: rgba(50, 72, 106, 0.2);
|
|
|
+ margin-left: 20px;
|
|
|
}
|
|
|
-.centerBox_environment{
|
|
|
- width: 600px;
|
|
|
- height: 220px;
|
|
|
- position: relative;
|
|
|
- .centerBox_environment_title {
|
|
|
- width: 500px;
|
|
|
- height: 50px;
|
|
|
- .title;
|
|
|
- img {
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- }
|
|
|
- }
|
|
|
- .centerBox_environment_chart {
|
|
|
- height: 250px;
|
|
|
- position: absolute;
|
|
|
- top: 5px;
|
|
|
- }
|
|
|
- .inductanceBox {
|
|
|
- width: 600px;
|
|
|
- height: 250px;
|
|
|
- position: absolute;
|
|
|
- top: 5px;
|
|
|
- }
|
|
|
- .custom-select {
|
|
|
- width: 150px;
|
|
|
- position: absolute;
|
|
|
- right: 20px;
|
|
|
- top: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .custom-select select {
|
|
|
- width: 100%;
|
|
|
- padding: 10px;
|
|
|
- background-color: rgba(50, 72, 106, 0.2);
|
|
|
- color: #ecf0f1;
|
|
|
- border: 2px solid rgba(27,146,253,0.5);
|
|
|
- border-radius: 5px;
|
|
|
- -webkit-appearance: none;
|
|
|
- -moz-appearance: none;
|
|
|
- appearance: none;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: right 10px center;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .custom-select select:focus {
|
|
|
- outline: none;
|
|
|
- border-color: #3498db;
|
|
|
- }
|
|
|
|
|
|
- .custom-select option {
|
|
|
- background-color: #2c3e50;
|
|
|
- color: #ecf0f1;
|
|
|
- }
|
|
|
+.slide-enter-active,
|
|
|
+.slide-leave-active {
|
|
|
+ transition:
|
|
|
+ transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
|
|
|
+ opacity 0.3s ease;
|
|
|
+}
|
|
|
|
|
|
- .custom-select option:hover {
|
|
|
- background-color: #3498db;
|
|
|
- }
|
|
|
+/* 进入动画起始状态（从上方不可见位置开始） */
|
|
|
+.slide-enter-from {
|
|
|
+ transform: translateY(-30px);
|
|
|
+ opacity: 0;
|
|
|
}
|
|
|
-.el-popper.is-customized {
|
|
|
- /* Set padding to ensure the height is 32px */
|
|
|
- padding: 6px 12px;
|
|
|
- background: #409eff;
|
|
|
+
|
|
|
+/* 进入动画结束状态 */
|
|
|
+.slide-enter-to {
|
|
|
+ transform: translateY(0px);
|
|
|
+ opacity: 1;
|
|
|
}
|
|
|
|
|
|
-.el-popper.is-customized .el-popper__arrow::before {
|
|
|
- background: #409eff;
|
|
|
- right: 0;
|
|
|
+/* 离开动画起始状态 */
|
|
|
+.slide-leave-from {
|
|
|
+ transform: translateY(0px);
|
|
|
+ opacity: 1;
|
|
|
}
|
|
|
|
|
|
+/* 离开动画结束状态（向上移动并消失） */
|
|
|
+.slide-leave-to {
|
|
|
+ transform: translateY(-30px);
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
</style>
|
|
|
|
