bigDataApp/pages/cb/cbd/equip-set/pestLine.vue

<template>
  <view>
    <view class="title">虫情趋势矩阵图</view>
    <view class="shuju_one">
      <view class="canvastishi" v-if="!canvastishiTF && !dataloadingtf">
        暂无数据
      </view>
      <view class="canvastishi" v-if="dataloadingtf">
        <p class="dataloading">加载中</p>
      </view>
      <canvas
        v-show="canvastishiTF"
        canvas-id="canvasColumnB"
        id="canvasColumnB"
        class="charts"
        @touchstart="touchLineA($event)"
        @touchmove="moveLineA($event)"
        @touchend="touchEndLineA($event)"
        disable-scroll="true"
        :style="{
          width: cWidth * pixelRatio + 'px',
          height: cHeight * pixelRatio + 'px',
          transform: 'scale(' + 1 / pixelRatio + ')',
          'margin-left': (-cWidth * (pixelRatio - 1)) / 2 + 'px',
          'margin-top': (-cHeight * (pixelRatio - 1)) / 2 + 'px',
        }"
      ></canvas>
    </view>
    <view class="title">害虫排名</view>
    <view class="shuju_one">
      <view class="canvastishi" v-if="!canvastishiTF && !dataloadingtf">
        暂无数据
      </view>
      <view class="canvastishi" v-if="dataloadingtf">
        <p class="dataloading">加载中</p>
      </view>
      <canvas
        v-show="canvastishiTF"
        canvas-id="canvasColumnC"
        id="canvasColumnC"
        class="charts"
        :style="{
          width: cWidth * pixelRatio + 'px',
          height: pestHeight * pixelRatio + 'px',
          transform: 'scale(' + 1 / pixelRatio + ')',
          'margin-left': (-cWidth * (pixelRatio - 1)) / 2 + 'px',
          'margin-top': (-cHeight * (pixelRatio - 1)) / 2 + 'px',
        }"
      ></canvas>
    </view>
  </view>
</template>

<script>
import uCharts from '../../../../components/js_sdk/u-charts/u-charts/u-charts.js';
let canvaColumnA = null;
let canvaColumnB = null;
const myColor = [
  '#FF5951',
  '#66EDED',
  '#E67B3E',
  '#6DE28B',
  '#FFC97A',
  '#E7EB4B',
  '#1561F3',
  '#FA73F5',
  '#159AFF',
  '#FA73F5',
];
const temColor = ['#A2845E', '#018B3F', '#00C7BE'];

