From 89d98c8e071e937e161f62bd24ac81853a225fcd Mon Sep 17 00:00:00 2001
From: copper <kingcopper@whu.edu.cn>
Date: Wed, 2 Jun 2021 18:13:44 +0800
Subject: [PATCH] false data

---
 public/index.html                        |   4 +-
 src/components/Main.vue                  |   4 +-
 src/components/analysis/A1.vue           |  88 ++++++++++++++
 src/components/analysis/A2.vue           | 139 +++++++++++++++++++++++
 src/components/analysis/A3.vue           | 101 ++++++++++++++++
 src/components/analysis/Index.vue        |  24 ++--
 src/components/charts/BaseIndexChart.vue |  49 +-------
 src/components/icon/index.js             |   2 +-
 src/components/search/Index.vue          |  39 ++-----
 src/components/search/LurMean.vue        |   8 +-
 src/components/search/Means.vue          |  12 +-
 src/components/search/QaDay.vue          |   8 +-
 src/components/search/QaSTS.vue          |  32 ++++++
 src/components/search/YLSTS.vue          |  31 +++--
 src/main.js                              |   2 +
 src/utils/water.js                       |  18 +++
 vue.config.js                            |  11 +-
 17 files changed, 467 insertions(+), 105 deletions(-)
 create mode 100644 src/components/analysis/A1.vue
 create mode 100644 src/components/analysis/A2.vue
 create mode 100644 src/components/analysis/A3.vue

diff --git a/public/index.html b/public/index.html
index 9d43d2b..bfde8ac 100644
--- a/public/index.html
+++ b/public/index.html
@@ -28,7 +28,9 @@
   <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/dist/locale/zh-cn.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.2/dist/antd.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/axios@0.21.0/dist/axios.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.common.min.js"></script>
+  <!-- <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script> -->
+  <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.js.map"></script>
   <script src="https://cdn.jsdelivr.net/npm/v-charts@1.19.0/lib/index.min.js"></script>
   <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
   
diff --git a/src/components/Main.vue b/src/components/Main.vue
index b7a1b70..1eee3f1 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -56,9 +56,9 @@
             <a-menu-item key="qa-sts">
               <icon-font type="wt-iconxiangxi" />水质质量类别统计
             </a-menu-item>
-            <a-menu-item key="lur-sts">
+            <!-- <a-menu-item key="lur-sts">
               <icon-font type="wt-iconxiangxi" />水质指标超标统计
-            </a-menu-item>
+            </a-menu-item> -->
             <a-menu-item key="yl-sts">
               <icon-font type="wt-iconxiangxi" />水质超标处理记录
             </a-menu-item>
