提交

src/api/index.js

@@ -356,4 +356,12 @@ export function getSilkRoadDetail(data) {
   });
 }
 
+export function getZhoubao(date) {
+  return ajax({
+    urlType: "zhoubao",
+    url: `/zhoubao/matrix/${date}.json?t=${Date.now()}`,
+    method: "GET"
+  });
+}
+
 export default {};

src/config/index.js

@@ -5,7 +5,8 @@ const base = {
     dataJSON: "https://djweb.smcic.net",
     coffee: "http://127.0.0.1:7001",
     cxzx: "https://cxzx.smcic.net",
-    topic: "https://topic.smcic.net"
+    topic: "https://topic.smcic.net",
+    zhoubao: "http://cxzx.smcic.net"
 }
 
 

src/main.js

@@ -17,7 +17,10 @@ router.beforeEach((to, from, next) => {
   const SilkRoadData = /^\/SilkRoadData/g.test(to.path);
   const SilkRoadDetail = /^\/SilkRoadDetail/g.test(to.path);
   const UpExcelSlcw = /^\/UpExcelSlcw/g.test(to.path);
+  const mainBuilding = to.name === 'MainBuilding';
+  document.title = to.meta.title || '';
   if (
+    mainBuilding ||
     traditional ||
     advertisement ||
     Mobile ||

src/router/index.js

@@ -1,102 +1,112 @@
-import Vue from "vue";
-import VueRouter from "vue-router";
+import Vue from 'vue';
+import VueRouter from 'vue-router';
 Vue.use(VueRouter);
 
-import Appointment from "../views/Appointment.vue";
+import Appointment from '../views/Appointment.vue';
 
-import coffee from "./coffee";
-import report from "./report";
+import coffee from './coffee';
+import report from './report';
 // http://djweb.smcic.net/hair/index.html#/appointment
 const router = new VueRouter({
-  mode: "hash",
+  mode: 'hash',
   routes: [
     {
-      path: "/",
-      name: "Queue",
+      path: '/',
+      name: 'Queue',
       component: () =>
-        import(/* webpackChunkName: "hair" */ "../views/Queue.vue"),
+        import(/* webpackChunkName: "hair" */ '../views/Queue.vue'),
       meta: {
-        title: "美发预约系统",
+        title: '美发预约系统',
       },
     },
     {
-      path: "/apply",
-      name: "Apply",
+      path: '/apply',
+      name: 'Apply',
       component: () =>
-        import(/* webpackChunkName: "hair" */ "../views/Apply.vue"),
+        import(/* webpackChunkName: "hair" */ '../views/Apply.vue'),
       meta: {
-        title: "美发预约系统",
+        title: '美发预约系统',
       },
     },
     {
-      path: "/applyreal",
-      name: "Applyreal",
+      path: '/applyreal',
+      name: 'Applyreal',
       component: () =>
-        import(/* webpackChunkName: "hair" */ "../views/Applyreal.vue"),
+        import(/* webpackChunkName: "hair" */ '../views/Applyreal.vue'),
       meta: {
-        title: "美发预约系统",
+        title: '美发预约系统',
       },
     },
     {
-      path: "/appointment",
-      name: "Appointment",
+      path: '/appointment',
+      name: 'Appointment',
       component: Appointment,
       meta: {
-        title: "美发预约系统",
+        title: '美发预约系统',
       },
     },
     {
-      path: "/actionSheet",
-      name: "ActionSheet",
+      path: '/actionSheet',
+      name: 'ActionSheet',
       component: () =>
         import(
-          /* webpackChunkName: "actionSheet" */ "../views/ActionSheet.vue"
+          /* webpackChunkName: "actionSheet" */ '../views/ActionSheet.vue'
         ),
       meta: {
-        title: "汽车保险",
+        title: '汽车保险',
       },
     },
     {
-      path: "/menuDiet",
-      name: "MenuDiet",
+      path: '/menuDiet',
+      name: 'MenuDiet',
       component: () =>
-        import(/* webpackChunkName: "menu" */ "../views/MenuDiet.vue"),
+        import(/* webpackChunkName: "menu" */ '../views/MenuDiet.vue'),
       meta: {
-        title: "菜单",
+        title: '菜单',
       },
     },
     {
-      path: "/menuDiet1",
-      name: "MenuDiet1",
+      path: '/menuDiet1',
+      name: 'MenuDiet1',
       component: () =>
-        import(/* webpackChunkName: "menu1" */ "../views/MenuDiet1.vue"),
+        import(/* webpackChunkName: "menu1" */ '../views/MenuDiet1.vue'),
       meta: {
-        title: "菜单",
+        title: '菜单',
       },
     },
     {
-      path: "/pushMenu",
-      name: "PushMenu",
+      path: '/pushMenu',
+      name: 'PushMenu',
       component: () =>
-        import(/* webpackChunkName: "menu" */ "../views/PushMenu.vue"),
+        import(/* webpackChunkName: "menu" */ '../views/PushMenu.vue'),
       meta: {
-        title: "添加菜单",
+        title: '添加菜单',
       },
     },
     // 排行
     {
-      path: "/ranking",
-      name: "Ranking",
+      path: '/ranking',
+      name: 'Ranking',
       component: () =>
-        import(/* webpackChunkName: "ranking" */ "../views/ranking/index.vue"),
+        import(/* webpackChunkName: "ranking" */ '../views/ranking/index.vue'),
       meta: {
-        title: "各频率频道日推数据",
+        title: '各频率频道日推数据',
       },
     },
     //   咖啡
     ...coffee,
     //   周报
     ...report,
+    // 主楼1楼大屏
+    {
+      path: '/mainBuilding',
+      name: 'MainBuilding',
+      component: () =>
+        import(/* webpackChunkName: "MainBuilding" */ '../views/mainBuilding/index.vue'),
+      meta: {
+        title: '陕西广电融媒体集团新媒体数据周报',
+      },
+    },
   ],
 });
 

src/views/ActionSheet.vue

@@ -18,7 +18,6 @@ export default {
     };
   },
   mounted() {
-    document.title = "车险";
   },
   computed: {},
   methods: {

src/views/MenuDiet.vue

@@ -113,7 +113,6 @@ export default {
       .catch(() => {
         this.load = false;
       });
-    document.title = "菜单";
   },
   computed: {},
   methods: {

src/views/MenuDiet1.vue

@@ -104,7 +104,6 @@ export default {
         if (localStorage.menuWeekList)
           this.list = JSON.parse(localStorage.menuWeekList);
       });
-    document.title = "菜单";
   },
   computed: {},
   methods: {

src/views/PushMenu.vue

@@ -58,7 +58,6 @@ export default {
     m > 9 ? "" : (m = "0" + m);
     d > 9 ? "" : (d = "0" + d);
     this.dt = [y, m, d].join("");
-    document.title = "上传菜单";
     this.input = localStorage.inputName || "";
   },
   computed: {

src/views/Queue.vue

@@ -199,6 +199,7 @@ export default {
     };
   },
   mounted() {
+    console.log("--")
     this.reloadOrder();
     window.setInterval(() => {
       this.reloadOrder();

src/views/mainBuilding/index.vue

@@ -0,0 +1,320 @@
+<template>
+  <van-swipe
+    :style="{ fontSize: fontSize + 'px' }"
+    class="mainBuilding"
+    indicator-color="white"
+    autoplay="10000"
+  >
+    <van-swipe-item v-for="(item, index) in list" :key="index">
+      <div>
+        <van-image
+          :width="fontSize * 4"
+          :height="fontSize * 1.5"
+          :src="logo1"
+          style="vertical-align: middle"
+        />
+        <span style="vertical-align: middle">
+          陕西广电融媒体集团新媒体数据周报
+        </span>
+      </div>
+      <div class="date" v-text="item.dt"></div>
+      <div
+        class="line"
+        :style="{ width: fontSize * 11 + 'px', height: fontSize * 0.06 + 'px' }"
+      ></div>
+      <div class="row">
+        <div class="col col1">
+          <p style="color: red; fontsize: 0.9em; font-weight: bold">
+            集团旗舰账号
+          </p>
+          <div
+            :style="{
+              borderRight: '1px solid #222',
+              padding: '10px 0',
+              height: fontSize * 3.7 + 20 + 'px',
+            }"
+          >
+            <van-image
+              :width="fontSize * 3.7"
+              :height="fontSize * 3.7"
+              :src="item.logo"
+              v-if="item.logo"
+              style="vertical-align: middle"
+            />
+          </div>
+          <p style="font-size: 0.8em" v-text="item.matrix_name"></p>
+        </div>
+        <div class="col col2">
+          <van-row class="data">
+            <van-col span="12">
+              周发稿量
+              <span style="font-size: 2em">{{
+                formatType(item.publish_count['总计'])
+              }}</span>
+              篇
+              <van-icon
+                name="down"
+                :class="{
+                  ro: item.publish_count['总计'] > item.qoq_read_count['总计'],
+                }"
+                :color="
+                  item.publish_count['总计'] <= item.qoq_read_count['总计']
+                    ? '#00B050'
+                    : 'red'
+                "
+              />
+            </van-col>
+            <van-col span="12">
+              周传播量
+              <span style="font-size: 2em">{{
+                formatType(item.read_count['总计'], 1, true)
+              }}</span>
+              <van-icon
+                name="down"
+                :class="{
+                  ro: item.read_count['总计'] > item.qoq_read_count['总计'],
+                }"
+                :color="
+                  item.read_count['总计'] <= item.qoq_read_count['总计']
+                    ? '#00B050'
+                    : 'red'
+                "
+              />
+            </van-col>
+          </van-row>
+          <van-row class="icon">
+            <van-col offset="6" span="3">
+              <span v-html="rep(icon.weixin)"></span>
+            </van-col>
+            <van-col span="3">
+              <span v-html="rep(icon.weibo)"></span>
+            </van-col>
+            <van-col span="3">
+              <span v-html="rep(icon.douyin)"></span>
+            </van-col>
+            <van-col span="3">
+              <span v-html="rep(icon.kuaishou)"></span>
+            </van-col>
+            <van-col span="3">
+              <span v-html="rep(icon.toutiao)"></span>
+            </van-col>
+            <van-col span="3">
+              <span v-html="rep(icon.bilibili)"></span>
+            </van-col>
+          </van-row>
+          <van-row class="data">
+            <van-col span="6"> 发稿量/篇 </van-col>
+            <div v-for="(v, i) in item.publish_count" :key="i">
+              <van-col span="3" v-if="i !== '总计'">
+                {{ formatType(v) }}
+                <van-icon
+                  v-if="v"
+                  name="down"
+                  :class="{ ro: v > item.qoq_read_count[i] }"
+                  :color="v <= item.qoq_read_count[i] ? '#00B050' : 'red'"
+                />
+                <span v-if="!v">/</span>
+              </van-col>
+            </div>
+          </van-row>
+          <van-row class="data">
+            <van-col span="6"> 发稿/阅读量 </van-col>
+            <div v-for="(v, i) in item.read_count" :key="i">
+              <van-col span="3" v-if="i !== '总计'">
+                {{ formatType(v) }}
+                <van-icon
+                  v-if="v"
+                  name="down"
+                  :class="{ ro: v > item.qoq_read_count[i] }"
+                  :color="v <= item.qoq_read_count[i] ? '#00B050' : 'red'"
+                />
+                <span v-if="!v">/</span>
+              </van-col>
+            </div>
+          </van-row>
+        </div>
+      </div>
+      <p style="font-size: 0.5em; text-align: right">
+        <van-icon
+          style="
+            margin-top: -0.1em;
+            transform: rotate(180deg);
+            vertical-align: middle;
+          "
+          name="down"
+          color="red"
+        />
+        周环比增长
+        <van-icon name="down" color="#00B050" />
+        周环比下降
+      </p>
+      <div>
+        <div
+          class="top"
+          :style="{
+            height: fontSize * 1.6 + 'px',
+            lineHeight: fontSize * 1.6 + 'px',
+            width: fontSize * 10.13 + 'px',
+          }"
+        >
+          周单片阅读量TOP3
+        </div>
+        <van-list style="font-size: 0.5em; padding-left: 5em">
+          <div
+            v-for="(v, i) in item.articles"
+            :key="i"
+            class="topItem"
+            :style="{ fontSize: fontSize * 0.5 + 'px' }"
+            v-text="i + 1 + '. ' + v.title"
+          ></div>
+        </van-list>
+      </div>
+    </van-swipe-item>
+  </van-swipe>
+</template>
+
+<script>
+import {
+  Swipe as VanSwipe,
+  SwipeItem as VanSwipeItem,
+  Image as VanImage,
+  Col as VanCol,
+  Row as VanRow,
+  Icon as VanIcon,
+  List as VanList,
+} from 'vant';
+import { getZhoubao } from '@/api/index';
+import logo1 from '@/assets/image/logo1.png';
+import icon from './icon';
+import Dayjs from 'dayjs';
+
+export default {
+  name: 'MainBuilding',
+  data() {
+    return {
+      logo1,
+      icon,
+      list: [],
+      fontSize: document.body.offsetWidth * 0.03,
+    };
+  },
+  mounted() {
+    window.onresize = () => {
+      this.fontSize = document.body.offsetWidth * 0.03;
+    };
+
+    const d = new Dayjs();
+
+    getZhoubao(d.format('YYYY-MM-DD')).then(r => {
+      console.log(r);
+      this.list = r || [];
+    });
+  },
+  computed: {},
+  methods: {
+    rep(html) {
+      return html.replace(/---/g, this.fontSize * 2);
+    },
+    formatNum(num, w) {
+      if (isNaN(num)) return 0;
+      return Number(num).toFixed(w || 2) - 0;
+    },
+    formatType(num, W) {
+      let N = this.formatNum(num, 1);
+      if (N >= 100000000) {
+        N = (N / 100000000).toFixed(W || 1) + '亿';
+      } else if (N >= 10000) {
+        N = (N / 10000).toFixed(W || 1) + '万';
+      }
+      return N || ''
+    },
+  },
+  beforeUnmount: function () {},
+  components: {
+    VanSwipe,
+    VanSwipeItem,
+    VanImage,
+    VanIcon,
+    VanCol,
+    VanRow,
+    VanList,
+  },
+};
+</script>
+
+<style>
+.mainBuilding {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
+    Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui',
+    'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
+}
+
+.mainBuilding * {
+  box-sizing: border-box;
+}
+.mainBuilding .van-swipe-item {
+  color: #000;
+  height: 100%;
+  padding: 20px;
+  background-color: #fff;
+}
+
+.mainBuilding .line {
+  background-color: #dc781d;
+}
+.mainBuilding .date {
+  font-size: 0.4em;
+  text-align: right;
+  padding: 0.5em 0 0.1em 0;
+}
+.mainBuilding .col {
+  display: inline-block;
+  padding: 15px 0;
+  vertical-align: top;
+  white-space: nowrap;
+}
+.mainBuilding .col1 {
+  width: 30%;
+  text-align: center;
+}
+.mainBuilding .col2 {
+  width: 70%;
+  font-size: 0.6em;
+}
+.mainBuilding .van-image {
+  display: inline-block;
+}
+.mainBuilding .data .van-col {
+  height: 2.5em;
+  line-height: 2.5em;
+}
+.mainBuilding .data {
+  text-align: center;
+}
+.mainBuilding .icon {
+  text-align: center;
+}
+.mainBuilding .ro {
+  margin-top: -0.3em;
+  transform: rotate(180deg);
+  vertical-align: middle;
+}
+.mainBuilding .top {
+  background-color: #5a80a7;
+  font-size: 0.5em;
+  color: #fff;
+  border-radius: 0.3em;
+  text-align: center;
+  margin-bottom: 0.5em;
+}
+.mainBuilding .topItem {
+  height: 2.5em;
+  line-height: 2.5em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>