From 42f413b739be6c73c38d379c6637bade7f7fdfad Mon Sep 17 00:00:00 2001
From: xuhuihui <3548508071@qq.com>
Date: Tue, 31 May 2022 17:47:33 +0800
Subject: [PATCH] commit

---
 .../src/components/DecisionSupport.vue        | 940 +++++++++---------
 1 file changed, 487 insertions(+), 453 deletions(-)

diff --git a/04.系统编码/Frontend/src/components/DecisionSupport.vue b/04.系统编码/Frontend/src/components/DecisionSupport.vue
index b1f4cba..e3dd073 100644
--- a/04.系统编码/Frontend/src/components/DecisionSupport.vue
+++ b/04.系统编码/Frontend/src/components/DecisionSupport.vue
@@ -1,477 +1,511 @@
 <template>
-    <div class="tabs"></div>
-    <div class="main">
-        <div class="menu panel">
-            <div class="menu-item">
-                <h2 class="tip">指标选择</h2>
-                <el-row :gutter="12">
-                    <el-col :span="24"><span @click="onIndicatorClick('plan-advice')" :class="{'active': currentIndicator === 'plan-advice'}">通风廊道规划建议</span></el-col>
-                    <el-col :span="24"><span @click="onIndicatorClick('pollution-indicator')" :class="{'active': currentIndicator === 'pollution-indicator'}">高楼污染指数</span></el-col>
-                </el-row>
-            </div>
-            <div class="menu-item" v-if="currentIndicator === 'plan-advice'">
-                <h2 class="tip">产品选择</h2>
-                <el-row :gutter="12">
-                    <el-col :span="24"><span @click="onProductClick('control-experiment')" :class="{'active': currentProduct === 'control-experiment'}">控制实验</span></el-col>
-                    <el-col :span="24"><span @click="onProductClick('product-influence')" :class="{'active': currentProduct === 'product-influence'}">通风廊道的影响</span></el-col>
-                    <el-col :span="24"><span @click="onProductClick('product-experiment')" :class="{'active': currentProduct === 'product-experiment'}">通风廊道试验</span></el-col>
-                </el-row>
-            </div>
-        </div>
-        <div class="container panel decision-container">
-            <span class="save-btn" @click="onSaveClick" v-if="currentIndicator != 'pollution-indicator'"><img src="/images/save.png" /></span>
-            <div class="download-pictures" id="pictures">
-                <a v-for="(url, index) in urls" :key="index" download></a>
-            </div>
-            
-            <div class="picture-view advice-picture-view" v-if="currentIndicator === 'plan-advice'">
-                <el-row :gutter="0">
-                    <el-col :span="8" v-for="(item, index) in items" :key="index">
-                        <h2 class="title">{{item.title}}</h2>
-                        <el-image
-                        :src="item.imgUrl"
-                        :preview-src-list="item.preview"
-                        :initial-index="0"
-                        fit="contain"
-                        >
-                            <template #error>
-                                <div class="image-slot">
-                                    <img src="/images/null-picture.png" />
-                                </div>
-                                <p class="image-tip">暂无图片</p>
-                            </template>
-                            <template #placeholder>
-                                <div class="image-placeholder">正在加载...</div>
-                            </template>
-                        </el-image>
-                    </el-col>
-                </el-row>
-            </div>
-
-
-          <div class="toolbar day-toolbar" v-show="currentIndicator === 'pollution-indicator'">
-            <div class="times">
-              <div class="time-item" v-for="(time, index) in times" :key="index"
-                   :class="{'active': currentTime === time.date, 'first-hour': time.day === '01'}">
-                <span class="hour" style="padding-left: 10px">{{ time.month }}</span>
-                <span class="time" @click="onChangeDayClick(time, index)">{{ time.day }}</span>
-              </div>
-            </div>
-
-            <el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false"
-                            class="date-picker" @change="onChange">
-            </el-date-picker>
-            <div class="control-btn">
-              <span @click="onPrevDayTimeClick"><img src="/images/prev.png"/></span>
-              <span @click="onNextDayTimeClick"><img src="/images/next.png"/></span>
-            </div>
+  <div class="tabs"></div>
+  <div class="main">
+    <div class="menu panel">
+      <div class="menu-item">
+        <h2 class="tip">指标选择</h2>
+        <el-row :gutter="12">
+          <el-col :span="24"><span @click="onIndicatorClick('plan-advice')"
+                                   :class="{'active': currentIndicator === 'plan-advice'}">通风廊道规划建议</span></el-col>
+          <el-col :span="24"><span @click="onIndicatorClick('pollution-indicator')"
+                                   :class="{'active': currentIndicator === 'pollution-indicator'}">高楼污染指数</span>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="menu-item" v-if="currentIndicator === 'plan-advice'">
+        <h2 class="tip">产品选择</h2>
+        <el-row :gutter="12">
+          <el-col :span="24"><span @click="onProductClick('control-experiment')"
+                                   :class="{'active': currentProduct === 'control-experiment'}">控制实验</span></el-col>
+          <el-col :span="24"><span @click="onProductClick('product-influence')"
+                                   :class="{'active': currentProduct === 'product-influence'}">通风廊道的影响</span></el-col>
+          <el-col :span="24"><span @click="onProductClick('product-experiment')"
+                                   :class="{'active': currentProduct === 'product-experiment'}">通风廊道试验</span></el-col>
+        </el-row>
+      </div>
+    </div>
+    <div class="container panel decision-container">
+      <span class="save-btn" @click="onSaveClick" v-if="currentIndicator != 'pollution-indicator'"><img
+          src="/images/save.png"/></span>
+      <div class="download-pictures" id="pictures">
+        <a v-for="(url, index) in urls" :key="index" download></a>
+      </div>
+
+      <div class="picture-view advice-picture-view" v-if="currentIndicator === 'plan-advice'">
+        <el-row :gutter="0">
+          <el-col :span="8" v-for="(item, index) in items" :key="index">
+            <h2 class="title">{{ item.title }}</h2>
+            <el-image
+                :src="item.imgUrl"
+                :preview-src-list="item.preview"
+                :initial-index="0"
+                fit="contain"
+            >
+              <template #error>
+                <div class="image-slot">
+                  <img src="/images/null-picture.png"/>
+                </div>
+                <p class="image-tip">暂无图片</p>
+              </template>
+              <template #placeholder>
+                <div class="image-placeholder">正在加载...</div>
+              </template>
+            </el-image>
+          </el-col>
+        </el-row>
+      </div>
+
+
+      <div class="toolbar day-toolbar" v-show="currentIndicator === 'pollution-indicator'">
+        <div class="times">
+          <div class="time-item" v-for="(time, index) in times" :key="index"
+               :class="{'active': currentTime === time.date, 'first-hour': time.day === '01'}">
+            <span class="hour" style="padding-left: 10px">{{ time.month }}</span>
+            <span class="time" @click="onChangeDayClick(time, index)">{{ time.day }}</span>
           </div>
