hair/src/views/report/SilkRoadDetail/index.vue

<template>
  <div class="SilkRoadDetail">
    <div class="topImg" v-if="width">
        <van-image :width="width" :height="height" @load="load" :src="isOnlyDay" />
        <span class="days">{{ times.join(" 到 ") }}</span>
    </div>

    <van-cell-group inset v-for="pitem in centerList" :key="pitem.platform">
      <template #title> {{ pitem.platform }} </template>
      <div
        class="mainCell"
        style="margin-top: 0.5em"
        v-for="item in pitem.data"
        :key="item.nickName + 'c'"
      >
        <div class="headTitle" v-text="item.nickName"></div>
        <div class="label">
          <van-row>
            <van-col span="6">
              实发 / <span style="color: red">应发</span>(件)
            </van-col>
            <van-col span="6">完成率</van-col>
            <van-col span="6">传播量(次)</van-col>
            <van-col span="6">超时发稿量(件)</van-col>
          </van-row>
          <van-row>
            <van-col span="6">
              {{ item.onTimeNum | formmate }} /
              <span style="color: red">{{ item.taskNum | formmate }}</span>
            </van-col>
            <van-col span="6">
              <span style="color: red">
                {{ ((item.onTimeNum / item.taskNum).toFixed(2) - 0) * 100 }}%
              </span>
            </van-col>
            <van-col span="6">{{ item.readNum | formmate }}</van-col>
            <van-col span="6">
              {{ item.publishNum - item.onTimeNum }}
            </van-col>
          </van-row>
        </div>
      </div>
    </van-cell-group>
  </div>
</template>

<script>
import { getSilkRoadDetail } from '@/api/index.js';
import watermark from 'watermark-package';
import report from '../mixin/index.js';
import {
  Image as VanImage,
  CellGroup as VanCellGroup,
  Col as VanCol,
  Row as VanRow,
} from 'vant';
import 'vant/lib/image/style/index';
import 'vant/lib/col/style/index';
import 'vant/lib/row/style/index';
import 'vant/lib/cell-group/style/index';

export default {
  name: 'SilkRoadData',
  data() {
    return {
      width: 0,
      height: 0,
      centerList: [],
      isOnlyDay: undefined,
    };
  },
  props: ['type', 'time'],
  mixins: [report],
  watch: {},
  mounted() {},
  computed: {},
  filters: {
    formmate(num) {
      if (isNaN(num)) return 0;
      if (num >= 100000000) return (num / 100000000).toFixed(2) - 0 + '亿';
      if (num >= 10000) return (num / 10000).toFixed(2) - 0 + '万';
      return num.toFixed(0) - 0;
    },
  },
  methods: {
    init() {
      watermark.setWaterMark({
        w_texts: ['陕西视听大数据'],
        w_options: {
          w_opacity: '0.1',
        },
      });
      // this.$route.params.date --> default 日期可选  orther  根据传入日期
      this.width = document.body.clientWidth;
      this.height = (this.width / 16) * 9;
      let times = (this.$route.params.time || '').split('+');
      if(times.length > 1 && times[0] === times[1]) times = [times[0]];
      this.times = times;
      if (this.times.length > 1)
        this.isOnlyDay = require('@/assets/image/2023slcw.jpg');
      else this.isOnlyDay = require('@/assets/image/2023slcw-day.jpg');
      getSilkRoadDetail({
        start: this.times[0],
        end: this.times.length > 1 ? this.times[1] : this.times[0],
        center: this.$route.params.name,
      }).then(r => {
        const centerList = r || [];
        const obj = {};
        const out = [];
        centerList.map(v => {
          if (obj[v.platform]) {
            out[obj[v.platform]].data.push(v);
          } else {
            out.push({
              platform: v.platform,
              centerName: v.centerName,
              depName: v.depName,
              data: [v],
            });
          }
        });
        console.log(out);
        this.centerList = out;
      });
    },
    load(e) {
      const ele = e.path[0];
      this.height = this.width * (ele.naturalHeight / ele.naturalWidth);
    },
  },
  beforeUnmount() {},
  components: {
    VanCol,
    VanRow,
    VanImage,
    VanCellGroup,
  },
};
</script>

<style scoped>
.SilkRoadDetail {
  width: 100%;
  height: 100%;
  font-size: 16px;
  overflow-y: auto;
  background-color: #eee;
}

.SilkRoadDetail .mainCell {
  padding: 0.5em;
  font-weight: 500;
}

.SilkRoadDetail .headTitle {
  padding: 0 0 0.5em 0;
}

.SilkRoadDetail .label {
  font-size: 12px;
  line-height: 1.5em;
  text-align: center;
  color: #969799;
  white-space: nowrap;
}
.SilkRoadDetail .van-cell-group__title {
  font-size: 20px;
  color: #000;
}

.SilkRoadDetail .topImg{
    position: relative;
}
.SilkRoadDetail .days{
    position: absolute;
    left: 5%;
    top: 72%;
    color: #ffffff;
    font-size: 14px;
}
</style>