merge branch master 20220429 仪表盘

src/componentChart/BarChart.vue

@@ -0,0 +1,117 @@
+<template>
+  <div ref="chart"  style="width:100%;height:385px;"  />
+</template>
+<script>
+import echarts from 'echarts'
+import { GetDataByName } from '@/api/common'
+import draggable from 'vuedraggable'
+import Cookies from 'js-cookie'
+import { parseTime } from '@/utils/index.js'
+import Pagination from '@/components/Pagination'
+require('echarts/theme/macarons')
+
+export default {
+  name: 'BarChart',
+  props: {
+    
+
+    chartData: {
+      type: Object,
+      required: true
+    },
+    //   chartOpt: {
+    //   type: Object,
+    //   required: false
+    // },
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler: function (chartData) {
+        this.renderChart(chartData)
+      }
+    },
+    // schema: {
+    //   deep: true,
+    //   handler: function () {
+    //     this.renderChart(this.data)
+    //   }
+    // }
+  },
+  mounted() {
+    this.renderChart(this.chartData)
+    this.$on('resized', this.handleResize)
+    window.addEventListener('resize', this.handleResize)
+  },
+
+
+  // created() {
+  //   this.renderChart(this.chartData)
+  // },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose()
+    }
+    window.removeEventListener('resize', this.handleResize)
+  },
+  methods: {
+    handleResize() {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    },
+    renderChart(chartData) {
+      const option =  {
+        title: { text: '' },
+        tooltip: { trigger: 'axis' },
+        legend: {   data:chartData.legendArr, right: 10, show: true, type: 'scroll' },
+        grid: { top: '15%', left: '8%', right: '8%', containLabel: true },
+        xAxis: [{ type: 'category',data:chartData.xAxisArr }],
+        yAxis: [
+          {type: 'value'},  
+        ],
+         series: function (e) {
+            var serie = [];
+            for (var i = 0; i < chartData.xAxisArr.length; i++) {
+              console.log(i)
+               
+                var item = {
+                  name: chartData.legendArr[i],
+                  data: chartData.dataArr[i],
+                  type: 'bar',
+                  emphasis: { label: { show: true, position: 'inside' } },
+                }
+             
+
+              serie.push(item);
+            }
+
+
+            console.log(serie)
+
+            return serie;
+          }()
+      
+      }
+      setTimeout(() => {
+        if (!this.chart) {
+          this.chart = echarts.init(this.$refs.chart, 'macarons')
+        }
+        this.chart.clear()
+        this.chart.setOption(option)
+        // if (this.chartOpt) {
+        //   this.chart.setOption(this.chartOpt)
+        // }
+ 
+        this.chart.setOption(this.chartOpt)
+       
+      }, 0)
+    }
+  }
+}
+</script>