+        </div>
 
-            <div class="picture-container raman-picture-container" v-show="currentIndicator === 'pollution-indicator'">
-                <div class="picture">
-                  <div id="pollutionIndicator"
-                       style="margin-top: 66px"
-                       v-loading="loadingPollutionIndicatorStatus"
-                       custom-class="loading"
-                       element-loading-text="加载中">
-                     </div>
-                </div>
-<!--                <div class="picture-block">-->
-<!--                    <div class="picture">-->
-<!--                        <el-image-->
-<!--                        :src="indicatorImg"-->
-<!--                        :preview-src-list="indicatorPreview"-->
-<!--                        :initial-index="1"-->
-<!--                        fit="contain"-->
-<!--                        >-->
-<!--                            <template #error>-->
-<!--                                <div class="image-slot">-->
-<!--                                    <img src="/images/null-picture.png" />-->
-<!--                                </div>-->
-<!--                                <p class="image-tip">暂无图片</p>-->
-<!--                            </template>-->
-<!--                            <template #placeholder>-->
-<!--                                <div class="image-placeholder">正在加载...</div>-->
-<!--                            </template>-->
-<!--                        </el-image>-->
-<!--                    </div>-->
-<!--                    <div class="instruction">-->
-<!--                        <h2>高楼污染指数说明：</h2>-->
-<!--                        <p>使用激光雷达数据反演PM2.5和PM10</p>-->
-<!--                        <p>浓度廓线，基于PM2.5和PM10的平均</p>-->
-<!--                        <p>值构建高楼污染指数，</p>-->
-<!--                        <p> 高楼(60米)，</p>-->
-<!--                        <p> 超高楼(200米)，</p>-->
-<!--                        <p> 极高楼层(500米)</p>-->
-<!--                    </div>-->
-<!--                </div>-->
-
-
-            </div>
+        <el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false"
+                        class="date-picker" @change="onChange">
+        </el-date-picker>
+        <div class="control-btn">
+          <span @click="onPrevDayTimeClick"><img src="/images/prev.png"/></span>
+          <span @click="onNextDayTimeClick"><img src="/images/next.png"/></span>
         </div>
