Bläddra i källkod

系统集成成果管理页面

LXXXY 5 år sedan
förälder
incheckning
73bdc608e6

+ 134 - 131
src/components/point/report/historyChart.vue

@@ -1,156 +1,159 @@
 <template>
-    <!-- 历史数据 -->
-    <div id="historyChart">
-        <!-- 精度选择 -->
-        <div class="query-area">
-            <span>当下分精度下采集数量:{{ chartData.count }}</span>
-            <el-select v-model="selectValue" style="float:right;margin-right:10px;" @change='loadTable()'>
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
-            </el-select>
-        </div>
-        <!-- 图表 -->
-        <div class="chart-area" ref="chart">
+  <!-- 历史数据 -->
+  <div id="historyChart">
+    <!-- 精度选择 -->
+    <div class="query-area">
+      <span>当下分精度下采集数量:{{ chartData.count }}</span>
+      <el-select v-model="selectValue" style="float:right;margin-right:10px;" @change='loadTable()'>
+        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+      </el-select>
+    </div>
+    <!-- 图表 -->
+    <div class="chart-area" ref="chart">
 
-        </div>
     </div>
+  </div>
 </template>
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
 
 import {
-    getHistoryData
+  getHistoryData
 } from '@/api/point/request'
 import echarts from 'echarts'
 
 export default {
-    data() {
-        return {
-            lineChart: null,//折线表
-            selectValue: '1',//下拉框默认值
-            options: [//精度
-                {value: '1', label:  '天'},
-                {value: '7', label:  '周'},
-                {value: '30', label:  '月'},
-            ],
-            //数据表
-            chartData: {
-                count: 100,//总数
-                data: [
-                    {date: '2019/02/01', value: 100},//横坐标标识 纵坐标值
-                    {date: '2019/02/02', value: 200},
-                    {date: '2019/02/03', value: 300},
-                    {date: '2019/02/04', value: 150},
-                ]
+  data() {
+    return {
+      lineChart: null,//折线表
+      selectValue: '1',//下拉框默认值
+      options: [//精度
+        { value: '1min', label: '1分钟' },
+        { value: '5min', label: '5分钟' },
+        { value: '15min', label: '15分钟' },
+        { value: '30min', label: '30分钟' },
+        { value: '1hour', label: '1小时' },
+        { value: '1day', label: '1天' },
+      ],
+      //数据表
+      chartData: {
+        count: 100,//总数
+        data: [
+          { date: '2019/02/01', value: 100 },//横坐标标识 纵坐标值
+          { date: '2019/02/02', value: 200 },
+          { date: '2019/02/03', value: 300 },
+          { date: '2019/02/04', value: 150 },
+        ]
+      }
+    }
+  },
+  props: {
+    tabFunNum: String//表号功能号
+  },
+  methods: {
+    //加载表格
+    loadTable() {
+      getHistoryData({ tabFunNum: this.tabFunNum }, res => {
+        // this.chartData = res;
+        //折线图参数
+        let lineChartOption = {
+          tooltip: {
+            trigger: 'axis',
+            position: function (pt) {
+              return [pt[0], '10%'];
             }
-        }
-    },
-    props:{
-        tabFunNum: String//表号功能号
-    },
-    methods: {
-        //加载表格
-        loadTable(){
-            getHistoryData({tabFunNum:this.tabFunNum},res => {
-                // this.chartData = res;
-                //折线图参数
-                let lineChartOption = {
-                    tooltip: {
-                        trigger: 'axis',
-                        position: function (pt) {
-                            return [pt[0], '10%'];
-                        }
-                    },
-                    xAxis: {
-                        type: 'category',
-                        boundaryGap: false,
-                        data: this.chartData.data.map(item => item.date)
-                    },
-                    yAxis: {
-                        type: 'value',
-                        boundaryGap: [0, '100%']
-                    },
-                    dataZoom: [{
-                        type: 'inside',
-                        start: 80,
-                        end: 100
-                    }, {
-                        start: 0,
-                        end: 10,
-                        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
-                        handleSize: '80%',
-                        handleStyle: {
-                            color: '#fff',
-                            shadowBlur: 3,
-                            shadowColor: 'rgba(0, 0, 0, 0.6)',
-                            shadowOffsetX: 2,
-                            shadowOffsetY: 2
-                        }
-                    }],
-                    series: [
-                        {
-                            name:'历史数据',
-                            type:'line',
-                            smooth:true,
-                            symbol: 'none',
-                            sampling: 'average',
-                            itemStyle: {
-                                color: 'rgb(182,194,154)'
-                            },
-                            areaStyle: {
-                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                                    offset: 0,
-                                    color: 'rgb(182,194,154)'
-                                }, {
-                                    offset: 1,
-                                    color: 'rgb(138,151,123)'
-                                }])
-                            },
-                            data: this.chartData.data.map(item => item.value)
-                        }
-                    ]
-                };
-                this.lineChart.setOption(lineChartOption);
-            });
-            
-        },
-        init() {
-            this.lineChart = echarts.init(this.$refs.chart);
-            this.loadTable();
-        },
-    },
-    computed: {
-        ...mapGetters('layout', ['projectId', 'userId'])
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: this.chartData.data.map(item => item.date)
+          },
+          yAxis: {
+            type: 'value',
+            boundaryGap: [0, '100%']
+          },
+          dataZoom: [{
+            type: 'inside',
+            start: 80,
+            end: 100
+          }, {
+            start: 0,
+            end: 10,
+            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
+            handleSize: '80%',
+            handleStyle: {
+              color: '#fff',
+              shadowBlur: 3,
+              shadowColor: 'rgba(0, 0, 0, 0.6)',
+              shadowOffsetX: 2,
+              shadowOffsetY: 2
+            }
+          }],
+          series: [
+            {
+              name: '历史数据',
+              type: 'line',
+              smooth: true,
+              symbol: 'none',
+              sampling: 'average',
+              itemStyle: {
+                color: 'rgb(182,194,154)'
+              },
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: 'rgb(182,194,154)'
+                }, {
+                  offset: 1,
+                  color: 'rgb(138,151,123)'
+                }])
+              },
+              data: this.chartData.data.map(item => item.value)
+            }
+          ]
+        };
+        this.lineChart.setOption(lineChartOption);
+      });
+
     },
