tmr-admin/src/views/systemManagement/customboard2/ChartPanel2/index.vue

<template>
  <div class="app-container">

    <!-- <el-dialog
        v-dialogDrag
        ref="dialog__wrapper">
        <div class="dialog-body">
            
            <div 
                class="line"
                v-dialogDrag Width="$refs.dialog__wrapper">1111111111111111111</div>
        </div>
    </el-dialog> -->
    

    <el-row :gutter="20">
      <el-col :span="18">


<!-- <draggable v-model="arr1" group="itxst"   animation="300" :group="{name: 'dashboard',pull: true}">
                    <transition-group>
                        <div style = "width:300px;height:20px;border:1px soild #333" :class="item.id==1?'item forbid':'item'" v-for="item in arr1"  key="1">{{item.name}}</div>
                    </transition-group>
                </draggable> -->



        <div class="search">
          
          <el-select v-model="tableObj.getDataParameters.parammaps.dateType" placeholder="查询日期" @change="change_date_type">
            <el-option  v-for="item in dateTypeList" :key="item.id" :label="item.name" :value="item.id" ></el-option>
          </el-select>
      
          <el-select v-model="tableObj.getDataParameters.parammaps.type" filterable placeholder="数据类型" class="filter-item" style="width: 120px;" clearable>
            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
          <el-select v-model="tableObj.getDataParameters.parammaps.dimension" @change="change_dimension" filterable placeholder="维度" class="filter-item" style="width: 120px;"  >
            <el-option v-for="item in dimensionList"   :key="item.id" :label="item.name" :value="item.id" />
          </el-select> 

          <!-- <el-select v-model="tableObj.getDataParameters.parammaps.mixture" multiple placeholder="混料数据">
            <el-option  v-for="item in mixtureList" :key="item.id" :label="item.name" :value="item.id" ></el-option>
          </el-select>

          <el-select v-model="tableObj.getDataParameters.parammaps.spread" multiple placeholder="撒料数据">
            <el-option  v-for="item in spreadList" :key="item.id" :label="item.name" :value="item.id" ></el-option>
          </el-select> -->

 
          <el-cascader style = "width:400px;" ref = "cascader1" v-model="tableObj.getDataParameters.parammaps.mixture" :options="mixtureList" :props = "{ multiple: true, emitPath: false,}"   :show-all-levels="false" @change="change_cascader1"></el-cascader>


          <el-cascader style = "width:400px;" ref = "cascader2" v-model="tableObj.getDataParameters.parammaps.spread" :options="spreadList" :props = "{ multiple: true, emitPath: false,}"   :show-all-levels="false" @change="change_cascader2"></el-cascader>
 

 

          <el-button class="successBorder" @click="form_search">查询</el-button>
          <el-button class="successBorder" @click="form_clear">重置</el-button>
        </div>
        <div class="operation">
          <el-button class="success" icon="el-icon-plus" @click="form_add_screening">添加筛选条件</el-button>
          <el-button   class="danger" icon="el-icon-delete" @click="form_clear_screening">清空筛选条件</el-button>
        </div>

        <div v-if="screeningVisible">
           <div class="search">
     
        
            <el-select v-model="screeningObj.screeningCondition" filterable placeholder="筛选条件" class="filter-item" style="width: 120px;" clearable  @change="change_screening">
              <el-option v-for="item in screeningList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>

            <el-input v-model="screeningObj.screeningField" placeholder="筛选字段" style="width: 180px;" class="filter-item" clearable />
 

            <el-select v-model="screeningObj.screeningField" placeholder="筛选字段">
              <el-option  v-for="item in screeningFieldList1" :key="item.id" :label="item.name" :value="item.id" ></el-option>
            </el-select>

            <el-select v-model="screeningObj.screeningField" placeholder="筛选字段">
              <el-option  v-for="item in screeningFieldList2" :key="item.id" :label="item.name" :value="item.id" ></el-option>
            </el-select>


            <el-date-picker v-model="screeningObj.inputDatetime" class="inputDatetime filter-item" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 250px;" />
        



            <el-button class="successBorder" @click="form_search_screening">查询</el-button>
             <el-button class="successBorder" @click="form_cancel_screening">重置</el-button> 
          </div>

          <div>
            <el-row :gutter="20">
                <el-col :span="6"  v-for = "(item,index) in screeningArr">
                  <span style="font-size:14px;color:#555">{{index+1}}、条件：{{item.txt}}</span>
                  
                </el-col>
            </el-row>
                        
          </div>
      
        </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>

        <div>
          <!-- <div style = "">
            <el-select v-model="tableObj.getDataParameters.parammaps.dateType" multiple placeholder="维度">
              <el-option  v-for="item in fieldTypeList" :key="item.id" :label="item.name" :value="item.id" ></el-option>
            </el-select>
          </div> -->
          

          <div id="chartLine" style="width:100%;height:385px;" >

          </div>
        </div>
        

      </el-col>
      <el-col :span="6">
        
          <div  class="chart-style-panel">
            <el-form label-position="top" size="mini">
              <el-form-item  label="图表类型">
                <div class="chart-type-list">
             

                  <span  @click="switch_chart_type(item)" v-for="item in chartTypeList" style = "display:inline-block;height:30px;width:30px;margin-right:10px;margin-bottom:10px">
                    <el-tooltip  :content="item.desc" placement="top">
                      <svg-icon class="icon"  style="height:20px;width:20px" :icon-class="item.isUse? item.icon : (item.icon + '_disabled')" />   
                    </el-tooltip>
                  </span>
 

                </div>
              </el-form-item>
            </el-form>
          </div>

      </el-col>
    </el-row>


    
  </div>

