提交

src/api/index.js

@@ -338,4 +338,22 @@ export function lastTime(data) {
   });
 }
 
+export function getSilkRoadData(data) {
+  return ajax({
+    urlType: "topic",
+    url: `/record/pre-task/center`,
+    method: "GET",
+    data
+  });
+}
+
+export function getSilkRoadDetail(data) {
+  return ajax({
+    urlType: "topic",
+    url: `/record/pre-task/detail`,
+    method: "GET",
+    data
+  });
+}
+
 export default {};

src/main.js

@@ -14,7 +14,9 @@ router.beforeEach((to, from, next) => {
   const Mobile = /^\/Mobile/g.test(to.path);
   const menuDiet1 = /^\/menuDiet/g.test(to.path);
   const Calendar = /^\/Calendar/g.test(to.path);
-  if (traditional || advertisement || Mobile || menuDiet1 || Calendar) return next();
+  const SilkRoadData = /^\/SilkRoadData/g.test(to.path);
+  const SilkRoadDetail = /^\/SilkRoadDetail/g.test(to.path);
+  if (traditional || advertisement || Mobile || menuDiet1 || Calendar || SilkRoadData || SilkRoadDetail) return next();
   if (!localStorage.user) {
     // apply 必须拿到oa用户数据
     getUser(() => next())

src/router/report.js

@@ -76,4 +76,26 @@ export default [
           /* webpackChunkName: "CalendarType" */ "../views/report/Calendar/CalendarType.vue"
         ),
     },
+    {
+      path: "/SilkRoadData/:type/:time",
+      name: "SilkRoadData",
+      meta: {
+        title: "陕西新媒体大数据发布",
+      },
+      component: () =>
+        import(
+          /* webpackChunkName: "SilkRoadData" */ "../views/report/SilkRoadData/index.vue"
+        ),
+    },
+    {
+      path: "/SilkRoadDetail/:name/:time",
+      name: "SilkRoadDetail",
+      meta: {
+        title: "陕西新媒体大数据发布",
+      },
+      component: () =>
+        import(
+          /* webpackChunkName: "SilkRoadData" */ "../views/report/SilkRoadDetail/index.vue"
+        ),
+    },
 ];

src/utils/request.js

@@ -1,69 +1,75 @@
-import config from "../config/index.js";
-import { Toast } from "vant";
-import "vant/lib/toast/style/index";
+import config from '../config/index.js';
+import { Toast } from 'vant';
+import 'vant/lib/toast/style/index';
 
 function getdata(data) {
-  let text = "";
+  let text = '';
   for (const key in data) {
-    text += key + "=" + data[key] + "&";
+    text += key + '=' + data[key] + '&';
   }
-  text ? (text = "?" + text) : "";
-  text = text.replace(/&$/, "");
+  text ? (text = '?' + text) : '';
+  text = text.replace(/&$/, '');
   return text;
 }
 
 export default function (ori) {
-  let baseurl = config.base[ori.urlType || "defaultURl"];
+  let baseurl = config.base[ori.urlType || 'defaultURl'];
   let url = baseurl + ori.url;
-  Toast.loading({
-    message: '加载中...',
-    forbidClick: true,
-    duration: 0
-  });
+  let isLoad = false;
+  let time = setTimeout(() => {
+    clearTimeout(time);
+    if(isLoad) return
+    Toast.loading({
+      message: '加载中...',
+      forbidClick: true,
+      duration: 0,
+    });
+  }, 200);
   return new Promise((resolve, reject) => {
     var xhttp;
     if (window.XMLHttpRequest) xhttp = new XMLHttpRequest();
     else if (window.ActiveXObject)
-      xhttp = new window.ActiveXObject("Microsoft.XMLHTTP");
+      xhttp = new window.ActiveXObject('Microsoft.XMLHTTP');
     let method = ori.method.toUpperCase();
-    if (method === "GET") url += getdata(ori.data || {});
+    if (method === 'GET') url += getdata(ori.data || {});
     xhttp.open(method, url, true);
     xhttp.setRequestHeader(
-      "Content-type",
+      'Content-type',
       ori.header
-        ? ori.header.contentType || "application/json"
-        : "application/json"
+        ? ori.header.contentType || 'application/json'
+        : 'application/json'
     );
-    method === "GET" ? xhttp.send() : xhttp.send(JSON.stringify(ori.data));
+    method === 'GET' ? xhttp.send() : xhttp.send(JSON.stringify(ori.data));
     xhttp.onreadystatechange = function () {
       if (this.readyState != 4) return;
-      Toast.clear()
+      isLoad = true;
+      Toast.clear();
       if (this.status === 404) {
-        Toast("请求失败 " + this.status);
+        Toast('请求失败 ' + this.status);
         reject(this.status);
         return;
       }
       if (this.status != 200) {
-        let t = JSON.parse(this.responseText || "{}");
-        Toast(t.message || "请求失败 " + this.status);
+        let t = JSON.parse(this.responseText || '{}');
+        Toast(t.message || '请求失败 ' + this.status);
         reject(t.message);
         return;
       }
-    //   console.log(this.responseText)
+      //   console.log(this.responseText)
       let data = {};
       try {
         data =
-          this.responseText !== "null"
-            ? JSON.parse(this.responseText || "{}")
+          this.responseText !== 'null'
+            ? JSON.parse(this.responseText || '{}')
             : {};
       } catch (err) {
-        Toast("请求失败");
+        Toast('请求失败');
         console.error(err);
         reject(err);
       }
       if (data.code === 0) resolve(data.data);
       else {
-        Toast(data.message || "请求失败");
+        Toast(data.message || '请求失败');
         reject(data);
       }
     };

src/views/report/SilkRoadData/index.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="SilkRoadData">
+    <van-image v-if="width" :width="width" :height="height" @load="load" :src="isOnlyDay" />
+
+    <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 }}%
+              </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;
+      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;
+}
+
+.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;
+}
+</style>

src/views/report/SilkRoadDetail/index.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="SilkRoadDetail">
+    <van-image v-if="width" :width="width" :height="height" @load="load" :src="isOnlyDay" />
+
+    <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 }}%
+              </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;
+}
+</style>

src/views/report/mixin/index.js

@@ -1,22 +1,24 @@
-import { lastTime } from "@/api/index";
+import { lastTime } from '@/api/index';
 export default {
   data() {
     return {
       lastTimeDate: {},
-      date: "",
+      date: '',
     };
   },
   mounted() {
     if (
       this.$route.query.auto !==
-      "06fd56cdf5a6cfc3a2139cc8514d05aa0439ee8c1fb4d81145bc9647"
+      '06fd56cdf5a6cfc3a2139cc8514d05aa0439ee8c1fb4d81145bc9647'
     )
       return;
-    lastTime({ time: Date.now() }).then(res => {
-      this.lastTimeDate = res || {};
-      this.init && this.init();
-    }).catch(()=>{
-      this.init && this.init();
-    });
+    lastTime({ time: Date.now() })
+      .then(res => {
+        this.lastTimeDate = res || {};
+        this.init && this.init();
+      })
+      .catch(() => {
+        this.init && this.init();
+      });
   },
 };