+      </div>
+
+      <div class="picture-container raman-picture-container" v-show="currentIndicator === 'pollution-indicator'">
+        <div class="picture">
+          <div id="pollutionIndicator"
+               style="margin-top: 66px"
+               v-loading="loadingPollutionIndicatorStatus"
+               custom-class="loading"
+               element-loading-text="加载中">
+          </div>
+        </div>
+        <!--                <div class="picture-block">-->
+        <!--                    <div class="picture">-->
+        <!--                        <el-image-->
+        <!--                        :src="indicatorImg"-->
+        <!--                        :preview-src-list="indicatorPreview"-->
+        <!--                        :initial-index="1"-->
+        <!--                        fit="contain"-->
+        <!--                        >-->
+        <!--                            <template #error>-->
+        <!--                                <div class="image-slot">-->
+        <!--                                    <img src="/images/null-picture.png" />-->
+        <!--                                </div>-->
+        <!--                                <p class="image-tip">暂无图片</p>-->
+        <!--                            </template>-->
+        <!--                            <template #placeholder>-->
+        <!--                                <div class="image-placeholder">正在加载...</div>-->
+        <!--                            </template>-->
+        <!--                        </el-image>-->
+        <!--                    </div>-->
+        <!--                    <div class="instruction">-->
+        <!--                        <h2>高楼污染指数说明：</h2>-->
+        <!--                        <p>使用激光雷达数据反演PM2.5和PM10</p>-->
+        <!--                        <p>浓度廓线，基于PM2.5和PM10的平均</p>-->
+        <!--                        <p>值构建高楼污染指数，</p>-->
+        <!--                        <p> 高楼(60米)，</p>-->
+        <!--                        <p> 超高楼(200米)，</p>-->
+        <!--                        <p> 极高楼层(500米)</p>-->
+        <!--                    </div>-->
+        <!--                </div>-->
+
+
+      </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
-    import { onMounted, reactive, toRefs } from 'vue';
-    import * as Tiff from 'browser-tiff.js';
-    import { DecisionSupportConfig } from '../uilts/Config';
-    import {get, post} from '../uilts/axios';
-    import {HighChartCreate} from "../model/high-chart-create";
-    import moment from "moment";
-    import {ConstantRamanLidar} from "../model/constant";
-    import {CustomeArray} from "../model/custome-array";
-    export default {
-        name: 'DecisionSupport',
-        setup() {
-
-            let options = reactive({
-                times: [],
-                currentTime: null,
-                date: moment().format('YYYY-MM-DD 00:00:00'),
-                index: 0,
-                currentIndicator: 'plan-advice',
-                currentProduct: 'control-experiment',
-                items: [{
-                    title: '比湿',
-                    imgName: 'TFLD_Q2',
-                    imgUrl: '/images/default-picture.png',
-                    preview: []
-                }, {
-                    title: '风速和风向',
-                    imgName: 'TFLD_V10',
-                    imgUrl: '/images/default-picture.png',
-                    preview: []
-                }, {
-                    title: '降水',
-                    imgName: 'TFLD_RAIN',
-                    imgUrl: '/images/default-picture.png',
-                    preview: []
-                }, {
-                    title: '平均气温',
-                    imgName: 'TFLD_T2',
-                    imgUrl: '/images/default-picture.png',
-                    preview: []
-                }, {
-                    title: '最低温度',
-                    imgName: 'TFLD_TN',
-                    imgUrl: '/images/default-picture.png',
-                    preview: []
-                }, {
-                    title: '最高温度',
-                    imgName: 'TFLD_TX',
-                    imgUrl: '/images/default-picture.png',
-                    preview: []
-                }],
-                indicatorImg: '/product/picture/images/decision-support/pollution-indicator/pollution-indicator.png',
-                indicatorPreview: ['/product/picture/images/decision-support/pollution-indicator/pollution-indicator.png'],
-                urls: [],
-                loadingPollutionIndicatorStatus: false
-            })
-
-          let creates: {
-            pollutionIndicator: HighChartCreate
-          } = {
-            pollutionIndicator: null
-          }
-            onMounted(() => {
-                initTimeLineDay()
-                setImage(options.currentIndicator + '/' + options.currentProduct);
-            })
-
-            const onIndicatorClick = (indicator) => {
-                options.currentIndicator = indicator;
-
-                if(options.currentIndicator === 'plan-advice') {
-                  setImage(options.currentIndicator + '/' + options.currentProduct);
-                }
-              reloadChartsRecognition('hbpi', drawPollutionIndicator)
-              pollutionIndicatorInit()
-            }
-
-            const onProductClick = (product) => {
-                options.currentProduct = product;
-                setImage('plan-advice' + '/' + options.currentProduct);
-            }
-
-            const setImage = (type) => {
-                for(let index = 0; index < 6; index ++){
-                    initImage(type, options.items[index].imgName, index);
-                }
-
-                options.urls = options.items;
-            }
-
-            const initImage = (type, imgName, index) => {
-                post("/image/convert", {url: DecisionSupportConfig.getUrl(type, imgName)}).then((response: any) => {
-                    if (response.error != 0){
-                        return;
-                    }
-
-                    options.items[index].imgUrl = response.data;
-                    options.items[index].preview = [response.data];
-                })
-            }
-
-            const onSaveClick = () => {
-                let pictures = document.getElementById('pictures');
-
-                for (let i = 0; i < options.urls.length; i++) {
-                    let img = new Image();
-                    img.src = options.urls[i].imgUrl;
-                    let canvas = document.createElement("canvas") as HTMLCanvasElement;
-                    canvas.width = img.width;
-                    canvas.height = img.height;
-
-                    let ctx = canvas.getContext("2d");
-                    let base64 = '';
-
-                    img.setAttribute("crossOrigin",'Anonymous');
-                    img.onload = function() {
-                        ctx.drawImage(img, 0, 0);    
-                        base64 = canvas.toDataURL("image/png");
-                        pictures.children[i].setAttribute('href', base64);
-
-                        let button: HTMLElement = pictures.children[i] as HTMLElement;
-                        setTimeout(() => {
-                            button.click();
-                        }, 500);
-                    };
-                }
-            }
-
-            const pollutionIndicatorInit = () => {
-              creates.pollutionIndicator = new HighChartCreate('pollutionIndicator');
-              creates.pollutionIndicator.setChart(false, 'line', 1500, 600);
-              creates.pollutionIndicator.setXAxisTypeDate();
-              creates.pollutionIndicator.setSpecialYAxis('高楼污染指数');
-              creates.pollutionIndicator.setLegend(true);
-              creates.pollutionIndicator.setTooltip('{point.y}');
-              creates.pollutionIndicator.setSeries('高楼', 0, null, null, '#B21523')
-              creates.pollutionIndicator.setSeries('超高楼', 0, null, null, '#000B6F')
-              creates.pollutionIndicator.setSeries('极高楼层', 0, null, null, '#853083')
-              creates.pollutionIndicator.init();
-            }
-
-            const drawPollutionIndicator = (result: CustomeArray<any>) => {
-              if (result[0].time == null) return;
-              const data = prepareChartData(result);
-              creates.pollutionIndicator.updateSeries(0, data[0]);
-              creates.pollutionIndicator.updateSeries(1, data[1]);
-              creates.pollutionIndicator.updateSeries(2, data[2]);
-              options.loadingPollutionIndicatorStatus = false
-            }
-
-            const prepareChartData = (result) => {
-              if (result[0].data == null) {
-                let temp = []
-                for (let i = 0; i < 72; i++) {
-                  temp.push(NaN);
-                }
-                result[0].data = [temp];
-              }
-              let  prepareData = []
-              let startTimeMoment = moment(result[0].time, 'M_D_H').add(8, 'h')
-              result[0].data.forEach(item => {
-                  let data = []
-                  for (let i = 0, len = item.length; i < len; i++) {
-                    data.push([startTimeMoment.clone().add(1 * i, 'h').valueOf(), item[i]])
-                  }
-                prepareData.push(data)
-              })
-              return prepareData;
-            }
-
-            const reloadChartsRecognition = (element: string, callback: any) => {
-              options.loadingPollutionIndicatorStatus = true
-              let result = new CustomeArray(callback);
-              let time = moment(options.date);
-              reloadPollutionIndicator(time.format('M_D_H'), element, result);
-            }
-
-            const reloadPollutionIndicator = (time: string, elementCode, result: CustomeArray<any>) => {
-              let params = prepareApiParams(time, elementCode)
-              get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response: any) => {
-                if (response.state != 0) {
-                  setChartsRecognitionResult(time, response.message, null, result);
-                  return;
-                }
-                setChartsRecognitionResult(time, response.message, response.data, result);
-              }).catch(error => {
-                setChartsRecognitionResult(time, error.message, null, result);
-              })
-            }
-
-            const prepareApiParams = (time, elementCode) => {
-              return {
-                var: elementCode,
-                locate: 'nj',
-                date: moment(time,'MM_DD_hh').format('M_D'),
-              }
-            }
-
-          const setChartsRecognitionResult = (time: string, message: string, data: any, result: CustomeArray<any>) => {
-            result.push({
-              time: time,
-              message: message,
-              data: data == null ? null : JSON.parse(data)
-            })
-          }
+import {onMounted, reactive, toRefs} from 'vue';
+import * as Tiff from 'browser-tiff.js';
+import {DecisionSupportConfig} from '../uilts/Config';
+import {get, post} from '../uilts/axios';
+import {HighChartCreate} from "../model/high-chart-create";
+import moment from "moment";
+import {ConstantRamanLidar} from "../model/constant";
+import {CustomeArray} from "../model/custome-array";
+
+export default {
+  name: 'DecisionSupport',
+  setup() {
+
+    let options = reactive({
+      times: [],
+      currentTime: null,
+      date: moment().format('YYYY-MM-DD 00:00:00'),
+      index: 0,
+      currentIndicator: 'plan-advice',
+      currentProduct: 'control-experiment',
+      items: [{
+        title: '比湿',
+        imgName: 'TFLD_Q2',
+        imgUrl: '/images/default-picture.png',
+        preview: []
+      }, {
+        title: '风速和风向',
+        imgName: 'TFLD_V10',
+        imgUrl: '/images/default-picture.png',
+        preview: []
+      }, {
+        title: '降水',
+        imgName: 'TFLD_RAIN',
+        imgUrl: '/images/default-picture.png',
+        preview: []
+      }, {
+        title: '平均气温',
+        imgName: 'TFLD_T2',
+        imgUrl: '/images/default-picture.png',
+        preview: []
+      }, {
+        title: '最低温度',
+        imgName: 'TFLD_TN',
+        imgUrl: '/images/default-picture.png',
+        preview: []
+      }, {
+        title: '最高温度',
+        imgName: 'TFLD_TX',
+        imgUrl: '/images/default-picture.png',
+        preview: []
+      }],
+      indicatorImg: '/product/picture/images/decision-support/pollution-indicator/pollution-indicator.png',
+      indicatorPreview: ['/product/picture/images/decision-support/pollution-indicator/pollution-indicator.png'],
+      urls: [],
+      loadingPollutionIndicatorStatus: false
+    })
+
+    let creates: {
+      pollutionIndicator: HighChartCreate
+    } = {
+      pollutionIndicator: null
+    }
+    onMounted(() => {
+      initTimeLineDay()
+      setImage(options.currentIndicator + '/' + options.currentProduct);
+    })
+
+    const onIndicatorClick = (indicator) => {
+      options.currentIndicator = indicator;
+
+      if (options.currentIndicator === 'plan-advice') {
+        setImage(options.currentIndicator + '/' + options.currentProduct);
+      }
+      reloadChartsRecognition('hbpi', drawPollutionIndicator)
+      pollutionIndicatorInit()
+    }
 
-          const initTimeLineDay = () => {
-            options.times = [];
-            options.currentTime = moment(options.date).format('YYYY-MM-DD');
-            let now = moment(options.date).add(1, 'd');
-            let day = new Date(now.year(), now.month() + 1, 0);
-            for (let i = 0; i < 24; i++) {
-              options.times.push({
-                day: now.add(-1, 'd').format('DD'),
-                month: now.format('MM'),
-                date: now.format('YYYY-MM-DD'),
-              })
-            }
-            options.times.reverse();
-            options.index = options.times.length - 1;
-          }
+    const onProductClick = (product) => {
+      options.currentProduct = product;
+      setImage('plan-advice' + '/' + options.currentProduct);
+    }
 
-          const onChangeDayClick = (time, index) => {
-            options.currentTime = time.date
-            options.date = moment(time.date).format('YYYY-MM-DD');
-            reloadChartsRecognition('hbpi', drawPollutionIndicator)
-            options.index = index;
-          }
+    const setImage = (type) => {
+      for (let index = 0; index < 6; index++) {
+        initImage(type, options.items[index].imgName, index);
+      }
 
-          const onPrevDayTimeClick = () => {
-            options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD');
-            initTimeLineDay()
-            reloadChartsRecognition('hbpi', drawPollutionIndicator)
-          }
+      options.urls = options.items;
+    }
 
-          const onNextDayTimeClick = () => {
-            options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD');
-            initTimeLineDay()
-            reloadChartsRecognition('hbpi', drawPollutionIndicator)
-          }
+    const initImage = (type, imgName, index) => {
+      post("/image/convert", {url: DecisionSupportConfig.getUrl(type, imgName)}).then((response: any) => {
+        if (response.error != 0) {
+          return;
+        }
 
-          const onChange = () => {
-            initTimeLineDay();
-            reloadChartsRecognition('hbpi', drawPollutionIndicator)
-          }
+        options.items[index].imgUrl = response.data;
+        options.items[index].preview = [response.data];
+      })
+    }
+
+    const onSaveClick = () => {
+      let pictures = document.getElementById('pictures');
+
+      for (let i = 0; i < options.urls.length; i++) {
+        let img = new Image();
+        img.src = options.urls[i].imgUrl;
+        let canvas = document.createElement("canvas") as HTMLCanvasElement;
+        canvas.width = img.width;
+        canvas.height = img.height;
+
+        let ctx = canvas.getContext("2d");
+        let base64 = '';
+
+        img.setAttribute("crossOrigin", 'Anonymous');
+        img.onload = function () {
+          ctx.drawImage(img, 0, 0);
+          base64 = canvas.toDataURL("image/png");
+          pictures.children[i].setAttribute('href', base64);
+
+          let button: HTMLElement = pictures.children[i] as HTMLElement;
+          setTimeout(() => {
+            button.click();
+          }, 500);
+        };
+      }
+    }
+
+    const pollutionIndicatorInit = () => {
+      creates.pollutionIndicator = new HighChartCreate('pollutionIndicator');
+      creates.pollutionIndicator.setChart(false, 'line', 1500, 600);
+      creates.pollutionIndicator.setXAxisTypeDate();
+      creates.pollutionIndicator.setSpecialYAxis('高楼污染指数');
+      creates.pollutionIndicator.setLegend(true);
+      creates.pollutionIndicator.setTooltip('{point.y}');
+      creates.pollutionIndicator.setSeries('高楼', 0, null, null, '#B21523')
+      creates.pollutionIndicator.setSeries('超高楼', 0, null, null, '#000B6F')
+      creates.pollutionIndicator.setSeries('极高楼层', 0, null, null, '#853083')
+      creates.pollutionIndicator.init();
+    }
+
+    const drawPollutionIndicator = (result: CustomeArray<any>) => {
+      if (result[0].time == null) return;
+      const data = prepareChartData(result);
+      creates.pollutionIndicator.updateSeries(0, data[0]);
+      creates.pollutionIndicator.updateSeries(1, data[1]);
+      creates.pollutionIndicator.updateSeries(2, data[2]);
+      options.loadingPollutionIndicatorStatus = false
+    }
+
+    const prepareChartData = (result) => {
+      if (result[0].data == null) {
+        let temp = []
+        for (let i = 0; i < 72; i++) {
+          temp.push(NaN);
+        }
+        result[0].data =  group(temp ,24)
+      }
+      let prepareData = []
+      let startTimeMoment = moment(result[0].time, 'M_D_H').add(8, 'h')
+      result[0].data.forEach(item => {
+        let data = []
+        for (let i = 0, len = item.length; i < len; i++) {
+          data.push([startTimeMoment.clone().add(1 * i, 'h').valueOf(), item[i]])
+        }
+        prepareData.push(data)
+      })
+      return prepareData;
+    }
 
-            return {
-                ...toRefs(options),
-                onIndicatorClick,
-                onProductClick,
-                onSaveClick,
-                onChangeDayClick,
-                onPrevDayTimeClick,
-                onNextDayTimeClick,
-                onChange
-            }
+    const group = (array, subGroupLength) => {
+      let index = 0;
+      let newArray = [];
+      while(index < array.length) {
+        newArray.push(array.slice(index, index += subGroupLength));
+      }
+      return newArray;
+    }
+
+    const reloadChartsRecognition = (element: string, callback: any) => {
+      options.loadingPollutionIndicatorStatus = true
+      let result = new CustomeArray(callback);
+      let time = moment(options.date);
+      reloadPollutionIndicator(time.format('M_D_H'), element, result);
+    }
+
+    const reloadPollutionIndicator = (time: string, elementCode, result: CustomeArray<any>) => {
+      let params = prepareApiParams(time, elementCode)
+      get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response: any) => {
+        if (response.state != 0) {
+          setChartsRecognitionResult(time, response.message, null, result);
+          return;
         }
+        setChartsRecognitionResult(time, response.message, response.data, result);
+      }).catch(error => {
+        setChartsRecognitionResult(time, error.message, null, result);
+      })
+    }
+
+    const prepareApiParams = (time, elementCode) => {
+      return {
+        var: elementCode,
+        locate: 'nj',
+        date: moment(time, 'MM_DD_hh').format('M_D'),
+      }
     }
