上传视频改为30M

fbf73fb8 · Your Name · 60fb94c8 · fbf73fb8 · fbf73fb8 · fbf73fb8
Commit fbf73fb8 authored Jun 04, 2021 by Your Name
Showing with 855 additions and 852 deletions

maps.vue src/components/maps.vue +333 -333

top10.vue src/components/top10.vue +121 -121

screen.vue src/views/screen.vue +394 -394

commitTab.vue src/views/user/components/commitTab.vue +7 -4

No files found.
--- a/src/components/maps.vue
+++ b/src/components/maps.vue
 <template>
  <div class="map-box">
    <span id="back" v-if="parentInfo.length !== 1" @click="handleBack()"
      >返回</span
    >
    <div id="mapDiv"></div>
  </div>
 </template>
 <script>
 // import "echarts/map/js/china";
 import axios from "axios";
 import echarts from "echarts";
 export default {
  name: "maps",
  data() {
    return {
      dataList: [],
      show: "province",
      parentInfo: [
        {
          cityName: "全国",
          code: 100000,
        },
      ],
    };
  },
  mounted() {
    // this.getList();
    this.initData(100000);
  },
  methods: {
    getList(type, areaCode) {
      let _this = this;
      return new Promise((resolve, reject) => {
        let httpUrl = "";
        let dataList = [];
        if (type === "china") {
          httpUrl = "tBoardStatistic/getBoardProvincePlayTotalList";
        }
        if (type === "map") {
          httpUrl = `tBoardStatistic/getBoardCityPlayTotalList?areaCode=${areaCode}`;
        }
        _this
          .$shttp({
            method: "post",
            url: httpUrl,
            authType: _this.backToken,
          })
          .then((res) => {
            if (res.status == 200) {
              if (res.data.resultCode == 200) {
                dataList = res.data.data;
              } else {
                dataList = [];
              }
            } else {
              dataList = [];
            }
            resolve(dataList);
          })
          .catch((err) => {
            this.$message.error(err.message);
            resolve([]);
          });
      });
    },
    initData(adcode) {
      Promise.all([
        this.getGeoJson(adcode),
        this.getList(this.parentInfo.length === 1 ? "china" : "map", adcode),
      ]).then((res) => {
        let features = res[0].features;
        let json = res[1];
        let flen = features.length;
        let jlen = json.length;
        for (let i = 0; i < flen; i++) {
          for (let j = 0; j < jlen; j++) {
            let jName = json[j].name.substring(0, 2);
            if (features[i].properties.name.indexOf(jName) != -1) {
              features[i].properties.value = json[j].value;
              break;
            }
          }
        }
        this.getMapData({ features: features });
      });
    },
    init(mapData) {
      let _this = this;
      let option = {
        tooltip: {
          // triggerOn: "click",
          formatter: function (e, t, n) {
            return 0.5 == e.value
              ? e.name + "：播放量"
              : e.seriesName + "<br />" + e.name + "：" + e.value;
          },
        },
        visualMap: [
          {
            dimension: 0,
            left: "8%",
            bottom: 20,
            itemWidth: 16,
            orient: "horizontal",
            text: ["播放量", "由低到高"],
            backgroundColor: "rgba(0,19,45,0.4)",
            padding: 16,
            textStyle: {
              color: "gba(255,255,255,1)",
            },
            inRange: {
              color: [
                "rgba(161,255,255,1)",
                "rgba(91,214,255,1)",
                "rgba(38,157,255,1)",
                "rgba(0,72,149,1)",
              ],
            },
          },
        ],
        geo: {
          map: _this.parentInfo.length === 1 ? "china" : "map",
          roam: true, //是否开启平游或缩放
          // scaleLimit: {
          //   //滚轮缩放的极限控制
          //   min: 1,
          //   // max: 2,
          // },
          zoom: 1.1,
          top: 51,
          label: {
            normal: {
              show: !0,
              fontSize: "12",
              color: "#968f8f",
              formatter: (p) => {
                switch (p.name) {
                  case "内蒙古自治区":
                    p.name = "内蒙古";
                    break;
                  case "西藏自治区":
                    p.name = "西藏";
                    break;
                  case "新疆维吾尔自治区":
                    p.name = "新疆";
                    break;
                  case "宁夏回族自治区":
                    p.name = "宁夏";
                    break;
                  case "广西壮族自治区":
                    p.name = "广西";
                    break;
                  case "香港特别行政区":
                    p.name = "香港";
                    break;
                  case "澳门特别行政区":
                    p.name = "澳门";
                    break;
                }
                return p.name;
              },
            },
            emphasis: {
              // color: "#ffffff",
              show: true,
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)",
            },
            emphasis: {
              // areaColor: "#f2d5ad",
              areaColor: "#8dd7fc",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderWidth: 0,
            },
          },
          regions: [
            {
              name: "南海诸岛",
              itemStyle: {
                // 隐藏地图
                normal: {
                  opacity: 0, // 为 0 时不绘制该图形
                },
              },
              label: {
                show: false, // 隐藏文字
              },
            },
          ],
        },
        series: [
          {
            name: "播放量",
            type: "map",
            geoIndex: 0,
            data: mapData,
          },
        ],
      };
      let echartsDiv = this.$echarts.init(document.getElementById("mapDiv"));
      echartsDiv.setOption(option, true);
      echartsDiv.on("click", _this.echartsMapClick);
    },
    handleBack() {
      if (this.parentInfo.length === 1) {
        return;
      }
      this.parentInfo.pop();
      let areaCode = this.parentInfo[this.parentInfo.length - 1].code;
      this.emitParent(areaCode);
      this.initData(this.parentInfo[this.parentInfo.length - 1].code);
    },
    emitParent(areaCode) {
      this.$emit("changeAreaCode", areaCode);
    },
    echartsMapClick(params) {
      if (!params.data) {
        return;
      }
      if (params.data.level === "district") {
        return false;
      }
      let cityCode = params.data.cityCode;
      this.emitParent(cityCode);
      this.parentInfo.push({
        cityName: params.data.name,
        code: params.data.cityCode,
      });
      console.log(params.data.cityCode);
      this.initData(cityCode);
    },
    //这里我封装了下，直接可以拿过来用
    // getGeoJson(adcode, childAdcode = "") {
    //   return new Promise((resolve, reject) => {
    //     function insideFun(adcode, childAdcode) {
    //       AMapUI.loadUI(["geo/DistrictExplorer"], (DistrictExplorer) => {
    //         var districtExplorer = new DistrictExplorer();
    //         districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
    //           if (error) {
    //             console.error(error);
    //             reject(error);
    //             return;
    //           }
    //           let Json = areaNode.getSubFeatures();
    //           if (Json.length === 0) {
    //             let parent = areaNode._data.geoData.parent.properties.acroutes;
    //             insideFun(parent[parent.length - 1], adcode);
    //             return;
    //           }
    //           if (childAdcode) {
    //             Json = Json.filter((item) => {
    //               return item.properties.adcode == childAdcode;
    //             });
    //           }
    //           let mapJson = {
    //             features: Json,
    //           };
    //           resolve(mapJson);
    //         });
    //       });
    //     }
    //     insideFun(adcode, childAdcode);
    //   });
    // },
    getGeoJson(adcode) {
      return new Promise((resolve, reject) => {
        axios({
          method: "get",
          url: `feature/${adcode}_full.json`,
        }).then((res) => {
          let mapJson = {
            features: res.data.features,
          };
          resolve(mapJson);
        });
      });
    },
    getMapData(geoJson) {
      // 获取后台接口数据
      let Json = geoJson.features;
      let mapData = Json.map((item) => {
        return {
          name: item.properties.name,
          value: item.properties.value,
          level: item.properties.level,
          cityCode: item.properties.adcode,
        };
      });
      let mapJson = {};
      //geoJson必须这种格式
      mapJson.features = Json;
      //去渲染echarts
      this.initEcharts(mapData, mapJson);
    },
    initEcharts(mapData, mapJson) {
      echarts.registerMap(
        this.parentInfo.length === 1 ? "china" : "map",
        mapJson
      );
      this.init(mapData);
    },
  },
 };
 </script>
 <style lang="scss">
 .map-box {
  width: 100%;
  height: 100%;
  #back {
    position: absolute;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    left: 60px;
    cursor: pointer;
    z-index: 99;
    &:hover {
      color: #4efffd;
    }
  }
  #mapDiv {
    width: 100%;
    height: 100%;
  }
 }
 </style>
