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

<template>
  <div class="SilkRoadDetail">
    <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
    <div class="topImg" v-if="width">
      <van-image
        :width="width"
        :height="height"
        @load="load"
        :src="isOnlyDay"
      />
      <span class="days" :style="'font-size:' + fontSizeTitleFunc() + 'px'">{{
        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" :style="'font-size:' + fontSizeFunc()*1.2 + 'px'" v-text="item.centerName"></div>
        <div class="label" :style="'font-size:' + fontSizeFunc() + 'px'">
          <van-row>
            <van-col span="8"> 按时实发/<b>应发</b>(件) </van-col>
            <van-col span="8">按时完成率</van-col>
            <van-col span="8">超时发稿量(件)</van-col>
          </van-row>
          <van-row>
            <van-col span="8">
              {{ item.onTimeNum | formmate }} /
              {{ item.taskNum | formmate }}
            </van-col>
            <van-col span="8">
              {{ (item.publishNum / item.taskNum * 100).toFixed(2) - 0 }}%
            </van-col>
            <van-col span="8">
              {{ item.publishNum - item.onTimeNum }}
            </van-col>
          </van-row>
          <van-row>
            <van-col span="8"> 实发/<b>应发</b>(件) </van-col>
            <van-col span="8">完成率</van-col>
            <van-col span="8">未发稿量</van-col>
          </van-row>
          <van-row>
            <van-col span="8">
              {{ item.publishNum | formmate }} /
              {{ item.taskNum | formmate }}
            </van-col>
            <van-col span="8">
              {{ ((item.onTimeNum / item.taskNum) * 100).toFixed(2) - 0 }}%
            </van-col>
            <van-col span="8">
              {{ item.taskNum - item.publishNum | formmate }}
            </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,
  NavBar as VanNavBar,
} from 'vant';
import 'vant/lib/nav-bar/style/index';
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,
      title: '',
      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;
      this.title =
        document.title + (this.times.length > 1 ? '累计报表' : '日报表');
      document.title = this.title;
      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 => {
        this.centerList = r || [];
      });
    },
    load(e) {
      if (!e.path || !e.paht.length) return;
      const ele = e.path[0];
      this.height = this.width * (ele.naturalHeight / ele.naturalWidth);
    },
    fontSizeFunc() {
      let size = this.width / 25;
      if (size > 18) return 18;
      if (size < 12) return 12;
      return size;
    },
    fontSizeTitleFunc() {
      let size = this.width / 25;
      if (size > 18) return 18;
      if (size < 12) return 12;
      return size;
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  beforeUnmount() {},
  components: {
    VanCol,
    VanRow,
    VanImage,
    VanNavBar,
    VanCellGroup,
  },
};
</script>

<style scoped>
.SilkRoadDetail {
  width: 100%;
  height: 100%;
  font-size: 16px;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #eee;
  box-sizing: border-box;
  padding-bottom: 0.5em;
}

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

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

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

.SilkRoadDetail .topImg {
  position: relative;
  width: 100%;
}
.SilkRoadDetail .days {
  position: absolute;
  left: 5%;
  top: 72%;
  color: #ffffff;
}
</style>