+
+    const setChartsRecognitionResult = (time: string, message: string, data: any, result: CustomeArray<any>) => {
+      result.push({
+        time: time,
+        message: message,
+        data: data == null ? null : JSON.parse(data)
+      })
+    }
+
+    const initTimeLineDay = () => {
+      options.times = [];
+      options.currentTime = moment(options.date).format('YYYY-MM-DD');
+      let now = moment(options.date).add(1, 'd');
+      let day = new Date(now.year(), now.month() + 1, 0);
+      for (let i = 0; i < 24; i++) {
+        options.times.push({
+          day: now.add(-1, 'd').format('DD'),
+          month: now.format('MM'),
+          date: now.format('YYYY-MM-DD'),
+        })
+      }
+      options.times.reverse();
+      options.index = options.times.length - 1;
+    }
+
+    const onChangeDayClick = (time, index) => {
+      options.currentTime = time.date
+      options.date = moment(time.date).format('YYYY-MM-DD');
+      reloadChartsRecognition('hbpi', drawPollutionIndicator)
+      options.index = index;
+    }
+
+    const onPrevDayTimeClick = () => {
+      options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD');
+      initTimeLineDay()
+      reloadChartsRecognition('hbpi', drawPollutionIndicator)
+    }
+
+    const onNextDayTimeClick = () => {
+      options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD');
+      initTimeLineDay()
+      reloadChartsRecognition('hbpi', drawPollutionIndicator)
+    }
+
+    const onChange = () => {
+      initTimeLineDay();
+      reloadChartsRecognition('hbpi', drawPollutionIndicator)
+    }
+
+    return {
+      ...toRefs(options),
+      onIndicatorClick,
+      onProductClick,
+      onSaveClick,
+      onChangeDayClick,
+      onPrevDayTimeClick,
+      onNextDayTimeClick,
+      onChange
+    }
+  }
+}
 </script>
 <style lang="less" scoped>
