operation_wx/pages/index/index.js

import * as echarts from '../../ec-canvas/echarts';
import * as liquidFill from '../../ec-canvas/echarts-liquidfill.min';
const util = require('../../utils/util.js')
const app = getApp()
const api = require('../../api/index.js');
Page({
  data: {
 // 状态栏高度
 statusBarHeight: wx.getStorageSync('statusBarHeight'),
 // 导航栏高度
 navBarHeight: wx.getStorageSync('navBarHeight'),
 // 导航栏和状态栏高度
 navStatusBarHeight: wx.getStorageSync('navStatusBarHeight'),
 // 胶囊
 menu:wx.getStorageSync('menu'),
 mode: '',
    ec_dispace_charts: {
      lazyLoad: true
    },
    ec:{
      lazyLoad: true
    },
    img_path:'',
    ectricdata:[],
    between:{},
    currentDate:'',
    fitnessdata:[],
    rotation:0,
    objectArray: [],
    stationindex:0,
    stationName:wx.getStorageSync('station').name,
    timer1:'',
    timer2:'',
    timer3:'',
    chartInstance1:'',
    chartInstance2:'',
    chartInstance3:'',
    characteristic:{},
    comStateunm:0 // 设备在线数
  },
  onLoad: function () {
    let _this =this
    const updateManager = wx.getUpdateManager();
   // 获取手机系统信息
 
updateManager.onCheckForUpdate(function (res) {
  if (res.hasUpdate) {
    // 提示用户更新
    wx.showModal({
      title: '更新提示',
      content: '发现新版本，是否下载新版本并重启应用？',
      success: function (res) {
        if (res.confirm) {
          // 用户确认下载新版本
          downloadAndUpdate();
        } else if (res.cancel) {
          // 用户取消，可以选择后续操作
        }
      }
    });
  }
});

    // const now = new Date();
    // const year = now.getFullYear();
    // const month = now.getMonth() + 1;
    // const date = now.getDate();

    // const dateString = `${year}-${month}-${date}`;
  
    // 获取组件
    this.ecComponent = this.selectComponent('#dispace_charts');
    this.ecline = this.selectComponent('#mychart_line');
    // this.initChart()
  //  let base64imgages =util.Background_base64('https://esos-iot.bjdexn.cn/wx_images/bj.png')
   this.setData({
    img_path:'https://esos-iot.bjdexn.cn/wx_images/bj.png'
   })
     
  //  this.rotateImage()
 
  },
 downloadAndUpdate() {
    wx.downloadFile({
      url: 'https://example.com/path/to/new/version.zip', // 新版本小程序包的下载链接
      success: function (res) {
        if (res.statusCode === 200) {
          // 下载成功，保存临时文件路径
          const tempFilePath = res.tempFilePath;
          // 应用新版本
          applyUpdate(tempFilePath);
        } else {
          // 下载失败，处理异常
        }
      }
    });
  },
  applyUpdate(tempFilePath) {
    let _this = this
    wx.applyUpdate({
      filePath: tempFilePath,
      success: function () {
        // 新版本应用成功
        _this.getlist()  
        // wx.navigateTo({
        //   url: '/pages/login/index',
        // })

      }
    });
  },
  // 图片旋转
  rotateImage() {
    const currentRotation = this.data.rotation + 180; // 每次增加180度
    const animation = wx.createAnimation({
      duration: 300, // 动画时长
      timingFunction: 'ease', // 动画效果
    });
    animation.rotate(currentRotation).step();
    this.setData({
      animationData: animation.export(),
      rotation: currentRotation
    });
  },
  // 电站列表
  bindPickerChange (e) {
    console.log('选中项改变，携带值为', e.detail.value);
    let _this = this
    const station = this.data.objectArray[e.detail.value];
    
    wx.setStorage({
      key: 'station', // 本地缓存中指定的 key
      data: station,
      success: function () {
        _this.setData({
          stationName:wx.getStorageSync('station').name
        })
        clearInterval(_this.timer1);
        clearInterval(_this.timer2);
        clearInterval(_this.timer3);
        _this.getlist()  
      }
    });
  },
  getlist(){
   //  电站信息
   let data={
    page:1,
    rows:1000
   }
api.request(`/api/v1/stations/HDES/superStations/${wx.getStorageSync('station').id}`, 'get',data)
  .then((res) => {
    if (res.code==200) {
      let unm = 0
      for (let index = 0; index < res.data.list.length; index++) {
         if (res.data.list[index].comState=='在线') {
          unm++
         }
        
      }
      this.setData({
        stationName:wx.getStorageSync('station').name,
        ectricdata:res.data.list,
        comStateunm:unm,
        characteristic:res.data.characteristic,
        currentDate: util.CumulativeTimess(0) // 假设在小程序页面中使用了data属性绑定了currentDate
      })
   
      // console.log('请求成功：', res);
    // 先卸载旧图表
  
    this.beforeDestroy();
    this.beforeDestroys();
    this.initChartright()
    // 重新初始化图表
    this.initCharts(res.data.characteristic.soc/100);
      // 在这里处理返回的数据
        // 这里是延时执行的代码
        // this.getsuperStations()
    }else{

    }
  
  })
  .catch((err) => {
    console.error('请求失败：', err);
    // 在这里处理请求失败的情况
  });

  },
  getsuperStations(){
    let _this =this
    //  电站信息
    let data={
     page:1,
     rows:1000
    }
 api.request(`/api/v1/stations/HDES/superStations/${wx.getStorageSync('station').id}`, 'get',data)
   .then((res) => {
     if (res.code==200) {
       let unm = 0
       for (let index = 0; index < res.data.list.length; index++) {
          if (res.data.list[index].comState=='在线') {
           unm++
          }
         
       }
       this.setData({
         stationName:wx.getStorageSync('station').name,
         ectricdata:res.data.list,
         comStateunm:unm,
         characteristic:res.data.characteristic,
         currentDate: util.CumulativeTimess(0)
       })
       
       // console.log('请求成功：', res);
     // 先卸载旧图表
     let data = [res.data.characteristic.soc / 100, res.data.characteristic.soc / 100, res.data.characteristic.soc / 100];
     _this.updateChartData1(res.data.characteristic.soc / 100, data);
     let initialData = {
      accumulatedchargetime: _this.data.characteristic.chargeEnergyDaily,
      accumulateddischargetime: _this.data.characteristic.disChargeEnergyDaily
    };
    this.updateChartData(initialData)
     // 重新初始化图表
       // 在这里处理返回的数据
       this.timer1 = setTimeout(() => {
         // 这里是延时执行的代码
         this.getsuperStations()
       }, 10000); 
     }else{
 
     }
   
   })
   .catch((err) => {
     console.error('请求失败：', err);
     // 在这里处理请求失败的情况
   });
 
   },
  // 卸载图表，清理资源
unloadCharts: function () {
  if (this.charts) {
    this.charts.dispose(); // 销毁图表实例
    this.charts = null; // 置空图表实例
  }
},

  // 电容量
  initChartright: function () {
    let _this = this;
  
    // 初始化图表
    this.ecline.init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      // 初始数据
      let initialData = {
        accumulatedchargetime: _this.data.characteristic.chargeEnergyDaily,
        accumulateddischargetime: _this.data.characteristic.disChargeEnergyDaily
      };
      console.log(_this.data.ectricdata);
      // this.updateChartData(initialData)
      // 设置初始选项
      let option = _this.getChartOption(initialData);
      chart.setOption(option);
    _this.chartInstance2 = chart;
  

     
      return chart;
    });
  },
    // 定义更新数据函数
    updateChartData(newData) {
      let updatedOption = this.getChartOption(newData);
      this.chartInstance2.setOption(updatedOption);
    },

  // 辅助函数，用于生成图表选项
  getChartOption: function (data) {
    let _this = this;
    return {
      backgroundColor: "#ffffff",
      legend: [{
        left: '0',
        bottom: 20,
        itemHeight: 8,
        itemWidth: 8,
        icon: "circle",
        textStyle: {
          color: '#999999', // 设置文字颜色为灰色
          fontSize: 10 // 设置字号为20px
      },
        formatter: function (name) {
          return name + `   ${data.accumulatedchargetime} kWh`;
        },
        rich:{
          a: {
            color: '#222222',
          fontSize: 12 // 设置字号为20px
           
          }
        },
        data: [{ name: '今日充电' }]
      }, {
        left: '0',
        bottom: 0,
        itemHeight: 8,
        itemWidth: 8,
        icon: "circle",
        textStyle: {
          color: '#999999', // 设置文字颜色为灰色
          fontSize: 10 // 设置字号为20px
      },
        formatter: function (name) {
          return name + `   ${data.accumulateddischargetime} kWh`;
        },
        data: [{ name: '今日放电' }]
      }],
      tooltip: {
        trigger: 'item'
      },
      series: [{
        type: 'pie',
        radius: ['40%', '60%'],
        center: ['50%', '40%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 0,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [{
          value: data.accumulatedchargetime,
          name: '今日充电',
          itemStyle: { color: '#4DF096' }
        }, {
          value: data.accumulateddischargetime,
          name: '今日放电',
          itemStyle: { color: '#3C9EFA' }
        }]
      }]
    };
  },
  
 