src/componentChart/ChartTable.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="app-table">
+   
+        <div class="table">
+          <el-table
+            :key="tableObj.tableKey"
+            v-loading="tableObj.listLoading"
+            element-loading-text="给我一点时间"
+            :data="tableObj.list"
+            border
+            fit
+            highlight-current-row
+            style="width: 100%;"
+            :row-style="rowStyle"
+            :cell-style="cellStyle"
+            class="elTable table-fixed" 
+          >
+         
+            <el-table-column label="序号" align="center" type="index" width="50px">
+              <template slot-scope="scope">
+                <span v-if="tableObj.pageNum">{{ scope.$index + (tableObj.pageNum-1) * tableObj.pageSize + 1 }}</span>
+                <span v-else>1</span>
+              </template>
+            </el-table-column>
+
+
+      
+
+
+
+            <el-table-column label="分日日期/维度" min-width="130px" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.date }}</span>
+              </template>
+            </el-table-column>
+
+
+            <!-- <el-table-column label="混料数据" min-width="130px" align="center">
+              <el-table-column label="理论重量" min-width="130px" align="center">
+                <template slot-scope="scope">
+                  <span>{{ scope.row.drivercode }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="实际重量" min-width="130px" align="center">
+                <template slot-scope="scope">
+                  <span>{{ scope.row.drivercode }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="误差值" min-width="130px" align="center">
+                <template slot-scope="scope">
+                  <span>{{ scope.row.drivercode }}</span>
+                </template>
+              </el-table-column>
+            </el-table-column> -->
+
+            <el-table-column :label="item.label" min-width="130px" align="center" v-for=" (item,index) in tableHead">
+
+              <el-table-column :label="items.label" :property="item.value" min-width="130px" align="center" v-for=" (items,indexs) in item.children">
+                <template slot-scope="scope">
+                  <span>{{ scope.row[items.value] }}</span>
+                </template>
+              </el-table-column>
+               
+            </el-table-column>
+
+            
+           
+           
+           
+          </el-table>
+          <pagination v-show="tableObj.total>0" :total="tableObj.total" :page.sync="tableObj.getDataParameters.offset" :limit.sync="tableObj.getDataParameters.pagecount" @pagination="getList" />
+        </div>
+   
+   
+  </div>
+</template>
+
+<script>
+import { GetDataByName } from '@/api/common'
+import draggable from 'vuedraggable'
+import Cookies from 'js-cookie'
+import { parseTime } from '@/utils/index.js'
+import Pagination from '@/components/Pagination'
+
+
+
+export default {
+  name: 'ChartTable',
+  components: { Pagination },
+
+  props: {
+   
+  },
+  data() {
+    return {
+
+      tableHead:[
+        { 
+          value: 'txt1',label: '混料数据',
+          children: [
+            { value: 'txt11', label: '理论重量-合计'}, 
+            { value: 'txt12', label: '理论重量-平均'}, 
+            { value: 'txt13', label: '理论重量-最大值'}, 
+          ]
+        },
+        { 
+          value: 'txt2',label: '撒料数据',
+          children: [
+            { value: 'txt21', label: '理论重量-合计'}, 
+            { value: 'txt22', label: '理论重量-平均'}, 
+            { value: 'txt23', label: '理论重量-最大值'}, 
+          ]
+        }
+      ],
+      tableObj: {
+         getDataParameters: {
+          name: 'getDriverList',
+          page: 1,
+          offset: 1,
+          pagecount: parseInt(Cookies.get('pageCount')),
+          returntype: 'Map',
+          parammaps: {
+            pastureid: Cookies.get('pastureid'),
+            dateType:'',
+            type: '',
+            dimension: '',
+            mixture: [],
+            spread: [],
+          }
+        },
+        tableKey: 0,
+        list: [
+           { id:1,date:1212,txt11:11,txt12:12,txt13:13,txt21:21,txt22:22,txt23:23,},
+            { id:1,date:1212,txt11:11,txt12:12,txt13:13,txt21:21,txt22:22,txt23:23,},
+             { id:1,date:1212,txt11:11,txt12:12,txt13:13,txt21:21,txt22:22,txt23:23,}
+        ],
+        total: 0,
+        listLoading: false,
+        temp: {}
+      },
+
+  
+
+      rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
+      cellStyle: { padding: 0 + 'px' }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+   
+    getList() {
+
+     
+      //this.tableObj.listLoading = true
+      // GetDataByName(this.tableObj.getdataListParm).then(response => {
+      //   console.log('table数据', response.data.list)
+      //   if (response.data.list !== null) {
+      //     this.tableObj.list = response.data.list
+      //     this.tableObj.pageNum = response.data.pageNum
+      //     this.tableObj.pageSize = response.data.pageSize
+      //     this.tableObj.total = response.data.total
+      //   } else {
+      //     this.tableObj.list = []
+      //   }
+      //   setTimeout(() => {
+      //     this.tableObj.listLoading = false
+      //   }, 100)
+      // })
+
+      this.tableObj.listLoading = false
+     
+    },
+
+  
+   
+    
+  }
+}
+</script>
+
+<style  lang="scss" scoped>
+ .search{margin-bottom: 10px;}
+</style>

src/componentChart/HorizontalBarChart.vue

@@ -0,0 +1,117 @@
+<template>
+  <div ref="chart"  style="width:100%;height:385px;"  />
+</template>
+<script>
+import echarts from 'echarts'
+import { GetDataByName } from '@/api/common'
+import draggable from 'vuedraggable'
+import Cookies from 'js-cookie'
+import { parseTime } from '@/utils/index.js'
+import Pagination from '@/components/Pagination'
+require('echarts/theme/macarons')
+
+export default {
+  name: 'HorizontalBarChart',
+  props: {
+    
+
+    chartData: {
+      type: Object,
+      required: true
+    },
+    //   chartOpt: {
+    //   type: Object,
+    //   required: false
+    // },
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler: function (chartData) {
+        this.renderChart(chartData)
+      }
+    },
+    // schema: {
+    //   deep: true,
+    //   handler: function () {
+    //     this.renderChart(this.data)
+    //   }
+    // }
+  },
+  mounted() {
+    this.renderChart(this.chartData)
+    this.$on('resized', this.handleResize)
+    window.addEventListener('resize', this.handleResize)
+  },
+
+
+  // created() {
+  //   this.renderChart(this.chartData)
+  // },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose()
+    }
+    window.removeEventListener('resize', this.handleResize)
+  },
+  methods: {
+    handleResize() {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    },
+    renderChart(chartData) {
+      const option =  {
+        title: { text: '' },
+        tooltip: { trigger: 'axis' },
+        legend: {   data:chartData.legendArr, right: 10, show: true, type: 'scroll' },
+        grid: { top: '15%', left: '8%', right: '8%', containLabel: true },
+        xAxis: [{ type: 'category',data:chartData.xAxisArr }],
+        yAxis: [
+          {type: 'value'},  
+        ],
+         series: function (e) {
+            var serie = [];
+            for (var i = 0; i < chartData.xAxisArr.length; i++) {
+              console.log(i)
+               
+                var item = {
+                  name: chartData.legendArr[i],
+                  data: chartData.dataArr[i],
+                  type: 'bar',
+                  emphasis: { label: { show: true, position: 'inside' } },
+                }
+             
+
+              serie.push(item);
+            }
+
+
+            console.log(serie)
+
+            return serie;
+          }()
+      
+      }
+      setTimeout(() => {
+        if (!this.chart) {
+          this.chart = echarts.init(this.$refs.chart, 'macarons')
+        }
+        this.chart.clear()
+        this.chart.setOption(option)
+        // if (this.chartOpt) {
+        //   this.chart.setOption(this.chartOpt)
+        // }
+ 
+        this.chart.setOption(this.chartOpt)
+       
+      }, 0)
+    }
+  }
+}
+</script>

