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"></areas>
      <!--中间地图-->
      <div class="map-container">
        <borderNums></borderNums>
        <mapDiv></mapDiv>
      </div>
      <!--全国点播板块-->
      <top10 class="table-list"></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: {},
    };
  },
  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.getList();
  },
  methods: {
    // 接收柱状图传来的数据
    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";
    },
    getList() {
      let curTime = getCurDate();
      let frequencyDate = curTime.year + curTime.month;
      this.getPageList("interact", frequencyDate);
      this.getPageList("trend", frequencyDate);
    },
    getPageList(type, frequencyDate) {
      let httpUrl = "";
      let _this = this;
      if (type === "interact") {
        httpUrl =
          "tBoardStatistic/getInteractionFrequencyPageList?frequencyDate=";
      }
      if (type === "trend") {
        httpUrl = "tBoardStatistic/getBoardTrendPageList?playDate=";
      }
      _this
        .$https({
          method: "post",
          url: `${httpUrl}${frequencyDate}`,
        })
        .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: auto;
        .body-item {
          height: 0.4rem;
          background-color: #62baff33;
          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>