// 设备详情
onIconTap(){
  let _this =this
 wx.navigateTo({
   url: `/pages/details/index?uuid=${_this.data.ectricdata[0].uuid}`,
 })
},
// 设备健康
onhealthy(){
  wx.navigateTo({
    url: '/pages/healthy/index',
  })
 },
// 设备信息
ondetails(){
  wx.navigateTo({
    url: '/pages/monitor/index',
  })
},
 // 水波图

 initCharts(value) {
  let _this = this;
  this.ecComponent.init((canvas, width, height, dpr) => {
    const charts = echarts.init(canvas, null, {
      width: width,
      height: height,
      devicePixelRatio: dpr
    });

    // 将初始的数值转换为数据
    let data = [value, value, value];

    // 初始化图表选项
    let option = _this.getChartOption1(value, data);
    charts.setOption(option);

    // 存储图表实例
    _this.chartInstance3 = charts;

    // 启动定时器更新数据
    _this.getsuperStations();

    // 返回图表实例
    return charts;
  });
},

// 更新图表数据函数
updateChartData1(value, data) {
  let updatedOption = this.getChartOption1(value, data);
  this.chartInstance3.setOption(updatedOption);
},

// 启动定时器更新数据
// startDataUpdate() {
//   let _this =this
//   _this.timer3 = setInterval(() => {
//     // 获取新数据
//     api.request(`/station/ectric/${wx.getStorageSync('station').id}`, 'POST')
//       .then((res) => {
//         // 更新数据
//         let data = [res.data.quantity / 100, res.data.quantity / 100, res.data.quantity / 100];
//         _this.updateChartData1(res.data.quantity / 100, data);

