From 2c4edb31e7da37c98e5660ab478f43e01a77003c Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期二, 14 三月 2023 15:57:10 +0800
Subject: [PATCH] 修改指标选择
---
src/views/specialWorkSystem/specialIndex/index.vue | 127 ++++++++++++++++++++++++++++++------------
1 files changed, 90 insertions(+), 37 deletions(-)
diff --git a/src/views/specialWorkSystem/specialIndex/index.vue b/src/views/specialWorkSystem/specialIndex/index.vue
index fea8c63..81d7ae6 100644
--- a/src/views/specialWorkSystem/specialIndex/index.vue
+++ b/src/views/specialWorkSystem/specialIndex/index.vue
@@ -23,11 +23,11 @@
</div>
</div>
<div class="chart" :id="zyfb"></div>
- <el-radio-group v-model="chartSearch1.period" size="small">
- <el-radio label="week" border>近7天</el-radio>
- <el-radio label="month" border>近30天</el-radio>
- <el-radio label="season" border>近90天</el-radio>
- <el-radio label="year" border>近一年</el-radio>
+ <el-radio-group v-model="chartSearch1.days" size="small" @change="(value)=>changeTime1(value)">
+ <el-radio :label='7' border>近7天</el-radio>
+ <el-radio :label='30' border>近30天</el-radio>
+ <el-radio :label='90' border>近90天</el-radio>
+ <el-radio :label='365' border>近一年</el-radio>
</el-radio-group>
</div>
<div class="chart-item">
@@ -69,12 +69,12 @@
active-text="作业人"
inactive-text="监护人"
/>
- <el-select :teleported="false" v-model="chartSearch4.period" size="small">
- <el-option label="近7天" value="week"/>
- <el-option label="近30天" value="month"/>
- <el-option label="近90天" value="season"/>
- <el-option label="近1年" value="year"/>
- </el-select>
+ <el-radio-group v-model="chartSearch4.days" size="small" @change="(value)=>changeTime2(value)">
+ <el-radio :label='7' border>近7天</el-radio>
+ <el-radio :label='30' border>近30天</el-radio>
+ <el-radio :label='90' border>近90天</el-radio>
+ <el-radio :label='365' border>近一年</el-radio>
+ </el-radio-group>
<el-select :teleported="false" v-model="chartSearch4.workType" size="small">
<el-option
v-for="item in workType1"
@@ -311,7 +311,8 @@
reviewRules: object;
warningData: Array<any>;
isFull:boolean;
- themeColor:string
+ themeColor:string;
+ endTime:string
}
interface type {
id: number;
@@ -363,11 +364,11 @@
chosenIndex: null,
searchWord: null,
searchStatus: null,
+ endTime: '',
chartSearch1: {
searchDep: null,
- startTime: '2023-03-08',
- endTime: '2023-02-08',
- period: 'month'
+ startTime: '',
+ days: 30
},
chartSearch2: {
searchDep: null,
@@ -377,7 +378,9 @@
searchDep: null
},
chartSearch4: {
- searchDep: null
+ searchDep: null,
+ startTime: '',
+ days: 30
},
searchDep2: null,
searchDep: null,
@@ -552,7 +555,30 @@
initZyfb()
initSlfx()
initZyqs()
+ state.endTime = formatDate(new Date())
+ // state.chartSearch1.startTime = getPeriod(30)
+ console.log(state.chartSearch1.startTime,state.endTime,'默认时间段')
});
+ const getPeriod =(num)=> {
+ const currentDate = new Date();
+ const startTime = new Date();
+ startTime.setDate(currentDate.getDate() - num);
+ return formatDate(startTime)
+ }
+ const formatDate =(date)=> {
+ const year = date.getFullYear().toString().slice(-2);
+ const month = ('0' + (date.getMonth() + 1)).slice(-2);
+ const day = ('0' + date.getDate()).slice(-2);
+ return `${year}-${month}-${day} 00:00:00`;
+ }
+ const changeTime1=(value:number)=>{
+ state.chartSearch1.startTime = getPeriod(value)
+ console.log(state.chartSearch1.startTime,state.endTime,'结束段')
+ }
+ const changeTime2=(value:number)=>{
+ state.chartSearch4.startTime = getPeriod(value)
+ console.log(state.chartSearch4.startTime,state.endTime,'结束段')
+ }
const toFullscreen =()=>{
const element = document.getElementById('bigScreen')
if (!screenfull.isEnabled) {
@@ -597,7 +623,7 @@
textStyle: {
// 设置默认的文字颜色
color: state.themeColor,
- fontSize: 12
+ // fontSize: 12
},
itemStyle: {
borderWidth: 0 // 设置图例边框宽度为0
@@ -612,21 +638,29 @@
itemStyle: {
borderRadius: 1,
borderColor: '#fff',
- borderWidth: 2
+ borderWidth: 1
},
label: {
- show: false,
- position: 'center'
- },
- emphasis: {
- label: {
- show: true,
- fontSize: 40,
- fontWeight: 'bold'
- }
+ show: true,
+ position: 'outside',
+ overflow: 'truncate',
+ borderWidth: 0,
+ color: state.themeColor
},
labelLine: {
- show: true
+ show: true, // 显示指示线
+ lineStyle: {
+ color: '#ccc',
+ width: 1,
+ type: 'solid'
+ }
+ },
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ },
},
data: [
{ value: 1048, name: '动火作业' },
@@ -709,7 +743,17 @@
}
},
yAxis: {
- type: 'value'
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#fafafa',
+ width: 1,
+ type: 'dashed'
+ }
+ },
+ axisLabel:{
+ color: '#ccc'
+ }
},
grid: {
top: '8%',
@@ -718,7 +762,10 @@
series: [
{
data: [150, 230, 224, 218, 135, 147, 230, 224, 218, 135, 147, 260],
- type: 'line'
+ type: 'line',
+ label:{
+ show: true
+ }
}
]
}
@@ -903,6 +950,8 @@
zyfb,
slfx,
zyqs,
+ changeTime1,
+ changeTime2,
toFullscreen,
handleReview,
openVideo,
@@ -942,7 +991,7 @@
line-height: 34px;
top: 80px;
right: 20px;
- z-index: 99999;
+ z-index: 9;
}
.demo-tabs {
@@ -1389,13 +1438,17 @@
.full{
position:fixed;
- background: #fff;
- border-radius: 17px;
+ background: rgba(0,0,0,.2);
+ border: 1px solid rgba(54, 252, 252, .6);
+ border-radius: 17px 1px 1px 17px;
box-shadow: 3px 3px 12px rgba(0,0,0,.2);
- height: 34px;
- line-height: 34px;
- top: 0;
- right: 20px;
+ height: 32px;
+ line-height: 30px;
+ top: 10px;
+ right: 2px;
+ display: flex;
+ justify-content: center;
+ backdrop-filter: blur(2px);
z-index: 99999;
}
.topChart{
--
Gitblit v1.9.2