src/componentChart/LineChart.vue

@@ -0,0 +1,118 @@
+<template>
+  <div ref="chart"  style="width:100%;height:385px;"  />
+</template>
+<script>
+import echarts from 'echarts'
+import { GetDataByName } from '@/api/common'
+import draggable from 'vuedraggable'
+import Cookies from 'js-cookie'
+import { parseTime } from '@/utils/index.js'
+import Pagination from '@/components/Pagination'
+require('echarts/theme/macarons')
+
+export default {
+  name: 'LineChart',
+  props: {
+    
+
+    chartData: {
+      type: Object,
+      required: true
+    },
+    //   chartOpt: {
+    //   type: Object,
+    //   required: false
+    // },
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler: function (chartData) {
+        this.renderChart(chartData)
+      }
+    },
+    // schema: {
+    //   deep: true,
+    //   handler: function () {
+    //     this.renderChart(this.data)
+    //   }
+    // }
+  },
+  mounted() {
+    this.renderChart(this.chartData)
+    this.$on('resized', this.handleResize)
+    window.addEventListener('resize', this.handleResize)
+  },
+
+
+  // created() {
+  //   this.renderChart(this.chartData)
+  // },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose()
+    }
+    window.removeEventListener('resize', this.handleResize)
+  },
+  methods: {
+    handleResize() {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    },
+    renderChart(chartData) {
+      const option =  {
+        title: { text: 'Stacked Line' },
+        tooltip: { trigger: 'axis' },
+        legend: {   data:chartData.legendArr, right: 10, show: true, type: 'scroll' },
+        grid: { top: '15%', left: '8%', right: '8%', containLabel: true },
+        xAxis: [{ type: 'category',data:chartData.xAxisArr }],
+        yAxis: [
+          {type: 'value', name: 'kg'},
+           
+        ],
+         series: function (e) {
+            var serie = [];
+            for (var i = 0; i < chartData.xAxisArr.length; i++) {
+              console.log(i)
+               
+                var item = {
+                  name: chartData.legendArr[i],
+                  data: chartData.dataArr[i],
+                  type: 'line',
+                  emphasis: { label: { show: true, position: 'inside' } },
+                }
+             
+
+              serie.push(item);
+            }
+
+
+            console.log(serie)
+
+            return serie;
+          }()
+      
+      }
+      setTimeout(() => {
+        if (!this.chart) {
+          this.chart = echarts.init(this.$refs.chart, 'macarons')
+        }
+        this.chart.clear()
+        this.chart.setOption(option)
+        // if (this.chartOpt) {
+        //   this.chart.setOption(this.chartOpt)
+        // }
+ 
+        this.chart.setOption(this.chartOpt)
+       
+      }, 0)
+    }
+  }
+}
+</script>

