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

<template>
  <div class="SilkRoadData">
    <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>
      <template #title> </template>
      <div
        class="mainCell"
        style="margin-top: 0.5em"
        v-for="item in centerList"
        :key="item.centerName + 'c'"
      >
        <div class="headTitle" v-text="item.centerName"></div>
        <div class="label">
          <div class="label-left">
            <van-row>
              <van-col span="8">
                实发 / <span style="color: red">应发</span>(件)
              </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 }} /
                <span style="color: red">{{ item.taskNum | formmate }}</span>
              </van-col>
              <van-col span="8">
                {{ ((item.onTimeNum / item.taskNum).toFixed(2) - 0) * 100 }}%
              </van-col>
              <van-col span="8">{{ item.readNum | formmate }}</van-col>
            </van-row>
          </div>
          <van-button
            style="vertical-align: middle"
            size="mini"
            hairline
            plain
            type="primary"
            @click="() => toDetail(item)"
          >
            查看详情
          </van-button>
        </div>
      </div>
    </van-cell-group>
  </div>
</template>

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

export default {
  name: 'SilkRoadData',
  data() {
    return {
      width: 0,
      height: 0,
      times: [],
      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;
      console.log(window.matchMedia('(prefers-color-scheme: dark)'))
      if (this.times.length > 1)
        this.isOnlyDay = require('@/assets/image/2023slcw.jpg');
      else this.isOnlyDay = require('@/assets/image/2023slcw-day.jpg');
      getSilkRoadData({
        start: this.times[0],
        end: this.times.length > 1 ? this.times[1] : this.times[0],
      }).then(r => {
        this.centerList = r || [];
      });
    },
    load(e) {
      const ele = e.path[0];
      this.height = this.width * (ele.naturalHeight / ele.naturalWidth);
    },
    toDetail(item) {
      this.$router.push({
        path: `/SilkRoadDetail/${item.centerName}/${this.$route.params.time}?auto=${this.$route.query.auto}`,
      });
    },
  },
  beforeUnmount() {},
  components: {
    VanCol,
    VanRow,
    VanImage,
    VanButton,
    VanCellGroup,
  },
};
</script>

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

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

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

.SilkRoadData .label {
  font-size: 12px;
  line-height: 1.5em;
  text-align: center;
  color: #969799;
  white-space: nowrap;
}
.SilkRoadData .label-left{
    display: inline-block;
    width: calc(100% - 56px);
    vertical-align: middle;
}

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