|
|
@@ -1,505 +1,367 @@
|
|
|
<template>
|
|
|
+ <div class="screenTitle">
|
|
|
+ <img :src="Logo" alt="" style="width: 60px;height: 60px">
|
|
|
+ <img :src="Title" alt="" style="padding-left: 20px">
|
|
|
+ </div>
|
|
|
<div class="screen">
|
|
|
- <div style="height: 10px"></div>
|
|
|
- <div class="titleImage">
|
|
|
- <el-image :src="titleUrl" />
|
|
|
- <span class="Heading">龙弛智慧隧道系统</span>
|
|
|
- </div>
|
|
|
- <div class="coreBox">
|
|
|
- <div ref="container" class="three-container"></div>
|
|
|
- <div class="formBox">
|
|
|
- <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 25px;">
|
|
|
- <span>低</span>
|
|
|
- <span>中</span>
|
|
|
- <span>高</span>
|
|
|
- </div>
|
|
|
- <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 25px;">
|
|
|
- <span>低</span>
|
|
|
- <span>中</span>
|
|
|
- <span>高</span>
|
|
|
+ <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 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 class="panel-bottom"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="formBox_two">
|
|
|
- <div class="panel" style="height: 100px">
|
|
|
- <span class="panel-title">轴流式风机</span>
|
|
|
- <span class="panelSwitchTitle">风机开关</span>
|
|
|
- <el-switch class="panelSwitch" size="large"></el-switch>
|
|
|
- <div class="panel-bottom"></div>
|
|
|
+ <div class="inductance">
|
|
|
+ <div class="inductanceTitle">
|
|
|
+ <img alt="" :src="Power" style="padding-left: 15px"/>
|
|
|
+ <span style="padding-left: 10px;">电感检测</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="vehicleBox">
|
|
|
- <div class="panel" style="height: 190px">
|
|
|
- <span class="panel-title">车辆检测器</span>
|
|
|
- <el-form style="position: absolute;left: 40px;top: 50px">
|
|
|
- <el-form-item label="交通量" label-width="110" label-position="left">
|
|
|
- <el-row style="width: 120px">
|
|
|
- <el-col :span="15" class="vehicleData">
|
|
|
- <span>123</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="9" class="vehicleUnit">
|
|
|
- <span>辆</span>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="平均车速" label-width="110" label-position="left">
|
|
|
- <el-row style="width: 120px">
|
|
|
- <el-col :span="15" class="vehicleData">
|
|
|
- <span>66</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="9" class="vehicleUnit">
|
|
|
- <span>km/h</span>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="车道占有量" label-width="110" label-position="left">
|
|
|
- <el-row style="width: 120px">
|
|
|
- <el-col :span="15" class="vehicleData">
|
|
|
- <span>12</span>
|
|
|
- </el-col>
|
|
|
- <el-col :span="9" class="vehicleUnit">
|
|
|
- <span>%</span>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <div class="panel-bottom"></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: 1150px;height: 700px">
|
|
|
+ <Map/>
|
|
|
+ </div>
|
|
|
+ <div class="centerBox_chart">
|
|
|
+ <div class="centerBox_environment">
|
|
|
+ <div class="centerBox_environment_title">
|
|
|
+ <img :src="Setting" alt="" style="padding-left: 10px">
|
|
|
+ <span style="padding-left: 15px;">环境</span>
|
|
|
+ </div>
|
|
|
+ <div class="centerBox_environment_chart" style="width: 500px" id="environment">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="centerBox_environment">
|
|
|
+ <div class="centerBox_environment_title">
|
|
|
+ <img :src="Sunlight" alt="" style="padding-left: 10px">
|
|
|
+ <span style="padding-left: 15px;">光照度</span>
|
|
|
+ </div>
|
|
|
+ <div class="centerBox_environment_chart" id="lamp" style="width: 500px">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="rightBox">
|
|
|
+
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import * as THREE from 'three';
|
|
|
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
|
|
|
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
|
|
|
-import { onMounted, onUnmounted, reactive, ref } from 'vue';
|
|
|
+import Device from '@/assets/icons/device.png'
|
|
|
+import { reactive, onMounted } from "vue";
|
|
|
+import environments from "@/assets/icons/environment.png";
|
|
|
+import fourWays from "@/assets/icons/fourWays.png";
|
|
|
+import inductance from "@/assets/icons/inductance.png";
|
|
|
+import singleLamp from "@/assets/icons/singleLamp.png";
|
|
|
+import Setting from "@/assets/icons/setting.png"
|
|
|
+import Sunlight from "@/assets/icons/sunlight.png"
|
|
|
+import Title from "@/assets/icons/title.png"
|
|
|
+import Logo from "@/assets/icons/logo.png"
|
|
|
+import Power from "@/assets/icons/power.png"
|
|
|
+import Warn from "@/assets/icons/warn.png"
|
|
|
+import Map from "@/view/screen/components/map.vue"
|
|
|
+import * as echarts from 'echarts';
|
|
|
import { useScreenStore } from '@/pinia/modules/screen'
|
|
|
-// 单灯控制
|
|
|
-import { updateTunnelLamp } from "@/api/tunnel";
|
|
|
-// 四路控制
|
|
|
-import { deviceSwitch } from "@/api/device";
|
|
|
-// 标题图片
|
|
|
-import titleUrl from '@/assets/title_bg.png'
|
|
|
-import {ElMessage} from "element-plus";
|
|
|
|
|
|
const useScreen = useScreenStore()
|
|
|
-// 获取容器引用
|
|
|
-const container = ref(null);
|
|
|
-
|
|
|
-// 定义 Three.js 相关变量
|
|
|
-let scene, camera, renderer, controls;
|
|
|
-
|
|
|
-// 创建场景
|
|
|
-scene = new THREE.Scene();
|
|
|
-
|
|
|
-// 添加环境光
|
|
|
-const ambientLight = new THREE.AmbientLight(0xffffff, 1);
|
|
|
-
|
|
|
-// 初始化 Three.js 场景
|
|
|
-const initThree = () => {
|
|
|
- scene.background = null;
|
|
|
- // textureLoader.load('@/assets/OIP-C.jpg', (texture) => {
|
|
|
- // // 将图片设置为场景的背景
|
|
|
- // scene.background = texture;
|
|
|
- // });
|
|
|
- // 创建相机
|
|
|
- camera = new THREE.PerspectiveCamera(
|
|
|
- 75,
|
|
|
- container.value.clientWidth / container.value.clientHeight,
|
|
|
- 0.1,
|
|
|
- 1000
|
|
|
- );
|
|
|
- camera.position.set(30, 20, 30);
|
|
|
-
|
|
|
- // 创建渲染器
|
|
|
- renderer = new THREE.WebGLRenderer({ antialias: true });
|
|
|
- renderer.setSize(container.value.clientWidth, container.value.clientHeight);
|
|
|
- renderer.setClearAlpha(0);
|
|
|
- // renderer.setClearColor(222842);
|
|
|
- container.value.appendChild(renderer.domElement);
|
|
|
-
|
|
|
- // 添加轨道控制器
|
|
|
- controls = new OrbitControls(camera, renderer.domElement);
|
|
|
- controls.enableDamping = true; // 启用阻尼效果
|
|
|
- controls.dampingFactor = 0.05;
|
|
|
-
|
|
|
- scene.add(ambientLight);
|
|
|
-
|
|
|
- // 添加平行光
|
|
|
- const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
|
|
|
- directionalLight.position.set(5, 5, 5).normalize();
|
|
|
- scene.add(directionalLight);
|
|
|
-};
|
|
|
|
|
|
-// 存储模型数据
|
|
|
-let materialOne = reactive({})
|
|
|
-let materialTwo = reactive({})
|
|
|
+const deviceList = reactive([
|
|
|
+ {url: environments, label: '环境：', value: '1/0'},
|
|
|
+ {url: fourWays, label: '四路：', value: '1/0'},
|
|
|
+ {url: inductance, label: '电感：', value: '1/0'},
|
|
|
+ {url: singleLamp, label: '单灯：', value: '1/0'},
|
|
|
+])
|
|
|
|
|
|
-const relayList = reactive([])
|
|
|
+onMounted(() => {
|
|
|
+ setTimeout(function (){
|
|
|
+ console.log('envData',useScreen.controllerData)
|
|
|
+ loading(useScreen.controllerData.envData)
|
|
|
+ loadingLamp(useScreen.controllerData.envData)
|
|
|
+ }, 1000)
|
|
|
+})
|
|
|
|
|
|
+const loading = ((list) => {
|
|
|
+ let chartDom = document.getElementById('environment');
|
|
|
+ let myChart = echarts.init(chartDom);
|
|
|
+ let option;
|
|
|
|
|
|
-// 加载 GLB 模型
|
|
|
-const loadModel = () => {
|
|
|
- const loader = new GLTFLoader();
|
|
|
- loader.load('../../public/隧道1.glb', function (gltf){
|
|
|
- let object = gltf.scene
|
|
|
- object.children.forEach(item => {
|
|
|
- if (item.name === '柱体') {
|
|
|
- materialOne = item.children[3].material
|
|
|
- } else if(item.name === '柱体001') {
|
|
|
- materialTwo = item.children[3].material
|
|
|
+ option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ crossStyle: {
|
|
|
+ color: '#ffffff'
|
|
|
}
|
|
|
- })
|
|
|
- //gltf.scene获取gltf文件包含的模型数据
|
|
|
- scene.add(gltf.scene)
|
|
|
- }, function (xhr) {
|
|
|
- // 加载进度回调
|
|
|
- // console.log((xhr.loaded / xhr.total * 100) + '% loaded');
|
|
|
- }, function (error) {
|
|
|
- // 加载错误回调
|
|
|
- // console.error('An error happened', error);
|
|
|
- }
|
|
|
- )
|
|
|
-};
|
|
|
-
|
|
|
-// 动画循环
|
|
|
-const animate = () => {
|
|
|
- requestAnimationFrame(animate);
|
|
|
- controls.update(); // 更新控制器
|
|
|
- renderer.render(scene, camera);
|
|
|
-};
|
|
|
-
|
|
|
-// 亮度调整
|
|
|
-const transparency = ref(0)
|
|
|
-const changeTransparency = (e) => {
|
|
|
- let option = {
|
|
|
- 0: [0.8, 33, 1],
|
|
|
- 50: [0.5, 66, 2],
|
|
|
- 100: [0.2, 100, 3]
|
|
|
- }
|
|
|
- materialOne.opacity = option[e][0]
|
|
|
- if (lampData.switchType === '单灯控制器') {
|
|
|
- updateTunnelLamp({
|
|
|
- id: lampData.ID,
|
|
|
- tunnelSn: lampData.tunnelSn,
|
|
|
- lampValue1: option[e][1]
|
|
|
- }).then(res => {
|
|
|
- if (res.code === 0) {
|
|
|
- ElMessage.success('已发送')
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- let relay = relayList[0].deviceRelays
|
|
|
- for (let i = 0; i < relay.length; i++) {
|
|
|
- relay[i].state = i < option[e][2];
|
|
|
- }
|
|
|
- for (let j = 0; j < relay.length; j++) {
|
|
|
- deviceSwitch({
|
|
|
- tunnelSn: lampData.tunnelSn,
|
|
|
- radarId: relayList[0].radarId,
|
|
|
- relayId: relay[j].relayId,
|
|
|
- state: relay[j].state
|
|
|
- }).then(res => {
|
|
|
- if (res.code === 0) {
|
|
|
- console.log('发送成功')
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: [
|
|
|
+ // '待下发','处置中','已完成'
|
|
|
+ {
|
|
|
+ name: '温度',
|
|
|
+ textStyle: {
|
|
|
+ color: '#0EFCFF' // 图例文字颜色
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '湿度',
|
|
|
+ textStyle: {
|
|
|
+ color: '#1b92fd' // 图例文字颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'time', // 使用时间类型的x轴
|
|
|
+ boundaryGap: false,
|
|
|
+ axisLine: {
|
|
|
+ show:true,
|
|
|
+ lineStyle:{
|
|
|
+ color:'#ffffff',
|
|
|
+ width:1,
|
|
|
+ type:'solid'
|
|
|
}
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-const transparencyTwo = ref(0)
|
|
|
-const changeTransparencyTwo = (e) => {
|
|
|
- let option = {
|
|
|
- 0: [0.8, 33, 1],
|
|
|
- 50: [0.5, 66, 2],
|
|
|
- 100: [0.2, 100, 3]
|
|
|
- }
|
|
|
- materialTwo.opacity = option[e][0]
|
|
|
- if (lampData.switchType === '单灯控制器') {
|
|
|
- updateTunnelLamp({
|
|
|
- id: lampData.ID,
|
|
|
- tunnelSn: lampData.tunnelSn,
|
|
|
- lampValue2: option[e][1]
|
|
|
- }).then(res => {
|
|
|
- if (res.code === 0) {
|
|
|
- ElMessage.success('已发送')
|
|
|
}
|
|
|
- })
|
|
|
- } else {
|
|
|
- let relay = relayList[1].deviceRelays
|
|
|
- for (let i = 0; i < relay.length; i++) {
|
|
|
- relay[i].state = i < option[e][2];
|
|
|
- }
|
|
|
- for (let j = 0; j < relay.length; j++) {
|
|
|
- deviceSwitch({
|
|
|
- tunnelSn: lampData.tunnelSn,
|
|
|
- radarId: relayList[1].radarId,
|
|
|
- relayId: relay[j].relayId,
|
|
|
- state: relay[j].state
|
|
|
- }).then(res => {
|
|
|
- if (res.code === 0) {
|
|
|
- console.log('发送成功');
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ axisLine: {
|
|
|
+ show:true,
|
|
|
+ lineStyle:{
|
|
|
+ color:'#ffffff',
|
|
|
+ width:1,
|
|
|
+ type:'solid'
|
|
|
}
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: ['#ffffff']
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '温度',
|
|
|
+ type: 'line',
|
|
|
+ data: list.map(item => [new Date(item.CreatedAt).getTime(), item.temperature])
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '湿度',
|
|
|
+ type: 'line',
|
|
|
+ data: list.map(item => [new Date(item.CreatedAt).getTime(), item.humidity])
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ };
|
|
|
|
|
|
-// 灯光数据
|
|
|
-const lampData = reactive({})
|
|
|
+ option && myChart.setOption(option);
|
|
|
+})
|
|
|
|
|
|
-const judgeLamp = () => {
|
|
|
- relayList.length = 0
|
|
|
- if (lampData.switchType === '单灯控制器') {
|
|
|
- let val1 = lampData.lampValue1
|
|
|
- let val2 = lampData.lampValue2
|
|
|
- let judge = {
|
|
|
- 33: [0.8,0],
|
|
|
- 66: [0.5,50],
|
|
|
- 100: [0.2,100],
|
|
|
- }
|
|
|
- transparency.value = judge[val1][1]
|
|
|
- materialOne.opacity = judge[val1][0]
|
|
|
- transparencyTwo.value = judge[val1][1]
|
|
|
- materialTwo.opacity = judge[val2][0]
|
|
|
- } else if(lampData.switchType === '四路控制器') {
|
|
|
- lampData.devices.forEach(item => {
|
|
|
- if (item.genre === 6) {
|
|
|
- relayList.push(item)
|
|
|
+const loadingLamp = ((list) => {
|
|
|
+ let chartDom = document.getElementById('lamp');
|
|
|
+ let myChart = echarts.init(chartDom);
|
|
|
+ let option;
|
|
|
+
|
|
|
+ option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ crossStyle: {
|
|
|
+ color: '#ffffff'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ name: '光照度',
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffff' // 图例文字颜色
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'time', // 使用时间类型的x轴
|
|
|
+ boundaryGap: false,
|
|
|
+ axisLine: {
|
|
|
+ show:true,
|
|
|
+ lineStyle:{
|
|
|
+ color:'#ffffff',
|
|
|
+ width:1,
|
|
|
+ type:'solid'
|
|
|
+ }
|
|
|
}
|
|
|
- })
|
|
|
- let deviceLamp1 = relayList[0].deviceRelays
|
|
|
- let deviceLamp2 = relayList[1].deviceRelays
|
|
|
- let count1 = 0
|
|
|
- let count2 = 0
|
|
|
- deviceLamp1.forEach(item => {
|
|
|
- item.state ? count1++ : count1
|
|
|
- })
|
|
|
- deviceLamp2.forEach(item => {
|
|
|
- item.state ? count2++ : count2
|
|
|
- })
|
|
|
- let judgeWay = {
|
|
|
- 1: [0.8,0],
|
|
|
- 2: [0.5,50],
|
|
|
- 3: [0.2,100],
|
|
|
- 4: [0.2,100]
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ axisLine: {
|
|
|
+ show:true,
|
|
|
+ lineStyle:{
|
|
|
+ color:'#ffffff',
|
|
|
+ width:1,
|
|
|
+ type:'solid'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: ['#ffffff']
|
|
|
+ }
|
|
|
}
|
|
|
- transparency.value = judgeWay[count1][1]
|
|
|
- materialOne.opacity = judgeWay[count1][0]
|
|
|
- transparencyTwo.value = judgeWay[count2][1]
|
|
|
- materialTwo.opacity = judgeWay[count2][0]
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '光照度',
|
|
|
+ type: 'bar',
|
|
|
+ data: list.map(item => [new Date(item.CreatedAt).getTime(), item.illuminance])
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ };
|
|
|
|
|
|
-// 组件挂载时初始化
|
|
|
-onMounted(() => {
|
|
|
- Object.assign(lampData, useScreen.controllerData)
|
|
|
- initThree();
|
|
|
- loadModel();
|
|
|
- animate();
|
|
|
- setTimeout(function () {
|
|
|
- judgeLamp()
|
|
|
- },500)
|
|
|
-});
|
|
|
+ option && myChart.setOption(option);
|
|
|
+})
|
|
|
|
|
|
-// 组件卸载时清理资源
|
|
|
-onUnmounted(() => {
|
|
|
- if (renderer) {
|
|
|
- renderer.dispose();
|
|
|
- }
|
|
|
-});
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
-.horn {
|
|
|
- position: absolute;
|
|
|
- content: "";
|
|
|
- width: 10px;
|
|
|
- height: 10px;
|
|
|
+// 公共样式
|
|
|
+.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;
|
|
|
+}
|
|
|
+//.....................
|
|
|
+.screenTitle{
|
|
|
+ width: 100%;
|
|
|
+ height: 130px;
|
|
|
+ background-color: #0e122d;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
.screen{
|
|
|
width: 100%;
|
|
|
- height: 970px;
|
|
|
- //background-image: url("@/assets/back.jpeg");
|
|
|
- background-size:100% 100%;
|
|
|
- background: #1d2b56 url("@/assets/line.png");
|
|
|
-
|
|
|
- .titleImage {
|
|
|
- width: 100%;
|
|
|
- height: 70px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- position: relative;
|
|
|
- .Heading{
|
|
|
- position: absolute;
|
|
|
- left: 42%;
|
|
|
- top: 25%;
|
|
|
- text-align: center;
|
|
|
- font-size: 1.7vw;
|
|
|
- font-weight: bold;
|
|
|
- color: #0EFCFF;
|
|
|
- }
|
|
|
- }
|
|
|
- .coreBox{
|
|
|
- width: 100%;
|
|
|
- height: 900px;
|
|
|
- margin-top: 20px;
|
|
|
- position: relative;
|
|
|
- .three-container {
|
|
|
- z-index: 1;
|
|
|
- position: absolute;
|
|
|
- height: 800px;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .formBox{
|
|
|
- position: absolute;
|
|
|
- right: 20px;
|
|
|
- z-index:2;
|
|
|
- }
|
|
|
- .formBox_two{
|
|
|
- position: absolute;
|
|
|
- right: 20px;
|
|
|
- top: 250px;
|
|
|
- z-index:2;
|
|
|
- }
|
|
|
- .vehicleBox{
|
|
|
- position: absolute;
|
|
|
- right: 20px;
|
|
|
- top: 380px;
|
|
|
- z-index:2;
|
|
|
- .vehicleData{
|
|
|
- display: flex;
|
|
|
- justify-content: end;
|
|
|
- align-items: center;
|
|
|
- span {
|
|
|
- font-size: 18px;
|
|
|
- font-weight: bold;
|
|
|
- color: #0EFCFF;
|
|
|
+ height: 1100px;
|
|
|
+ background-color: #0e122d;
|
|
|
+ display: flex;
|
|
|
+ .leftBox {
|
|
|
+ width: 20%;
|
|
|
+ height: 1000px;
|
|
|
+ .deviceSummary {
|
|
|
+ height: 150px;
|
|
|
+ .boxShape;
|
|
|
+ .deviceSummary_title {
|
|
|
+ width: 370px;
|
|
|
+ height: 50px;
|
|
|
+ .title;
|
|
|
+ img{
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
}
|
|
|
}
|
|
|
- .vehicleUnit{
|
|
|
+ .deviceOptionBox {
|
|
|
+ width: 370px;
|
|
|
+ height: 60px;
|
|
|
display: flex;
|
|
|
- justify-content: end;
|
|
|
- align-items: center;
|
|
|
- span {
|
|
|
- color: #909399;
|
|
|
+ margin-top: 20px;
|
|
|
+ .deviceOption {
|
|
|
+ width: 90px;
|
|
|
+ height: 60px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .panel{
|
|
|
- position: relative;
|
|
|
- width: 300px;
|
|
|
+ .inductance {
|
|
|
height: 200px;
|
|
|
- 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;
|
|
|
+ margin-top: 20px;
|
|
|
+ .boxShape;
|
|
|
+ .inductanceTitle {
|
|
|
+ width: 370px;
|
|
|
+ height: 50px;
|
|
|
+ .title;
|
|
|
+ img{
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
}
|
|
|
- &::after{
|
|
|
- .horn;
|
|
|
- bottom: 0;
|
|
|
- right: 0;
|
|
|
- border-right: 2px solid #02a6b5;
|
|
|
- border-bottom: 2px solid #02a6b5;
|
|
|
- }
|
|
|
- }
|
|
|
- .panel-title{
|
|
|
- position: absolute;
|
|
|
- left: 110px;
|
|
|
- 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;
|
|
|
+ }
|
|
|
+ .warn {
|
|
|
+ height: 400px;
|
|
|
+ margin-top: 20px;
|
|
|
+ .boxShape;
|
|
|
+ .warnTitle {
|
|
|
+ width: 370px;
|
|
|
+ height: 50px;
|
|
|
+ .title;
|
|
|
+ img{
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
}
|
|
|
- .panel-slider{
|
|
|
- width: 250px;
|
|
|
- position: absolute;
|
|
|
- top: 60px;
|
|
|
- left: 25px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .centerBox {
|
|
|
+ width: 60%;
|
|
|
+ height: 1000px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .centerBox_chart {
|
|
|
+ width: 1150px;
|
|
|
+ height: 250px;
|
|
|
+ margin-top: 40px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ border: 1px solid rgba(27,146,253,0.5);
|
|
|
+ background: rgba(50, 72, 106, 0.2);
|
|
|
+ }
|
|
|
+ .centerBox_environment{
|
|
|
+ width: 500px;
|
|
|
+ height: 250px;
|
|
|
+ position: relative;
|
|
|
+ .centerBox_environment_title {
|
|
|
+ width: 500px;
|
|
|
+ height: 50px;
|
|
|
+ .title;
|
|
|
+ img {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
}
|
|
|
- .panel-slider2{
|
|
|
- width: 250px;
|
|
|
+ .centerBox_environment_chart {
|
|
|
+ height: 250px;
|
|
|
position: absolute;
|
|
|
- top: 120px;
|
|
|
- left: 25px;
|
|
|
- }
|
|
|
- .brightness{
|
|
|
- width: 250px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- color: #909399;
|
|
|
- font-size: 14px;
|
|
|
+ top: 5px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-/* ::v-deep是vue3提供的深度选择器，.el-form-item__label是element-plus官方定义的类 */
|
|
|
-/deep/ .el-form-item__label{
|
|
|
- color: white;
|
|
|
- font-size: 16px;
|
|
|
-}
|
|
|
-
|
|
|
-.el-slider__runway{ // 滑块的进度条颜色
|
|
|
- background-color: #000000;
|
|
|
+ .rightBox {
|
|
|
+ width: 20%;
|
|
|
+ height: 1000px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
|
