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:1,
    transportStatusData:{},
    transportBusinessData:{},
    transportBusinessNum:1,
    orderWaringStatusData:{},
    waringStatus:0,
    waringStatusList:["当天","本周","本月",],
    transportCityData:[],
    transOrderList:[],
    transOrderIndex:0,
    polyline:[],
    tempList:[],
    hisLocal:[],
    urlLeft:'/group156/default/20211216/16/58/6/bde42061736d8dfcd68bbe33fd9464a0.jpg"',
    banner: "/group156/default/20211216/16/58/6/bde42061736d8dfcd68bbe33fd9464a0.jpg",
    ossPath: app.globalData.$filePath,
    title: '冷链追溯系统',
    token: '',
    mapCtx: '',
    latitude: '', //纬度
    longitude: '', //经度
    navbarData: {
      title: app.globalData.title,
      showCapsule: true,
      share: false
    },
    alarmDTO: {
      chipNum: 0,
      allTimeNum: 0,
      realTimeNum: 0
    },
    temperatureDTO: { //温度监测数量
      normal: 0,
      warning: 0,
      alarm: 0
    },
    waringDTO: {
      chipNum: 0,
      allTimeNum: 0,
      realTimeNum: 0
    },
    inTrans: 0, //已出库（个）
    inStore: 0, //已入库（个）
    inEnd: 0, //已结束（个）
    total: 0, //已生产（个）

    error11: 0, //一型有源报警数量
    error20: 0, //二型报警数量
    total10: 0, //一型无源数量
    total11: 0, //一型有源数量
    total20: 0, //二型数量
    warning11: 0, //一型有源预警数量
    warning20: 0, //一型无源预警数量
    mapTopData: {
      name: '暂无',
      status: '暂无',
      updateTime: '暂无',
      lastTemperature: '暂无',
      minTemperature: '暂无',
      maxTemperature: '暂无'
    },
    llzsEc: {
      lazyLoad: true,
    },
    chainTempList: [],
    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,
    showAuthWin: false,
    showChaType: false,
    isPrem: false,
    device: 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:[{createTime:'2022-07-01',num:50},{createTime:'2022-07-01',num:50},{createTime:'2022-07-01',num:50},{createTime:'2022-07-01',num:50},{createTime:'2022-07-01',num:50},{createTime:'2022-07-01',num:50},{createTime:'2022-07-01',num:50}]
  },
  // 事件处理函数
  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,
    })
  },
  onReady: function () {
    var that = this;
    // that.canvasRingA = that.selectComponent("#canvasRingA");
    // that.canvasRingB = that.selectComponent("#canvasRingB");
    // that.canvasRingC = that.selectComponent("#canvasRingC");
    // that.canvasRingG = that.selectComponent("#canvasRingG");
    // that.canvasRingA.showCanvasRing();
    // that.canvasRingB.showCanvasRing();
    // that.canvasRingC.showCanvasRing();
    // that.canvasRingG.showCanvasRing();

    // that.canvasRingD = that.selectComponent("#canvasRingD");
    // that.canvasRingE = that.selectComponent("#canvasRingE");
    // that.canvasRingF = that.selectComponent("#canvasRingF");
    // that.canvasRingL = that.selectComponent("#canvasRingL");
    // that.canvasRingD.showCanvasRing();
    // that.canvasRingE.showCanvasRing();
    // that.canvasRingF.showCanvasRing();
    // that.canvasRingL.showCanvasRing();
  },
  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.setPie4Chart({total:8,abnormal:3,normal:8});
    // this.setCard_top_right_butChart([{"name":"北京","orderNum":50},{"name":"上海","orderNum":30},{"name":"安徽","orderNum":20},{"name":"成都","orderNum":20},{"name":"广东","orderNum":20},]);
    // this.product_two_left_two([
    //   {name:'标签1',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:'标签2',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:'',data:[30.0, 42.2, 43.3, 44.5, 46.3, 80.2, 200.3, 123.4, 223.0, 26.5, 12.0, 6.2]},
    // ])
    // this.setCardPieTwo();
    // this.setCard3dBar();
    // this.setKLine();
    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 cardSixBarList = [{"name":"北京","orderNum":50},{"name":"上海","orderNum":30},{"name":"安徽","orderNum":20},{"name":"成都","orderNum":20},{"name":"广东","orderNum":20}];
    // var cardSixLineList = [{name:'标签1',data:[10,15,18,25,15]},{name:'标签2',data:[14,16,20,28,17]},{name:'标签3',data:[20,24,28,32,22]}]
    // this.setCardSixBar(cardSixBarList,cardSixLineList);
    // 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);
    // var sevenCardPieList = [
    //   { name: "标签1", value: 50 },
    //   { name: "标签2", value: 20 },
    // ]
    // this.setCardSenvenPie(sevenCardPieList);
    // var eightBarLeftList = [
    //   {name:'标签1',data:[2.0, 4.9, 7.0, 23.2,]},
    //   {name:'标签2',data:[2.6, 5.9, 9.0, 21.4,]},
    //   {name:'标签3',data:[3.6, 6.9, 8.0, 18.4,]},
    //   {name:'标签4',data:[4.6, 7.9, 7.0, 16.4,]},
    // ]
    // this.setCardEightBar(eightBarLeftList);
    // var eightRightBarList = [
    //   {name:'标签1',data:[10, 20, 30, 40, 50, 60]},
    //   {name:'标签2',data:[10, 20, 30, 40, 50, 60]},
    //   {name:'标签3',data:[10, 20, 30, 40, 50, 60]},
    //   {name:'',data:[15,22,32,45,48,67]}
    // ]
    // this.setCardEightRightBar(eightRightBarList);
    // this.setCardNineBar([{"name":"二价流脑","orderNum":50},{"name":"胶囊","orderNum":30},{"name":"产品1","orderNum":20},{"name":"颗粒","orderNum":20},]);
    // var nineRightBarList = [{name:'生产',data:[120, 132, 101, 134, 90, 230, 210]},{name:'销售',data:[220, 182, 191, 234, 290, 330, 310]},{name:'在途',data:[150, 232, 201, 154, 190, 330, 410]},{name:'交付',data:[158, 242, 141, 164, 180, 230, 510]}]
    // this.setCardNineRightBar(nineRightBarList);
    /**沃森新 */
    //获取token,若无则判定用户是游客访问，不进行任何请求
    var token = wx.getStorageSync('token');
    this.setData({
      token,
      chainTempList:[],
      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();
  },
  getOrderWarnOption(list){
    var fontSize = 12
    var fontColor = "#999999"
    return {
      color:["#0079FF","#FF723A","#EA1C43"],
      title: {
        show:false
      },
      grid:{
        top:"5%",
        left:"5%",
        right:"5%",
        bottom:"5%",
      },
      tooltip: {
        show:true
      },
      legend: {
        data:list.map(item=>item.name),
        icon:"rect",
        orient:"vertical",
        top:"middle",
        right:"10%",
        itemWidth:fontSize,
        itemHeight:fontSize,
        textStyle:{
          fontSize:fontSize,
          color:fontColor,
        },
        formatter(name){
          return name+" " + list.filter(item=>item.name == name)[0].num
        },
      },
      series: [
        {
          type: 'pie',
          silent:0,
          radius: ["40%", '90%'],
          center: ["30%", '50%'],
          label:{
            position:'inside',
            formatter:"{d}%",
          },
          itemStyle:{
            borderColor:"#ffffff",
            borderWidth:2,
          },
          data: list.filter(item=>{
            item.value = item.num
            return item
          }),
        },
      ]
    }
  },
  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({
      chainTempList:temp,
      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);
  },
  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.getListInfo(markers[0].bId);
        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) {
          //冷链信息
          that.getListInfo(that.data.markers[i].bId);
          //冷链温度曲线
          that.getListChainTemperature(that.data.markers[i].bId);
          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)
    })
  },
  getListInfo(id) {
    var that = this;
    app.requestP({
      url: '/index/getChainInfo',
      method: 'post',
      contentType: 'application/json',
      data: {
        id
      }
    }).then(res => {
      const {
        name,
        status,
        updateTime,
        lastTemperature,
        minTemperature,
        maxTemperature
      } = res.data.data;
      that.setData({ //数据处理
        mapTopData: {
          name: name || '暂无',
          status: status == '00' ? '正常' : status == '10' ? '黄色预警' : status == '20' ? '红色预警' : '暂无',
          updateTime: updateTime || '暂无',
          lastTemperature: lastTemperature ? lastTemperature + '℃' : '暂无',
          minTemperature: minTemperature ? minTemperature + '℃' : '暂无',
          maxTemperature: maxTemperature || '暂无'
        },
      })
    }).catch(err=>{
      app.showToptip(that,'error',err.data.msg)
    })
  },
  getListChainTemperature(id) {
    var that = this;
    app.requestP({
      url: '/index/listChainTemperature',
      method: 'post',
      contentType: 'application/json',
      data: {
        id
      },
    }).then(res => {
      that.setData({
        chainTempList: res.data.data,
        tempList:res.data.data
      })
      that.setTemp(res.data.data);
    }).catch(err => {
      app.showToptip(that, 'error', '暂无温度数据');
    })
  },
  setTransOption(temperature) {
    var that = this;
    that.ecWen = that.selectComponent('#llzsChartDom');
    that.ecWen.init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      var option = that.getTransOption();
      option.xAxis.data = temperature.map(v => v.productTypeName);
      option.series[0].data = temperature.map(v => v.state10);
      option.series[1].data = temperature.map(v => v.state11);
      option.series[2].data = temperature.map(v => v.state20);
      chart.setOption(option);
      that.wenChart = chart;
      return chart;
    });
  },
  getTransOption() {
    return {
      title: {
        text: '数量',
        textStyle: {
          color: '#74788D',
          fontWeight: 'normal',
          fontSize: '16rpx'
        }
      },
      tooltip: {
        show: false,
        trigger: 'axis'
      },
      color: ['#7661FF', '#5AC8FA', '#00B972'],
      legend: {
        data: ['全程温控', '实时追溯', '追溯标签'],
        icon: "rect", //  设置形状  类型包括 circle，rect ，roundRect，triangle
        itemHeight: 11,
        itemWidth: 11,
        align: 'left',
        itemGap: 5,
        right: 10,
        top: 0,
        textStyle:{
          color:'#999',
        }      
      },
      grid: {
        left: '0%',
        right: '0%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        nameTextStyle: {
          color: "#77869E",
          fontSize: 10
        },
        axisLine: {
          onZero: false,
          lineStyle: {
            color: "#999"
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false,
        },
        data: ["产品一", "产品二", "产品三", "产品四"],
      },
      yAxis: [{
        type: 'value'
      }],
      series: [{
          name: '追溯标签',
          type: 'bar',
          label: {
            show: true,
            position: 'top'
          },
          symbolSize: '0',
          lineStyle: {
            width: 1
          },
          data: [50, 180, 290, 50]
        },
        {
          name: '全程温控',
          type: 'bar',
          label: {
            show: true,
            position: 'top'
          },
          symbolSize: '0',
          lineStyle: {
            width: 1
          },
          data: [200, 200, 292, 200]
        }, {
          name: '实时追溯',
          type: 'bar',
          label: {
            show: true,
            position: 'top'
          },
          symbolSize: '0',
          lineStyle: {
            width: 1
          },
          data: [248, 290, 290, 240]
        }
      ]
    }
  },
  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]
      }]
    }
  },
  productTypeChipCount(userId) {
    var that = this;
    app.requestP({
      url: '/index/productTypeChipCount',
      method: 'post',
      data: {
        userId
      }
    }).then(res => {
      that.setData({
        productTypeChipCount: res.data.data
      })
      const temperature = res.data.data;
      that.setPieChart(temperature.slice(0,6));
    }).catch(err => {
      that.setData({
        productTypeChipCount: []
      })
    })
  },
  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,
          },
        ]
      }]
    }
  },
  getChainStatus(userId) {
    var that = this;
    app.requestP({
      url: '/index/getChainStatus',
      method: 'post',
      data: {
        userId
      }
    }).then(res => {
      const {
        alarmDTO,
        temperatureDTO,
        waringDTO,
        inTrans,
        inStore,
        inEnd,
        total
      } = res.data.data;
      that.setData({
        temperatureDTO,
        waringDTO,
        inTrans,
        inStore,
        inEnd,
        total
      })
    }).catch(err=>{
      app.showToptip(that,'error',err.data.msg)
    })
  },
  getWarningState(userId) {
    var that = this;
    app.requestP({
      url: '/index/warningState',
      method: 'post',
      data: {
        userId
      }
    }).then(res => {
      const {
        error11,
        error20,
        total10,
        total11,
        total20,
        warning11,
        warning20
      } = res.data.data;
      that.setData({
        error11,
        error20,
        total10,
        total11,
        total20,
        warning11,
        warning20
      }, () => {
        // that.canvasRingA.showCanvasRing();
        // that.canvasRingB.showCanvasRing();
        // that.canvasRingC.showCanvasRing();
        // that.canvasRingD.showCanvasRing();
        // that.canvasRingE.showCanvasRing();
        // that.canvasRingF.showCanvasRing();
        // that.canvasRingG.showCanvasRing();
        // that.canvasRingL.showCanvasRing();
      })
    }).catch(err=>{
      app.showToptip(that,'error',err.data.msg)
    })
  },
  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();
      that.productTypeChipCount(userId);
      that.getChainStatus(userId);
      // that.getWarningState(userId);
    }).catch(err => {
      app.showToptip(that, 'error', '请刷新重试');
    })
  },
  transportationInfo() {
    var token = wx.getStorageSync('token');
    if(!token){
      wx.navigateTo({
        url: '/pages/login/login',
      })
      return;
    }
    var transportationJson = JSON.stringify(this.data.productChipStateList);
    wx.navigateTo({
      url: '/pages/index/transportationInfo/transportationInfo?list=' + transportationJson,
    })
  },
  monitoringNum() {
    var token = wx.getStorageSync('token');
    if(!token){
      wx.navigateTo({
        url: '/pages/login/login',
      })
      return;
    }
    var productTypeChipCountJson = JSON.stringify(this.data.productTypeChipCount);
    wx.navigateTo({
      url: '/pages/index/monitoringNum/monitoringNum?list=' + productTypeChipCountJson,
    })
  },
  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,
    })
  },
  expressInfo(){
    var token = wx.getStorageSync('token');
    if(!token){
      wx.navigateTo({
        url: '/pages/login/login',
      })
      return;
    }
    var expressData = JSON.stringify(this.data.expressData);
    var title = JSON.stringify([{name:'出库',type:'o'},{name:'入库',type:'i'}]);
    var titleName = JSON.stringify({titleName:'出入库统计'});
    wx.navigateTo({
      url: '/pages/index/statics/statics?list=' +encodeURIComponent(expressData)+'&title='+title+'&titleName='+titleName,
    })
  },
  goAbnormal(){
    wx.navigateTo({
      url: '/pages/index/abnormal/abnormal',
    })
  },
  ordersInfo(){
    wx.navigateTo({
      url: '/pages/index/ordersList/ordersList',
    })
  },
  transporDetails(){
    var temp = this.data.temp;
    var productName = this.data.productName;
    var {product10,product20,product30,product40,product50} = this.data;
    var token = wx.getStorageSync('token');
    if(!token){
      wx.navigateTo({
        url: '/pages/login/login',
      })
      return;
    }
    wx.navigateTo({
      url: '/pages/index/transporDetails/transporDetails?temp='+encodeURIComponent(JSON.stringify(temp))+'&productName='+encodeURIComponent(JSON.stringify(productName))+'&productNum='+encodeURIComponent(JSON.stringify([product10,product20,product30,product40,product50])),
    })
  },
  onShareAppMessage() {
    return {
      title: 'cover-view',
    }
  },
  monitoringNum() {
    var token = wx.getStorageSync('token');
    if(!token){
      wx.navigateTo({
        url: '/pages/login/login',
      })
      return;
    }
    var transportCityDataJson = JSON.stringify(this.data.transportCityData);
    wx.navigateTo({
      url: '/pages/index/monitoringNum/monitoringNum?list=' + transportCityDataJson,
    })
  },
  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);
      this.setKLine(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);
      this.setKLine(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 = ['red','rgb(114,205,255)','rgb(10,92,170)']
      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
        })
      })
      console.log(option);
      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
      });
      list = list.map(item=>{
        return {orderNum:item.total,name:item.city || 'N/A'}
      })
      var option = that.getCysOrderOption(list);
      // lenged
      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;
    })
  },
  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
      })
    }
  },
  setCardFivePie_rght(list){
    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').init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      var option = this.getStaticPieChart();
      var position = [['20%','20%'],['20%','50%'],['20%','80%'],['50%','20%'],['50%','50%'],['50%','80%'],['80%','20%'],['80%','50%'],['80%','80%']]
      position.map(item=>{
        option.series.push({
          type: "pie",
          clockWise: true, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          silent:false,
          radius: [20, 23],
          center: item,
          itemStyle: placeHolderStyle,
          label:{
            normal:{
              show:true,
              position:'center',
              color:'#485465',
              formatter:'{d}',
              emphasis:{
                show:true
              }
            }
          },
          data: [
            {
              value: 0.6,
              itemStyle:{
                normal:{
                  color:'#0e74ff'
                }
              }
            },
            {
              value: 0.4,
              itemStyle:{
                normal:{
                  color:"rgb(243,243,251)"
                }
              }
            }
          ]
        })
      })
      chart.setOption(option)
      return chart;
    })
  },
  setCardSixBar(list,lineList){
    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.getCysOrderOption(list);
      option.color = ['rgb(243,243,251)'];
      option.grid.top = '20%'
      option.yAxis.axisLabel.color = '#000';
      option.legend = {
        data:lineList.map(item=>item.name),
        icon:"circle",
        top:"2%",
        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(list){
    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 = [];
      list.map(item=>{
        option.series.push({
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          showSymbol:false,
          emphasis: {
            focus: 'series'
          },
          data: item.data,
        })
      })
      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(247,20,4)','rgb(127,210,255)','rgb(44,88,288)'];
      var center = [["50%", "10%"],["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;
    })
  },
  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.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: 'bar',
          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 = {
        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: index != list.length -1 ? 'bar' :'line',
          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;
    })
  },
})