export default {
  data() {
    return {
      cWidth: '400',
      cHeight: '400',
      pixelRatio: 1,
      canvastishiTF: false, //暂无数据提示
      dataloadingtf: true, //加载中提示
      pestHeight: '400',
    };
  },
  props: {
    start_time: {
      type: String,
      default: '',
    },
    end_time: {
      type: String,
      default: '',
    },
    device_type_id: {
      type: String,
      default: '35',
    },
    d_id: {
      type: String,
      default: 0,
    },
    notify: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    notify: {
      handler() {
        this.pestLine();
      },
    },
  },
  computed: {},
  methods: {
    async pestLine() {
      //害虫趋势折线图
      this.dataloadingtf = true;
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=new_gateway.photo_info.pest_order_and_char',
        data: {
          device_type_id: this.device_type_id,
          id: this.d_id,
          // device_type_id: 35,
          // id: '11630161',
          start: +new Date(this.start_time + ' 00:00:00') / 1000,
          end: +new Date(this.end_time + ' 23:59:59') / 1000,
          hour_st: '00',
          hour_ed: '00',
        },
      });
      this.dataloadingtf = false;
      const { char_data, pest_total, at_ah_info: atah } = res;
      console.log(res, '---------');
      if (Object.keys(char_data).length == 0) {
        this.canvastishiTF = false;
      } else {
        this.canvastishiTF = true;

        let arr1 = [];
        let arr2 = [];
        let arr3 = [];
        let xtitle = [];
        for (let i = 0; i < atah.length; i++) {
          xtitle.push(this.formatTime(atah[i].addtime * 1000, 'yyyy-MM-dd'));
          arr1.push(atah[i].height ? atah[i].height : 0);
          arr2.push(atah[i].low ? atah[i].low : 0);
          arr3.push(atah[i].ah ? atah[i].ah : 0);
        }
        // console.log(arr1)
        let objList = [
          {
            name: '高温',
            data: arr1,
          },
          {
            name: '低温',
            data: arr2,
          },
          {
            name: '湿度',
            data: arr3,
          },
        ];
        Object.keys(char_data).forEach((item, index) => {
          let countData = [];
          char_data[item].forEach((item1, index1) => {
            countData.push(item1.sum);
          });
          let obj = {
            name: item,

            data: countData,
          };
          objList.push(obj);
        });

        const pestName = Object.keys(pest_total);
        const dataList = Object.values(pest_total)
          .reverse()
          .map((value, index) => {
            let i = index % pestName.length;
            return {
              value,
              color: myColor[i],
            };
          });
        const pestTotal = [
          {
            name: '排名',
            data: dataList,
          },
        ];

        this.showColumn('canvasColumnB', xtitle, objList);
        this.showColumnBar('canvasColumnC', pestName.reverse(), pestTotal);
      }
    },

    showColumn(id, xtitle, xinfo, yAxis) {
      console.log(xinfo);
      let _self = this;
      if (xinfo.length > 12) {
        this.cHeight = xinfo.length * 15;
      }
      // const canvas = document.getElementById(id);
      // const ctx = canvas.getContext("2d");
      const ctx = uni.createCanvasContext(id, this);
      canvaColumnA = new uCharts({
        context: ctx,
        type: 'line',
        legend: {
          position: 'top',
        },
        fontSize: 11,
        background: '#FFFFFF',
        pixelRatio: 1,
        animation: true,
        dataLabel: false,
        categories: xtitle,
        series: xinfo,
        color: [...temColor, ...myColor],
        enableScroll: true, //开启图表拖拽功能
        xAxis: {
          disableGrid: true,
          type: 'grid',
          gridType: 'dash',
          itemCount: 4, //x轴单屏显示数据的数量，默认为5个
          scrollShow: true, //新增是否显示滚动条，默认false
          // scrollAlign: 'left', //滚动条初始位置
          scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
          scrollColor: '#DEE7F7', //默认为 #A6A6A6
        },
        yAxis: yAxis || {},
        width: _self.cWidth * 1,
        height: _self.cHeight * 1,
        extra: {
          line: {
            type: 'curve',
          },
        },
      });
    },
    showColumnBar(id, xtitle, xinfo) {
      console.log(xtitle, xinfo);
      let _self = this;
      if (xtitle.length > 12) {
        this.pestHeight = xtitle.length * 20;
      }

      const ctx = uni.createCanvasContext(id, this);
      canvaColumnB = new uCharts({
        context: ctx,
        type: 'bar',

        legend: {
          show: false,
        },
        padding: [5, 25, 5, 0],
        fontSize: 11,
        background: '#FFFFFF',
        pixelRatio: 1,
        animation: true,
        // dataLabel: false,
        categories: xtitle,
        series: xinfo,
        // enableScroll: true, //开启图表拖拽功能
        xAxis: {
          boundaryGap: 'justify',
          disableGrid: false,
          axisLine: false,
        },
        yAxis: {},
        width: _self.cWidth * 1,
        height: _self.pestHeight * 1,
        extra: {
          bar: {
            type: 'group',
            width: 30,

            barBorderCircle: true,
            seriesGap: 4,
            categoryGap: 4,
          },
        },
      });
    },
    touchLineA(e) {
      console.log(e);
      canvaColumnA.scrollStart(e);
    },
    moveLineA(e) {
      canvaColumnA.scroll(e);
    },
    touchEndLineA(e) {
      canvaColumnA.scrollEnd(e);
      //下面是toolTip事件，如果滚动后不需要显示，可不填写
      canvaColumnA.showToolTip(e, {
        format: function (item, category) {
          return category + ' ' + item.name + ':' + item.data;
        },
      });
    },
    touchLineB(e) {
      console.log(e);
      canvaColumnB.scrollStart(e);
    },
    moveLineB(e) {
      canvaColumnB.scroll(e);
    },
    touchEndLineB(e) {
      canvaColumnB.scrollEnd(e);
    },
  },
  mounted() {
    this.cWidth = uni.upx2px(650);
    this.cHeight = uni.upx2px(500);
    this.pestLine();
    console.log('mounted');
  },
  onLoad() {
    console.log('load');
  },
  onShow() {
    console.log('show');
  },
};
</script>