src/views/systemManagement/customboard2/Addboard2/chartTable.vue

@@ -1,141 +0,0 @@
-<template>
-  <div class="app-table">
-   
-    <div class="table">
-      <el-table
-        :key="table.tableKey"
-        v-loading="table.listLoading"
-        element-loading-text="给我一点时间"
-        :data="table.list"
-        border
-        fit
-        highlight-current-row
-        style="width: 100%;"
-        :row-style="rowStyle"
-        :cell-style="cellStyle"
-        class="elTable table-fixed"
-      >
-        <el-table-column :key="1" label="序号" prop="sort" align="center" width="50px" />
-        <el-table-column :key="2" label="栏舍名称" prop="barname" min-width="90px" align="center" />
-        <el-table-column :key="3" label="第一层" min-width="90px" align="center">
-          <el-table-column label="比例 (%)" prop="onerate" min-width="90px" align="center" />
-          <el-table-column label="重量 (g)" prop="oneweight" min-width="90px" align="center" />
-        </el-table-column>
-        <el-table-column :key="4" label="第二层" min-width="90px" align="center">
-          <el-table-column label="比例 (%)" prop="tworate" min-width="90px" align="center" />
-          <el-table-column label="重量 (g)" prop="twoweight" min-width="90px" align="center" />
-        </el-table-column>
-        <el-table-column :key="5" label="第三层" min-width="90px" align="center">
-          <el-table-column label="比例 (%)" prop="threerate" min-width="90px" align="center" />
-          <el-table-column label="重量 (g)" prop="threeweight" min-width="90px" align="center" />
-        </el-table-column>
-    
-      </el-table>
-      <Pagination v-show="table.total>0" :total="table.total" :page.sync="table.getdataListParm.offset" :limit.sync="table.getdataListParm.pagecount" @pagination="getList" />
-    </div>
-   
-  </div>
-</template>
-
-<script>
-import { GetDataByName } from '@/api/common'
-import draggable from 'vuedraggable'
-import Cookies from 'js-cookie'
-import { parseTime } from '@/utils/index.js'
-import Pagination from '@/components/Pagination'
-export default {
-  name: 'MaterialIssuancePlan',
-  display: 'Two list header slot',
-  order: 14,
-  components: { Pagination },
-  data() {
-    return {
-      table: {
-        getdataListParm: {
-          name: 'getDungHistory',
-          page: 1,
-          offset: 1,
-          pagecount: 12,
-          returntype: 'Map',
-          parammaps: {
-            pastureid: Cookies.get('pastureid'),
-            operatetime: ''
-          }
-        },
-        list: [],
-        total: 0,
-        tableKey: 0,
-        listLoading: false,
-        temp: {},
-        changeList: [],
-        startObj: {}
-      },
-
-      textMap: {
-        seeHistory: '粪便筛修改记录'
-      },
-      seeHistory: {
-        dialogFormVisible: false, dialogStatus: '',
-        total: 0, tableKey: 0, listLoading: false,
-        getdataListParm: {
-          name: 'getDungHistoryBar', page: 1, offset: 1, pagecount: 10, returntype: 'Map',
-          parammaps: {
-            pastureid: Cookies.get('pastureid'),
-            barid: '',
-            inputDatetime: '',
-            time1: '',
-            time2: ''
-          }
-        }
-      },
-
-      rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
-      cellStyle: { padding: 0 + 'px' }
-    }
-  },
-  created() {
-    this.getList()
-  },
-  methods: {
-    changeDate() {
-      this.getList()
-    },
-    getList() {
-      this.table.listLoading = true
-      GetDataByName(this.table.getdataListParm).then(response => {
-        console.log('table数据', response.data.list)
-        if (response.data.list !== null) {
-          this.table.list = response.data.list
-          this.table.pageNum = response.data.pageNum
-          this.table.pageSize = response.data.pageSize
-          this.table.total = response.data.total
-        } else {
-          this.table.list = []
-        }
-        setTimeout(() => {
-          this.table.listLoading = false
-        }, 100)
-      })
-    },
-
-    handleSearch() {
-      if (this.table.getdataListParm.parammaps.operatetime == '' || this.table.getdataListParm.parammaps.operatetime == null ) {
-        this.table.getdataListParm.parammaps.operatetime = ''
-      } else {
-        this.table.getdataListParm.parammaps.operatetime = parseTime(this.table.getdataListParm.parammaps.operatetime, '{y}-{m}-{d}')
-      }
-      this.getList()
-    },
-    handleRefresh() {
-      this.table.getdataListParm.parammaps.operatetime = ''
-      this.getList()
-    },
-   
-    
-  }
-}
-</script>
-
-<style  lang="scss" scoped>
- .search{margin-bottom: 10px;}
-</style>