-    .main {
-        .decision-container {
-            height: calc(~"100% - 0.6rem");
-            padding: 0.2rem 0 0.2rem 0.2rem;
-            .save-btn {
-                top: 0.2rem;
-                right: 0.2rem;
-            }
-            .advice-picture-view {
-                width: 100%;
-                height: 100%;
-                display: flex;
-                :deep(.el-row) {
-                    width: 100%;
-                    .title {
-                        padding: 0;
-                        font-size: 0.22rem;
-                    }
-                    .el-col {
-                        height: 46%;
-                        margin-top: 1%;
-                        text-align: center;
-                        .el-image {
-                            height: calc(~"100% - 0.4rem");
-                            margin-top: 0.1rem;
-                            display: flex;
-                            flex-direction: column;
-                            align-items: center;
-                            justify-content: center;
-                        }
-                    }
-                }
-            }
-            .indicator-picture-view {
-                height: 100%;
-                display: flex;
-                align-items: center;
-                flex-direction: column;
-                justify-content: center;
-                .title {
-                    padding: 0;
-                    margin-bottom: 0.7rem;
-                }
-                .picture-block {
-                    display: flex;
-                    align-items: end;
-                    justify-content: center;
-                }
-                .picture {
-                    width: 6.5rem;
-                    height: auto;
-                    display: block;
-                    position: relative;
-
-                    .el-image {
-                        width: 100%;
-                        height: auto;
-                        margin: 0 auto;
-                        :deep(.el-image__inner) {
-                            max-width: 99%;
-                            border: 1px solid #707070;
-                        }
-                    }
-
-                    &:last-of-type {
-                        width: 6.44rem;
-                    }
-                }
-                .instruction {
-                    margin-left: 0.4rem;
-                    color: #222222;
-
-                    h2 {
-                        font-size: 0.16rem;
-                    }
-
-                    p {
-                        margin-top: 0.15rem;
-                    }
-                }
-            }
-          .raman-picture-container {
-            margin: 0 auto;
-            .picture {
-              width: 100%;
-              height: 100%;
-            }
+.main {
+  .decision-container {
+    height: calc(~"100% - 0.6rem");
+    padding: 0.2rem 0 0.2rem 0.2rem;
+
+    .save-btn {
+      top: 0.2rem;
+      right: 0.2rem;
+    }
+
+    .advice-picture-view {
+      width: 100%;
+      height: 100%;
+      display: flex;
+
+      :deep(.el-row) {
+        width: 100%;
+
+        .title {
+          padding: 0;
+          font-size: 0.22rem;
+        }
+
+        .el-col {
+          height: 46%;
+          margin-top: 1%;
+          text-align: center;
+
+          .el-image {
+            height: calc(~"100% - 0.4rem");
+            margin-top: 0.1rem;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
           }
-          .toolbar {
-            //padding: 0.15rem 0;
-            padding-bottom: 7px;
-            margin: -12px 0.25rem 0px;
-            .times {
-              padding-bottom: 0;
-            }
-            :deep(.date-picker), .control-btn {
-              margin-top: 12px;
-            }
+        }
+      }
+    }
 
+    .indicator-picture-view {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: center;
+
+      .title {
+        padding: 0;
+        margin-bottom: 0.7rem;
+      }
+
+      .picture-block {
+        display: flex;
+        align-items: end;
+        justify-content: center;
+      }
+
+      .picture {
+        width: 6.5rem;
+        height: auto;
+        display: block;
+        position: relative;
+
+        .el-image {
+          width: 100%;
+          height: auto;
+          margin: 0 auto;
+
+          :deep(.el-image__inner) {
+            max-width: 99%;
+            border: 1px solid #707070;
           }
         }
+
+        &:last-of-type {
+          width: 6.44rem;
+        }
+      }
+
+      .instruction {
+        margin-left: 0.4rem;
+        color: #222222;
+
+        h2 {
+          font-size: 0.16rem;
+        }
+
+        p {
+          margin-top: 0.15rem;
+        }
+      }
+    }
+
+    .raman-picture-container {
+      margin: 0 auto;
+
+      .picture {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .toolbar {
+      //padding: 0.15rem 0;
+      padding-bottom: 7px;
+      margin: -12px 0.25rem 0px;
+
+      .times {
+        padding-bottom: 0;
+      }
+
+      :deep(.date-picker), .control-btn {
+        margin-top: 12px;
+      }
+
     }
+  }
+}
 </style>