From f36c7eb7076e1292c10d75169b8927cacc451277 Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期二, 08 七月 2025 17:31:13 +0800
Subject: [PATCH] fix:xg
---
src/views/screen/device.vue | 200 ++++++++++++++++++++++++-
src/views/login.vue | 4
src/views/screen/data.vue | 234 ++++++++++++++++++++++++++++-
src/assets/images/screen/fengji.png | 0
src/views/screen/components/dataItem.vue | 4
5 files changed, 420 insertions(+), 22 deletions(-)
diff --git a/src/assets/images/screen/fengji.png b/src/assets/images/screen/fengji.png
new file mode 100644
index 0000000..8e3feab
--- /dev/null
+++ b/src/assets/images/screen/fengji.png
Binary files differ
diff --git a/src/views/login.vue b/src/views/login.vue
index c56ff05..3fc9a02 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -48,7 +48,7 @@
</div>
</div>
</el-form-item>
- <el-checkbox class="check-box" v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">
+ <el-checkbox class="check-box" v-model="loginForm.rememberMe" style="margin-right:25px;">
记住密码
</el-checkbox>
<el-form-item>
@@ -225,7 +225,7 @@
const rememberMe = Cookies.get("rememberMe") || true;
loginForm.userName = userName ? userName : loginForm.userName;
loginForm.password = password ? password : loginForm.password;
- loginForm.rememberMe = rememberMe ? rememberMe : loginForm.rememberMe;
+ loginForm.rememberMe = rememberMe ? Boolean(rememberMe) : loginForm.rememberMe;
}
onMounted(() => {
diff --git a/src/views/screen/components/dataItem.vue b/src/views/screen/components/dataItem.vue
index 20a0085..757229f 100644
--- a/src/views/screen/components/dataItem.vue
+++ b/src/views/screen/components/dataItem.vue
@@ -6,14 +6,14 @@
<div class="gas-CH">
<img src="@/assets/images/screen/CH4.png" alt="" />
</div>
- <div class="gas-data"><span>1.1</span>%LEL</div>
+ <div class="gas-data"><span>1.1</span>%</div>
</div>
<div class="gas">
<div class="gas-t">H₂S</div>
<div class="gas-H2">
<img src="@/assets/images/screen/H2S.png" alt="" />
</div>
- <div class="gas-data"><span>1.2</span>%LEL</div>
+ <div class="gas-data"><span>1.2</span>ppm</div>
</div>
</div>
<div class="item-address">
diff --git a/src/views/screen/data.vue b/src/views/screen/data.vue
index 9bb46ae..8325b20 100644
--- a/src/views/screen/data.vue
+++ b/src/views/screen/data.vue
@@ -3,12 +3,50 @@
<div class="data-l">
<div class="left">
<div class="left-item">
- <div class="item-t">报警次数</div>
- <div class="item-c"></div>
+ <div class="item-t">
+ <div class="title-left">报警次数</div>
+ <div class="title-right">
+ <el-select
+ v-model="value"
+ size="small"
+ style="width: 120px"
+ >
+ <el-option
+ v-for="item in options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </div>
+ </div>
+ <div class="item-c">
+ <el-table
+ :data="timeData"
+ :header-cell-style="headerStyle"
+ :cell-style="rowStyle"
+ style="height: 100%;"
+ >
+ <el-table-column prop="type" label="" />
+ <el-table-column prop="device" label="浓度最大值" />
+ <el-table-column prop="address" label="浓度最小值" />
+ <el-table-column prop="time" label="报警次数" />
+ </el-table>
+ </div>
</div>
<div class="left-item">
<div class="item-t">街道统计</div>
- <div class="item-c"></div>
+ <div class="item-c">
+ <el-table
+ :data="timeData"
+ :header-cell-style="headerStyle"
+ :cell-style="rowStyle"
+ style="height: 100%;"
+ >
+ <el-table-column prop="type" label="" />
+ <el-table-column prop="device" label="气体处置次数/报警次数汇总" />
+ </el-table>
+ </div>
</div>
</div>
</div>
@@ -16,11 +54,55 @@
<div class="center">
<div class="center-item">
<div class="item-t">报警记录</div>
- <div class="item-c"></div>
+ <div class="item-c">
+ <el-table
+ :data="timeData"
+ :header-cell-style="headerStyle"
+ :cell-style="rowStyle"
+ style="height: 100%;"
+ >
+ <el-table-column prop="type" label="设备编号" />
+ <el-table-column prop="address" label="安装地址" />
+ <el-table-column prop="device" label="设备类型" />
+ <el-table-column prop="device" label="报警类型" />
+ <el-table-column prop="device" label="报警次数" />
+ <el-table-column prop="time" label="最新报警时间" />
+ </el-table>
+ </div>
</div>
<div class="center-item">
- <div class="item-t">气体浓度监测曲线</div>
- <div class="item-c"></div>
+ <div class="item-t">
+ <div class="title-left">气体浓度监测曲线</div>
+ <div class="title-right">
+ <el-select
+ v-model="value"
+ size="small"
+ style="width: 120px"
+ >
+ <el-option
+ v-for="item in options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ <el-select
+ v-model="value"
+ size="small"
+ style="width: 120px"
+ >
+ <el-option
+ v-for="item in options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </div>
+ </div>
+ <div class="item-c">
+ <div class="gasCharts" ref="gasRef"></div>
+ </div>
</div>
</div>
</div>
@@ -28,11 +110,35 @@
<div class="right">
<div class="right-item">
<div class="item-t">短信报警</div>
- <div class="item-c"></div>
+ <div class="item-c">
+ <el-table
+ :data="timeData"
+ :header-cell-style="headerStyle"
+ :cell-style="rowStyle"
+ style="height: 100%;"
+ >
+ <el-table-column prop="type" label="设备编号" />
+ <el-table-column prop="address" label="安装地址" />
+ <el-table-column prop="device" label="设备类型" />
+ <el-table-column prop="device" label="报警类型" />
+ </el-table>
+ </div>
</div>
<div class="right-item">
<div class="item-t">邮箱报警</div>
- <div class="item-c"></div>
+ <div class="item-c">
+ <el-table
+ :data="timeData"
+ :header-cell-style="headerStyle"
+ :cell-style="rowStyle"
+ style="height: 100%;"
+ >
+ <el-table-column prop="type" label="设备编号" />
+ <el-table-column prop="address" label="安装地址" />
+ <el-table-column prop="device" label="设备类型" />
+ <el-table-column prop="device" label="报警类型" />
+ </el-table>
+ </div>
</div>
</div>
</div>
@@ -40,7 +146,80 @@
</template>
<script setup>
+ import {ref, onMounted} from 'vue'
+ import * as echarts from 'echarts';
+ const value = ref('')
+ const options = [
+ {
+ value: 1,
+ label: 'Option1',
+ },
+ {
+ value: 2,
+ label: 'Option2',
+ }
+ ]
+ const timeData = ref([
+ { type: '甲烷浓度异常', device: '风机', address: '重庆市丰都县龙城大道435号', time: '2.9小时' },
+ { type: '甲烷浓度异常', device: '风机', address: '重庆市丰都县龙城大道435号', time: '2.9小时' },
+ { type: '甲烷浓度异常', device: '风机', address: '重庆市丰都县龙城大道435号', time: '2.9小时' },
+ ])
+
+ const headerStyle = {
+ "background-color": '#041025 !important'
+ }
+ const rowStyle = {
+ "background-color": '#081C3F !important'
+ }
+
+ const gasRef = ref()
+ let gasCharts = null
+
+ const setGasCharts = () => {
+ if(gasRef.value){
+ gasCharts = echarts.init(gasRef.value)
+
+ const option = {
+ tooltip: {
+ trigger: 'item'
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
+ type: 'line',
+ areaStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {offset: 0, color: 'rgba(118,196,235,1)' },
+ {offset: 1, color: 'rgba(118,196,235,0)'}
+ ],
+ }
+ }
+ }
+ ]
+ };
+
+ gasCharts.setOption(option)
+ }
+ }
+
+ onMounted(() => {
+ setGasCharts()
+ })
</script>
<style scoped lang="scss">
@@ -49,6 +228,23 @@
color: #fff;
display: flex;
justify-content: space-between;
+ :deep(.el-table){
+ --el-table-border-color: #000;
+ th{
+ font-size: 12px;
+ color: #fff;
+ }
+ tr{
+ font-size: 12px;
+ color: #fff;
+ }
+ .el-table__cell{
+ border: none;
+ }
+ }
+ :deep(.el-scrollbar__wrap--hidden-default){
+ background-color: #000 !important;
+ }
&-l{
width: 25%;
height: 100%;
@@ -67,7 +263,14 @@
width: 100%;
height: 3rem;
line-height: 3rem;
- padding-left: 3.5rem;
+ padding: 0 5rem 0 3rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ .title-right{
+ display: flex;
+ gap: 1rem;
+ }
}
.item-c{
height: calc(100% - 3rem);
@@ -92,11 +295,22 @@
.item-t{
height: 3rem;
line-height: 3rem;
- padding-left: 4.5rem;
+ padding: 0 6rem 0 4.5rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ .title-right{
+ display: flex;
+ gap: 1rem;
+ }
}
.item-c{
height: calc(100% - 3rem);
padding: 0.5rem;
+ .gasCharts{
+ width: 100%;
+ height: 100%;
+ }
}
}
}
diff --git a/src/views/screen/device.vue b/src/views/screen/device.vue
index 04ae68b..c10a067 100644
--- a/src/views/screen/device.vue
+++ b/src/views/screen/device.vue
@@ -37,7 +37,59 @@
<el-button type="success" size="small">一键启动</el-button>
</div>
</div>
- <div class="item-c"></div>
+ <div class="item-c">
+ <div class="fengji">
+ <div class="fengjiItem">
+ <div class="fengji-title">重庆市丰都县东麓国际小区4栋附三层风机</div>
+ <div class="fengji-status">
+ <img src="@/assets/images/screen/fengji.png" alt="" />
+ <span>正在运行</span>
+ </div>
+ </div>
+ <div class="fengjiItem">
+ <div class="fengji-title">重庆市丰都县东麓国际小区4栋附三层风机</div>
+ <div class="fengji-status">
+ <img src="@/assets/images/screen/fengji.png" alt="" />
+ <span>正在运行</span>
+ </div>
+ </div>
+ <div class="fengjiItem">
+ <div class="fengji-title">重庆市丰都县东麓国际小区4栋附三层风机</div>
+ <div class="fengji-status">
+ <img src="@/assets/images/screen/fengji.png" alt="" />
+ <span>正在运行</span>
+ </div>
+ </div>
+ <div class="fengjiItem">
+ <div class="fengji-title">重庆市丰都县东麓国际小区4栋附三层风机</div>
+ <div class="fengji-status">
+ <img src="@/assets/images/screen/fengji.png" alt="" />
+ <span>正在运行</span>
+ </div>
+ </div>
+ <div class="fengjiItem">
+ <div class="fengji-title">重庆市丰都县东麓国际小区4栋附三层风机</div>
+ <div class="fengji-status">
+ <img src="@/assets/images/screen/fengji.png" alt="" />
+ <span>正在运行</span>
+ </div>
+ </div>
+ <div class="fengjiItem">
+ <div class="fengji-title">重庆市丰都县东麓国际小区4栋附三层风机</div>
+ <div class="fengji-status">
+ <img src="@/assets/images/screen/fengji.png" alt="" />
+ <span>正在运行</span>
+ </div>
+ </div>
+ <div class="fengjiItem">
+ <div class="fengji-title">重庆市丰都县东麓国际小区4栋附三层风机</div>
+ <div class="fengji-status">
+ <img src="@/assets/images/screen/fengji.png" alt="" />
+ <span>正在运行</span>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
<div class="left-item">
<div class="item-t">工单处理</div>
@@ -53,15 +105,17 @@
<el-table-column prop="device" label="上报时间" />
<el-table-column prop="time" label="上报人" />
<el-table-column prop="address" label="所属地址" />
- <el-table-column prop="options" label="工单状态">
- <el-button type="primary">已处理</el-button>
+ <el-table-column prop="status" label="工单状态">
+ <div>已处理</div>
</el-table-column>
</el-table>
</div>
</div>
<div class="left-item">
<div class="item-t">设备状态</div>
- <div class="item-c"></div>
+ <div class="item-c">
+ <div ref="statusRef" class="sbStatus"></div>
+ </div>
</div>
</div>
</div>
@@ -105,7 +159,9 @@
</div>
<div class="center-item">
<div class="item-t">终端监控分类曲线</div>
- <div class="item-c"></div>
+ <div class="item-c">
+ <div ref="moniterRef" class="moniter"></div>
+ </div>
</div>
</div>
</div>
@@ -149,7 +205,9 @@
</template>
<script setup>
+ import { onMounted } from 'vue';
import dataItem from './components/dataItem.vue'
+ import * as echarts from 'echarts';
const timeData = ref([
{ type: '甲烷浓度异常', device: '风机', address: '重庆市丰都县龙城大道435号', time: '2.9小时' },
@@ -165,7 +223,6 @@
}
const value = ref('')
-
const options = [
{
value: 1,
@@ -176,6 +233,85 @@
label: 'Option2',
}
]
+ const statusRef = ref()
+ const moniterRef = ref()
+ let statusCharts = null
+ let moniterCharts = null
+
+ const setStatusCharts = () => {
+ if(statusRef.value){
+ statusCharts = echarts.init(statusRef.value)
+
+ const option = {
+ tooltip: {
+ trigger: 'item'
+ },
+ series: [
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ data: [
+ { value: 1048, name: 'Search Engine' },
+ { value: 735, name: 'Direct' },
+ { value: 580, name: 'Email' },
+ { value: 484, name: 'Union Ads' },
+ { value: 300, name: 'Video Ads' }
+ ]
+ }
+ ]
+ };
+
+ statusCharts.setOption(option)
+ }
+ }
+
+ const setMoniterCharts = () => {
+ if(moniterRef.value){
+ moniterCharts = echarts.init(moniterRef.value)
+
+ const option = {
+ tooltip: {
+ trigger: 'item'
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
+ type: 'line',
+ areaStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {offset: 0, color: 'rgba(118,196,235,1)' },
+ {offset: 1, color: 'rgba(118,196,235,0)'}
+ ],
+ }
+ }
+ }
+ ]
+ };
+
+ moniterCharts.setOption(option)
+ }
+ }
+
+
+ onMounted(() => {
+ setStatusCharts()
+ setMoniterCharts()
+ })
</script>
<style scoped lang="scss">
@@ -185,6 +321,7 @@
display: flex;
justify-content: space-between;
:deep(.el-table){
+ --el-table-border-color: #000;
th{
font-size: 12px;
color: #fff;
@@ -219,7 +356,7 @@
width: 100%;
height: 3rem;
line-height: 3rem;
- padding: 0 5rem 0 3.5rem;
+ padding: 0 5rem 0 4rem;
display: flex;
justify-content: space-between;
align-items: center;
@@ -235,6 +372,40 @@
// &::-webkit-scrollbar{
// display: none;
// }
+ .sbStatus{
+ width: 100%;
+ height: 100%;
+ }
+ }
+ .fengji{
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ overflow-y: scroll;
+ &::-webkit-scrollbar{
+ display: none;
+ }
+ .fengjiItem{
+ width: 50%;
+ height: 50%;
+ text-align: center;
+ .fengji-title{
+ font-size: 0.8rem;
+ padding: 0.5rem 0;
+ }
+ .fengji-status{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ img{
+ width: 2rem;
+ height: 2rem;
+ margin-right: 2rem;
+ animation: rotateAnimation 1s linear 0s infinite;
+ }
+ }
+ }
}
}
}
@@ -255,7 +426,7 @@
.item-t{
height: 3rem;
line-height: 3rem;
- padding: 0 6rem 0 4.2rem;
+ padding: 0 6rem 0 3.8rem;
display: flex;
justify-content: space-between;
align-items: center;
@@ -267,6 +438,10 @@
.item-c{
height: calc(100% - 3rem);
padding: 0.5rem;
+ .moniter{
+ width: 100%;
+ height: 100%;
+ }
}
}
}
@@ -297,4 +472,13 @@
}
}
}
+
+ @keyframes rotateAnimation{
+ 0%{
+ transform: rotate(0deg);
+ }
+ 100%{
+ transform: rotate(360deg);
+ }
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.3