src/views/systemManagement/customboard2/Addboard2/index.vue

@@ -40,7 +40,7 @@
  
                 <keep-alive>
 
-                  <ChartTable>  </ChartTable>
+                  <!-- <ChartTable>  </ChartTable> -->
                   <!-- <component :is="chartTable.myComponent" ref="chartTable" /> -->
                 </keep-alive>
             </div>
@@ -100,13 +100,13 @@ import draggable from 'vuedraggable'
  
 import { GetDataByName } from '@/api/common'
 
-import { ChartTable } from '@/components/ChartTable'
+// import { ChartTable } from '@/components/ChartTable'
 
 import Cookies from 'js-cookie'
  
 export default {
   name: 'Addboard2',
-  components: {  draggable , ChartTable},
+  components: {  draggable },
   data() {
     return {
       isRoleEdit: [],
@@ -208,9 +208,9 @@ export default {
     getList() {
 
 
-  const vue = this
-      var myComponent = () => import('./chartTable.vue')
-      return vue.chartTable.myComponent = myComponent
+  // const vue = this
+  //     var myComponent = () => import('./chartTable.vue')
+  //     return vue.chartTable.myComponent = myComponent
       
 
       this.loading = true

src/views/systemManagement/customboard2/ChartPanel2/chartTable.vue

@@ -1,141 +0,0 @@
-<template>
-  <div class="app-table">
-   
-    <div class="table">
-      <el-table
-        :key="table.tableKey"
-        v-loading="table.listLoading"
-        element-loading-text="给我一点时间"
-        :data="table.list"
-        border
-        fit
-        highlight-current-row
-        style="width: 100%;"
-        :row-style="rowStyle"
-        :cell-style="cellStyle"
-        class="elTable table-fixed"
-      >
-        <el-table-column :key="1" label="序号" prop="sort" align="center" width="50px" />
-        <el-table-column :key="2" label="栏舍名称" prop="barname" min-width="90px" align="center" />
-        <el-table-column :key="3" label="第一层" min-width="90px" align="center">
-          <el-table-column label="比例 (%)" prop="onerate" min-width="90px" align="center" />
-          <el-table-column label="重量 (g)" prop="oneweight" min-width="90px" align="center" />
-        </el-table-column>
-        <el-table-column :key="4" label="第二层" min-width="90px" align="center">
-          <el-table-column label="比例 (%)" prop="tworate" min-width="90px" align="center" />
-          <el-table-column label="重量 (g)" prop="twoweight" min-width="90px" align="center" />
-        </el-table-column>
-        <el-table-column :key="5" label="第三层" min-width="90px" align="center">
-          <el-table-column label="比例 (%)" prop="threerate" min-width="90px" align="center" />
-          <el-table-column label="重量 (g)" prop="threeweight" min-width="90px" align="center" />
-        </el-table-column>
-    
-      </el-table>
-      <Pagination v-show="table.total>0" :total="table.total" :page.sync="table.getdataListParm.offset" :limit.sync="table.getdataListParm.pagecount" @pagination="getList" />
-    </div>
-   
-  </div>
-</template>
-
-<script>
-import { GetDataByName } from '@/api/common'
-import draggable from 'vuedraggable'
-import Cookies from 'js-cookie'
-import { parseTime } from '@/utils/index.js'
-import Pagination from '@/components/Pagination'
-export default {
-  name: 'MaterialIssuancePlan',
-  display: 'Two list header slot',
-  order: 14,
-  components: { Pagination },
-  data() {
-    return {
-      table: {
-        getdataListParm: {
-          name: 'getDungHistory',
-          page: 1,
-          offset: 1,
-          pagecount: 12,
-          returntype: 'Map',
-          parammaps: {
-            pastureid: Cookies.get('pastureid'),
-            operatetime: ''
-          }
-        },
-        list: [],
-        total: 0,
-        tableKey: 0,
-        listLoading: false,
-        temp: {},
-        changeList: [],
-        startObj: {}
-      },
-
-      textMap: {
-        seeHistory: '粪便筛修改记录'
-      },
-      seeHistory: {
-        dialogFormVisible: false, dialogStatus: '',
-        total: 0, tableKey: 0, listLoading: false,
-        getdataListParm: {
-          name: 'getDungHistoryBar', page: 1, offset: 1, pagecount: 10, returntype: 'Map',
-          parammaps: {
-            pastureid: Cookies.get('pastureid'),
-            barid: '',
-            inputDatetime: '',
-            time1: '',
-            time2: ''
-          }
-        }
-      },
-
-      rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
-      cellStyle: { padding: 0 + 'px' }
-    }
-  },
-  created() {
-    this.getList()
-  },
-  methods: {
-    changeDate() {
-      this.getList()
-    },
-    getList() {
-      this.table.listLoading = true
-      GetDataByName(this.table.getdataListParm).then(response => {
-        console.log('table数据', response.data.list)
-        if (response.data.list !== null) {
-          this.table.list = response.data.list
-          this.table.pageNum = response.data.pageNum
-          this.table.pageSize = response.data.pageSize
-          this.table.total = response.data.total
-        } else {
-          this.table.list = []
-        }
-        setTimeout(() => {
-          this.table.listLoading = false
-        }, 100)
-      })
-    },
-
-    handleSearch() {
-      if (this.table.getdataListParm.parammaps.operatetime == '' || this.table.getdataListParm.parammaps.operatetime == null ) {
-        this.table.getdataListParm.parammaps.operatetime = ''
-      } else {
-        this.table.getdataListParm.parammaps.operatetime = parseTime(this.table.getdataListParm.parammaps.operatetime, '{y}-{m}-{d}')
-      }
-      this.getList()
-    },
-    handleRefresh() {
-      this.table.getdataListParm.parammaps.operatetime = ''
-      this.getList()
-    },
-   
-    
-  }
-}
-</script>
-
-<style  lang="scss" scoped>
- .search{margin-bottom: 10px;}
-</style>

src/views/systemManagement/customboard2/ChartPanel2/index.vue

@@ -104,73 +104,8 @@
       
         </div>
 
-        <div class="table">
-          <el-table
-            :key="tableObj.tableKey"
-            v-loading="tableObj.listLoading"
-            element-loading-text="给我一点时间"
-            :data="tableObj.list"
-            border
-            fit
-            highlight-current-row
-            style="width: 100%;"
-            :row-style="rowStyle"
-            :cell-style="cellStyle"
-            class="elTable table-fixed" 
-          >
-            <el-table-column type="selection" align="center" width="50" />
-            <el-table-column label="序号" align="center" type="index" width="50px">
-              <template slot-scope="scope">
-                <span v-if="tableObj.pageNum">{{ scope.$index + (tableObj.pageNum-1) * tableObj.pageSize + 1 }}</span>
-                <span v-else>1</span>
-              </template>
-            </el-table-column>
-            <el-table-column label="分日日期/维度" min-width="130px" align="center">
-              <template slot-scope="scope">
-                <span>{{ scope.row.drivername }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column label="混料数据" min-width="130px" align="center">
-              <el-table-column label="理论重量" min-width="130px" align="center">
-                <template slot-scope="scope">
-                  <span>{{ scope.row.drivercode }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column label="实际重量" min-width="130px" align="center">
-                <template slot-scope="scope">
-                  <span>{{ scope.row.drivercode }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column label="误差值" min-width="130px" align="center">
-                <template slot-scope="scope">
-                  <span>{{ scope.row.drivercode }}</span>
-                </template>
-              </el-table-column>
-            </el-table-column>
-
-            <el-table-column label="混料数据" min-width="130px" align="center">
-              <el-table-column label="理论重量" min-width="130px" align="center">
-                <template slot-scope="scope">
-                  <span>{{ scope.row.drivercode }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column label="实际重量" min-width="130px" align="center">
-                <template slot-scope="scope">
-                  <span>{{ scope.row.drivercode }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column label="误差值" min-width="130px" align="center">
-                <template slot-scope="scope">
-                  <span>{{ scope.row.drivercode }}</span>
-                </template>
-              </el-table-column>
-            </el-table-column>
-           
-           
-           
-          </el-table>
-          <pagination v-show="tableObj.total>0" :total="tableObj.total" :page.sync="tableObj.getDataParameters.offset" :limit.sync="tableObj.getDataParameters.pagecount" @pagination="getList" />
-        </div>
+  
+        <ChartTable/>
 
         <div>
           <!-- <div style = "">
@@ -179,10 +114,15 @@
             </el-select>
           </div> -->
           
+        <BarChart v-if = "chartData.chartType == 'bar'"   :chart-data="chartData" />
+        <LineChart v-if = "chartData.chartType == 'line'"   :chart-data="chartData" />
+         <HorizontalBarChart v-if = "chartData.chartType == 'line'"   :chart-data="chartData" />
 
-          <div id="chartLine" style="width:100%;height:385px;" >
+        
 
-          </div>
+          <!-- <div id="chartLine" style="width:100%;height:385px;" >
+
+          </div> -->
         </div>
         
 
@@ -218,7 +158,13 @@
 
 <script>
 import echarts from 'echarts'
- import draggable from 'vuedraggable'
+import draggable from 'vuedraggable'
+
+import ChartTable from '@/componentChart/ChartTable.vue'
+import LineChart from '@/componentChart/LineChart.vue'
+import BarChart from '@/componentChart/BarChart.vue'
+// import HorizontalBarChart from '@/componentChart/BarChart.vue'
+
 
 require('echarts/theme/macarons')
 import { GetDataByName, PostDataByName, failproccess, ExecDataByConfig, checkButtons } from '@/api/common'
@@ -227,7 +173,7 @@ import Pagination from '@/components/Pagination'
 import { MessageBox } from 'element-ui'
 export default {
   name: 'ChartPanel2',
-  components: { Pagination, draggable  },
+  components: { Pagination, draggable , ChartTable ,LineChart,BarChart },
   data() {
     return {
       
@@ -593,21 +539,23 @@ export default {
       },
 
 
-      chartLine:null,
-      chartLine_data:{
-        chartType:'line',
-        xAxisArr: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06', '2019-07', '2019-08', '2019-09', '2019-10', '2019-11', '2019-12'],
-        legendArr: ['数据1', '数据2', '数据3', '数据4', '线条1'],
-        dataArr:[
-          [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
-          [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
-          [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
-          [2, 10, 3, 2, 10, 4, 4, 9, 3, 9, 3, 8],
-          [2, 10, 3, 2, 10, 4, 4, 9, 3, 9, 3, 8]
-        ]
+      chartData:{
+         chartType:null,
+        // xAxisArr: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06', '2019-07', '2019-08', '2019-09', '2019-10', '2019-11', '2019-12'],
+        // legendArr: ['数据1', '数据2', '数据3', '数据4', '线条1'],
+        // dataArr:[
+        //   [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
+        //   [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
+        //   [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
+        //   [2, 10, 3, 2, 10, 4, 4, 9, 3, 9, 3, 8],
+        //   [2, 10, 3, 2, 10, 4, 4, 9, 3, 9, 3, 8]
+        // ]
       },
 
 
+  
+
+
       chartLine_data2:{
         chartType:'pie',
         xAxisArr: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06', '2019-07', '2019-08', '2019-09', '2019-10', '2019-11', '2019-12'],
@@ -1211,25 +1159,67 @@ export default {
       this.chartTypeList = chartTypeList
 
 
-      if(item.type == 'line'){
-        this.chartLine_data.chartType = 'line'
-        this.roadChartLine(this.chartLine_data)
+     if(item.type == 'line'){
+
+        this.chartData = {
+          chartType:'line',
+          xAxisArr: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06', '2019-07', '2019-08', '2019-09', '2019-10', '2019-11', '2019-12'],
+          legendArr: ['数据1', '数据2', '数据3'],
+          dataArr:[
+            [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
+            [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
+            [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
+          ]
+        }
+
       } else if(item.type == 'bar'){
-        this.chartLine_data.chartType = 'bar'
-        this.roadChartLine(this.chartLine_data)
+
+        this.chartData = {
+          chartType:'bar',
+          xAxisArr: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06', '2019-07', '2019-08', '2019-09', '2019-10', '2019-11', '2019-12'],
+          legendArr: ['数据1', '数据2', '数据3'],
+          dataArr:[
+            [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
+            [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
+            [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
+      
+          ]
+        }
+        
       } else if(item.type == 'horizontal_bar'){
-        this.chartLine_data.chartType = 'horizontal_bar'
-         this.roadChartLine(this.chartLine_data)
-      }  else if(item.type == 'pie'){
-        this.chartLine_data2.chartType = 'pie'
-         this.roadChartLine(this.chartLine_data2)
-      }   else if(item.type == 'line_bar'){
-        console.log(1111)
-         this.chartLine_data3.chartType = 'line_bar'
-         console.log(this.chartLine_data3)
-        this.roadChartLine(this.chartLine_data3)
+        this.chartData = {
+          chartType:'horizontal_bar',
+          xAxisArr: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06', '2019-07', '2019-08', '2019-09', '2019-10', '2019-11', '2019-12'],
+          legendArr: ['数据1', '数据2', '数据3'],
+          dataArr:[
+            [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
+            [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
+            [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
+      
+          ]
+        }
+      }  
+
+
+      // if(item.type == 'line'){
+      //   this.chartLine_data.chartType = 'line'
+      //   this.roadChartLine(this.chartLine_data)
+      // } else if(item.type == 'bar'){
+      //   this.chartLine_data.chartType = 'bar'
+      //   this.roadChartLine(this.chartLine_data)
+      // } else if(item.type == 'horizontal_bar'){
+      //   this.chartLine_data.chartType = 'horizontal_bar'
+      //    this.roadChartLine(this.chartLine_data)
+      // }  else if(item.type == 'pie'){
+      //   this.chartLine_data2.chartType = 'pie'
+      //    this.roadChartLine(this.chartLine_data2)
+      // }   else if(item.type == 'line_bar'){
+      //   console.log(1111)
+      //    this.chartLine_data3.chartType = 'line_bar'
+      //    console.log(this.chartLine_data3)
+      //   this.roadChartLine(this.chartLine_data3)
         
-      } 
+      // } 
       
     }