From 94de735233383fe644ec0401465e8e85c8999179 Mon Sep 17 00:00:00 2001
From: rk <94314517@qq.com>
Date: 星期五, 06 三月 2026 10:01:09 +0800
Subject: [PATCH] 钥匙柜开门添加 指纹方式
---
admin/src/views/business/dangerStatic.vue | 219 ++++++++++++++++++++++++++++++++++++------------------
1 files changed, 147 insertions(+), 72 deletions(-)
diff --git a/admin/src/views/business/dangerStatic.vue b/admin/src/views/business/dangerStatic.vue
index d1ea42c..735dfb2 100644
--- a/admin/src/views/business/dangerStatic.vue
+++ b/admin/src/views/business/dangerStatic.vue
@@ -34,7 +34,7 @@
<!-- </QueryForm>-->
<div class="main_content">
<div class="type_wrap">
- <div class="title">闅愭偅绫诲瀷缁熻</div>
+ <div class="title">鏈湀闅愭偅绫诲瀷缁熻</div>
<div v-show="typeList && typeList.length > 0" class="echart1" ref="typeRef"></div>
<div v-show="typeList.length == 0" style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">
<img style="width: 240px;" src="@/assets/images/default_homeimg.png" alt="">
@@ -42,7 +42,7 @@
</div>
<div class="dept_wrap">
- <div class="title">闅愭偅褰掑睘閮ㄩ棬缁熻</div>
+ <div class="title">鏈湀闅愭偅褰掑睘閮ㄩ棬缁熻</div>
<div v-show="deptList && deptList.length > 0" class="echart2" ref="deptRef"></div>
<div v-show="deptList.length == 0" style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">
<img style="width: 240px;" src="@/assets/images/default_homeimg.png" alt="">
@@ -52,8 +52,8 @@
<div class="main_table">
<div class="main_table_echart">
<div class="title">鏈勾闅愭偅瓒嬪娍</div>
- <div id="echart3" v-if="yearList.length > 0"></div>
- <div v-else style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">
+ <div id="echart3" v-show="yearList.length > 0"></div>
+ <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;" v-show="yearList.length === 0">
<img style="width: 240px;" src="@/assets/images/default_homeimg.png" alt="">
</div>
</div>
@@ -77,15 +77,15 @@
</template>
<script>
-import QueryForm from '@/components/common/QueryForm'
+// import QueryForm from '@/components/common/QueryForm'
import * as echarts from 'echarts'
import { hiddenDangerDataPost } from '@/api/business/hiddenDanger'
import dayjs from 'dayjs'
export default {
components: {
- QueryForm,
+ // QueryForm,
},
- data() {
+ data () {
return {
filters: {
fastdate: '29',
@@ -101,7 +101,7 @@
options: [
{ label: '寰呭鐞�', value: '0' },
{ label: '宸插鐞�', value: '1' },
- { label: '宸查��鍥�', value: '2' },
+ { label: '宸查��鍥�', value: '2' }
]
},
{
@@ -131,19 +131,19 @@
departmentList: []
}
},
- mounted() {
+ mounted () {
this.changeRadio('29')
this.initDept3()
// this.getData()
},
methods: {
- changeRadio(day) {
+ changeRadio (day) {
const arr = [dayjs().subtract(day, 'day').format('YYYY-MM-DD') + ' 00:00:00', dayjs().format('YYYY-MM-DD') + ' 23:59:59']
this.filters.queryStartTime = arr[0]
this.filters.queryEndTime = arr[1]
this.getData()
},
- getData(page) {
+ getData (page) {
hiddenDangerDataPost({ ...this.filters }).then(res => {
if (res) {
this.totalList.total = res.total || 0
@@ -154,7 +154,7 @@
this.yearList = res.yearList
- this.departmentList = res.departmentList.slice(0, 10)
+ this.departmentList = res.departmentSortList.slice(0, 10)
this.typeList = res.cateList || []
this.deptList = res.departmentList || []
@@ -163,22 +163,20 @@
this.initDept()
this.initDept3()
})
-
}
})
-
},
- changeForm(e) {
+ changeForm (e) {
this.getData()
},
- initType() {
+ initType () {
const myChart = echarts.init(document.querySelector('.echart1'))
let total = 0
this.typeList.forEach(i => {
total += i.total
})
- let colors = ['#d75a44', '#e39f4d', '#f0d05f', '#7ac7f6', '#4469ee', '#698af0','#86a2f1','#a1b4f6','#a0b5f5', '#9fb5f4', '#b6c7f7', '#c8d5f8']
- let option = {
+ const colors = ['#d75a44', '#e39f4d', '#f0d05f', '#7ac7f6', '#4469ee', '#698af0', '#86a2f1', '#a1b4f6', '#a0b5f5', '#9fb5f4', '#b6c7f7', '#c8d5f8']
+ const option = {
grid: {
left: '0%',
right: '0%',
@@ -193,8 +191,8 @@
left: '45%',
textStyle: {
color: '#666666',
- fontSize: 13,
- },
+ fontSize: 13
+ }
}, {
text: total,
top: '50%',
@@ -202,8 +200,8 @@
textStyle: {
color: '#080404',
fontSize: 16,
- fontWeight: 'bold',
- },
+ fontWeight: 'bold'
+ }
}],
legend: {
left: 'center',
@@ -226,7 +224,7 @@
type: 'pie',
radius: ['34%', '50%'],
label: {
- formatter: "{a|{b}}\n\n{c} | {d}%",
+ formatter: '{a|{b}}\n\n{c} | {d}%',
rich: {
a: {
color: '#333333',
@@ -241,7 +239,7 @@
length: 24,
length2: 64,
lineStyle: {
- width: 2 // 绾挎潯瀹藉害
+ width: 2 // 绾挎潯瀹藉害
}
},
data: this.typeList.map((i, index) => {
@@ -261,14 +259,14 @@
myChart.resize()
})
},
- initDept() {
+ initDept () {
const myChart = echarts.init(document.querySelector('.echart2'))
- let option = {
+ const option = {
grid: {
left: '10%',
right: '10%',
- bottom: '0%',
+ bottom: '10%',
top: '20%',
containLabel: true
},
@@ -286,8 +284,8 @@
name: '闅愭偅鏁�',
minInterval: 1,
axisLine: {
- show: true,
- },
+ show: true
+ }
},
series: [
{
@@ -297,15 +295,15 @@
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#d75e45' }, // 娓愬彉璧峰鑹�
- { offset: 1, color: '#db924c' } // 娓愬彉缁堟鑹�
+ { offset: 1, color: '#db924c' } // 娓愬彉缁堟鑹�
])
},
label: {
- show: true, // 鏄剧ず鏍囩
+ show: true, // 鏄剧ず鏍囩
position: 'top', // 璁╂爣绛炬樉绀哄湪鏌卞瓙椤堕儴
- color: '#666666', // 鏂囧瓧棰滆壊
- fontSize: 14, // 鏂囧瓧澶у皬
+ color: '#666666', // 鏂囧瓧棰滆壊
+ fontSize: 14 // 鏂囧瓧澶у皬
}
}
]
@@ -315,15 +313,21 @@
myChart.resize()
})
},
- initDept3() {
+ initDept3 () {
if (this.yearList.length === 0) return
const myChart = echarts.init(document.querySelector('#echart3'))
- let names = this.yearList.map(item => item.name)
- let datas = this.yearList.map(item => item.total)
+ const names = this.yearList.map(item => item.name)
+ const datas = this.yearList.map(item => item.total)
- let option = {
+ const option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'line'
+ }
+ },
grid: {
left: '5%',
right: '10%',
@@ -336,12 +340,62 @@
data: names
},
yAxis: {
- type: 'value'
+ type: 'value',
+ axisLine: {
+ show: true
+ },
+ axisLabel: {
+ formatter: function (value) {
+ // 鍥涜垗浜斿叆鍒版渶杩戠殑鏁存暟
+ return Math.round(value)
+ }
+ }
},
series: [
{
data: datas,
- type: 'line'
+ type: 'line',
+ areaStyle: {
+ normal: {
+ color: {
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0,
+ color: '#207FF7' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: 'rgba(255,255,255,.2)' // 100% 澶勭殑棰滆壊
+ }],
+ globalCoord: false // 缂虹渷涓� false
+ }
+ }
+ },
+ lineStyle: { // 绾挎潯鏍峰紡
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: '#207FF7' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1, color: '#207FF7' // 100% 澶勭殑棰滆壊
+ }]
+ },
+ width: 2 // 绾挎潯绮楃粏
+ },
+ symbol: 'circle',
+ symbolSize: 10,
+ itemStyle: {
+ borderWidth: 1,
+ borderColor: '#fff',
+ color: '#207FF7'
+ },
+ smooth: false
}
]
}
@@ -350,7 +404,7 @@
myChart.resize()
})
},
- clear() {
+ clear () {
this.filters = {}
this.getData()
}
@@ -369,47 +423,52 @@
overflow-x: hidden;
padding: 15px;
box-sizing: border-box;
- background-color: #ffffff;
+ background-color: #F4F7FC;
.main_head {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
- margin-bottom: 20px;
+ margin-bottom: 10px;
+ background-color: #ffffff;
+ padding: 20px;
+ box-sizing: border-box;
.blue {
- border-left: 5px solid blue;
+ border-left: 8px solid #12BB8B;
}
.red {
- border-left: 5px solid red;
+ border-left: 8px solid #F6CF46;
}
.yellow {
- border-left: 5px solid yellow;
+ border-left: 8px solid #5DC9FB;
}
.orange {
- border-left: 5px solid orange;
+ border-left: 8px solid #FF9E56;
}
.darkBlue {
- border-left: 5px solid #0000a8;
+ border-left: 8px solid #6B6EFF;
}
.main_head_item {
width: 19%;
- height: 70px;
+ height: 112px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
border-radius: 5px;
- background-color: #ffffff;
+ background: #F4F7FC;
span {
&:nth-child(1) {
- font-size: 22px;
- color: black;
- font-weight: bold;
+ font-weight: 600;
+ font-size: 30px;
+ color: #222222;
}
&:nth-child(2) {
- font-size: 16px;
- color: black;
+ font-weight: 400;
+ font-size: 14px;
+ color: #222222;
+ margin-top: 10px;
}
}
}
@@ -417,11 +476,14 @@
.main_table {
display: flex;
- align-items: start;
+ align-items: flex-start;
justify-content: space-between;
.main_table_echart {
- flex: 1;
+ width: 64%;
height: 400px;
+ background-color: #ffffff;
+ padding: 20px;
+ box-sizing: border-box;
.title {
font-weight: 600;
font-size: 16px;
@@ -433,9 +495,11 @@
}
}
.main_table_list {
- margin-left: 20px;
flex-shrink: 0;
- width: 500px;
+ width: 35%;
+ padding: 20px;
+ box-sizing: border-box;
+ background-color: #ffffff;
.title {
font-weight: 600;
font-size: 16px;
@@ -443,10 +507,12 @@
}
.list_head {
width: 100%;
- height: 35px;
+ height: 50px;
display: flex;
align-items: center;
- background-color: #ececec;
+ background-color: #F7F7F7;
+ border-left: 1px solid #DFE2E8;
+ border-top: 1px solid #DFE2E8;
margin-top: 15px;
.list_head_item {
flex: 1;
@@ -456,15 +522,19 @@
justify-content: center;
font-size: 13px;
color: #222222;
+ border-right: 1px solid #DFE2E8;
}
}
.table_box {
width: 100%;
+ border-bottom: 1px solid #DFE2E8;
.list_content {
width: 100%;
- height: 35px;
+ height: 50px;
display: flex;
align-items: center;
+ border-left: 1px solid #DFE2E8;
+ border-top: 1px solid #DFE2E8;
.list_head_item {
flex: 1;
height: 100%;
@@ -473,6 +543,7 @@
justify-content: center;
font-size: 13px;
color: #222222;
+ border-right: 1px solid #DFE2E8;
}
}
}
@@ -481,38 +552,42 @@
.main_content {
display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
height: 500px;
-
+ margin-bottom: 10px;
.title {
font-weight: 600;
font-size: 16px;
color: #222222;
/*margin-bottom: 20px;*/
- margin-top: 20px;
}
.type_wrap {
- flex: 11;
+ width: 49.5%;
flex-shrink: 0;
- height: calc(100% - 20px);
+ height: 100%;
/*border-right: 12px solid #f7f7f7;*/
-
+ background-color: #ffffff;
+ padding: 20px;
+ box-sizing: border-box;
.echart1 {
width: 100%;
- height: calc(100% - 60px);
+ height: 100%;
}
}
.dept_wrap {
- flex: 10;
+ width: 49.5%;
flex-shrink: 0;
- height: calc(100% - 20px);
- padding-left: 20px;
-
+ height: 100%;
+ background-color: #ffffff;
+ padding: 20px;
+ box-sizing: border-box;
.echart2 {
width: 100%;
- height: calc(100% - 60px);
+ height: 100%;
}
}
}
--
Gitblit v1.9.3