diff --git a/src/components/analysis/A1.vue b/src/components/analysis/A1.vue
new file mode 100644
index 0000000..40dee26
--- /dev/null
+++ b/src/components/analysis/A1.vue
@@ -0,0 +1,88 @@
+<template>
+<div>
+    <h1 style="text-align: center; width: 100%; font-size: 32px;">质量等级统计</h1>
+  <div
+    v-resize="init"
+    ref="chart"
+    style="min-width: 400px; min-height: 300px; width: 100%; height: 100%"
+  ></div>
+</div>
+</template>
+
+<script>
+import { generateWaterData } from "@/utils/water";
+import Moment from "../utils/moment.zh_cn";
+export default {
+  data() {
+    return {
+      data: [],
+    };
+  },
+
+  methods: {
+    init() {
+      let chart = echarts.init(this.$refs.chart);
+      chart.setOption(this.getOption());
+    },
+    getOption() {
+     var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
+        '7a', '8a', '9a','10a','11a',
+        '12p', '1p', '2p', '3p', '4p', '5p',
+        '6p', '7p', '8p', '9p', '10p', '11p'];
+        var days = ['周一', '周二', '周三',
+                  '周四', '周五', '周六', '周日'];
+
+        var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];
+
+       let option = {
+            tooltip: {
+                position: 'top'
+            },
+            title: [],
+            singleAxis: [],
+            series: []
+        };
+
+        days.forEach(function (day, idx) {
+            option.title.push({
+                textBaseline: 'middle',
+                top: (idx + 0.5) * 100 / days.length + '%',
+                text: day
+            });
+            option.singleAxis.push({
+                left: 100,
+                type: 'category',
+                boundaryGap: false,
+                data: hours,
+                top: (idx * 100 / days.length + 5) + '%',
+                height: (100 / days.length - 10) + '%',
+                axisLabel: {
+                    interval: 2
+                }
+            });
+            option.series.push({
+                singleAxisIndex: idx,
+                coordinateSystem: 'singleAxis',
+                type: 'scatter',
+                data: [],
+                symbolSize: function (dataItem) {
+                    return dataItem[1] * 4;
+                }
+            });
+        });
+
+        data.forEach(function (dataItem) {
+            option.series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
+        });
+      return option;
+    },
+  },
+
+  mounted() {
+    this.init();
+  },
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/components/analysis/A2.vue b/src/components/analysis/A2.vue
new file mode 100644
index 0000000..35d2e23
--- /dev/null
+++ b/src/components/analysis/A2.vue
@@ -0,0 +1,139 @@
+<template>
+  <div
+    ref="chart"
+    style="min-width: 400px; min-height: 300px; width: 100%; height: 100%"
+  ></div>
+</template>
+
+<script>
+import { generateWaterData } from "@/utils/water";
+import Moment from "../utils/moment.zh_cn";
+export default {
+  data() {
+    return {
+      data: [],
+    };
+  },
+
+  methods: {
+    init() {
+      let chart = echarts.init(this.$refs.chart);
+      chart.setOption(this.getOption());
+    },
+    getOption() {
+      let count = 1000;
+      let data = generateWaterData(["t", "p"], count);
+      let opt = {
+        title: {
+          text: "水质指标关系图",
+          subtext: "",
+          left: "center",
+          align: "right",
+        },
+        grid: {
+          bottom: 80,
+        },
+        toolbox: {
+          feature: {
+            dataZoom: {
+              yAxisIndex: "none",
+            },
+            restore: {},
+            saveAsImage: {},
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            animation: false,
+            label: {
+              backgroundColor: "#505765",
+            },
+          },
+        },
+        legend: {
+          data: ["温度", "浊度"],
+          left: 10,
+        },
+        dataZoom: [
+          {
+            show: true,
+
+            start: 65,
+            end: 85,
+          },
+          {
+            type: "inside",
+
+            start: 65,
+            end: 85,
+          },
+        ],
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            axisLine: { onZero: false },
+            data: data.map(function (o) {
+              return o.time_str.replace(" ", "\n");
+            }),
+          },
+        ],
+        yAxis: [
+          {
+            name: "温度(℃)",
+            type: "value",
+            max: 10,
+          },
+          {
+            name: "浊度(mm)",
+            nameLocation: "start",
+            max: 5,
+            type: "value",
+            inverse: true,
+          },
+        ],
+        series: [
+          {
+            name: "温度",
+            type: "line",
+            areaStyle: {},
+            lineStyle: {
+              width: 1,
+            },
+            emphasis: {
+              focus: "series",
+            },
+
+            data: data.map((v) => v.t),
+          },
+          {
+            name: "浊度",
+            type: "line",
+            yAxisIndex: 1,
+            areaStyle: {},
+            lineStyle: {
+              width: 1,
+            },
+            emphasis: {
+              focus: "series",
+            },
+
+            data: data.map((v) => v.p),
+          },
+        ],
+      };
+    
+      return opt;
+    },
+  },
+
+  mounted() {
+    this.init();
+  },
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/components/analysis/A3.vue b/src/components/analysis/A3.vue
new file mode 100644
index 0000000..ee28cf9
--- /dev/null
+++ b/src/components/analysis/A3.vue
@@ -0,0 +1,101 @@
+<template>
+<div>
+    <h1 style="text-align: center; width: 100%; font-size: 32px;">质量等级统计</h1>
+  <div
+    v-resize="init"
+    ref="chart"
+    style="min-width: 400px; min-height: 600px; width: 100%; height: 100%"
+  ></div>
+</div>
+</template>
+
+<script>
+import { generateWaterData } from "@/utils/water";
+import Moment from "../utils/moment.zh_cn";
+export default {
+  data() {
+    return {
+      data: [],
+    };
+  },
+
+  methods: {
+    init() {
+      let myChart = echarts.init(this.$refs.chart)
+      setTimeout(function () {
+
+        var option = {
+            legend: {},
+            tooltip: {
+                trigger: 'axis',
+                showContent: false
+            },
+            dataset: {
+                source: [
+                    ['水质指标', '2012', '2013', '2014', '2015', '2016', '2017'],
+                    ['优', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
+                    ['良', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
+                    ['合格', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
+                    ['不合格', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
+                ]
+            },
+            xAxis: {type: 'category'},
+            yAxis: {gridIndex: 0},
+            grid: {top: '55%'},
+            series: [
+                {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
+                {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
+                {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
+                {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
+                {
+                    type: 'pie',
+                    id: 'pie',
+                    radius: '30%',
+                    center: ['50%', '25%'],
+                    emphasis: {focus: 'data'},
+                    label: {
+                        formatter: ' {@2012} ({d}%)'
+                    },
+                    encode: {
+                        itemName: '指标统计',
+                        value: '2012',
+                        tooltip: '2012'
+                    }
+                }
+            ]
+        };
+
+        myChart.on('updateAxisPointer', function (event) {
+            var xAxisInfo = event.axesInfo[0];
+            if (xAxisInfo) {
+                var dimension = xAxisInfo.value + 1;
+                myChart.setOption({
+                    series: {
+                        id: 'pie',
+                        label: {
+                            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
+                        },
+                        encode: {
+                            value: dimension,
+                            tooltip: dimension
+                        }
+                    }
+                });
+            }
+        });
+
+        myChart.setOption(option);
+
+    });
+    },
+
+  },
+
+  mounted() {
+    this.init();
+  },
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/components/analysis/Index.vue b/src/components/analysis/Index.vue
index 2d70a16..b98b4a6 100644
--- a/src/components/analysis/Index.vue
+++ b/src/components/analysis/Index.vue
@@ -18,12 +18,12 @@
       </a-layout-sider>
       <a-layout style="padding: 20px">
         <a-layout-header style="background: #fff; padding: 15px 0 5px 15px">
-          <a-radio-group default-value="a" button-style="solid" style="display: block; line-height: 32px">
-            <a-radio-button value="a"> 小时值分析 </a-radio-button>
-            <a-radio-button value="b"> 日均值分析 </a-radio-button>
-            <a-radio-button value="c"> 水质指标统计 </a-radio-button>
-            <a-radio-button value="d"> 质量等级统计 </a-radio-button>
-            <a-radio-button value="e"> 质量对比分析 </a-radio-button>
+          <a-radio-group  default-value="a" button-style="solid" style="display: block; line-height: 32px">
+            <a-radio-button @click=" tab = 'a'" value="a"> 小时值分析 </a-radio-button>
+            <a-radio-button @click=" tab = 'b'" value="b"> 日均值分析 </a-radio-button>
+            <a-radio-button @click=" tab = 'c'" value="c"> 水质指标统计 </a-radio-button>
+            <a-radio-button @click=" tab = 'd'" value="d"> 质量等级统计 </a-radio-button>
+            <a-radio-button @click=" tab = 'e'" value="e"> 质量对比分析 </a-radio-button>
           </a-radio-group>
           <span>
             检测项：
@@ -43,13 +43,16 @@
           </span>
         </a-layout-header>
         <a-layout-content style="padding: 20px 0 20px 0"> 
-          <a-row>
+          <!-- <a-row>
             图表类型：
             <a-select placeholder="选择类型"  style="min-width: 150px">
               <a-select-option value="0"> 单站点多指标分析 </a-select-option>
               <a-select-option value="1"> 多站点多指标分析 </a-select-option>
             </a-select>
-          </a-row>
+          </a-row> -->
+          <a-1 v-if="tab === 'd'"/>
+          <a-2 v-if="tab === 'e'" />
+          <a-3 v-if="tab === 'c'" />
         </a-layout-content>
       </a-layout>
     </a-layout>
@@ -57,7 +60,11 @@
 </template>
 
 <script>
+import A1 from './A1.vue';
+import A2 from './A2.vue';
+import A3 from './A3.vue';
 export default {
+  components: { A1, A2, A3 },
   data() {
     return {
       checkedKeys: ["all"],
@@ -67,6 +74,7 @@ export default {
       datetimeRange: [],
       columns: [],
       data: [],
+      tab: 'e'
     };
   },
   computed: {
diff --git a/src/components/charts/BaseIndexChart.vue b/src/components/charts/BaseIndexChart.vue
index b5c78dd..0ab96cf 100644
--- a/src/components/charts/BaseIndexChart.vue
+++ b/src/components/charts/BaseIndexChart.vue
@@ -11,6 +11,7 @@
 </template>
 
 <script>
+import * as echarts from 'echarts'
 export default {
   data() {
     return {
@@ -38,7 +39,7 @@ export default {
       let e = this.$refs['indexChart']
       if(!e)return
       let myChart = echarts.init(e);
-      const { title, xAxis, series, seriesName, seriesType, yRange } = this.setting;
+      const { title, xAxis, series, seriesName, seriesType } = this.setting;
       let option = {
         title: {
           text: title,
@@ -53,12 +54,9 @@ export default {
           }),
         },
         yAxis: {
-            min: yRange[0] - (yRange[1] - yRange[0]) * 0.05,
-            max: yRange[1] + (yRange[1] - yRange[0]) * 0.05,
-            splitLine: {
-                show: false
-            }
+          type: "value"
         },
+      
         dataZoom: [
           {
             // startValue: '2014-06-01'
@@ -77,49 +75,14 @@ export default {
             saveAsImage: {},
           },
         },
-        visualMap: {
-          show: true,
-          top: 40,
-          right: 50,
-          type:'piecewise',
-          text:'图例',
-          pieces: [
-            {
-              gte: yRange[0],
-              lte: yRange[1],
-              color: '#0000ff',
-            },
-            {
-              gt: yRange[1],
-              color: "#ff0000",
-            },
-            {
-              gt: yRange[1],
-              color: "#ff0000",
-            },
-          ],
-          categories:['合格','不合格'],
-          outOfRange: {
-            color: "#0000ff",
-          },
-        },
+
         series: {
           name: seriesName,
           type: seriesType,
           data: this.rawData.map(function (item) {
             return item[series];
           }),
-          markLine: {
-            silent: true,
-            data: [
-              {
-                yAxis: yRange[0],
-              },
-              {
-                yAxis: yRange[1],
-              },
-            ],
-          },
+
         },
       };
       console.log(option)
diff --git a/src/components/icon/index.js b/src/components/icon/index.js
index 357999d..585cb83 100644
--- a/src/components/icon/index.js
+++ b/src/components/icon/index.js
@@ -1,4 +1,4 @@
-import { Icon } from 'ant-design-vue';
+import { Icon } from 'antd';
 
 const IconFont = Icon.createFromIconfontCN({
     scriptUrl: '//at.alicdn.com/t/font_2205869_ablhiuxmevf.js', // generated by iconfont.cn
diff --git a/src/components/search/Index.vue b/src/components/search/Index.vue
index e8923a0..37bf26f 100644
--- a/src/components/search/Index.vue
+++ b/src/components/search/Index.vue
@@ -86,7 +86,7 @@
 // import SZJCChart from "./SZJCChart";
 import { getData, URL_MAP } from "@/utils/http";
 import Moment from "@/components/utils/moment.zh_cn";
-import { processWater } from "@/utils/water";
+import { generateWaterData, processWater } from "@/utils/water";
 import BaseIndexChart from "../charts/BaseIndexChart.vue";
 export default {
   components: {
@@ -217,10 +217,10 @@ export default {
           series: sensor.param_key,
           seriesName: sensor.param_name,
           seriesType: "line",
-          yRange: [
-            ruleSlot[sensor.param_key].mmin,
-            ruleSlot[sensor.param_key].mmax,
-          ],
+          // yRange: [
+          //   ruleSlot[sensor.param_key].mmin,
+          //   ruleSlot[sensor.param_key].mmax,
+          // ],
         });
       });
       this.chartSettings = chartSettings;
@@ -251,30 +251,15 @@ export default {
     async getData() {
       this.loading = true;
       try {
-        const params = {
-          timestamp__gte: this.startTime.toDate().getTime(),
-          timestamp__lte: this.endTime.toDate().getTime(),
-          device_id__in: this.selectedKeys,
-        };
-        if (this.currentType === "table") {
-          params.page = this.pagination.current;
-        }
+        let count = 10
+
         if (this.currentType === "chart") {
-          params.page = 0;
-          params.page_size = 1e13;
+          count = 300;
         }
-        let data = await getData(URL_MAP.WATER_LIST, params);
-
-        if (data.total === 0) {
-          this.waterData = [];
-        } else {
-          this.waterData = processWater(
-            data.data,
-            this.sensorList.map((s) => s.param_key)
-          );
-        }
-
-        this.pagination.total = data.total;
+        // let data = await getData(URL_MAP.WATER_LIST, params);
+        let data = generateWaterData(this.sensorList.map((s) => s.param_key), count)
+        this.waterData = data
+        this.pagination.total = 300;
       } catch (e) {
         console.log(e);
         this.waterData = [];
diff --git a/src/components/search/LurMean.vue b/src/components/search/LurMean.vue
index a6ab4d7..e4a42d3 100644
--- a/src/components/search/LurMean.vue
+++ b/src/components/search/LurMean.vue
@@ -48,6 +48,7 @@
 </template>
 
 <script>
+import { generateWaterData } from '@/utils/water';
 export default {
   data() {
     return {
@@ -81,10 +82,14 @@ export default {
       },
       {
         title: "日期",
-        dataIndex: "time",
+        dataIndex: "time_str",
       },
     ];
+    let label = []
     this.sensorList.forEach((sensor) => {
+      label.push(sensor.param_key + '1')
+      label.push(sensor.param_key + '2')
+      label.push(sensor.param_key + '3')
       columns.push({
         title: sensor.param_name + '('+(sensor.uint || "-") + ')',
         children: [
@@ -119,6 +124,7 @@ export default {
         children: deviceTree,
       },
     ];
+    this.data = generateWaterData(label, 10)
   },
 };
 </script>
diff --git a/src/components/search/Means.vue b/src/components/search/Means.vue
index 310990f..9018cce 100644
--- a/src/components/search/Means.vue
+++ b/src/components/search/Means.vue
@@ -23,7 +23,7 @@
           </a-radio-group>
           <span>
             <a-date-picker
-              :locale="locale"
+              
               v-model="startValue"
               :disabled-date="disabledStartDate"
               format="YYYY-MM-DD"
@@ -31,7 +31,7 @@
               @openChange="handleStartOpenChange"
             /> -
             <a-date-picker
-              :locale="locale"
+              
               v-model="endValue"
               :disabled-date="disabledEndDate"
               format="YYYY-MM-DD"
@@ -56,12 +56,13 @@
 </template>
 
 <script>
+import { generateWaterData } from '@/utils/water';
 import Moment from '../utils/moment.zh_cn';
-import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
+// import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
 export default {
   data() {
     return {
-      locale,
+      // locale,
       checkedKeys: ['all'],
       autoExpandParent: true,
       selectedKeys: [],
@@ -178,7 +179,7 @@ export default {
       },
       {
         title: "时间",
-        dataIndex: "time",
+        dataIndex: "time_str",
       },
     ];
     this.sensorList.forEach((sensor) => {
@@ -209,6 +210,7 @@ export default {
         children: deviceTree,
       },
     ];
+    this.data = generateWaterData(this.sensorList.map(v => v.param_key), 10)
   },
 };
 </script>
diff --git a/src/components/search/QaDay.vue b/src/components/search/QaDay.vue
index d7f444b..86786e4 100644
--- a/src/components/search/QaDay.vue
+++ b/src/components/search/QaDay.vue
@@ -48,6 +48,7 @@
 </template>
 
 <script>
+import { generateWaterData } from '@/utils/water';
 export default {
   data() {
     return {
@@ -81,7 +82,7 @@ export default {
       },
       {
         title: "日期",
-        dataIndex: "time",
+        dataIndex: "time_str",
       },
     ];
     this.sensorList.forEach((sensor) => {
@@ -116,6 +117,11 @@ export default {
         children: deviceTree,
       },
     ];
+    let data = generateWaterData(this.sensorList.map(v => v.param_key), 10)
+    data.forEach(o => {
+      o.level = Math.ceil( Math.random() * 10 )
+    })
+    this.data = data
   },
 };
 </script>
diff --git a/src/components/search/QaSTS.vue b/src/components/search/QaSTS.vue
index 72a06e3..89b5ba1 100644
--- a/src/components/search/QaSTS.vue
+++ b/src/components/search/QaSTS.vue
@@ -48,6 +48,7 @@
 </template>
 
 <script>
+import { generateWaterData } from '@/utils/water';
 export default {
   data() {
     return {
@@ -74,6 +75,18 @@ export default {
     dateRangeChange() {},
   },
   mounted() {
+    let days = [
+      'good_days',
+      'well_days',
+      'small_days',
+      'bad_days'
+    ]
+    let ratios = [
+      'good_ratio',
+      'small_ratio',
+      'well_ratio',
+      'bad_ratio'
+    ]
     const columns = [
       {
         title: "站点名",
@@ -162,6 +175,25 @@ export default {
         children: deviceTree,
       },
     ];
+
+    let data = generateWaterData(['ff'], 10)
+    data.forEach(o => {
+      let s = 0
+        days.forEach(d => {
+          o[d] = Math.ceil(Math.random() * 10)
+          s += o[d]
+        })
+
+        o['all_days'] = s
+
+        ratios.forEach(d => {
+          let ss = d.split('_')[0] + '_days'
+          o[d] = parseFloat(( o[ss] / 30).toFixed(1))
+        })
+        o['all_ratio'] =parseFloat(( s / 30).toFixed(1))
+
+    })
+    this.data = data
   },
 };
 </script>
diff --git a/src/components/search/YLSTS.vue b/src/components/search/YLSTS.vue
index 15e7e3c..654df07 100644
--- a/src/components/search/YLSTS.vue
+++ b/src/components/search/YLSTS.vue
@@ -48,6 +48,7 @@
 </template>
 
 <script>
+import Moment from '../utils/moment.zh_cn';
 export default {
   data() {
     return {
@@ -88,27 +89,27 @@ export default {
         dataIndex: "lur-count"
       },
       {
-        title: '超标比率',
-        dataIndex: "lur-count"
+        title: '超标等级',
+        dataIndex: "lur-level"
       },
       {
         title: '是否处理',
-        dataIndex: "lur-count"
+        dataIndex: "isok"
       },
       {
         title: '处理人',
-        dataIndex: "lur-count"
+        dataIndex: "people"
       },
        {
         title: '处理时间',
-        dataIndex: "lur-count"
+        dataIndex: "time"
       },
        {
         title: '处理概述',
-        dataIndex: "lur-count"
+        dataIndex: "msg"
       },
     ];
-  
+
     this.columns = columns;
 
     const deviceTree = [];
@@ -125,6 +126,22 @@ export default {
         children: deviceTree,
       },
     ];
+
+    let data = []
+    for(let i=0; i< 10; i++) {
+      let start = Moment().subtract(i + 10 * Math.ceil(Math.random() * 10), 'day')
+      let end = start.add(1, 'days')
+      data.push({
+        'range': start.format('ll') + '-' + end.format('ll'),
+        'lur-count':  Math.ceil(10 *Math.random()) + Math.random(),
+        'lur-level':  Math.ceil(10 *Math.random()),
+        'isok': Math.random() > 0.5 ? '是':'否',
+        'people': 'sf',
+        'time': start.add(Math.ceil(24 *Math.random()), 'hour').format('lll'),
+
+      })
+      this.data = data
+    }
   },
 };
 </script>
diff --git a/src/main.js b/src/main.js
index 0189cb0..7c2535f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,6 +8,8 @@ import router from './utils/router'
 
 // Vue.use(Antd)
 // Vue.use(VCharts)
+import resize from 'vue-resize-directive'
+Vue.directive('resize', resize)
 Vue.config.productionTip = false
 Vue.prototype.$store = store
 
diff --git a/src/utils/water.js b/src/utils/water.js
index 1477934..3093f09 100644
--- a/src/utils/water.js
+++ b/src/utils/water.js
@@ -28,4 +28,22 @@ export function processTimeData(dataArr=[], start=new Date(), end=new Date(), st
             
         })
     }
+}
+
+export function generateWaterData(label, count) {
+    let data = []
+    let start = Moment().subtract(count, "minute")
+    for(let _ = 0; _< count; _ ++) {
+        let d = {}
+        label.forEach((key, i) => {
+            d[key] =  Math.sin( _  * _ * _ * 34654  - _ * _ * 54324 + _ * 2345 + 343) + 1 +  Math.random() / 10
+            d[key] = parseFloat( d[key].toFixed(3) )
+        })
+        d.key = Math.round( Math.random() * 10000000 ).toString()
+        d['time_str'] = start.add(_, "minute").format('lll')
+        d['time'] = start.add(_, "minute").toDate()
+        data.push(d)
+    }
+
+    return data;
 }
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
index 40adef2..446c592 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -12,7 +12,6 @@ module.exports = {
             '/backend': {
                 // target: 'http://223.75.53.208:8081',
                 // target: 'http://121.36.155.145:10025/',
-                // target: 'http://127.0.0.1:7788/'
                 target: 'http://8.136.226.16:10025/'
             }
         }
@@ -34,7 +33,7 @@ module.exports = {
                 'com': path.resolve(__dirname, 'src', 'components')
             }
         },
-        externals: true ? {
+        externals: {
             'vue': 'Vue',
             'vuex':'Vuex',
             'antd': 'antd',
@@ -43,14 +42,8 @@ module.exports = {
             "md5": "js-md5",
             'axios': 'axios',
             'v-charts':'VCharts',
-            'ol':'ol'
-        }: {
-            'antd': 'antd',
             'ol':'ol',
-            'v-charts':'VCharts',
-            "moment": "moment",
-            "md5": "js-md5",
-            'axios': 'axios',
+            'echarts': 'echarts'
         },
         module: {