</template>

<script>
import echarts from 'echarts'
 import draggable from 'vuedraggable'

require('echarts/theme/macarons')
import { GetDataByName, PostDataByName, failproccess, ExecDataByConfig, checkButtons } from '@/api/common'
import Cookies from 'js-cookie'
import Pagination from '@/components/Pagination'
import { MessageBox } from 'element-ui'
export default {
  name: 'ChartPanel2',
  components: { Pagination, draggable  },
  data() {
    return {
      
      chartType:'line',
      chartTypeList:[
          // {type:'table', desc:"表格：任意维度数据" ,icon:'chart_table',isUse:true,id:0}, 
          {type:'line', desc:"折线图：任意维度数据" ,icon:'chart_line',isUse:false,id:0}, 
          {type:'bar', desc:"柱状图：任意维度数据" ,icon:'chart_bar',isUse:false,id:1}, 
          {type:'horizontal_bar', desc:"条形图：任意维度数据" ,icon:'horizontal_bar',isUse:false,id:2}, 
          {type:'pie', desc:"饼图：任意维度数据" ,icon:'chart_pie',isUse:false,id:3}, 
          {type:'line_bar', desc:"线柱图：任意维度数据" ,icon:'linebar_chart',isUse:false,id:4}, 
      ],
  
 
 
      isRoleEdit: [],

      dateTypeList: [
        { id: '汇总', name: '汇总' }, 
        { id: '分日', name: '分日' }
      ],
      typeList: [
        { id: '车次', name: '车次' }, 
        { id: '栏舍', name: '栏舍' }
      ],

      dimensionList: [
        { id: '栏舍', name: '栏舍' }, 
        { id: '配方', name: '配方' }, 
        { id: '班次', name: '班次' }, 
        { id: '车次', name: '车次' }, 
        { id: 'TMR', name: 'TMR' }, 
        { id: '牲畜大类', name: '牲畜大类' }, 
        { id: '牲畜小类', name: '牲畜小类' }
      ],


      //混料数据
      mixtureList: [],
      //撒料数据
      spreadList: [],

      //车次 - 数据1 - 栏舍 - 理论重量、实际重量、误差值、允许误差数、准确率（平均）、是否超出误差
      mixtureSpreadArr1: [
        { 
          value: '理论重量',label: '理论重量',
          children: [
            { value: '理论重量-合计', label: '理论重量-合计'}, 
            { value: '理论重量-平均', label: '理论重量-平均'}, 
            { value: '理论重量-最大值', label: '理论重量-最大值'}, 
            { value: '理论重量-最小值', label: '理论重量-最小值'}, 
            { value: '理论重量-标准差', label: '理论重量-标准差'}, 
            { value: '理论重量-变异系数', label: '理论重量-变异系数'}, 
          ]
        },
        {  
          value: '实际重量',label: '实际重量',
          children: [
            { value: '实际重量-合计', label: '实际重量-合计'}, 
            { value: '实际重量-平均', label: '实际重量-平均'}, 
            { value: '实际重量-最大值', label: '实际重量-最大值'}, 
            { value: '实际重量-最小值', label: '实际重量-最小值'}, 
            { value: '实际重量-标准差', label: '实际重量-标准差'}, 
            { value: '实际重量-变异系数', label: '实际重量-变异系数'}, 
          ]
        },
        {  
          value: '误差值',label: '误差值',
          children: [
            { value: '误差值-合计', label: '误差值-合计'}, 
            { value: '误差值-平均', label: '误差值-平均'}, 
            { value: '误差值-最大值', label: '误差值-最大值'}, 
            { value: '误差值-最小值', label: '误差值-最小值'}, 
            { value: '误差值-标准差', label: '误差值-标准差'}, 
            { value: '误差值-变异系数', label: '误差值-变异系数'}, 
          ]
        },
        {  
          value: '允许误差数',label: '允许误差数',
          children: [
            { value: '允许误差数-合计', label: '允许误差数-合计'}, 
            { value: '允许误差数-平均', label: '允许误差数-平均'}, 
            { value: '允许误差数-最大值', label: '允许误差数-最大值'}, 
            { value: '允许误差数-最小值', label: '允许误差数-最小值'}, 
            { value: '允许误差数-标准差', label: '允许误差数-标准差'}, 
            { value: '允许误差数-变异系数', label: '允许误差数-变异系数'}, 
          ]
        },
        { value: '准确率-平均',label: '准确率-平均'},
        { value: '是否超出误差',label: '是否超出误差'}
      ],
      //车次 - 数据2 - 配方 - 理论重量、实际重量、误差值、准确率（平均）
      mixtureSpreadArr2: [
        { 
          value: '理论重量',label: '理论重量',
          children: [
            { value: '理论重量-合计', label: '理论重量-合计'}, 
            { value: '理论重量-平均', label: '理论重量-平均'}, 
            { value: '理论重量-最大值', label: '理论重量-最大值'}, 
            { value: '理论重量-最小值', label: '理论重量-最小值'}, 
            { value: '理论重量-标准差', label: '理论重量-标准差'}, 
            { value: '理论重量-变异系数', label: '理论重量-变异系数'}, 
          ]
        },
        {  
          value: '实际重量',label: '实际重量',
          children: [
            { value: '实际重量-合计', label: '实际重量-合计'}, 
            { value: '实际重量-平均', label: '实际重量-平均'}, 
            { value: '实际重量-最大值', label: '实际重量-最大值'}, 
            { value: '实际重量-最小值', label: '实际重量-最小值'}, 
            { value: '实际重量-标准差', label: '实际重量-标准差'}, 
            { value: '实际重量-变异系数', label: '实际重量-变异系数'}, 
          ]
        },
        {  
          value: '误差值',label: '误差值',
          children: [
            { value: '误差值-合计', label: '误差值-合计'}, 
            { value: '误差值-平均', label: '误差值-平均'}, 
            { value: '误差值-最大值', label: '误差值-最大值'}, 
            { value: '误差值-最小值', label: '误差值-最小值'}, 
            { value: '误差值-标准差', label: '误差值-标准差'}, 
            { value: '误差值-变异系数', label: '误差值-变异系数'}, 
          ]
        },
        { value: '准确率-平均',label: '准确率-平均'} 
      ],
      //车次 - 数据3 - 班次 - 理论重量、实际重量、误差值、准确率（平均）、开始重量、结束重量
      mixtureSpreadArr3: [
        { 
          value: '理论重量',label: '理论重量',
          children: [
            { value: '理论重量-合计', label: '理论重量-合计'}, 
            { value: '理论重量-平均', label: '理论重量-平均'}, 
            { value: '理论重量-最大值', label: '理论重量-最大值'}, 
            { value: '理论重量-最小值', label: '理论重量-最小值'}, 
            { value: '理论重量-标准差', label: '理论重量-标准差'}, 
            { value: '理论重量-变异系数', label: '理论重量-变异系数'}, 
          ]
        },
        {  
          value: '实际重量',label: '实际重量',
          children: [
            { value: '实际重量-合计', label: '实际重量-合计'}, 
            { value: '实际重量-平均', label: '实际重量-平均'}, 
            { value: '实际重量-最大值', label: '实际重量-最大值'}, 
            { value: '实际重量-最小值', label: '实际重量-最小值'}, 
            { value: '实际重量-标准差', label: '实际重量-标准差'}, 
            { value: '实际重量-变异系数', label: '实际重量-变异系数'}, 
          ]
        },
        {  
          value: '误差值',label: '误差值',
          children: [
            { value: '误差值-合计', label: '误差值-合计'}, 
            { value: '误差值-平均', label: '误差值-平均'}, 
            { value: '误差值-最大值', label: '误差值-最大值'}, 
            { value: '误差值-最小值', label: '误差值-最小值'}, 
            { value: '误差值-标准差', label: '误差值-标准差'}, 
            { value: '误差值-变异系数', label: '误差值-变异系数'}, 
          ]
        },
        { value: '准确率-平均',label: '准确率-平均'},
        {  
          value: '开始重量',label: '开始重量',
          children: [
            { value: '开始重量-合计', label: '开始重量-合计'}, 
            { value: '开始重量-平均', label: '开始重量-平均'}, 
            { value: '开始重量-最大值', label: '开始重量-最大值'}, 
            { value: '开始重量-最小值', label: '开始重量-最小值'}, 
            { value: '开始重量-标准差', label: '开始重量-标准差'}, 
            { value: '开始重量-变异系数', label: '开始重量-变异系数'}, 
          ]
        },
        {  
          value: '结束重量',label: '结束重量',
          children: [
            { value: '结束重量-合计', label: '结束重量-合计'}, 
            { value: '结束重量-平均', label: '结束重量-平均'}, 
            { value: '结束重量-最大值', label: '结束重量-最大值'}, 
            { value: '结束重量-最小值', label: '结束重量-最小值'}, 
            { value: '结束重量-标准差', label: '结束重量-标准差'}, 
            { value: '结束重量-变异系数', label: '结束重量-变异系数'}, 
          ]
        }
      ],
      //车次 - 数据4 - 车次 - 理论重量、实际重量、误差值、准确率（平均）、跳转方式、开始重量、结束重量、计划时间、开始时间、结束时间、过程时间
      mixtureSpreadArr4: [
        { 
          value: '理论重量',label: '理论重量',
          children: [
            { value: '理论重量-合计', label: '理论重量-合计'}, 
            { value: '理论重量-平均', label: '理论重量-平均'}, 
            { value: '理论重量-最大值', label: '理论重量-最大值'}, 
            { value: '理论重量-最小值', label: '理论重量-最小值'}, 
            { value: '理论重量-标准差', label: '理论重量-标准差'}, 
            { value: '理论重量-变异系数', label: '理论重量-变异系数'}, 
          ]
        },
        {  
          value: '实际重量',label: '实际重量',
          children: [
            { value: '实际重量-合计', label: '实际重量-合计'}, 
            { value: '实际重量-平均', label: '实际重量-平均'}, 
            { value: '实际重量-最大值', label: '实际重量-最大值'}, 
            { value: '实际重量-最小值', label: '实际重量-最小值'}, 
            { value: '实际重量-标准差', label: '实际重量-标准差'}, 
            { value: '实际重量-变异系数', label: '实际重量-变异系数'}, 
          ]
        },
        {  
          value: '误差值',label: '误差值',
          children: [
            { value: '误差值-合计', label: '误差值-合计'}, 
            { value: '误差值-平均', label: '误差值-平均'}, 
            { value: '误差值-最大值', label: '误差值-最大值'}, 
            { value: '误差值-最小值', label: '误差值-最小值'}, 
            { value: '误差值-标准差', label: '误差值-标准差'}, 
            { value: '误差值-变异系数', label: '误差值-变异系数'}, 
          ]
        },
        { value: '准确率-平均',label: '准确率-平均'},
        { value: '跳转方式',label: '跳转方式'},
        {  
          value: '开始重量',label: '开始重量',
          children: [
            { value: '开始重量-合计', label: '开始重量-合计'}, 
            { value: '开始重量-平均', label: '开始重量-平均'}, 
            { value: '开始重量-最大值', label: '开始重量-最大值'}, 
            { value: '开始重量-最小值', label: '开始重量-最小值'}, 
            { value: '开始重量-标准差', label: '开始重量-标准差'}, 
            { value: '开始重量-变异系数', label: '开始重量-变异系数'}, 
          ]
        },
        {  
          value: '结束重量',label: '结束重量',
          children: [
            { value: '结束重量-合计', label: '结束重量-合计'}, 
            { value: '结束重量-平均', label: '结束重量-平均'}, 
            { value: '结束重量-最大值', label: '结束重量-最大值'}, 
            { value: '结束重量-最小值', label: '结束重量-最小值'}, 
            { value: '结束重量-标准差', label: '结束重量-标准差'}, 
            { value: '结束重量-变异系数', label: '结束重量-变异系数'}, 
          ]
        },
        { value: '计划时间',label: '计划时间'},
        { value: '开始时间',label: '开始时间'},
        { value: '结束时间',label: '结束时间'},
        { value: '过程时间',label: '过程时间'},
      ],
      //车次 - 数据5 - 牲畜大类 - 理论重量、实际重量、误差值、准确率（平均）
      //车次 - 数据5 - 牲畜小类 - 理论重量、实际重量、误差值、准确率（平均）
      //车次 - 数据5 - TMR - 理论重量、实际重量、误差值、准确率（平均）
      mixtureSpreadArr5: [
        { 
          value: '理论重量',label: '理论重量',
          children: [
            { value: '理论重量-合计', label: '理论重量-合计'}, 
            { value: '理论重量-平均', label: '理论重量-平均'}, 
            { value: '理论重量-最大值', label: '理论重量-最大值'}, 
            { value: '理论重量-最小值', label: '理论重量-最小值'}, 
            { value: '理论重量-标准差', label: '理论重量-标准差'}, 
            { value: '理论重量-变异系数', label: '理论重量-变异系数'}, 
          ]
        },
        {  
          value: '实际重量',label: '实际重量',
          children: [
            { value: '实际重量-合计', label: '实际重量-合计'}, 
            { value: '实际重量-平均', label: '实际重量-平均'}, 
            { value: '实际重量-最大值', label: '实际重量-最大值'}, 
            { value: '实际重量-最小值', label: '实际重量-最小值'}, 
            { value: '实际重量-标准差', label: '实际重量-标准差'}, 
            { value: '实际重量-变异系数', label: '实际重量-变异系数'}, 
          ]
        },
        {  
          value: '误差值',label: '误差值',
          children: [
            { value: '误差值-合计', label: '误差值-合计'}, 
            { value: '误差值-平均', label: '误差值-平均'}, 
            { value: '误差值-最大值', label: '误差值-最大值'}, 
            { value: '误差值-最小值', label: '误差值-最小值'}, 
            { value: '误差值-标准差', label: '误差值-标准差'}, 
            { value: '误差值-变异系数', label: '误差值-变异系数'}, 
          ]
        },
        { value: '准确率-平均',label: '准确率-平均'}
      ],

      mixScreenArr:[],
      spreadScreenArr:[],

   
      screeningVisible:true,
      // 筛选条件
      screeningList: [
        // { id: '配方名称', name: '配方名称' }, 
        // { id: 'TMR名称', name: 'TMR名称' }, 
        // { id: '班次', name: '班次' }, 
        // { id: '车次计划', name: '车次计划' }, 
      ],

      // 筛选条件 - 参数
      screeningObj:{
            screeningCondition: '',
            screeningField: '',

            inputDatetime: '',
             startTime: '',
             stopTime: '',
      },
      // 筛选条件 - 参数
      screeningArr:[
         
        
         
      ],
      

      screeningFieldList1:[
        { id: '是', name: '是' }, 
        { id: '否', name: '否' }
      ],
      screeningFieldList2:[
        { id: '自动', name: '自动' }, 
        { id: '手动', name: '手动' }
      ],


      // 筛选条件 - 结果


 
      fieldTypeList: [
        { id: '配方A', name: '配方A' }, 
        { id: '配方B', name: '配方B' }
      ],


      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: [],
        total: 0,
        listLoading: false,
        temp: {}
      },


      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]
        ]
      },


      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'],
        legendArr: ['数据1', '数据2', '数据3', '数据4', '线条1'],
        dataArr:[1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
      
      },


       chartLine_data3:{
        chartType:'line_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'],
        legendArr1: ['数据1', '数据2', '数据3', '数据4' ],
        dataArr1:[
          [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],
        ],
         legendArr2: ['数据5',  '线条1'],
        dataArr2:[
          [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
          [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
        ]
      },

      requestParam: {},
      isokDisable: false,
      selectList: [],
      rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
      cellStyle: { padding: 0 + 'px' }

    }
  },

  created() {
    // console.log(VUE_APP_BASE_pageCount)
    // console.log(this.VUE_APP_BASE_pageCount, 'this.VUE_APP_BASE_pageCount')
    // this.getList()
    // this.getButtons()

    
  },

  methods: {

    

    getButtons() {
      const Edit = 'Driver'
      const isRoleEdit = checkButtons(JSON.parse(sessionStorage.getItem('buttons')), Edit)
      this.isRoleEdit = isRoleEdit
    },
    getList() {
      this.tableObj.listLoading = true
      GetDataByName(this.tableObj.getDataParameters).then(response => {
        console.log('table数据', response.data.list)
        if (response.data.list !== null) {
          for (let i = 0; i < response.data.list.length; i++) {
            this.$set(response.data.list[i], 'Edit', false) // 编辑
            this.$set(response.data.list[i], 'NoEdit', true) // 不可编辑/输入
            this.$set(response.data.list[i], 'isCreate', false) // 新增操作
            this.$set(response.data.list[i], 'isUpdate', true) // 编辑操作
            this.$set(response.data.list[i], 'isUpdateSave', false) // 编辑保存
          }
          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)
      })
    },
 

    form_search() {
      console.log('点击了查询 - 表单 tableObj', this.tableObj.getDataParameters.parammaps)
      // this.tableObj.getDataParameters.offset = 1
      // this.getList()
      console.log('点击了查询 - this.chartLine_data', this.chartLine_data)

 
      this.roadChartLine(this.chartLine_data)
    },
    form_clear() {
      console.log('点击了重置')
      // this.tableObj.getDataParameters.parammaps.drivername = ''
      // this.tableObj.getDataParameters.parammaps.enable = ''
      // this.tableObj.getDataParameters.parammaps.drivercode = ''
      // this.tableObj.getDataParameters.offset = 1
      //this.getList() 
    },

  //查询 - 汇总/分日
    change_date_type(value) {
      console.log('查询日期', value)
     
  
    },



    //维度
    change_dimension(value) {
      console.log('维度', value)
      this.tableObj.getDataParameters.parammaps.mixture = []
      this.tableObj.getDataParameters.parammaps.spread = []
      if(value == "栏舍"){
        this.mixtureList = this.mixtureSpreadArr1
        this.spreadList = this.mixtureSpreadArr1
      } else if(value == "配方"){
        this.mixtureList = this.mixtureSpreadArr2
        this.spreadList = this.mixtureSpreadArr2
      } else if(value == "班次"){
        this.mixtureList = this.mixtureSpreadArr3
        this.spreadList = this.mixtureSpreadArr3
      } else if(value == "车次"){
        this.mixtureList = this.mixtureSpreadArr4
        this.spreadList = this.mixtureSpreadArr4
      } else if(value == "牲畜大类" || value == "牲畜小类"  || value == "TMR"){
        this.mixtureList = this.mixtureSpreadArr5
        this.spreadList = this.mixtureSpreadArr5
      }
  
    },

    //级联选择 - 混料数据
    change_cascader1(value) {
      console.log('级联选择 - 混料数据', value)
      var allNode = this.$refs['cascader1'].getCheckedNodes()

      console.log("级联选择 - 混料数据的Node", allNode)
      var mixScreenArr = []

 
        value.forEach(function(i){
          allNode.forEach(function(j){
            if(i == j.value){
              mixScreenArr.push({name: "混料-"+j.label, id:j.value})
            }
          })
        })

      
      // allNode.forEach(function(item){
      //   if(item.children.length == 0){
      //     mixScreenArr.push({name: "混料-"+item.label, id:item.value})
      //   }
      // })

      
      var spreadScreenArr = this.spreadScreenArr
      this.mixScreenArr = mixScreenArr
      this.screeningList = mixScreenArr.concat(spreadScreenArr)

    },

    //级联选择 - 撒料数据
    change_cascader2(value) {
      console.log('级联选择 - 撒料数据', value)
      var allNode2 = this.$refs['cascader2'].getCheckedNodes()
 
      console.log("级联选择 - 撒料数据的Node", allNode2)

      var spreadScreenArr = []

       value.forEach(function(i){
          allNode2.forEach(function(j){
            if(i == j.value){
              spreadScreenArr.push({name: "撒料-"+j.label, id:j.value})
            }
          })
        })
      // allNode2.forEach(function(item){
      //   if(item.children.length == 0){
      //     spreadScreenArr.push({name: "撒料-"+item.label, id:item.value})
      //   }
      // })
 

      var mixScreenArr = this.mixScreenArr
      this.spreadScreenArr = spreadScreenArr
      this.screeningList = mixScreenArr.concat(spreadScreenArr)
    },
    
    change_screening(value) {
      console.log('筛选', value)
      console.log('筛选数组', this.screeningList)

    },


    handleCreate() {
      // this.resetRequestParam()
      // this.dialogStatus = 'create'
      // this.parent = this.parentmenu
      // this.screeningVisible = true
      // this.$nextTick(() => {
      //   this.$refs['dataForm'].clearValidate()
      //   this.$refs.name.focus()
      // })
    },
   
    

    form_search_screening() {
      console.log('点击了筛选条件 - 确认 - screeningObj',this.screeningObj)
      var screeningCondition = this.screeningObj.screeningCondition
      var screeningField = this.screeningObj.screeningField
      var txt = { txt:    screeningCondition + screeningField}

      console.log(txt)
      this.screeningArr.push(txt)
 
      


      
    },


    form_add_screening() {
      console.log('点击了查询')
      this.tableObj.getDataParameters.offset = 1
      this.getList()
    },

    form_clear_screening() {
      console.log('点击了查询')
      this.tableObj.getDataParameters.offset = 1
      this.getList()
    },

    form_cancel_screening() {
      console.log('点击了查询')
      this.tableObj.getDataParameters.offset = 1
      this.getList()
    },



    roadChartLine(chartLine_data) {
      console.log(1111111111)
      if (this.chartLine != null) {
        this.chartLine.dispose()
      }
      this.chartLine = echarts.init(document.getElementById('chartLine'))
      var option_line = {
        title: { text: 'Stacked Line' },
        tooltip: { trigger: 'axis' },
        legend: {   data:chartLine_data.legendArr, right: 10, show: true, type: 'scroll' },
        grid: { top: '15%', left: '8%', right: '8%', containLabel: true },
        xAxis: [{ type: 'category',data:chartLine_data.xAxisArr }],
        yAxis: [
          {type: 'value', name: 'kg'},
           
        ],
         series: function (e) {
            var serie = [];
            for (var i = 0; i < chartLine_data.xAxisArr.length; i++) {
              console.log(i)
               
                var item = {
                  name: chartLine_data.legendArr[i],
                  data: chartLine_data.dataArr[i],
                  type: 'line',
                  emphasis: { label: { show: true, position: 'inside' } },
                }
             

              serie.push(item);
            }


            console.log(serie)

            return serie;
          }()
        // series: [
        //           {
        //       name: 'Email',
        //       type: 'line',
        //       stack: 'Total',
        //       data: [120, 132, 101, 134, 90, 230, 210]
        //     },
        //     {
        //       name: 'Union Ads',
        //       type: 'line',
        //       stack: 'Total',
        //       data: [220, 182, 191, 234, 290, 330, 310]
        //     },
        //     {
        //       name: 'Video Ads',
        //       type: 'line',
        //       stack: 'Total',
        //       data: [150, 232, 201, 154, 190, 330, 410]
        //     },
        //     {
        //       name: 'Direct',
        //       type: 'line',
        //       stack: 'Total',
        //       data: [320, 332, 301, 334, 390, 330, 320]
        //     },
        //     {
        //       name: 'Search Engine',
        //       type: 'line',
        //       stack: 'Total',
        //       data: [820, 932, 901, 934, 1290, 1330, 1320]
        //     }
        // ]
      }
      var option_bar = {
        title: { text: 'Stacked Line' },
        tooltip: { trigger: 'axis' },
        legend: {   data:chartLine_data.legendArr, right: 10, show: true, type: 'scroll' },
        grid: { top: '15%', left: '8%', right: '8%', containLabel: true },
        xAxis: [{ type: 'category',data:chartLine_data.xAxisArr }],
        yAxis: [
          {type: 'value', name: 'kg'},
           
        ],
         series: function (e) {
            var serie = [];
            for (var i = 0; i < chartLine_data.xAxisArr.length; i++) {
              console.log(i)
               
                var item = {
                  name: chartLine_data.legendArr[i],
                  data: chartLine_data.dataArr[i],
                  type: 'bar',
                  emphasis: { label: { show: true, position: 'inside' } },
                }
             

              serie.push(item);
            }


            console.log(serie)

            return serie;
          }()
      
      }


       

      var option_horizontal_bar = {
        title: { text: 'Stacked Line' },
        tooltip: { trigger: 'axis' },
        legend: {   data:chartLine_data.legendArr, right: 10, show: true, type: 'scroll' },
        grid: { top: '15%', left: '8%', right: '8%', containLabel: true },
        xAxis: {type: 'value', name: 'kg'},
        yAxis: [
          { type: 'category',data:chartLine_data.xAxisArr }
           
        ],
         series: function (e) {
            var serie = [];
            for (var i = 0; i < chartLine_data.xAxisArr.length; i++) {
              console.log(i)
               
                var item = {
                  name: chartLine_data.legendArr[i],
                  data: chartLine_data.dataArr[i],
                  type: 'bar',
                  emphasis: { label: { show: true, position: 'inside' } },
                }
             

              serie.push(item);
            }


            console.log(serie)

            return serie;
          }()
      
      }


      var option_pie = {
        title: { text: 'Stacked Line' },
        tooltip: { trigger: 'axis' },
        legend: {   data:chartLine_data.legendArr, right: 10, show: true,  },
        grid: { top: '15%', left: '8%', right: '8%', containLabel: true },
        xAxis: [{ type: 'category',data:chartLine_data.xAxisArr }],
        yAxis: [
          {type: 'value', name: 'kg'},
           
        ],
         series: function (e) {
            var serie = [
               {
                  name: 'Access From',
                  type: 'pie',
                  radius: '50%',
                  data: [
                    // { value: 1048, name: 'Search Engine' },
                    // { value: 735, name: 'Direct' },
                    // { value: 580, name: 'Email' },
                    // { value: 484, name: 'Union Ads' },
                    // { value: 300, name: 'Video Ads' }
                  ],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ];
            for (var i = 0; i < chartLine_data.xAxisArr.length; i++) {
              console.log(i)
               
                var item = {
                  name: chartLine_data.legendArr[i],
                  value: chartLine_data.dataArr[i],
                
                }
             

              serie[0].data.push(item);
            }


            console.log(serie)

            return serie;
          }()
      
      }
      

      // var option_line_bar = {

        
      //   title: { text: 'Stacked Line' },
      //   tooltip: { trigger: 'axis' },
      //   legend: {   data: chartLine_data.legendArr1.concat( chartLine_data.legendArr2)  , right: 10, show: true, type: 'scroll' },
      //   grid: { top: '15%', left: '8%', right: '8%', containLabel: true },
      //   xAxis: [{ type: 'category',data:chartLine_data.xAxisArr }],
      //   yAxis: [
      //     {type: 'value', name: 'kg'},
           
      //   ],
      //    series: function (e) {
      //       var serie = [];
      //       for (var i = 0; i < chartLine_data.xAxisArr.length; i++) {
           
      //           var item = {
      //             name: chartLine_data.legendArr1[i],
      //             data: chartLine_data.dataArr1[i],
      //             type: 'line',
      //             emphasis: { label: { show: true, position: 'inside' } },
      //           }
 
             

      //         serie.push(item);
      //       }


      //        for (var i = 0; i < chartLine_data.xAxisArr.length; i++) {
             
      //           var item = {
      //             name: chartLine_data.legendArr2[i],
      //             data: chartLine_data.dataArr2[i],
      //             type: 'bar',
      //             emphasis: { label: { show: true, position: 'inside' } },
      //           }
             

      //         serie.push(item);
      //       }



      //       console.log(serie)

      //       return serie;
      //     }()
      
      // }

      var option_line_bar = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['Evaporation', 'Precipitation', 'Temperature']
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: 'Precipitation',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value} ml'
            }
          },
          {
            type: 'value',
            name: 'Temperature',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: '{value} °C'
            }
          }
        ],
        series: [
          {
            name: 'Evaporation',
            type: 'bar',
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ]
          },
          {
            name: 'Precipitation',
            type: 'bar',
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
            ]
          },
          {
            name: 'Temperature',
            type: 'line',
            yAxisIndex: 1,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          }
        ]
      };
     


      if(chartLine_data.chartType == 'line'){
        this.chartLine.setOption(option_line)
      } else if(chartLine_data.chartType == 'bar'){
         this.chartLine.setOption(option_bar)
      } else if(chartLine_data.chartType == 'horizontal_bar'){
         this.chartLine.setOption(option_horizontal_bar)
      } else if(chartLine_data.chartType == 'pie'){
         this.chartLine.setOption(option_pie)
      }  else if(chartLine_data.chartType == 'line_bar'){
         this.chartLine.setOption(option_line_bar)
      } 

       
      
      window.onresize = function() {
        this.chartLine.resize()
      }
    },

    //切换图表类型
    switch_chart_type(item){
      console.log(item)
      console.log(this.chartTypeList)
      var chartTypeList = this.chartTypeList
      chartTypeList.forEach(function(i){
        i.isUse = false
      })
      chartTypeList[item.id].isUse = true

      this.chartType = item.type
      this.chartTypeList = chartTypeList


      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)
        
      } 
      
    }

  }
}
</script>
<style lang="scss" scoped>
  .search{margin-top:10px;}
  
 </style>