From 60076cbbe1da6cc8ed3a4ebb8f67e92ea9be9e4a Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期二, 15 八月 2023 16:02:58 +0800
Subject: [PATCH] 设置按钮的加载效果
---
src/test/TestSelect.vue | 267 +++++++++++++++-------------------------------------
1 files changed, 79 insertions(+), 188 deletions(-)
diff --git a/src/test/TestSelect.vue b/src/test/TestSelect.vue
index 0f57761..03d495f 100644
--- a/src/test/TestSelect.vue
+++ b/src/test/TestSelect.vue
@@ -1,208 +1,99 @@
-<!-- 鑷姩浠庢帴鍙ｈ幏鍙栨暟鎹� 鐢熸垚浠〃鐩� -->
-
-<script lang="ts">
-import axios from 'axios';
-import * as echarts from 'echarts';
-
+<script>
+import ExceptionTypeLineChart from '../sfc/ExceptionTypeLineChart.vue';
+import dayjs from 'dayjs';
export default {
+ components: {
+ ExceptionTypeLineChart
+ },
data() {
return {
- loading:false,
- smogData: [
- // {
- // "time": "2023-06-24 13:23",
- // "value": 0.04,
- // "mnCode": "31011020175002"
- // },
- // {
- // "time": "2023-06-24 00:42",
- // "value": 0.04,
- // "mnCode": "31011020175004"
- // },
- // {
- // "time": "2023-05-24 20:39",
- // "value": 0.06,
- // "mnCode": "31011020175008"
- // },
- // {
- // "time": "2023-06-24 13:38",
- // "value": 0.66,
- // "mnCode": "64480047078091"
- // },
- // {
- // "time": "2023-05-24 20:39",
- // "value": 0.8,
- // "mnCode": "31011020175006"
- // },
- // {
- // "time": "2023-06-24 13:38",
- // "value": 0.69,
- // "mnCode": "64480047078099"
- // },
- // {
- // "time": "2023-05-24 20:39",
- // "value": 0.8,
- // "mnCode": "31011020175026"
- // },
-
- ],//浠庡悗绔斁鍥炵殑鍊�
- chartData: [], //浠庡浘鍍忚繑鍥炵殑鍊�
+ xAxis: [
+ '2023-07-20 12:00:00',
+ '2023-07-20 12:10:00',
+ '2023-07-20 12:20:00',
+ '2023-07-20 12:30:00',
+ '2023-07-20 12:40:00'
+ ],
+ yAxis: [0.4, 0.9, 0.1, 1.5, 0.3]
};
},
mounted() {
- this.loading = true
- //鑷姩鑾峰彇鎺ュ彛鍏ㄩ儴鏁版嵁
- axios.get('https://fyami.com.cn/device/min/value/real_time', { params: { "page": 1, "per_page": 20 } }).then((result) => {
- this.smogData = result.data.data
- console.log(this.smogData);
- this.loading = false
- });
-
-
+ this.descTenTime()
},
-
methods: {
- showMore(){
- this.smogData.forEach((device) => {
- const chartDom = document.querySelector(`#chart-${device.mnCode}`) //鏍规嵁閫夋嫨鍣ㄨ幏鍙栧厓绱狅紝骞朵笖鍙繑鍥炲厓绱犱腑鐨勭涓�涓�
- const chart = echarts.init(chartDom)
-
- this.chartData = {
- value: device.value,
- axisLabel: {
- show: true,
- textStyle: {
- color: '#666'
- },
- formatter: function (value) {
- return value;
- }
- },
- detail: {
- formatter: function (value) {
- return value + 'mg/m鲁';
- },
- textStyle: {
- fontSize: 10,
- fontWeight: 'bold'
- },
- offsetCenter: [0, '30%']
- },
- title: {
- show: true,
- text: '璁惧娌圭儫娴撳害',
- textStyle: {
- color: '#999',
- fontSize: 14
- },
- offsetCenter: [0, '-30%']
- },
- axisLine: {
- lineStyle: {
- width: 10,
- color: [
- [0.2, '#67e0e3'],
- [0.8, '#37a2da'],
- [1, '#fd666d']
- ]
- }
- },
- splitLine: {
- show: true,
- length: 10,
- lineStyle: {
- color: 'auto',
- }
- },
- axisTick: {
- show: true,
- length: 15,
- lineStyle: {
- color: 'auto',
- }
+ findTimeInExceptionData(data,time){
+ for(let i=0;i<data.length;i++){
+ if(data[i]['mvDataTime'] == time) {
+ return data[i]['mvFumeConcentration2']
}
- };
-
- chart.setOption({
- tooltip: {
- formatter: '{a}: <br/> {c}mg/m鲁'
- },
- series: [
- {
- name: '娌圭儫娴撳害',
- type: 'gauge',
- min: 0,
- max: 2,
- splitNumber: 10,
- axisLabel: this.chartData.axisLabel,
- detail: this.chartData.detail,
- data: [{ value: this.chartData.value, name: '' }],
- title: this.chartData.title,
- axisLine: this.chartData.axisLine,
- splitLine: this.chartData.splitLine,
- axisTick: this.chartData.axisTick
- }
- ]
- });
- })
- }
+ }
+ return -1
+ },
+ // 鍙傛暟锛氬姞涓婂墠鍚庡尯闂寸殑寮傚父鏁版嵁锛屾椂闂村瓧绗︿覆
+ // 鍔熻兘锛氬垽鏂璬ata涓槸鍚︽湁璇ユ棩鏈熸椂闂达紝瀛樺湪杩斿洖璇ユ椂闂村搴旂殑娴撳害鍊硷紝鍚﹀垯杩斿洖-1
+ // 鍙傛暟:鍓嶅尯闂寸殑寮�濮嬫椂闂达紝 鍚庡尯闂寸殑缁撴潫鏃堕棿, 鍔犱笂鍓嶅悗鍖洪棿鐨勬�绘椂闂存鐨勫紓甯告暟鎹殑瀵硅薄鏁扮粍
+ // 鍔熻兘锛氭牴鎹紑濮嬪拰缁撴潫鏃堕棿,杩斿洖浠�10鍒嗛挓涓洪棿闅旂殑鏃堕棿鍜屽搴旂殑鍊�
+ keepContinuousByEachTenMinutes(intervalStarTime,intervalEndTime,headAndTailExceptionData){
+ let xAxis = []
+ let yAxis = []
+ let obj = {}
+ let current = intervalStarTime
+ let tail = dayjs(intervalEndTime).add(10,'minute').format('YYYY-MM-DD HH:mm:ss')
+ while(current != tail){
+ let value = this.findTimeInExceptionData(headAndTailExceptionData,current)
+ if(value!= -1){
+ xAxis.push(current)
+ yAxis.push(value)
+ }else {
+ xAxis.push(current)
+ yAxis.push(null)
+ }
+ current = dayjs(current).add(10,'minute').format('YYYY-MM-DD HH:mm:ss')
+ }
+ obj['xAxis'] = xAxis
+ obj['yAxis'] = yAxis
+ return obj
+ },
+ test(){
+ let data = [
+ { mvDataTime: '2023-07-20 12:30:00', mvFumeConcentration2: '0.2' },
+ { mvDataTime: '2023-07-20 12:40:00', mvFumeConcentration2: '0.3' },
+ { mvDataTime: '2023-07-20 12:50:00', mvFumeConcentration2: '0.2' },
+ { mvDataTime: '2023-07-20 13:10:00', mvFumeConcentration2: '0.9' },
+ ];
+let obj = this.keepContinuousByEachTenMinutes('2023-07-20 12:00:00','2023-07-20 13:50:00',data)
+console.log(obj)
+ },
+ descTenTime(begin, end) {
+ let time = [];
+ if(begin == end){
+ time.push(begin)
+ return time
+ }
+ // 淇濈暀缁撴灉 00 10 20 30
+ let temp = dayjs(begin).add(10, 'minute').format('YYYY-MM-DD HH:mm:ss');
+ while (temp != end) {
+ time.push(temp);
+ temp = dayjs(temp).add(10, 'minute').format('YYYY-MM-DD HH:mm:ss');
+ }
+ // 鍔犱笂寮傚父鐨勭粨鏉熸椂闂�
+ time.push(temp);
+ return time;
},
}
+};
</script>
<template>
- <div style="margin: 5px;">
- <span style="color: #b1b3b8;" >瀹炴椂鏁版嵁</span>
- </div>
-
- <hr style="margin-top: 10px;"/>
-
- <div >
- <el-button @click="showMore" style="margin-top: 20px;margin-left: 20px">灞曠ず</el-button>
-
- </div>
- <div v-loading="loading" >
- <!-- 鏍规嵁璁惧缂栧彿涓暟鍔ㄦ�佺敓鎴愪华琛ㄧ洏 -->
- <el-row :gutter="20">
- <el-col :span="12" v-for="device in smogData" :key="device.mnCode">
- <div class="chart-container">
- <div class="chart-title">璁惧{{ device.mnCode }}</div>
- <div class="chart-content">
- <div :id="'chart-' + device.mnCode" class="chartClass"></div>
- </div>
- <div>
- <span>娴撳害鍊间负锛歿{ device.value }}</span>
- <br/>
- 浜х敓鏃堕棿:{{ device.time}}
- </div>
- </div>
- <!-- <br v-if="index % 4 == 0"/> -->
- </el-col>
- </el-row>
+ <div>
+ <ExceptionTypeLineChart
+ :xData="xAxis"
+ :yData="yAxis"
+ ></ExceptionTypeLineChart>
</div>
</template>
+<style lang="scss" scoped></style>
-
-<style lang="scss" scoped>
-.chart-container {
- background-color: #f9f9f9;
- padding: 20px;
- border-radius: 4px;
-}
-
-.chart-title {
- font-size: 16px;
- font-weight: 600;
-}
-
-.chart-content {
- margin-top: 10px;
-}
-
-.chartClass {
- height: 300px;
-}
-</style>
\ No newline at end of file
--
Gitblit v1.9.3