fxc-wecat/pages/index/index.js

// index.js
// 获取应用实例
import * as echarts from '../../ec-canvas/echarts' // 这个是自己实际的目录
import {path} from '../../utils/circle';
const app = getApp()
Page({
  data: {
    showRight:false,
    polyline:[],
    tempList:[],
    hisLocal:[],
    ossPath: app.globalData.$filePath,
    title: '冷链追溯系统',
    token: '',
    mapCtx: '',
    latitude: '', //纬度
    longitude: '', //经度
    navbarData: {
      title: app.globalData.title,
      showCapsule: true,
      share: false
    },
    llzsEc: {
      lazyLoad: true,
    },
    tempList:[],
    Ec: {
      lazyLoad: true,
    },
    pieEc: {
      lazyLoad: true,
    },
    labelNum: {
      lazyLoad: true,
    },
    latitude: 40,
    longitude: 116,
    status: {
      checkedMap:true,
      statisticsInfo:true,
      statusLabelTest:true,
      statusLabelNum:true,
      statusLabelType:true,
      expressStatu:true,
      transportStatus:true,
      tempChart:true,
      onlineNum:true,
      packageStatu:true,
      onlineSituat:true,
      newSituat:true
    },
    CustomBar: app.globalData.CustomBar,
    StatusBar: app.globalData.StatusBar,
    systemMenu: [{
        menuName: '查一查',
        icon: '/img/idx_img2.png',
        path: 'find',
      },
      {
        menuName: '冷链管理',
        icon: '/img/dev_img4.png',
        path: 'coldChain'
      },
      {
        menuName: '产品管理',
        icon: '/img/idx_img4.png',
        path: 'productManager'
      },
      {
        menuName: '员工管理',
        icon: '/img/idx_img5.png',
        path: 'workerManager'
      },
    ],
    isAuth: false,
    modalHidden: true,
    scrollTop:0,//滚动监听
    // 沃森新
    cardIndex:0,
    tabLeftTop:[
      {name:'新冠',remark:'本公司现有100个产品温度正常温度不正常0个，原料辅料20种状态正常，产品有100种，所有产品状态全部正常'},
      {name:'肺炎',remark:'本公司现有100个产品温度正常温度不正常0个，原料辅料20种状态正常，产品有100种，所有产品状态全部正常'},
      {name:'流感',remark:'本公司现有100个产品温度正常温度不正常0个，原料辅料20种状态正常，产品有100种，所有产品状态全部正常'}
    ],
    tabLeftTop_remark:'本公司现有100个产品温度正常温度不正常0个，原料辅料20种状态正常，产品有100种，所有产品状态全部正常',
    orderCardList:[{city:'泰州市',used:50,stack: 2},{city:'北京市',used:50,stack: 2},{city:'西安市',used:50,stack: 2},{city:'天津市',stack: 2,used:50},{city:'廊坊市',stack: 2,used:50},{city:'广州市',used:50,stack: 2},{city:'郑州市',used:50,stack: 2}]
  },
  // 事件处理函数
  onLoad() {
    var that = this;
    if (!wx.getStorageSync('status')) {
      wx.setStorageSync('status', JSON.stringify(that.data.status));
    }
  },
  showRight(){
    this.setData({
      showRight:true,
    })
  },
  gopage1(){
    this.setData({
      showRight:false,
    },()=>{
      this.setCardLeft();
    })
  },
  onReady: function () {
  },
  onShow: function (options) {
    var that = this;
    var status = JSON.parse(wx.getStorageSync('status')) || '';
    var title = wx.getStorageSync('title') || ''
    var status =status ? status:that.data.status;
    title = title ? title : '冷链追溯系统'
    this.setData({
      status,
      title
    })
    //获取新闻
    this.getNewsList();
    // 加载
    this.setCardLeft();
  
  },
  setCardLeft(){
    var diagamList = [
      {name: "标签1",value: 0,unNormalTotal:0,symbolSize:40},
      {name: "标签2",value: 0,unNormalTotal:0,symbolSize:40},
      {name: "标签3",value: 1,unNormalTotal:2,symbolSize:40},
      {name: "标签4",value: 3,unNormalTotal:1,symbolSize:40},
      {name: "标签5",value: 3,unNormalTotal:1,symbolSize:40},
    ]
    this.setCardDiagram(diagamList);
    // this.setCardFivePie();
    this.setCardXuTuOption({normalTotal:15});
    // this.setCardFivePie_rght();
    var sixRightBarList = [{data:[120, 132, 101, 134, 90, 230, 210]},{data:[220, 182, 191, 234, 290, 330, 310]},{data:[150, 232, 201, 154, 190, 330, 410]}]
    this.setCardSixRightBar(sixRightBarList);
    var sevenCardPieList = [
      {data:[{ name: "标签1", value: 50 },{ name: "标签2", value: 20 },{ name: "标签3", value: 10 }]},
      {data:[{ name: "标签1", value: 50 },{ name: "标签2", value: 20 },{ name: "标签3", value: 10 }]},
      {data:[{ name: "标签1", value: 50 },{ name: "标签2", value: 20 },{ name: "标签3", value: 10 }]},
      {data:[{ name: "标签1", value: 50 },{ name: "标签2", value: 20 },{ name: "标签3", value: 10 }]},
    ]
    this.setSevenCardPie(sevenCardPieList);
    /**沃森新 */
    //获取token,若无则判定用户是游客访问，不进行任何请求
    var token = wx.getStorageSync('token');
    this.setData({
      token,
      tempList:[]
    })

    if (!token) {
      setTimeout(function () {
        that.noLogin()
      }, 500)
      return;
    }
    //地区产品统计
    this.setCardLeftFive({
      name:['北京', '云南', '广州', '辽宁', '山东', '重庆'],
      data:[
        {name:'2022',data:[18203, 23489, 29034, 104970, 131744, 630230]},
        {name:'2012',data:[19325, 23438, 31000, 121594, 134141, 681807]},
      ]
    });

    // 主产品查询
    this.getsignProduct();
    //主产品使用、库存、总数统计
    this.getSignProductUseAndStackState();
    //单一主产品不同地区使用情况
    this.getSingleProductUseZoneStat();
    // 获取按钮
    this.getUserDefaultMenuList();
    // 图5 主产品在库、在途、结束统计
    this.getSignProductState();
    // 主产品正常、预警统计
    this.getSignPorductNormalWarningState();
    // 主产品使用量、生产量统计
    this.getSignProductUsedProduceState();
    // 主产品不同年度 使用量统计
    this.getSignPrroductYearUsedProduceState();
    // 主产品在不同地区库存、使用数据统计
    this.getSignProductCityState();
    // 主产品最近一周每一天的使用量统计 
    this.getSignProductEveryWeekState();
  },
  getCysOrderOption(list){
    var fontSize=8;
    return {
      color:["#7190F6","#FF723A","#EA1C43"],
      title: {
        show:false
      },
      grid:{
        top:"5%",
        left:"8%",
        right:"5%",
        bottom:"14%",
      },
      xAxis: {
        type: 'category',
        axisTick:{show:false,},
        axisLine:{lineStyle:{color:"#DEE3FF",}},
        axisLabel:{color:"#999999", fontSize,interval: 0},
        data: list.map(item=>item.name),
      },
      yAxis: {
        type: 'value',
        splitLine:{lineStyle:{color:"#DEE3FF",}},
        axisLabel:{color:"#999999", fontSize,},
      },
      series: [
        {
          type: 'bar',
          barMaxWidth:30,
          barMinHeight:10,
          data: list.map(item=>item.orderNum),
        },
      ]
    }
  },
  setTemp(temperature) {
    var that = this;
    that.ecWen = that.selectComponent('#ecDomWen');
    that.ecWen.init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      var option = that.getTempOption();
      option.xAxis.data = temperature.map(v => v.createTime.replace(" ", "\n"));
      option.series[0].data = temperature.map(v => v.temp);
      chart.setOption(option);
      that.wenChart = chart;
      return chart;
    });
  },
  showMap(markers) {
    var that = this;
    var token = wx.getStorageSync('token');
    this.mapCtx = wx.createMapContext('home_map');
    var points = []
    for (var i in markers) {
      if(i==0){
        points.push({
          width:54,
          height:54,
          latitude:Number(markers[i].lat),
          longitude:Number(markers[i].lng),
          iconPath:"/img/map_icon1.png",
        })
      }
      else if(i == markers.length-1){
        points.push({
          width:54,
          height:54,
          latitude:Number(markers[i].lat),
          longitude:Number(markers[i].lng),
          iconPath:"/img/index_icon_1000.png",
        })
      }
      markers[i].latitude = Number(markers[i].lat)
      markers[i].longitude = Number(markers[i].lng)
      delete markers[i].lat
      delete markers[i].lng
    }
    that.setData({
      markers:points,
      polyline: [{
        color: '#2D59E6',
        width: 2,
        points: markers,
      }],
      latitude:markers.length != 0 ? markers[0].latitude : '',
      longitude:markers.length != 0 ? markers[0].longitude : ''
    });
    that.mapCtx.includePoints({
      points: markers || [],
      padding: [50, 50, 50, 50]
    })
  },

  noLogin() {
    var temp = [
      {temp: '23.3',createTime: "2021-12-03 17:06:40"},
      {temp: '23.2', createTime: "2021-12-03 17:08:10"},
      {temp: '23.1', createTime: "2021-12-03 17:09:40"},
      {temp: '23.1', createTime: "2021-12-03 17:11:10"},
      {temp: '23.3', createTime: "2021-12-03 17:12:40"},
      {temp:' 23.2', createTime: "2021-12-03 17:14:10"},
      {temp: '23.3', createTime: "2021-12-03 17:15:40"},
      {temp: '23.3', createTime: "2021-12-03 17:18:40"},
      {temp: '23.2', createTime: "2021-12-03 17:26:10"},
      {temp: '23.2', createTime: "2021-12-03 17:32:10"}
    ]
    //设备定位列表
    var markerList = [{
        id: 1,
        lat: "49.828921",
        lng: "122.956163",
        lastTemp: 29.2,
        transportType: '10',
        status: '10',
      },
      {
        id: 2,
        lat: "39.898959",
        lng: "116.188584",
        lastTemp: 19.2,
        transportType: '40',
        status: '00',
      },
      {
        id: 3,
        lat: "29.828457",
        lng: "120.495225",
        lastTemp: 29.3,
        transportType: '40',
        status: '10',
      },
      {
        id: 4,
        lat: "21.358161",
        lng: "111.003038",
        lastTemp: 29.5,
        transportType: '30',
        status: '20',
      },
      {
        id: 5,
        lat: "38.948484",
        lng: "120.846788",
        lastTemp: 29.8,
        transportType: '20',
        status: '10',
      },
      {
        id: 6,
        lat: "33.785733",
        lng: "104.850694",
        lastTemp: 28.2,
        transportType: '10',
        status: '00',
      },
      {
        id: 7,
        lat: "29.225357",
        lng: "121.306968",
        lastTemp: 27.2,
        transportType: '30',
        status: '00',
      },
    ]
    this.showMap(markerList);
    this.setData({
      tempList:temp,
    },()=>{
      this.setTemp(temp);
    })
    //地区产品统计
    this.setCardLeftFive({
      name:['北京', '云南', '广州', '辽宁', '山东', '重庆'],
      data:[
        {name:'2022',data:[18203, 23489, 29034, 104970, 131744, 630230]},
        {name:'2012',data:[19325, 23438, 31000, 121594, 134141, 681807]},
      ]
    });
    const cardTwo_leftOne = [
      {stack: 0, end: 1, productName: "阿莫西林", trans: 0},
      {stack: 0, end: 1, productName: "红霉素", trans: 0},
      {stack: 0, end: 1, productName: "红霉素", trans: 0},
    ]
    this.setCard_two_left_one(cardTwo_leftOne);
    //  主产品正常、预警统计
    this.setCardEightBar([
      {normal: 1, warning: 0, product_name: "阿莫西林"},
      {normal: 0, warning: 1, product_name: "红霉素"},
      {normal: 1, warning: 9, product_name: "新型冠状病毒疫苗"}
    ]);
    var list = [
      {product_name: "阿莫西林",data:[{data: 1,index: 39,color:"#2D59E6"},{data:1,index:872,color:"#71CCFF"}]},
      {product_name: "红霉素",data:[{data:1,index: 266,color: "#2D59E6"},{data: 1,index: 862,color:"#71CCFF"}]},
      {product_name: "新型冠状病毒疫苗",data:[{data:10,index: 555, color: "#2D59E6"},{data:1,index:200,color:"#71CCFF"}]},

    ];
    for (let index = 0; index < list.length; index++) {
      for (let lindex = 0; lindex < list[index].data.length; lindex++) {
        var color = list[index].data[lindex].color;
        var total = list[index].data[lindex].data;
        var itemIndex = list[index].data[lindex].index;
        that.setCardFivePie_rght(color,total,itemIndex);
      }
    }
    var seriesSixBar = [
      {name: 2022, type: "line", stack: "Total",data:[1, 1, 6]},
      {name: 2021, type: "line", stack: "Total",data:[4, 0,0]},
    ]
    var cardSixLineList = ["阿莫西林", "红霉素", "新型冠状病毒疫苗"];
    this.setCardSixBar(seriesSixBar,cardSixLineList);
    var klineList = [
      {
        maps:[{total:10,},{total:15,},{total:19,},{total:13,},{total:18,},],
        productInfo:{name:'阿莫西林'}
      },{
        maps:[{total:16,},{total:11,},{total:14,},{total:13,},{total:18,},],
        productInfo:{name:'红霉素'}
      },{
        maps:[{total:18,},{total:14,},{total:11,},{total:8,},{total:17,},],
        productInfo:{name:'新型冠状病毒疫苗'}
      }
    ];
    this.setKLine(klineList);
  },
  showMap1(markers) {
    var that = this;
    var token = wx.getStorageSync('token');
    this.mapCtx = wx.createMapContext('home_map');
    for (var i in markers) {
      markers[i].bId = markers[i].id
      markers[i].id = Number(i)
      markers[i].width = 54
      markers[i].height = 54
      markers[i].iconPath = "/img/index_icon_" + markers[i].transportType + '' + markers[i].status + ".png"
      markers[i].latitude = Number(markers[i].lat)
      markers[i].longitude = Number(markers[i].lng)
      delete markers[i].lat
      delete markers[i].lng
    }
    that.setData({
      markers,
      latitude:markers.length != 0 ? markers[0].latitude : '',
      longitude:markers.length != 0 ? markers[0].longitude : ''
    },()=>{
      if(markers.length!=0 && token){
        //地图数据加载完成后，获取第一条数据的详情
        that.getListChainTemperature(markers[0].bId);
      }else{
        var temp = [
          {temp: '23.3',createTime: "2021-12-03 17:06:40"},
          {temp: '23.2', createTime: "2021-12-03 17:08:10"},
          {temp: '23.1', createTime: "2021-12-03 17:09:40"},
          {temp: '23.1', createTime: "2021-12-03 17:11:10"},
          {temp: '23.3', createTime: "2021-12-03 17:12:40"},
          {temp:' 23.2', createTime: "2021-12-03 17:14:10"},
          {temp: '23.3', createTime: "2021-12-03 17:15:40"},
          {temp: '23.3', createTime: "2021-12-03 17:18:40"},
          {temp: '23.2', createTime: "2021-12-03 17:26:10"},
          {temp: '23.2', createTime: "2021-12-03 17:32:10"}
        ]
        that.setTemp(temp)
      }
    });
    that.mapCtx.includePoints({
      points: markers,
      padding: [50, 50, 50, 50]
    })
  },
  getMapInfo(e) {
    var that = this;
    var index = e.detail.markerId;
    if (that.data.token) {
      for (var i in that.data.markers) {
        if (that.data.markers[i].id == index) {
          

          return;
        }
      }
    } else {
      wx.navigateTo({
        url: '/pages/login/login',
      })
    }
  },
  onPageScroll:function(e){
    this.setData({
      scrollTop:e.scrollTop
    })
  },
  getList() {
    var that = this;
    app.requestP({
      url: '/index/listChainLocal',
      method: 'post',
      contentType: ' application/json'
    }).then(res => {
      var result = []
      res.data.data && res.data.data.map(item=>{
        if(item.lng != 0 && item.lat != 0){
          result.push(item)
        }
      })
      that.showMap(result);
    }).catch(err=>{
      app.showToptip(that,'error',err.data.msg)
    })
  },
  getTempOption() {
    return {
      title: {
        text: '温度：℃',
        textStyle: {
          color: '#999',
          fontSize: 6,
        }
      },
      grid: {
        top: "20%",
        left: "4%",
        right: "5%",
        bottom: "3%",
        containLabel: true
      },
      xAxis: {
        type: 'category',
        // boundaryGap: false,
        nameTextStyle: {
          color: "#77869E",
          fontSize: 4
        },
        axisLine: {
          onZero: false,
          lineStyle: {
            color: "#cccccc"
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#999', //更改坐标轴文字颜色
            fontSize: 5, //更改坐标轴文字大小
          }
        },
        data: ['16:00 \n 2021-06-30', '16:00 \n 2021-06-30', '16:00 \n 2021-06-30', '16:00 \n 2021-06-30', '16:00 \n 2021-06-30', '16:00 \n 2021-06-30', '16:00 \n 2021-06-30'],
        // show: false
      },
      yAxis: {
        type: 'value',
        splitNumber: 10,
        max: 40,
        axisLine: {
          lineStyle: {
            color: "#cccccc",
          },
          show: true
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#999', //更改坐标轴文字颜色
            fontSize: 5, //更改坐标轴文字大小
          }
        },
        splitLine: {
          show: false
        }
      },
      series: [{
        type: 'line',
        showSymbol: false,
        smooth: true,
        lineStyle: {
          width: 1,
          color: "#328EFD", //#D4D4D4
        },
        areaStyle: {
          origin: "start",
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: '#FFFFFF' //
            }, {
              offset: 1,
              color: '#4C96FE' //#D4D4D4
            }],
            global: false
          }
        },
        data: [18, 36, 25, 30, -20, 40, 33]
      }]
    }
  },
  setPieChart(temperature) {
    var that = this;
    var num = 0;
    var color = ['#45C2E0', '#C1EBDD', '#FFC851','#5A5476','#1869A0','#FF9393'];
    temperature.map(v => num += v.num);
    that.ecWen = that.selectComponent('#pieDom');
    that.ecWen.init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      var option = that.getPieChartOption();
      option.color = color;
      option.series[0].data = temperature.map(v => {
        var per = v.num / num * 100;
        return {
          value:v.num,
          name: v.productTypeName+':'+ v.num + ' 占比' + per.toFixed(2) + '%'
        }
      });
      chart.setOption(option);
      that.wenChart = chart;
      return chart;
    });
  },
  getPieChartOption() {
    return {
      legend: {
        top: 'bottom',
        show: false,
      },
      grid: {
        left: '0%',
        right: '0%',
        bottom: '3%',
        containLabel: true
      },
      // color:['#45C2E0', '#C1EBDD', '#FFC851','#5A5476','#1869A0','#FF9393'],
      series: [{
        type: 'pie',
        radius: [30, 60],
        center: ['50%', '50%'],
        itemStyle: {
          normal: {
            label: {
              formatter: function (v) {
                //文字中遇到空格就换行
                let text = v.name.split(" ").join("\n");
                return text;
              },
              show: true,
            },
            labelLine: {
              show: true,
              color:''
            }
          },
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          },
        },
        data: [{
            value: 40,
            itemStyle:{
              normal:{
                color:'#45C2E0'
              }
            }
          },
          {
            value: 38,
          },
          {
            value: 32,
          },
          {
            value: 30,
          },
        ]
      }]
    }
  },
  setMapCenter() {
    var that = this;
    var locations = that.data.markers;
    that.mapCtx.includePoints({
      points: locations,
      padding: [50, 50, 50, 50]
    })
  },
  getUserInfo() {
    var that = this;
    app.requestP({
      method: "post",
      url: "/user/getUserInfo",
    }).then(function (res) {
      var userId = res.data.data.userId;
      // that.getProductChipState();
    }).catch(err => {
      app.showToptip(that, 'error', '请刷新重试');
    })
  },
  packageInfo(){
    var token = wx.getStorageSync('token');
    if(!token){
      wx.navigateTo({
        url: '/pages/login/login',
      })
      return;
    }
    var packageList = JSON.stringify(this.data.packageList);
    wx.navigateTo({
      url: '/pages/index/packageInfo/packageinfo?list=' + packageList,
    })
  },
  getNewsList() {
    var that = this;
    app.requestP({
      url: '/query/news',
      method: 'post',
      needToken: false,
      data: {
        keyword: '',
        pageNum: '1',
        pageSize: '5'
      }
    }).then(res => {
      that.setData({
        newsList: res.data.data.map(item => {
          return {
            ...item,
            createTime: item.createTime.substring(item.createTime.length - 8)
          }
        })
      })
    }).catch(err => {
      app.showToptip(that, 'error', err.data.msg)
    })
  },
  goNewsInfo(e) {
    var id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '/pages/index/newsInfo/newsInfo?id=' + id,
    })
  },
  goNewsList() {
    wx.navigateTo({
      url: '/pages/index/newList/newList',
    })
  },
  getUserDefaultMenuList() {
    var that = this;
    app.requestP({
      url: '/userDeaultMenu/list',
      method: 'post',
    }).then(res => {
      that.setData({
        systemMenu: res.data.data
      })
    }).catch(err => {
      app.showToptip(that, 'error', err.data.msg)
    })
  },
  tapMenu(e) {
    let type = e.currentTarget.dataset.type
    let path = e.currentTarget.dataset.path;
    //判断token，若有则假设已经登录
    if (!wx.getStorageSync('token')) {
      wx.redirectTo({
        url: '/pages/login/login',
      })
      return;
    }
    //获取用户信息，判断userInfo是否过期
    let userInfo = wx.getStorageSync('userInfo');
    const {
      loginRole,
      ifOverFlow,
      status
    } = userInfo;
    // this.matchPage(loginRole, ifOverFlow, status, path);
    app.globalData.tabarData = {loginRole, ifOverFlow, status, path};
    wx.switchTab({
      url: '/pages/workbench/workbench',
    })
  },
  goMessage:function(){
    if(this.data.token){
      wx.navigateTo({
        url: '/pages/news/newList',
      })
    }else{
      wx.redirectTo({
        url: '/pages/login/login',
      })
    }
  },
  // 沃森新
  // 主产品查询
  getsignProduct(){
    app.requestP({
      url: '/daping/signProduct',
      method: 'post',
    }).then(res => {
      this.setData({
        tabLeftTop:res.data.data
      })
    }).catch(err => {
      app.showToptip(this,'err',err.data.msg)
    })
  },
  // 主产品使用、库存、总数统计
  getSignProductUseAndStackState(){
    app.requestP({
      url: '/daping/signProductUseAndStackState',
      method: 'post',
    }).then(res => {
      this.setPie4Chart(res.data.data)
    }).catch(err => {
      app.showToptip(this,'err',err.data.msg)
    })
  },
  setCard(e){
    var index = e.currentTarget.dataset.index;
    this.setData({
      cardIndex:index,
      // tabLeftTop_remark:this.data.tabLfeftTop[index].remark
    })
  },
  //单一主产品不同地区使用情况
  getSingleProductUseZoneStat(){
    app.requestP({
      url: '/daping/singleProductUseZoneState',
      method: 'post',
    }).then(res=>{
      this.setCard_top_right_butChart(res.data.data);
    }).catch(err=>{
      app.showToptip(this,'err',err.data.msg)
    })
  },
  setPie4Chart(list){
    var that = this;
    var series = [];
    list.map((item,index)=>{
      series.push(...that.pice4Chart("#23D9E9",index == 0 ? "20%" :index == 1 ? '50%':'80%',item.total,item.use_num,item.stack_num,item.name,'45%',))
    });
    that.pie4ChartConDom = that.selectComponent('#pie4ChartConDom');
    that.pie4ChartConDom.init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      chart.setOption({
        title: {
				  show:false
			  },
        grid:{
          top:"0%",
          left:"0%",
          right:"0%",
          bottom:"0%",
        },
        color: ["red", "rgb(10,92,170)", "rgb(114,205,255)"],
			  legend: {
          icon:"rect",
          top:10,
          right:0,
          itemWidth:20,
          itemHeight:20,
          textStyle:{
            fontSize:16,
            color: "#D1E9F5",
          },
        },
        series:series,
      });
      return chart;
    })
  },
  pice4Chart(color,pos,total,use_num,stack_num,name,top){
    var that = this;
    var placeHolderStyle = {
       normal: {
         label: {
           show: false,
             formatter: function (v) {
               //文字中遇到空格就换行
               let text = v.value;
               return text;
             },
         },
         labelLine: {
           show: true,
         },
       },
    };
    const pieValue1 = {
      value1:(stack_num+use_num) / total,
      value2: 1 - (stack_num+use_num) / total
    };
    const pieValue2 = {
      value1:use_num / total,
      value2:1 - use_num / total
    };
    const pieValue3 = {
      value1: stack_num / total,
      value2: 1 - stack_num / total
    };
    return [{
      type: "pie",
      clockWise: true, //顺时加载
      hoverAnimation: false, //鼠标移入变大
      silent:false,
      radius: [20, 23],
      center: [pos, top],
      itemStyle: placeHolderStyle,
      data: [
        {
          value: pieValue1.value1,
          itemStyle:{
            normal:{
              color:'#0e74ff'
            }
          }
        },
        {
          value: pieValue1.value2,
          itemStyle:{
            normal:{
              color:"rgb(243,243,251)"
            }
          }
        }
      ],
    },{
      type: "pie",
      clockWise: true, //顺时加载
      hoverAnimation: false, //鼠标移入变大
      radius: [15, 18],
      silent:false,
      center: [pos, top],
      itemStyle: placeHolderStyle,
      data: [
        {
          value: pieValue2.value1,
          itemStyle:{
            normal:{
              color:'#64a6ff'
            }
          }
        },
        {
          value: pieValue2.value2,
          itemStyle:{
            normal:{
              color:"rgb(243,243,251)"
            }
          }
        }
      ],
    },
    {
      type: "pie",
      clockWise: true, //顺时加载
      hoverAnimation: false, //鼠标移入变大
      silent:false,
      radius: [10, 13],
      center: [pos, top],
      itemStyle: placeHolderStyle,
      data: [
        {
          value: pieValue3.value1,
          itemStyle:{
            normal:{
              color:'red'
            }
          }
        },
        {
          value: pieValue3.value2,
          itemStyle:{
            normal:{
              color:"rgb(243,243,251)"
            }
          }
        }
      ],
    }]
  },
  setCard_top_right_butChart(list){
    var that = this;
    that.selectComponent('#cardBarChartConDom').init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      list = list.map(item=>{
        return {orderNum:item.total,name:item.city || 'N/A'}
      })
      var option = that.getCysOrderOption(list);
      option.series = [{
        type:'bar',
        barMaxWidth: 15,
        barMinHeight: 10,
        data:list.map(item=>item.orderNum),
        label: {
          show: true,
          position: 'inside'
        },
        itemStyle:{
          normal:{color:'#333FFF'}
        }
      }]
      chart.setOption(option);
      return chart;
    });
  },
  // 图5 主产品在库、在途、结束统计
  getSignProductState(){
    app.requestP({
      url: '/daping/signProductState',
      method: 'post',
    }).then(res=>{
      this.setCard_two_left_one(res.data.data);
    }).catch(err=>{
      app.showToptip(this,'err',err.data.msg)
    })
  },
  setCard_two_left_one(list){
    var that = this;
    that.selectComponent('#product_two_left_one').init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      var option = that.getStaticBarChart();
      option.legend = {
        data:['在库','在途','结束'],
        icon:"circle",
        top:"2%",
        right:"auto",
        itemWidth:8,
        itemHeight:8,
        textStyle:{
          fontSize:8,
          color:'#485465',
        },
      }
      option.color = ['#2D59E6','#FFAF36','#7FD1FF']
      option.grid.top='20%';
      option.grid.bottom='13%';
      option.series = [];
      option.xAxis.data = [];
      const echartsData = [
        {name:'在库',data:list.map(item=>item.stack)},
        {name:'结束',data:list.map(item=>item.end)},
        {name:'在途',data:list.map(item=>item.trans)}
      ]
      option.xAxis.data = list.map(item=>item.productName);
      echartsData.map((item,index)=>{
        option.series.push({
          name:item.name,
          type: "bar",
          stack: "Ad",
          emphasis: {
            focus: "series",
          },
          data:item.data
        })
      })
      chart.setOption(option);
      return chart;
    })
  },
  product_two_left_two(list){
    var that = this;
    that.selectComponent('#product_two_left_two').init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      var option = this.getStaticBarChart();
      option.series = [];
      option.legend = {
        data:list.map(item=>item.name),
        icon:"circle",
        top:"2%",
        right:"auto",
        itemWidth:8,
        itemHeight:8,
        textStyle:{
          fontSize:8,
          color:'#485465',
        },
      }
      option.grid.top='20%';
      option.grid.bottom='13%';
      list.map((item,index)=>{
        option.series.push({
          name:item.name,
          type: index != list.length -1 ? 'bar' :'line',
          // yAxisIndex: 1,
          data:item.data
        });
        // if(index != list.length-1){
        //   delete option.series[index].yAxisIndex;
        // }
      })
      chart.setOption(option);
      return chart;
    })
  },
  getStaticBarChart(){
    return {
      xAxis: {
        type: "category",
        axisTick:{show:false,},
        nameTextStyle: {
          color: "#77869E",
          fontSize: 8,
        },
        axisLabel: {
          color: '#999999',
          fontSize: 8,
        },
        axisLine: {
          onZero: false,
          lineStyle: {
            color: "#cccccc",
          },
        },
        data: ["Mon", "Tue", "Wed", "Thu",],
      },
      yAxis: {
        type: "value",
        minInterval: 1,
        axisLine: {
          lineStyle: {
            color: "#cccccc",
          },
          show: false,
        },
        axisLabel: {
          color: "#999999",
          fontSize: 8,
        },
      },
      color: ["#7661FF", "#5AC8FA", "#00B972"],
      grid: {
        left: "3%",
        top: "8%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130, 110],
          type: "bar",
        },
      ],
    };
  },
  setCardPieTwo(list){
    var that = this;
    that.selectComponent('#product_three_left_one').init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      var option = this.getStaticPieChart();
      var itemStyle = {
        normal: {
          label: {
            show: true,
            formatter: function (v) {
              //文字中遇到空格
              let text = v.name+'\n'+v.value;
              return text;
            },
          },
          labelLine: {
            show: true,
            length:4,
            length2:4,
          },
        },
      }
      option.series = [
        {
          type: "pie",
          radius: "40%",
          center: ["50%", "25%"],
          itemStyle,
          label: {
            position: "inside",
            formatter: "{d}%",
            fontSize: 8,
            color: '#fff',
          },
          data: [
            { name: "标签1", value: 50 },
            { name: "标签2", value: 20 },
            { name: "标签3", value: 10 },
          ],
        },
        {
          type: "pie",
          radius: "40%",
          center: ["50%", "75%"],
          percentPrecision:0,
          minShowLabelAngle:30,
          itemStyle,
          label: {
            position: "inside",
            formatter: "{d}%",
            fontSize: 8,
            color: '#fff',
          },
          data: [
            { name: "标签1", value: 50 },
            { name: "标签2", value: 20 },
            { name: "标签3", value: 10 },
          ],
        },
      ]
      chart.setOption(option);
      return chart;
    })
  },
  getStaticPieChart(){
    return {
      color: ["#964CC4", "#04A3CC", "#3B6AD5"],
        title: {
          show: false,
        },
        grid: {
          top: "12%",
          left: "5%",
          right: "5%",
          bottom: "12%",
        },
        series: [
        // {
        //   type: "pie",
        //   radius: "50%",
        //   center: ["50%", "25%"],
        //   label: {
        //     position: "inside",
        //     formatter: "{d}%",
        //     fontSize: 8,
        //     color: '#fff',
        //   },
        //   data: [
        //     { name: "在途", value: 50 },
        //     { name: "完成", value: 20 },
        //     { name: "待发运", value: 10 },
        //   ],
        // },
        // {
        //   type: "pie",
        //   radius: "50%",
        //   center: ["50%", "75%"],
        //   percentPrecision:0,
        //   minShowLabelAngle:30,
        //   label: {
        //     position: "inside",
        //     formatter: "{d}%",
        //     fontSize: 8,
        //     color: '#fff',
        //   },
        //   data: [
        //     { name: "在途", value: 50 },
        //     { name: "完成", value: 20 },
        //     { name: "待发运", value: 10 },
        //   ],
        // },
      ]
    }
  },
  setCardFivePie(){
    var that = this;
    that.selectComponent('#product_five_left_one').init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      var option = this.getStaticPieChart();
      option.color = ['rgb(91,132,206)','rgb(127,210,255)','rgb(44,87,226)'];
      var itemStyle = {
        normal: {
          label: {
            show: false,
            formatter: function (v) {
              //文字中遇到空格
              let text = v.name+'\n'+v.value;
              return text;
            },
          },
          labelLine: {
            show: true,
            length:4,
            length2:4,
          },
        },
      }
      option.series = [
        {
          type: "pie",
          radius: "80%",
          center: ["50%", "30%"],
          itemStyle,
          label: {
            position: "inside",
            formatter: "{d}%",
            fontSize: 8,
            color: '#fff',
          },
          data: [
            { name: "标签1", value: 50 },
            { name: "标签2", value: 20 },
            { name: "标签3", value: 10 },
          ],
        },
        {
          type: "pie",
          radius: "80%",
          center: ["50%", "53%"],
          itemStyle,
          data: [
            { name: "标签1", value: 50 },
            { name: "标签2", value: 20 },
            { name: "标签3", value: 10 },
          ],
        },
        {
          type: "pie",
          radius: "80%",
          itemStyle,
          center: ["50%", "77%"],
          data: [
            { name: "标签1", value: 50 },
            { name: "标签2", value: 20 },
            { name: "标签3", value: 10 },
          ],
        },
      ]
      option.grid = {
        top: "12%",
        left: "10%",
        right: "0%",
        bottom: "12%",
      },
      chart.setOption(option);
      return chart;
    })
  },
  setCard3dBar(){
    var that = this;
    that.selectComponent('#product_three_left_two').init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      var data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]]
      chart.setOption({
        tooltip: {},
        xAxis3D: {
          type: 'category',
          data:  ['12a', '1a', '2a', '3a', '4a', '5a', '6a','7a', '8a', '9a', '10a', '11a','12p', '1p', '2p', '3p', '4p', '5p','6p', '7p', '8p', '9p', '10p', '11p']
        },
        yAxis3D: {
          type: 'category',
          data: ['Saturday', 'Friday', 'Thursday','Wednesday', 'Tuesday', 'Monday', 'Sunday']
        },
        zAxis3D: {
          type: 'value'
        },
        grid3D: {
          boxWidth: 200,
          boxDepth: 80,
          viewControl: {
            // projection: 'orthographic'
          },
          light: {
            main: {
              intensity: 1.2,
              shadow: true
            },
            ambient: {
              intensity: 0.3
            }
          }
        },
        series: [
          {
            type: 'bar3D',
            data: data.map(function (item) {
              return {
                value: [item[1], item[0], item[2]]
              };
            }),
            shading: 'lambert',
            label: {
              fontSize: 16,
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 20,
                color: '#900'
              },
              itemStyle: {
                color: '#900'
              }
            }
          }
        ]
      });
      return chart;
    })
  },
  setKLine(list){
    var that = this;
    that.selectComponent('#product_four').init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      var option = that.getStaticBarChart();
      option.color = ['#2D59E6','#FFAF36','#7FD1FF']
      option.grid.top='20%';
      option.grid.bottom='13%';
      option.series = [];
      option.xAxis.data = [];
      const echartsData = [];
      list.map(item=>{
        echartsData.push({
          name:item.productInfo.name,data:item.maps.map(itemChild=>itemChild.total)
        })
      })
      option.xAxis.data = list.map(item=>item.productInfo.name);
      echartsData.map((item,index)=>{
        option.series.push({
          name:item.name,
          type: "bar",
          stack: "Ad",
          barMaxWidth: 25,
          // barMinHeight: 10,
          emphasis: {
            focus: "series",
          },
          data:item.data
        })
      })
      chart.setOption(option);
      return chart;
    })
  },
  calculateMA(dayCount, data) {
    var result = [];
    for (var i = 0, len = data.length; i < len; i++) {
        if (i < dayCount) {
        result.push('-');
        continue;
        }
        var sum = 0;
        for (var j = 0; j < dayCount; j++) {
        sum += +data[i - j][1];
        }
        result.push(sum / dayCount);
    }
    return result;
  },
  setCardDiagram(list){
    var that = this;
    that.selectComponent('#product_four_left_two').init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      chart.setOption({
        backgroundColor: "transparent",
        tooltip: {
          formatter:function(params){
            const {data:{name,value,unNormalTotal}} = params;
            return `${name}\n正常: ${value}\n预警: ${unNormalTotal}`
          }
        },
        grid: {},
        animationDurationUpdate: function (idx) {
          // 越往后的数据延迟越大
          return idx * 100;
        },
        color: ["red", "rgb(10,92,170)", "rgb(114,205,255)"],
        animationEasingUpdate: "bounceIn",
        series: [
          {
            type: "graph",
            layout: "force",
            force: {
              repulsion: 100, //越大斥力越大
              gravity: 0.05, //越大节点越往中心靠拢
              edgeLength: 20, //值越小则长度越长
            },
            roam: true,
            draggable: true,
            symbolSize: 1,
            itemStyle: {
              // opacity: 0.9,
              color: () => {
                return (
                    'red',
                    'rgb(114,205,255)',
                    'rgb(10,92,170)'
                );
              },
            },
            label: {
              normal: {
                show: true,
                fontSize: 10,
              },
            },
            data: list
          },
        ],
      })
      return chart;
    })
  },
  setCardXuTuOption(testNum){
    var that = this;
    let icon =
    "path://M512.584639,219.893708c40.41173,0.258019,73.19961-32.274913,73.199609-72.557634,0-40.025725-32.78788-72.559681-73.199609-72.559681-40.473163,0-73.196538,32.533956-73.196538,72.559681,0,40.089206,32.723375,72.557634,73.196538,72.557634z,m73.330666,16.396499H439.129058c-55.266258,0-91.39098,48.28336-91.390981,94.203594v220.945238c0,42.847553,60.780905,42.847553,60.780905,0V347.144224h11.782872v555.564273c0,59.179548,82.417649,57.316077,84.337434,0V582.569248h15.696162V902.96754c3.391108,60.650871,84.340506,54.817796,84.340506-0.258019V347.144224h9.800631v204.234406c0,42.837314,62.696594,42.837314,62.696594,0V330.433391c0.126962-45.72979-36.116531-94.143184-91.257876-94.143184z";
    for (var index = 0; index < 4; index++) {
      that.selectComponent('#product_five_right_one'+index).init((canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr
        });
        chart.setOption({
          backgroundColor: "transparent",
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
            formatter: "{b0}: {c0}%",
          },
          grid: {
            containLabel: true,
            height: "200px",
            width: "auto",
            left: "0",
            top: "center",
          },
          xAxis: {
            max: 100,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          yAxis: {
            type: "category",
            inverse: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              // margin: 10,
              fontSize: 20,
              color: "white",
            },
            axisPointer: {
              label: {
                show: true,
                margin: 100,
              },
            },
          },
          series: [
            {
              type: "pictorialBar",
              symbolRepeat: "fixed",
              symbolMargin: "6!",
              label: {
                normal: {
                  show: false,
                  position: "right",
                  offset: [3, 0],
                  formatter: (param) => {
                    return param.value.toFixed(0) + "%";
                  },
                  textStyle: {
                    fontSize: 20,
                    color: "white",
                  },
                },
              },
              symbolClip: true,
              symbolSize: [22, 30],
              symbolPosition: "start",
              symbolBoundingData: 100,
              data: [
                {
                  value: testNum.normalTotal,
                  symbol: icon,
                  itemStyle: {
                    color: "#1DDBF9",
                  },
                },
              ],
              z: 10,
            },
            {
              type: "pictorialBar",
              itemStyle: {
                normal: {
                  opacity: 0.2,
                },
              },
              animationDuration: 0,
              symbolRepeat: "fixed",
              symbolMargin: "6!",
              symbolSize: [22, 30],
              symbolBoundingData: 100,
              symbolPosition: "start",
              // symbolOffset: [
              //   10,
              //   0
              // ],
              data: [
                {
                  value: 100,
                  symbol: icon,
                  itemStyle: {
                    color: "#1DDBF9",
                  },
                },
              ],
              z: 5,
            },
          ],
        })
        return chart
      })
    }
  },
  // 主产品使用量、生产量统计
  getSignProductUsedProduceState(){
    var that = this;
    app.requestP({
      url: '/daping/signProductUsedProduceState',
      method: 'post',
    }).then(res=>{
      this.setData({
        statisticSproductList:res.data.data.map(item=>{
          return {
            product_name:item.product_name,
            data:[
              {data:item.produce,index:Math.floor(Math.random()*1000),color:'#2D59E6'},
              {data:item.end,index:Math.floor(Math.random()*1000),color:'#71CCFF'},
            ]
          }
        }),
      },()=>{
        var list = that.data.statisticSproductList;
        for (let index = 0; index < list.length; index++) {
          for (let lindex = 0; lindex < list[index].data.length; lindex++) {
            var color = list[index].data[lindex].color;
            var total = list[index].data[lindex].data;
            var itemIndex = list[index].data[lindex].index;
            that.setCardFivePie_rght(color,total,itemIndex);
          }
      }
      })
    }).catch(err=>{
      app.showToptip(this,'err',err.data.msg)
    })
  },
  setCardFivePie_rght(color,total,itemIndex){
    var that = this;
    var placeHolderStyle = {
      normal: {
        label: {
          show: false,
            formatter: function (v) {
              //文字中遇到空格就换行
              let text = v.value;
              return text;
            },
        },
        labelLine: {
          show: true,
        },
      },
    };
    that.selectComponent('#product_five_right'+itemIndex).init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      var option = that.getStaticPieChart();
      option.series = [];
      option.color = [color];
      option.series.push({
        type: "pie",
        silent: 1,
        radius: ["65%", "80%"],
        label: {
          show: false,
        },
        labelLine: 0,
        emphasis: {
          label: {
            show: true,
            fontSize: "40",
            fontWeight: "bold",
          },
        },
        data: [
          {
            value:total,
            label: {
              show: true,
              fontSize: 8 * 1.5,
              color: '#485465',
              position: "center",
              formatter: "{c}",
            },
          },
          // { value: 55 ,},
        ],
      })
      chart.setOption(option);
      return chart;
    })
  },
  // 主产品不同年度 使用量统计
  getSignPrroductYearUsedProduceState(){
    app.requestP({
      url: '/daping/signPrroductYearUsedProduceState',
      method: 'post',
    }).then(res=>{
      var xAxisName = [];
      var seriesYear = [];
      var series = [];
      res.data.data.map((item,index)=>{
        item.map((itemChild)=>{
          if(xAxisName.indexOf(itemChild.productName) == -1){
            xAxisName.push(itemChild.productName);
          }
          if(seriesYear.indexOf(itemChild.year) == -1){
            seriesYear.push(itemChild.year);
            series.push({
              name:itemChild.year,
              type: "line",
              stack: "Total",
              data:[itemChild.produce]
            })
          }else{
            series.map((serItem,i)=>{
              if(serItem.name == itemChild.year){
                series[i].data.push(itemChild.produce)
              }
              if(serItem.name != itemChild.year){
                series[i].data.push(0);
              }
            })
          }
        })
        if(index == res.data.data.length-1){
          this.setCardSixBar(series,xAxisName);
          this.setCardSixRightBar(series,xAxisName)
        }
      })
    }).catch(err=>{
      app.showToptip(this,'err',err.data.msg)
    })
  },
  setCardSixBar(lineList,xAxisName){
    var that = this;
    that.selectComponent('#product_six_left').init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      var colors = ['#F71404','#2D59E6','#71CCFF']
      var option =  that.getStaticBarChart();
      option.color = ['#F71404','#2D59E6','#71CCFF'];
      option.grid.top = '26%'
      option.series = [];
      option.xAxis.data = xAxisName;
      option.title={
        text: '单位：支',
        left: 'right',
        top:'15%',
        textStyle: {
          color: '#666',
          fontSize: 12,
        }
      },
      option.legend = {
        data:lineList.map(item=>item.name+''),
        icon:"circle",
        top:"10%",
        right:"auto",
        itemWidth:8,
        itemHeight:8,
        textStyle:{
          fontSize:8,
          color:'#485465',
        },
      }
      lineList.map((item,index)=>{
        option.series.push({
          name:item.name+'',
          type:'line',
          data:item.data,
          lineStyle:{
            normal:{
              color:colors[index]
            }
          },
          itemStyle:{
            normal:{
              color:colors[index]
            }
          }
        })
      })
      chart.setOption(option);
      return chart
    })
  },
  setCardSixRightBar(lineList,xAxisName){
    var that = this;
    that.selectComponent('#product_six_right').init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      var option = this.setCardLineTotal();
      option.series = [];
      var colors = ['#F71404','#2D59E6','#71CCFF'];
      option.color = ['#F71404','#2D59E6','#71CCFF'];
      option.grid.top = '26%'
      option.xAxis.data = xAxisName;
      option.title={
        text: '单位：支',
        left: 'right',
        top:'15%',
        textStyle: {
          color: '#666',
          fontSize: 12,
        }
      },
      option.legend = {
        data:lineList.map(item=>item.name+''),
        icon:"circle",
        top:"10%",
        right:"auto",
        itemWidth:8,
        itemHeight:8,
        textStyle:{
          fontSize:8,
          color:'#485465',
        },
      }
      lineList.map((item,index)=>{
        option.series.push({
          name:item.name+'',
          type:'line',
          data:item.data,
          areaStyle: {},
          lineStyle:{
            normal:{
              color:colors[index]
            }
          },
          itemStyle:{
            normal:{
              color:colors[index]
            }
          }
        })
      })
      chart.setOption(option)
      return chart;
    })
  },
  setCardLineTotal(){
    return {
      xAxis: {
        type: "category",
        axisTick:{show:false,},
        nameTextStyle: {
          color: "#77869E",
          fontSize: 8,
        },
        axisLabel: {
          color: '#999999',
          fontSize: 8,
        },
        axisLine: {
          onZero: false,
          lineStyle: {
            color: "#cccccc",
          },
        },
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
      },
      yAxis: {
        type: "value",
        minInterval: 1,
        axisLabel:{color:"#000", fontSize:8,},
        axisLine: {
          lineStyle: {
            color: "#cccccc",
          },
          show: true,
        },
      },
      color: ["#7661FF", "#5AC8FA", "#00B972"],
      grid: {
        left: "3%",
        top: "5%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130, 110],
          type: "line",
        },
      ]
    }
  },
  setSevenCardPie(list){
    var that = this;
    that.selectComponent('#product_seven_left').init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      var itemStyle = {
        normal: {
          label: {
            show: false,
            formatter: function (v) {
              //文字中遇到空格
              let text = v.name+'\n'+v.value;
              return text;
            },
          },
          labelLine: {
            show: true,
            length:4,
            length2:4,
          },
        },
      }
      var option = this.getStaticPieChart();
      option.color = ['rgb(127,210,255)','rgb(44,88,288)','rgb(247,20,4)',];
      var center = [["50%", "12%"],["50%", "35%"],["50%", "60%"],["50%", "85%"]];
      option.series = [];
      list.map((item,index)=>{
        option.series.push({
          type: "pie",
          radius: ['40%','70%'],
          center: center[index],
          itemStyle,
          label: {
            position: "inside",
            formatter: "{d}%",
            fontSize: 8,
            color: '#fff',
          },
          data: item.data,
        })
      })
      chart.setOption(option)
      return chart
    })
  },
  setCardSenvenPie(list){
    var that = this;
    that.selectComponent('#product_seven_right').init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      var option = this.getStaticPieChart();
      option.series = [];
      option.color = ['#FFAF36','#7A4AFE']
      option.legend = {
        data:list.map(item=>item.name),
        icon:"circle",
        top:"2%",
        right:"auto",
        itemWidth:8,
        itemHeight:8,
        textStyle:{
          fontSize:8,
          color:'#485465',
        },
      }
      option.series = [{
        type: "pie",
        radius: "80%",
        center: ["50%", "50%"],
        label: {
          show:false,
          position: "inside",
          formatter: "{d}%",
          fontSize: 8,
          color: '#fff',
        },
        data:list,
      }]
      chart.setOption(option);
      return chart;
    })
  },
  // 主产品正常、预警统计
  getSignPorductNormalWarningState(){
    app.requestP({
      url: '/daping/signPorductNormalWarningState',
      method: 'post',
    }).then(res=>{
      this.setCardEightBar(res.data.data)
    }).catch(err=>{
      app.showToptip(this,'err',err.data.msg)
    })
  },
  setCardEightBar(list){
    var that = this;
    that.selectComponent('#product_eight_left').init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      var option =  that.getStaticBarChart();
      option.series = [];
      option.grid.top='20%';
      option.grid.bottom='13%';
      option.xAxis.data = list.map(item=>item.product_name);
      const echartsData = [
        {name:'正常',data:list.map(item=>item.normal)},
        {name:'报警',data:list.map(item=>item.warning)},
      ]
      option.color = ['#2D59E6','#E1291C']
      option.legend = {
        data:echartsData.map(item=>item.name),
        icon:"circle",
        top:"2%",
        right:"auto",
        itemWidth:8,
        itemHeight:8,
        textStyle:{
          fontSize:8,
          color:'#485465',
        },
      }
      echartsData.map((item,index)=>{
        option.series.push({
          name: item.name,
          type: 'bar',
          emphasis: {
            focus: "series",
          },
          data:item.data,
        });
      })
      chart.setOption(option);
      return chart;
    });
  },
  setCardEightRightBar(list){
    var that = this;
    that.selectComponent('#product_eight_right').init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      var option = that.getStaticBarChart();
      option.title = {
        show:false,
        text: '',
        top:'10%',
        textStyle: {
          color: '#999',
          fontSize: 6,
        }
      }
      option.legend = {
        data:list.map(item=>item.name),
        icon:"circle",
        top:"2%",
        right:"auto",
        itemWidth:8,
        itemHeight:8,
        textStyle:{
          fontSize:8,
          color:'#485465',
        },
      }
      option.grid = {
        top:'20%',
        bottom:'15%',
        right:'15%',
        left:'15%'
      }
      option.color = ['#26E657','#FFAF36','#F71404'];
      option.yAxis = [
        {
          type: 'value',
          // min: 0,
          // max: 250,
          interval: 50,
          minInterval: 1,
          axisLine: {
            lineStyle: {
              color: "#cccccc",
            },
            show: false,
          },
          axisLabel: {
            color: "#999999",
            fontSize: 8,
          },
        },
        {
          type: 'value',
          min: 0,
          max:25,
          interval: 5,
          // minInterval: 1,
          axisLine: {
            lineStyle: {
              // color: "",
            },
            show: false,
          },
          axisLabel: {
            color: "#999999",
            fontSize: 8,
          },
        }
      ];
      option.series = [];
      list.map((item,index)=>{
        option.series.push({
          name: item.name,
          type: 'bar',
          stack: "Ad",
          emphasis: {
            focus: "series",
          },
          data:item.data,
        })
      })
      chart.setOption(option);
      return chart;
    })
  },
  setCardNineBar(list){
    var that = this;
    that.selectComponent('#product_nine_left').init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      var option = that.getCysOrderOption(list);
      option.title = {
        text: '产品分类信息',
        top:'10%',
        textStyle: {
          color: '#999',
          fontSize: 6,
        }
      }
      option.grid = {
        top:"25%",
        left:"13%",
        right:"15%",
        bottom:"14%",
      }
      option.yAxis = [
        {
          type: 'value',
          // min: 0,
          // max: 250,
          // interval: 50,
          minInterval: 1,
          axisLine: {
            lineStyle: {
              color: "#cccccc",
            },
            show: false,
          },
          axisLabel: {
            color: "#999999",
            fontSize: 8,
          },
        },
        {
          type: 'value',
          min: 0,
          max:25,
          interval: 5,
          // minInterval: 1,
          axisLine: {
            lineStyle: {
              // color: "",
            },
            show: false,
          },
          axisLabel: {
            color: "#999999",
            fontSize: 8,
          },
        }
      ];
      chart.setOption(option);
      return chart;
    })
  },
  setCardNineRightBar(list){
    var that = this;
    that.selectComponent('#product_nine_right').init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      var option = that.setCardLineTotal();
      option.series = [];
      option.legend = {
        data:list.map(item=>item.name),
        icon:"circle",
        top:"5%",
        right:"auto",
        itemWidth:8,
        itemHeight:8,
        textStyle:{
          fontSize:8,
          color:'#485465',
        },
      }
      option.yAxis = {
        type: "value",
        // minInterval: 1,
        axisLine: {
          lineStyle: {
            color: "#cccccc",
          },
        },
        axisLabel: {
          color: "#999999",
          fontSize: 8,
        },
      },
      option.grid.top = '20%';
      option.grid.right = '10%';
      list.map(item=>{
        option.series.push({
          name:item.name,
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          showSymbol:false,
          emphasis: {
            focus: 'series'
          },
          data: item.data,
        })
      })
      chart.setOption(option)
      return chart;
    })
  },

  // 地区产品统计
  setCardLeftFive(list){
    var that = this;
    that.selectComponent('#product_five').init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      var option = {
        xAxis: {
          type: 'value',
          axisLabel: {
            show: false
          }
        },
        grid:{
          top:0,
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        yAxis: {
          type: 'category',
          data: list.name.map(item=>item),
          axisTick: { show: false },
          axisLabel:{color:"#999999", fontSize:9,},
          axisLine: { lineStyle: { color: '#DEE3FF' } },
        },
        series:list.data.map(item=>{
          return{ name:item.name,type:'bar',data:item.data }
        })
      }
      chart.setOption(option);
      return chart;
    })
  },
  // 图15 主产品在不同地区库存、使用数据统计 /daping/signProductCityState
  getSignProductCityState(){
    app.requestP({
      url: '/daping/signProductCityState',
      method: 'post',
    }).then(res=>{
      this.setData({
        orderCardList:res.data.data,
      })
      var sevenCardPieNum = [];
      res.data.data.map(item=>{
        sevenCardPieNum.push({
          data:[{name:item.city,value:item.stack},{name:item.city+'1',value:item.used}]
        })
      })
      this.setSevenCardPie(sevenCardPieNum);
    }).catch(err=>{
      app.showToptip(this,'err',err.data.msg)
    })
  },
  // 主产品最近一周每一天的使用量统计 
  getSignProductEveryWeekState(){
    app.requestP({
      url: '/daping/signProductEveryWeekState',
      method: 'post',
    }).then(res=>{
      this.setKLine(res.data.data);
    }).catch(err=>{
      app.showToptip(this,'err',err.data.msg)
    })
  },
})