--- a/src/components/top10.vue
+++ b/src/components/top10.vue
 <template>
  <div class="list-of-top10">
    <triangle>
      <slot>
        <div class="list-of-top10-title common-title">
          <img
            class="icon-title"
            src="@/assets/images/screen/boardsDemand.png"
            alt=""
          />
          <span class="title">{{ title }}</span>
          <img class="bg" src="@/assets/images/screen/title01_bg.png" alt="" />
        </div>
        <div class="list-of-body">
          <ul class="body-title">
            <li class="f1">排名</li>
            <li class="f7">展板名称</li>
            <li class="f2">播放量</li>
          </ul>
          <div class="body-content" id="bodyContent">
            <div id="con1">
              <ul class="body-item" v-for="(item, index) in list" :key="index">
                <li class="f1">{{ (index % 10) + 1 }}</li>
                <li class="f7">
                  <div class="title" :title="item.boardName">
                    {{ item.boardName }}
                  </div>
                </li>
                <li class="f2">{{ item.playNumber }}</li>
              </ul>
            </div>
            <div id="con2"></div>
            <div id="con3"></div>
            <div id="con4"></div>
            <div id="con5"></div>
            <div id="con6"></div>
          </div>
        </div>
      </slot>
    </triangle>
  </div>
 </template>
 <script>
 import triangle from "../components/slot/triangle";
 import { getCurDate } from "./util.time.js";
 export default {
  name: "top10",
  data() {
    return {
      title: "全国2021年3月展板点播TOP10",
      timer: null,
      speed: 50,
      box: null,
      con1: null,
      list: [],
    };
  },
  components: { triangle },
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  mounted() {
    this.title = this.getTitle();
  },
  methods: {
     clearDom(){
      [2,3,4,5,6].forEach(v=>{
        document.getElementById(`con${v}`).innerHTML = ""
      })
    },
    getTitle() {
      let curTime = getCurDate();
      return `${curTime.year}年${curTime.month}月展板点播TOP10`;
    },
    initScroll() {
      let _this = this;
      this.box = document.getElementById("bodyContent");
      this.con1 = document.getElementById("con1");
      for (let i = 2; i < 7; i++) {
        let con = document.getElementById(`con${i}`);
        con.innerHTML = _this.con1.innerHTML;
      }
      this.timer = setInterval(_this.scrollUp, _this.speed);
    },
    scrollUp() {
      if (this.box.scrollTop >= this.con1.scrollHeight) {
        this.box.scrollTop = 0;
      } else {
        this.box.scrollTop++;
      }
    },
    Ups() {
      let _this = this;
      this.timer = setInterval(_this.scrollUp, _this.speed);
    },
    Stops() {
      clearInterval(this.timer);
    },
  },
  watch: {
    data() {
     this.clearDom()
      this.list = this.data;
      if (this.list.length > 4) {
        this.$nextTick(() => {
          this.initScroll();
        });
      }
    },
  },
 };
 </script>
 <style lang=scss>
 </style>
