tmr-admin/.svn/pristine/56/56371222161d10530003e1048f465312bd1b86bc.svn-base

<template>
  <div class="dashboard-editor-container">
    <div style="background: #F4F4F4;height: 10px;" />
    <div v-if="news==1" class="news"><b>消息提醒:</b>撒料计划未分配完善，请及时进行计划分配</div>
    <div v-if="news==2" class="news"><b>消息提醒:</b>预混计划未分配完善，请及时进行计划分配</div>
    <div v-if="news==3" class="news"><b>消息提醒:</b>剩料计划未分配完善，请及时进行计划分配</div>

    <div class="bottom">
      <h4>2020-07-10</h4>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content one">
            <div class="Left">
              <i class="iconfont icon-shuaxin" />
            </div>
            <div class="Right">
              <span>昨日混料准确率：</span>80%<br>
              <span>近30天混料准确率：</span>90%
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content two">
            <div class="Left">
              <i class="iconfont icon-zhunqueshuai2" />
            </div>
            <div class="Right">
              <span>昨日撒料准确率：</span>80%<br>
              <span>近30天撒料准确率：</span>90%
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content three">
            <div class="Left">
              <i class="iconfont icon-zhinengsiwei" />
            </div>
            <div class="Right">
              <span>昨日撒料正确率：</span>80%<br>
              <span>近30天撒料正确率：</span>90%
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content four">
            <div class="Left">
              <i class="iconfont icon-siliaotoufangjilu" />
            </div>
            <div class="Right">
              <span>昨日撒料偏差：</span>80 min<br>
              <span>近30天撒料偏差：</span>90 min
            </div>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="6">
          <div class="grid-content" style="height:500px;background: #fff;">

            <div style="height: 250px; border-bottom: 1px solid #000;">
              <b style="padding-left: 10px;line-height: 50px">今日计划统计</b><br>
              <div style="text-align: center;">
                <b style="padding-right: 10px;">完成车次：15</b>
                <b>计划车次：20</b>
              </div>
              <div id="row2chartLine1" style="height: 150px;" />
            </div>
            <div style="height: 250px;">
              <div style="text-align: center;padding-top:50px;">
                <b style="padding-right: 10px;">完成重量：15</b>
                <b>计划重量：20</b>
              </div>
              <div id="row2chartLine2" style="height: 150px;" />
            </div>
          </div>
        </el-col>
        <el-col :span="18">
          <div class="grid-content" style="height:500px;">
            <div style="height:350px;">
              <div style="font-size:14px;color:#666;margin:0 auto;position: relative;">
                <span style="line-height:30px;position:absolute;right:190px"><i class="el-icon-caret-top" style="color:#c23531;line-height:30px;font-size:30px;" /><b style="line-height:32px;">开始重量</b></span>
                <span style="line-height:30px;position:absolute;right:100px"><i class="el-icon-caret-top" style="color:#2f4554;line-height:30px;font-size:30px;" /><b style="line-height:32px;">结束重量</b></span>
              </div>
              <div id="row2chartLine3" style="height: 100%;" />
            </div>
            <div class="car" style="position: relative;">
              <p style="position: absolute;left:50px;top:-50px;">当前车辆数：5</p>
              <i ref="left" class="el-icon-arrow-left" @click="handleLeft" />
              <el-row :gutter="20" class="carList">
                <el-col v-for="(item,index) in list" :key="index" :span="8">
                  <div ref="list" class="list" @click="handleList(index)">
                    <el-row :gutter="20">
                      <el-col :span="12" class="list-l">
                        <p><span>车辆：</span>{{ item.avgdim }}</p>
                        <el-tooltip placement="top">
                          <p slot="content"><span>饲料：</span>{{ item.avgmonthage }}</p>
                          <p><span>饲料：</span>{{ item.avgmonthage }}</p>
                        </el-tooltip>
                        <p><span>计划重量：</span>{{ item.barname }}</p>
                        <p><span>剩余重量：</span>{{ item.bigcowclass }}</p>
                        <p><span>车辆应载重：</span>{{ item.bigcowclass }}</p>
                      </el-col>
                      <el-col :span="12" class="list-r">
                        <el-tooltip placement="top">
                          <p slot="content"><span>描述：</span>{{ item.bw }}</p>
                          <p><span>描述：</span>{{ item.bw }}</p>
                        </el-tooltip>
                        <p><span>栏舍：</span>{{ item.cowclass }}</p>
                        <p><span>完成重量：</span>{{ item.cowclassid }}</p>
                        <p><span>完成度：</span>{{ item.cowsum }}</p>
                        <p><span>车辆已载重：</span>{{ item.dayspre }}</p>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
              <i ref="right" class="el-icon-arrow-right" @click="handleRight" />
            </div>
          </div>

        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { GetDataByName } from '@/api/common'