-    mounted() {
-        //实例化
-        this.init();
-        let that = this;
-        //图表大小随窗口变化
-        window.onresize = () => {
-            that.lineChart.resize();
-        }
+    init() {
+      this.lineChart = echarts.init(this.$refs.chart);
+      this.loadTable();
     },
-    watch: {
-        //切换时更新数据
-        tabFunNum() {
-            this.loadTable();
-        }
+  },
+  computed: {
+    ...mapGetters('layout', ['projectId', 'userId'])
+  },
+  mounted() {
+    //实例化
+    this.init();
+    let that = this;
+    //图表大小随窗口变化
+    window.onresize = () => {
+      that.lineChart.resize();
+    }
+  },
+  watch: {
+    //切换时更新数据
+    tabFunNum() {
+      this.loadTable();
     }
+  }
 }
 </script>
 
 <style lang="less" scoped>
-#historyChart{
-    height:100%;
-    width:100%;
-    padding:10px 5px;
+#historyChart {
+  height: 100%;
+  width: 100%;
+  padding: 10px 5px;
 }
-.query-area{
-    height:40px;
-    line-height:40px;
+.query-area {
+  height: 40px;
+  line-height: 40px;
 }
-.chart-area{
-    height:450px;
+.chart-area {
+  height: 450px;
 }
 </style>

+ 2 - 1
src/components/point/report/integrateStatistics.vue

@@ -233,6 +233,7 @@ export default {
     //图表随窗口变化
     let that = this;
     window.onresize = () => {
+      console.log("resize")
       that.loopChart.resize();
       that.barChart.resize();
     };
@@ -256,7 +257,7 @@ export default {
   font-weight: 500;
 }
 .chart {
-  min-height: 250px;
+  min-height: 200px;
   height: auto;
   width: 100%;
 }

+ 2 - 2
src/components/point/report/pointTabOverview.vue

@@ -11,7 +11,7 @@
             <el-table-column prop="dataSource" label="数据源" show-overflow-tooltip min-width="100"></el-table-column>
             <el-table-column prop="TableNum" label="表号功能号" show-overflow-tooltip min-width="100">
               <template slot-scope="scope">
-                <div v-for="(item, index) in scope.row.TableNum" :key="index" style="border-bottom: 1px solid #eee;">{{ item }}</div>
+                <div v-for="(item, index) in scope.row.TableNum" :key="index" >{{ item }}</div>
               </template>
             </el-table-column>
           </el-table>
@@ -21,7 +21,7 @@
           <el-table :data="mTOData" style="width: 100%">
             <el-table-column prop="name" label="点位名称" show-overflow-tooltip min-width="100">
               <template slot-scope="scope">
-                <div v-for="(item, index) in scope.row.name" :key="index" style="border-bottom: 1px solid #eee;">{{ item }}</div>
+                <div v-for="(item, index) in scope.row.name" :key="index" >{{ item }}</div>
               </template>
             </el-table-column>
             <el-table-column prop="dataSource" label="数据源" show-overflow-tooltip min-width="100"></el-table-column>