--- a/src/views/screen.vue
+++ b/src/views/screen.vue
 <template>
  <div class="screen-container">
    <div class="page-title">
      <p>- 播放数据统计 -</p>
    </div>
    <div class="user-info">
      <!-- <img src="@/assets/images/screen/user.png" alt="" class="icon-user" />
      <span class="user-name">中国国家博物馆</span>
      <img src="@/assets/images/screen/close.png" alt="" class="signup" />
      <img
        src="@/assets/images/screen/manager.png"
        @click="goManager"
        alt=""
        class="manager"
      /> -->
    </div>
    <div class="middel-part">
      <!--地区展板播放统计-->
      <areas class="table-list" :data="areaList"></areas>
      <!--中间地图-->
      <div class="map-container">
        <borderNums :areaCode="areaCode"></borderNums>
        <mapDiv @changeAreaCode="changeAreaCode"></mapDiv>
      </div>
      <!--全国点播板块-->
      <top10 class="table-list" :data="top10List"></top10>
    </div>
    <div class="echartspanel">
      <demand
        ref="interactEcharts"
        class="echarts-box left"
        :data="interactEcharts"
        @itemClick="itemClick"
      >
      </demand>
      <interaction
        ref="trendEcharts"
        class="echarts-box right"
        :data="trendEcharts"
        @itemClick="itemClick"
      ></interaction>
    </div>
    <!-- 弹框 -->
    <m-dialog
      ref="mdialog"
      :is-show.sync="showDialog"
      :dialog-data="dialogData"
    />
  </div>
 </template>
 <script>
 import {
  demand,
  interaction,
  areas,
  top10,
  mapDiv,
  borderNums,
  MDialog,
 } from "../components";
 import { getCurDate } from "../components/util.time.js";
 export default {
  data() {
    return {
      showDialog: false,
      dialogData: {}, // 1 是互动频次弹框 2 是趋势图弹框
      trendList: [],
      trendEcharts: {},
      interactList: [],
      interactEcharts: {},
      areaList: [],
      top10List: [],
      areaCode:10000
    };
  },
  components: {
    demand,
    interaction,
    areas,
    top10,
    mapDiv,
    borderNums,
    MDialog,
  },
  mounted() {
    let clientWidth = document.body.clientWidth;
    clientWidth = clientWidth > 1920 ? 1920 : clientWidth;
    let fontSize = (clientWidth / 1920) * 100;
    document.getElementsByTagName("html")[0].style.fontSize = fontSize + "px";
    this.getDataOfEcharts(100000);
    this.getDataOfList(100000);
  },
  methods: {
    changeAreaCode(areaCode) {
      this.areaCode = areaCode
      this.getDataOfList(areaCode);
      this.getDataOfEcharts(areaCode)
    },
    // 接收柱状图传来的数据
    itemClick(params) {
      // let type = "";
      // 互动
      if (params.type == "1") {
        // type = "interact";
        this.dialogData = {
          data: this.interactEcharts,
          list: this.interactList,
        };
      } else if (params.type == "2") {
        // type = "trend";
        // 趋势
        this.dialogData = {
          data: this.trendEcharts,
          list: this.trendList,
        };
      }
      this.dialogData = Object.assign(this.dialogData, params);
      this.showDialog = true;
    },
    goManager() {
      location.href = "http://121.4.56.121:84";
    },
    getDataOfList(areaCode) {
      let requestparams = {};
      requestparams._index = 1;
      requestparams._size = 10;
      requestparams.areaCode = Number(areaCode);
      this.getTableList("area", requestparams);
      this.getTableList("top10", requestparams);
    },
    getDataOfEcharts(areaCode) {
      let curTime = getCurDate();
      let frequencyDate = curTime.year + curTime.month;
      this.getPageList("interact", frequencyDate,areaCode); // 互动
      this.getPageList("trend", frequencyDate,areaCode); //趋势
    },
    getTableList(type, requestparams) {
      let httpUrl = "";
      let _this = this;
      if (type === "top10") {
        httpUrl = `tBoardStatistic/getBoardRankPageList`;
      }
      if (type === "area") {
        httpUrl = `tBoardStatistic/getBoardDistrictPageList`;
      }
      _this
        .$shttp ({
            method: "post",
            url: httpUrl,
            authType: _this.backToken,
          },
          requestparams
        )
        .then((res) => {
          if (res.status == 200) {
            if (res.data.resultCode == 200) {
              _this[`${type}List`] = res.data.data.records;
            } else {
              _this[`${type}List`] = [];
            }
          } else {
            _this[`${type}List`] = [];
          }
        })
        .catch((err) => {
          _this[`${type}List`] = [];
          _this.$message.error(err.message);
        });
    },
    getPageList(type, frequencyDate,areaCode) {
      let httpUrl = "";
      let _this = this;
      if (type === "interact") {
        httpUrl = `tBoardStatistic/getInteractionFrequencyPageList?frequencyDate=${frequencyDate}&areaCode=${areaCode}`;
      }
      if (type === "trend") {
        httpUrl = `tBoardStatistic/getBoardTrendPageList?playDate=${frequencyDate}&areaCode=${areaCode}`;
      }
      _this
        .$shttp ({
          method: "post",
          url: `${httpUrl}`,
          authType: _this.backToken,
        })
        .then((res) => {
          if (res.status == 200) {
            if (res.data.resultCode == 200) {
              _this.setDataWithSus(type, res.data.data);
            } else {
              _this.setDataWithErr(type);
            }
          } else {
            _this.setDataWithErr(type);
          }
        })
        .catch((err) => {
          _this.$message.error(err.message);
          _this.setDataWithErr(type);
        });
    },
    setDataWithSus(type, data) {
      this[`${type}Echarts`] = {};
      this[`${type}List`] = data.page.records;
      this[`${type}Echarts`].yAxisData = data.cntList;
      if (type == "interact") {
        this[`${type}Echarts`].xAxisData = data.organList;
      }
      if (type == "trend") {
        this[`${type}Echarts`].xAxisData = data.dateList;
      }
      let _this = this;
      setTimeout(() => {
        _this.$refs[`${type}Echarts`].init();
      }, 1000);
    },
    setDataWithErr(type) {
      this[`${type}Echarts`] = {};
      this[`${type}List`] = [];
    },
  },
 };
 </script>
 <style lang="scss">
 .screen-container {
  ::-webkit-scrollbar {
    width: 8px;
    height: 10px;
    //background-color: rgba(255, 255, 255, 0.2) !important;
  }
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #08214c;
  /*background: url("/images/screen/bg.png") no-repeat;*/
  background: url("~@/assets/images/screen/bg@1x.png") no-repeat;
  background-size: 100% 100%;
  padding: 0 0.32rem;
  box-sizing: border-box;
  .page-title {
    width: 100%;
    height: 0.67rem;
    background: url("~@/assets/images/screen/top_bg.png") no-repeat;
    background-size: 100% 100%;
    p {
      font-size: 0.32rem;
      color: #62baff;
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0.1rem);
      margin: 0;
    }
  }
  .user-info {
    position: absolute;
    right: 0.56rem;
    top: 0.31rem;
    display: flex;
    align-items: center;
    .icon-user,
    .signup {
      width: 0.28rem;
      height: 0.28rem;
    }
    .user-name {
      font-size: 0.18rem;
      color: #4ffffd;
      margin-left: 0.12rem;
    }
    .signup {
      margin-left: 0.4rem;
    }
    .manager {
      cursor: pointer;
      width: 0.32rem;
      height: 0.32rem;
      margin-left: 0.2rem;
    }
  }
  .echartspanel {
    height: 34vh;
    width: 100%;
    bottom: 0rem;
    padding: 0.24rem 0;
    box-sizing: border-box;
    .echarts-box {
      height: 100%;
      width: 50%;
      display: inline-block;
      box-sizing: border-box;
      &.left {
        padding-right: 0.12rem;
        float: left;
      }
      &.right {
        padding-left: 0.12rem;
        float: right;
      }
    }
  }
  .middel-part {
    display: flex;
    margin-top: 4.16vh;
    height: 56.48vh;
    justify-content: space-between;
    .table-list {
      width: 25vw;
      height: 100%;
    }
  }
  .table-list {
    .list-of-body {
      padding-top: 0.7rem;
      height: 100%;
      box-sizing: border-box;
      ul {
        display: flex;
        align-items: flex-start;
        font-size: 0.16rem;
        padding-left: 0.24rem;
        box-sizing: border-box;
        li {
          line-height: 0.4rem;
          &.f1 {
            width: 10%;
          }
          &.f2 {
            width: 20%;
          }
          &.f3 {
            width: 30%;
          }
          &.f5 {
            width: 50%;
          }
          &.f6 {
            width: 60%;
          }
          &.f7 {
            width: 70%;
          }
          div.title {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
      .body-title {
        color: #62baff;
        margin-bottom: 0.07rem;
      }
      .body-content {
        height: calc(100% - 0.8rem);
        overflow-y: hidden;
        .body-item {
          height: 0.4rem;
          background-color: rgba(98, 186, 255, 0.2);
          margin-bottom: 0.04rem;
          color: #4efffd;
        }
      }
    }
  }
  .common-title {
    .icon-title {
      position: absolute;
      top: 0.1rem;
      left: 0.1rem;
      width: 0.4rem;
    }
    .title {
      position: absolute;
      top: 0.2rem;
      left: 0.52rem;
      font-size: 0.2rem;
      line-height: 0.2rem;
      color: #4efffd;
    }
    .bg {
      position: absolute;
      width: calc(100% - 0.48rem);
      left: 0.24rem;
      top: 0.24rem;
    }
  }
  .map-container {
    flex: 1;
    height: 100%;
    position: relative;
    padding-top: 0.7rem;
    box-sizing: border-box;
  }
 }
 </style>
--- a/src/views/user/components/commitTab.vue
+++ b/src/views/user/components/commitTab.vue
@@ -108,7 +108,7 @@
            <img src="@/assets/images/applets/tip.png" alt />
            <span>
              最多支持上传
-              <b>3</b> 段视频,每段大小不能超过 <b>10MB</b>。
+              <b>3</b> 段视频,每段大小不能超过 <b>30MB</b>。
            </span>
          </div>
        </div>
@@ -146,6 +146,7 @@
      </div>
      <div class="field-content">
        <van-field
+          @input="form.content=form.content.replace(regStr,'');"
          required
          class="field-textarea"
          type="textarea"
@@ -168,6 +169,7 @@ import util from "@/utils/index.js";
 export default {
  data() {
    return {
+      regStr: /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi,
      form: {
        username: JSON.parse(sessionStorage.getItem("userInfo")).orgName,
        organId: JSON.parse(sessionStorage.getItem("userInfo")).orgId,
@@ -325,12 +327,12 @@ export default {
    beforeVideo(file) {
      let isOver = true
      if(Array.isArray(file)){
-        isOver = file.every(item=>item <= 10*1024*1024)
+        isOver = file.every(item=>item <= 30*1024*1024)
      }else{
-        isOver = file.size <= 10*1024*1024
+        isOver = file.size <= 30*1024*1024
      }
      if(!isOver){
-        this.$toast.fail("上传文件大小不能超过 10MB");
+        this.$toast.fail("上传文件大小不能超过 30MB");
        return false
      }else{
        return true
@@ -375,6 +377,7 @@ export default {
            })
          }else{
            this.$toast(res.data.message)
+            // this.deleteInterface()
          }
        })
        .catch(function (err) {