//         // console.log('请求成功：', res);
//       })
//       .catch((err) => {
//         console.error('请求失败：', err);
//         // 处理请求失败情况
//       });
//   }, 10000);
// },

// Vue.js 生命周期钩子
beforeDestroy() {

// 清除定时器
 
// 销毁图表实例
if (this.chartInstance3) {
  this.chartInstance3.dispose(); // 销毁图表
  this.chartInstance3 = null;
}
},
beforeDestroys() {
  // 清除定时器
 
  // 销毁图表实例
  if (this.chartInstance2) {
    this.chartInstance2.dispose(); // 销毁图表
    this.chartInstance2 = null;
  }
  },
// 辅助函数，用于生成图表选项
getChartOption1: function (value, data) {
  let color = (value * 100).toFixed(2) < 70 ? '#004403' : '#fff';

  return {
    title: {
      text: (value * 100).toFixed(2) + '%',
      textStyle: {
        fontFamily: 'Microsoft Yahei',
        fontWeight: 'normal',
        color: color,
        rich: {
          a: {
            fontSize: 18,
          }
        }
      },
      x: 'center',
      y: '40%'
    },
    series: [
      {
      type: 'liquidFill',
      radius: '80%',
      center: ['50%', '50%'],
      //  shape: 'roundRect',
      data: data,
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0,
          color: 'rgba(0, 117, 68,0)'
        },{
          offset: 0.5,
          color: 'rgba(0, 117, 68, .5)'
        },  {
          offset: 1,
          color: 'rgba(0, 117, 68,1)'
        }],
        globalCoord: false
      },
        // 边框
        outline: {
          borderDistance: 2,
          itemStyle: {
            borderWidth: 5,
            borderColor: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: 'rgba(0, 117, 68, .25)'
              },{
                offset: 0.5,
                color: 'rgba(0, 117, 68, .25)'
              }, {
                offset: 1,
                color: 'rgba(0, 117, 68, .25)'
              }],
              globalCoord: false
            },
            shadowBlur: 0,
            shadowColor: '#ffffff',
          }
         
        },
        backgroundStyle: {
          borderWidth: 0,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 1,
              color: 'rgba(255, 255, 255, 1)'
            }, {
              offset: 0.5,
              color: 'rgba(255, 255, 255, .25)'
            }, {
              offset: 0,
              color: 'rgba(255, 255, 255, 1)'
            }],
            globalCoord: false
          }, 
        },
      label: {
        normal: {
          formatter: '',
        }
      }
    }]
  };
},
onPullDownRefresh(){
  let _this =this
  _this.getlist()
   wx.stopPullDownRefresh();
},
 /**
   * 生命周期函数--监听页面卸载
   */
  onShow(){
    let _this =this
   // 电站列表stationindex
   let data ={
    page:1,
    rows:1000
   }
   api.request('/api/v1/superStations', 'get',data)
   .then((res) => {
     console.log(res);
     _this.setData({
       objectArray:res.data.list
     })
     if (wx.getStorageSync('station').id) {
       for (let index = 0; index < _this.data.objectArray.length; index++) {
          if (_this.data.objectArray[index].id==wx.getStorageSync('station').id) {
             _this.setData({
              stationindex:index
             })
          }
         
       }
       _this.getlist()
   
     }else{
      wx.setStorage({
        key: 'station', // 本地缓存中指定的 key
        data: res.data.list[0],
        success: function () {
               _this.getlist()
       
        }
      });
     }
  
   })
   .catch((err) => {
     console.error('请求失败：', err);
     // 在这里处理请求失败的情况
   });

  },
  onHide() {
    clearInterval(this.timer1);

    this.beforeDestroy()
    this.beforeDestroys()
  },
});