<style lang="scss" scoped>
page {
  background: #f7f7f7;
}

.title {
  color: #999999;
  margin: 32rpx 0;
}

.date {
  height: 92rpx;
  line-height: 92rpx;
  border-radius: 92rpx;
  background: #fff;
  display: flex;
  justify-content: space-between;
  margin-top: 16rpx;
  padding: 0 48rpx;
  position: relative;

  ::v-deep .u-calendar__action {
    display: flex;
    justify-content: space-around;

    .u-calendar__action__text {
      line-height: 25px;
    }
  }
}

.shuju_one,
.shuju_two {
  // position: absolute;
  // top: 54px;
  width: 100%;
  // left: 5%;
  // box-shadow: 0 0 10rpx #bcb9ca;
  padding-top: 20rpx;
  height: 550rpx;
  background-color: #fff;
  border-radius: 24rpx;
  overflow: scroll;
  position: relative;
  .canvastishi {
    font-size: 32rpx;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -64rpx;
    margin-top: -21rpx;

    .dataloading:after {
      overflow: hidden;
      display: inline-block;
      vertical-align: bottom;
      animation: ellipsis 2s infinite;
      content: '\2026';
    }

    @keyframes ellipsis {
      from {
        width: 2px;
      }

      to {
        width: 15px;
      }
    }
  }
}

.refresh {
  // position: absolute;
  // top: 700rpx;
  // left: 5%;
  font-size: 12px;
  float: right;
  padding: 0 10rpx;
  height: 40rpx;
  border-radius: 8rpx;
  background-color: #018b3f;
  color: #ffffff;
  line-height: 40rpx;
  text-align: center;
}

.condition {
  // position: absolute;
  // top: 770rpx;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  // left: 5%;
  // box-shadow: 0 0 10rpx #bcb9ca;
  margin-bottom: 30rpx;

  .scroll-X {
    width: 100%;
    margin: 20rpx auto;

    .table {
      width: 1672px;
    }

    .tr {
      display: flex;
      overflow: hidden;

      .th,
      .td {
        display: inline-block;
        padding: 4rpx;
        width: 286rpx;
        text-align: center;
        height: 52rpx;
        line-height: 52rpx;
        border: 2rpx solid #f1f1f1;
      }

      .th:first-child,
      .td:first-child {
        width: 300rpx;
      }
    }

    .tr:nth-child(2n-1) {
      background-color: #f5fff8;
    }

    .tr:first-child {
      background-color: #57c878;
      color: #fff;
    }
  }

  .pagenumber {
    display: flex;
    margin: 20rpx auto;

    button {
      width: 150rpx;
      height: 50rpx;
      line-height: 50rpx;
      font-size: 26rpx;
      text-align: center;
      background-color: #17bb89;
      color: #ffffff;
    }

    .pagenumber_page {
      width: 100rpx;
      height: 50rpx;
      line-height: 50rpx;
      font-size: 26rpx;
      text-align: center;
    }
  }
}
</style>