import Cookies from 'js-cookie'
import { parseTime } from '@/utils/index.js'
import echarts from 'echarts'

require('echarts/theme/macarons')
var myKey = 0
export default {
  name: 'DashboardEditor',
  data() {
    return {
      'list': [],
      news: 1,
      row: {},
      row2: {
        chart1: {
          chartLine: null,
          chartLine_data: {},
          getdataListParm: {
            name: 'getBarmilkList',
            page: 1,
            offset: 1,
            pagecount: 10,
            returntype: 'Map',
            parammaps: {
              pastureid: Cookies.get('pastureid'),
              enable: ''
            }
          },
          list: [],
          total: 0,
          listLoading: true
        },
        chart2: {
          chartLine: null,
          chartLine_data: {},
          getdataListParm: {
            name: 'getBarmilkList',
            page: 1,
            offset: 1,
            pagecount: 10,
            returntype: 'Map',
            parammaps: {
              pastureid: Cookies.get('pastureid'),
              enable: ''
            }
          },
          list: [],
          total: 0,
          listLoading: true
        },
        chart3: {
          chartLine: null,
          chartLine_data: {},
          getdataListParm: {
            name: 'getBarmilkList',
            page: 1,
            offset: 1,
            pagecount: 3,
            returntype: 'Map',
            parammaps: {
              pastureid: Cookies.get('pastureid'),
              enable: ''
            }
          },
          list: [],
          total: 0,
          listLoading: true,
          pageNum: '',
          pages: '',
          getdataListParmList: {
            name: 'getBarmilkList',
            page: 1,
            offset: 1,
            pagecount: 3,
            returntype: 'Map',
            parammaps: {
              pastureid: Cookies.get('pastureid'),
              enable: ''
            }
          },
          list2: [],
          total2: 0,
          listLoading2: true,
          pageNum2: '',
          pages2: ''
        }
      }
    }
  },
  created() {
    this.getChart1()
    this.getChart2()
    this.getChart3List()
    window.setInterval(() => {
      setTimeout(() => {
        this.$refs.list[myKey].style.background = '#009966'
        this.$refs.list[myKey + 1].style.background = '#36A47F'
        myKey = myKey + 1
        if (myKey == 2) {
          setTimeout(() => {
            if (this.row2.chart3.pageNum2 == this.row2.chart3.pages2) {
              this.row2.chart3.getdataListParmList.offset = 1
              this.getChart3List()
            } else {
              this.row2.chart3.getdataListParmList.offset = this.row2.chart3.getdataListParmList.offset + 1
              this.getChart3List()
            }
            myKey = 0
            this.$refs.list[myKey].style.background = '#009966'
          }, 5000)
        }
        console.log(myKey)
      }, 0)
    }, 5000)
  },
  methods: {
    getChart1() {
      this.row2.chart1.listLoading = true
      GetDataByName(this.row2.chart1.getdataListParm).then(response => {
        console.log('泌乳牛采食量图表数据', response.data.list)
        if (response.data.list !== null) {
          this.row2.chart1.chartLine_data = {
            data1: 15,
            data2: 20
          }
          this.row2.chart1.total = response.data.total
          this.roadChartLine1(this.row2.chart1.chartLine_data)
        } else {
          this.row2.chart1.list = []
        }
        setTimeout(() => {
          this.row2.chart1.listLoading = false
        }, 100)
      })
    },
    roadChartLine1(chartLine_data) {
      if (this.row2.chart1.chartLine != null) {
        this.row2.chart1.chartLine.dispose()
      }
      this.row2.chart1.chartLine = echarts.init(document.getElementById('row2chartLine1'))
      var option = {
      // 标题组件，包含主标题和副标题
        title: {
          show: true,
          x: 'center',
          textStyle: {
            fontSize: '15',
            color: 'green',
            fontWeight: 'bold'
          }
        },
        //  提示框组件
        tooltip: {
          // 是否显示提示框组件，包括提示框浮层和 axisPointe
          show: false,
          // 触发类型: item:数据项触发，axis：坐标轴触发
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        // 系列列表。每个系列通过 type 决定自己的图表类型
        series: [{
          // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
          name: '任务进度',
          type: 'pie',
          // 饼图的半径，数组的第一项是内半径，第二项是外半径
          radius: ['80%', '70%'],
          // 是否启用防止标签重叠策略，默认开启
          avoidLabelOverlap: false,
          hoverAnimation: false,
          // 标签的视觉引导线样式，在 label 位置 设置为'outside'的时候会显示视觉引导线
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [{
            value: chartLine_data.data1, // 数据值
            name: '完成率', // 数据项名称
            selected: false, // 该数据项是否被选中
            // 单个扇区的标签配置
            label: {
              normal: {
                show: true, // 是显示标签
                position: 'center',
                fontSize: 20,
                // 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
                formatter: '{b}\n{d}%'
              }
            }
          }, {
            value: chartLine_data.data2 - chartLine_data.data1,
            label: {
              normal: {
                show: false

              }
            }
          }]
        }],
        color: ['#47947b', '#b8eedc']
      }
      this.row2.chart1.chartLine.setOption(option)
      window.onresize = function() {
        this.row2.chart1.chartLine.resize()
      }
    },

    getChart2() {
      this.row2.chart2.listLoading = true
      GetDataByName(this.row2.chart2.getdataListParm).then(response => {
        console.log('泌乳牛采食量图表数据', response.data.list)
        if (response.data.list !== null) {
          this.row2.chart2.chartLine_data = {
            data1: 15,
            data2: 20
          }
          this.row2.chart2.total = response.data.total
          this.roadChartLine2(this.row2.chart2.chartLine_data)
        } else {
          this.row2.chart2.list = []
        }
        setTimeout(() => {
          this.row2.chart2.listLoading = false
        }, 100)
      })
    },
    roadChartLine2(chartLine_data) {
      if (this.row2.chart2.chartLine != null) {
        this.row2.chart2.chartLine.dispose()
      }
      this.row2.chart2.chartLine = echarts.init(document.getElementById('row2chartLine2'))
      var option = {
      // 标题组件，包含主标题和副标题
        title: {
          show: true,
          x: 'center',
          textStyle: {
            fontSize: '15',
            color: 'green',
            fontWeight: 'bold'
          }
        },
        //  提示框组件
        tooltip: {
          // 是否显示提示框组件，包括提示框浮层和 axisPointe
          show: false,
          // 触发类型: item:数据项触发，axis：坐标轴触发
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        // 系列列表。每个系列通过 type 决定自己的图表类型
        series: [{
          // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
          name: '任务进度',
          type: 'pie',
          // 饼图的半径，数组的第一项是内半径，第二项是外半径
          radius: ['80%', '70%'],
          // 是否启用防止标签重叠策略，默认开启
          avoidLabelOverlap: false,
          hoverAnimation: false,
          // 标签的视觉引导线样式，在 label 位置 设置为'outside'的时候会显示视觉引导线
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [{
            value: chartLine_data.data1, // 数据值
            name: '完成率', // 数据项名称
            selected: false, // 该数据项是否被选中
            // 单个扇区的标签配置
            label: {
              normal: {
                show: true, // 是显示标签
                position: 'center',
                fontSize: 20,
                // 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
                formatter: '{b}\n{d}%'
              }
            }
          }, {
            value: chartLine_data.data2 - chartLine_data.data1,
            label: {
              normal: {
                show: false

              }
            }
          }]
        }],
        color: ['#47947b', '#b8eedc']
      }
      this.row2.chart2.chartLine.setOption(option)
      window.onresize = function() {
        this.row2.chart2.chartLine.resize()
      }
    },

    getChart3() {
      this.row2.chart3.listLoading = true
      GetDataByName(this.row2.chart3.getdataListParm).then(response => {
        console.log('实时监控数据', response.data.list)
        if (response.data.list !== null) {
          console.log(this.$refs.list)

          this.$refs.list[myKey].style.background = '#36A47F'

          console.log(this.$refs)
          this.row2.chart3.chartLine_data = {
            data1: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            data2: [220, 250, 201, 234, 290, 430, 410],
            data3: [120, 130, 101, 134, 90, 430, 210]
          }
          this.row2.chart3.total = response.data.total
          this.row2.chart3.pageNum = response.data.pageNum
          this.row2.chart3.pages = response.data.pages
          this.roadChartLine3(this.row2.chart3.chartLine_data)
        } else {
          this.row2.chart3.list = []
        }
        setTimeout(() => {
          this.row2.chart3.listLoading = false
        }, 100)
      })
    },
    roadChartLine3(chartLine_data) {
      if (this.row2.chart3.chartLine != null) {
        this.row2.chart3.chartLine.dispose()
      }
      this.row2.chart3.chartLine = echarts.init(document.getElementById('row2chartLine3'))
      var option = {
        title: {
          text: '实时监控',
          subtext: ''
        },
        color: ['#c23531', '#2f4554'], // 关键加上这句话，legend的颜色和折线的自定义颜色就一致了
        legend: {
          icon: 'rectangle',
          data: ['设计重量', '实际重量'],
          // right: '20%',
          textStyle: {
            fontSize: 12,
            color: '#666'
          }
        },
        /* grid:{y:15},*/
        tooltip: {
          trigger: 'axis'
        },
        calculable: true,
        yAxis: [
          {
            type: 'value',
            splitLine: { show: false }, // 去除网格线
            axisLabel: {
              show: true,
              textStyle: {
                color: '#666' // 这里用参数代替了
              }
            }
          }
        ],
        xAxis: [
          {
            type: 'category',
            splitLine: { show: false }, // 去除网格线
            data: chartLine_data.data1,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#666' // 这里用参数代替了
              }
            }
          }
        ],
        series: [
          {
            name: '设计重量',
            type: 'line',
            barWidth: '37',
            data: chartLine_data.data2,
            symbol: 'triangle', symbolSize: 10,
            itemStyle: {
              normal: {
                lineStyle: { color: '#c23531' },
                color: function(param) {
                  const colorList = ['#2f4554', '#c23531']
                  let x = ''
                  param.dataIndex % 2 == 0 ? x = 1 : x = 2
                  if (x == '1') {
                    return colorList[0]
                  } else {
                    return colorList[1]
                  }
                }
              }
            }
          },
          {
            name: '实际重量',
            type: 'line',
            step: 'end',
            data: chartLine_data.data3,
            barWidth: '37',
            itemStyle: {
              normal: {
                lineStyle: { color: '#2f4554' }
              }
            }
          }
        ]
      }
      this.row2.chart3.chartLine.setOption(option)
      window.onresize = function() {
        this.row2.chart3.chartLine.resize()
      }
    },
    getChart3List() {
      this.row2.chart3.listLoading2 = true
      GetDataByName(this.row2.chart3.getdataListParmList).then(response => {
        console.log('实时监控数据', response.data.list)
        if (response.data.list !== null) {
          this.list = response.data.list
          console.log(this.$refs.list)
          console.log(this.$refs)
          this.row2.chart3.total2 = response.data.total
          this.row2.chart3.pageNum2 = response.data.pageNum
          this.row2.chart3.pages2 = response.data.pages
          this.getChart3()
          if (this.row2.chart3.getdataListParmList.offset == 1) {
            this.$refs.left.style.color = '#ccc'
          } else {
            this.$refs.left.style.color = '#000'
          }
          if (response.data.pageNum == response.data.pages) {
            this.$refs.right.style.color = '#ccc'
          } else {
            this.$refs.right.style.color = '#000'
          }
        } else {
          this.row2.chart3.list2 = []
        }
        setTimeout(() => {
          this.row2.chart3.listLoading2 = false
        }, 100)
      })
    },
    handleLeft() {
      console.log('左')
      if (this.row2.chart3.getdataListParmList.offset > 1) {
        this.row2.chart3.getdataListParmList.offset = this.row2.chart3.getdataListParmList.offset - 1
        this.getChart3List()
        this.$refs.list[0].style.background = '#36A47F'
        this.$refs.list[1].style.background = '#009966'
        this.$refs.list[2].style.background = '#009966'
      }
    },
    handleRight() {
      if (this.row2.chart3.pageNum2 !== this.row2.chart3.pages2) {
        this.row2.chart3.getdataListParmList.offset = this.row2.chart3.getdataListParmList.offset + 1
        this.getChart3List()
        this.$refs.list[0].style.background = '#36A47F'
        this.$refs.list[1].style.background = '#009966'
        this.$refs.list[2].style.background = '#009966'
      }
    },
    handleList(key) {
      console.log(key)
      // this.$refs.left.style.color = '#ccc'
      console.log(this.$refs.list)
      for (var i in this.$refs.list) {
        if (i == key) {
          this.$refs.list[i].style.background = '#36A47F'
          this.getChart3()
          // this.$refs.list[key].style.background = '#36A47F'
        } else {
          this.$refs.list[i].style.background = '#009966'
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    background-color: #F4F4F4;
    min-height: 100vh;
    .news{
      width: 70%;
      height: 30px;
      background: #fff;
      margin: 0 auto;
      border-radius: 10px;
      text-align: center;
      line-height: 30px;
      color: red;
      b{color: #000;}
    }

    .bottom{
      padding:0 30px;
      h4{text-align: right;}
      .grid-content{
        background: #fff;height: 90px;
        border-radius: 10px;
      }
      .one{
        border: 1px solid #82CBB3;
        .Left{
          float: left;
          width: 90px;
          text-align: center;
          i{font-size: 36px;color:#82CBB3;line-height: 90px;}
        }
        .Right{
          float: left;
          font:600 14px/32px '';
          margin-top:15px;
          span{
            display: inline-block;
            width: 150px;
            text-align: right;
          }
        }
      }
      .two{
        border: 1px solid #FF9900;
        .Left{
          float: left;
          width: 90px;
          text-align: center;
          i{font-size: 36px;color:#FF9900;line-height: 90px;}
        }
        .Right{
          float: left;
          font:600 14px/32px '';
          margin-top:15px;
          span{
            display: inline-block;
            width: 150px;
            text-align: right;
          }
        }
      }
      .three{
        border: 1px solid #0099FF;
        .Left{
          float: left;
          width: 90px;
          text-align: center;
          i{font-size: 36px;color:#0099FF;line-height: 90px;}
        }
        .Right{
          float: left;
          font:600 14px/32px '';
          margin-top:15px;
          span{
            display: inline-block;
            width: 150px;
            text-align: right;
          }
        }
      }
      .four{
        border: 1px solid #FF5C5C;
        .Left{
          float: left;
          width: 90px;
          text-align: center;
          i{font-size: 36px;color:#FF5C5C;line-height: 90px;}
        }
        .Right{
          float: left;
          font:600 14px/32px '';
          margin-top:15px;
          span{
            display: inline-block;
            width: 150px;
            text-align: right;
          }
        }
      }

      .car{
        width:100%;height:150px;; display:flex; display: -webkit-flex; -webkit-flex-direction:row;
        i{font-size: 50px;width:50px;display: block;line-height: 150px;}
        .carList{
          flex:1;height: 130px;
          .list{
            height: 130px;background: #009966;color: #fff; box-shadow: #000 0px 0px 10px;
            border-radius: 10px;
            .list-l{
              p{
                font: 12px/12px '';text-overflow: ellipsis;white-space:nowrap; overflow:hidden;
              }
            }
            .list-r{
              p{
                font: 12px/12px '';text-overflow: ellipsis;white-space:nowrap; overflow:hidden;
              }
            }
          }
        }
      }
    }
  }
</style>