xjsaas-ui/src/views/big-screen/index.vue

<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-17 11:34:00
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-10-18 15:33:00
 * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
 * @Description: 大屏首页
-->
<template>
  <div class="screen-content">
    <div class="screen-header">
      <div class="header-weather">多云转中雨</div>
      <div class="header-time">
        <div class="header-data">{{ dataTime }}</div>
        <div class="header-week">
          <span>{{ weekTime }}</span>
          <span>{{ yearTime }}</span>
        </div>
        <div class="header-home">
          <i class="el-icon-s-home" @click="goIndex"></i>
        </div>
      </div>
    </div>
    <div class="screen-middle">
      <div class="screen-left">
        <module-block
          v-for="(item, index) in leftModuleList"
          :key="`left-module-list-${index}`"
          :width="item.width"
          :height="item.height"
          :title="item.title"
          :class="item.class"
        >
          <template><component :is="item.component"></component></template>
          <!-- <template slot="operation" v-if="item.selectIsShow">
          <el-select
            v-model="item.select"
            popper-class="ioc-el-select"
            v-if="item.title === '证照临期超期情况'"
          >
            <el-option
              v-for="temp in item.selectCreditList"
              :key="temp.value"
              :label="temp.label"
              :value="temp.value"
            >
            </el-option>
          </el-select>
        </template> -->
        </module-block>
      </div>
      <div class="screen-right">
        <module-block
          v-for="(item, index) in rightModuleList"
          :key="`right-module-list-${index}`"
          :width="item.width"
          :height="item.height"
          :title="item.title"
          :class="item.class"
        >
          <template><component :is="item.component"></component></template>
          <!-- <template slot="operation" v-if="item.selectIsShow">
          <el-select
            v-model="item.select"
            popper-class="ioc-el-select"
            v-if="item.title === '证照临期超期情况'"
          >
            <el-option
              v-for="temp in item.selectCreditList"
              :key="temp.value"
              :label="temp.label"
              :value="temp.value"
            >
            </el-option>
          </el-select>
        </template> -->
        </module-block>
      </div>
      <!-- 底图切换 -->
      <disease-screen v-if="elementDiv === 'DiseaseScreen'"></disease-screen>
      <road-screen v-else></road-screen>
    </div>
    <div class="screen-footer">
      <div class="footer-change-map">
        <div
          class="change-map-div"
          :class="mapClick === item.click ? 'change-map-click' : ''"
          v-for="(item, index) in changeMapBtn"
          :key="`btn-${index}`"
          @click="changeMap(item)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="footer-change-vue">
        <div
          :class="
            elementDiv === item.component
              ? `change-vue-click-${item.component}`
              : `change-vue-${item.component}`
          "
          v-for="(item, index) in elementList"
          :key="`footer-${index}`"
          @click="changeElement(item)"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import RoadScreen from "./road-screen.vue";
import DiseaseScreen from "./disease-screen.vue";
import ModuleBlock from "./module-block.vue";
import TodayInspection from "./disease-components/today-inspection.vue";
import DiseaseTrends from "./disease-components/disease-trends.vue";
import DiseaseCurrent from "./disease-components/disease-current.vue";
import WorkOrder from "./disease-components/work-order.vue";
import PicRank from "./disease-components/pic-rank.vue";
import RoadRank from "./disease-components/road-rank.vue";
import RoadStatistic from "./road-components/road-statistic.vue";
import ManageMaintain from "./road-components/manage-maintain.vue";
import AnomalyFacilities from "./road-components/anomaly-facilities";
import AncillaryFacilities from "./road-components/ancillary-facilities.vue";
export default {
  name: "BigScreen",
  components: {
    RoadScreen,
    DiseaseScreen,
    ModuleBlock,
    TodayInspection,
    DiseaseTrends,
    DiseaseCurrent,
    WorkOrder,
    PicRank,
    RoadRank,
    RoadStatistic,
    ManageMaintain,
    AnomalyFacilities,
    AncillaryFacilities,
  },
  data() {
    return {
      // 计时器标识
      timeFlag: null,
      // 时间
      dataTime: "",
      // 星期
      weekTime: "",
      // 年
      yearTime: "",
      // 左侧切换模块
      leftModuleList: [
        {
          width: "100%",
          height: "9rem",
          title: "管养道路统计",
          component: ManageMaintain,
          selectIsShow: false,
          class: "one",
        },
        {
          width: "100%",
          height: "28rem",
          title: "附属设施分布",
          component: AncillaryFacilities,
          selectIsShow: false,
          class: "twe",
        },
      ],
      // 右侧切换模块
      rightModuleList: [
        {
          width: "100%",
          height: "15rem",
          title: "附属设施异常统计",
          component: AnomalyFacilities,
          selectIsShow: false,
          class: "one",
        },
        {
          width: "100%",
          height: "29rem",
          title: "路产统计",
          component: RoadStatistic,
          selectIsShow: false,
          class: "twe",
        },
      ],
      // 切换地图按钮
      changeMapBtn: [
        { name: "巡查车", click: "1" },
        { name: "病害", click: "2" },
        { name: "路产", click: "3" },
        { name: "PCL", click: "4" },
      ],
      // 地图切换标识
      mapClick: "1",
      // 中间展示的动态组件绑定
      elementDiv: "DiseaseScreen",
      elementList: [
        { name: "病害巡检", component: "DiseaseScreen" },
        { name: "道路资产", component: "RoadScreen" },
        { name: "交安事件", component: "TrafficScreen" },
      ],
    };
  },
  created() {
    this.setTime();
  },
  methods: {
    /* 获取当前时间 */
    setTime() {
      this.timeFlag = setInterval(() => {
        const weekMap = [
          "星期天",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
        ];
        const date = new Date();
        const year = date.getFullYear();
        const month =
          date.getMonth() + 1 < 10
            ? `0${date.getMonth() + 1}`
            : date.getMonth() + 1;
        const day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
        const hours =
          date.getHours() < 10 ? `0${date.getHours()}` : date.getHours();
        const minutes =
          date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes();
        const seconds =
          date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds();
        const week = date.getDay();
        // this.currentTime = `${year}-${month}-${day}\t\t${hours}:${minutes}:${seconds}\t\t${weekMap[week]}`;
        this.yearTime = `${year}.${month}.${day}`;
        this.weekTime = `${weekMap[week]}`;
        this.dataTime = `${hours}:${minutes}:${seconds}`;
      }, 1000);
    },
    /* 地图切换点击事件 */
    changeMap(value) {
      if (this.mapClick !== value) {
        this.mapClick = value.click;
      }
    },
    /* 数据栏切换事件 */
    changeElement(item) {
      if (this.elementDiv !== item) {
        this.elementDiv = item.component;
        if (item.component === "DiseaseScreen") {
          this.leftModuleList = [
            {
              width: "100%",
              height: "14rem",
              title: "今日巡查",
              component: TodayInspection,
              selectIsShow: false,
              class: "one",
            },
            {
              width: "100%",
              height: "14rem",
              title: "病害趋势",
              component: DiseaseTrends,
              selectIsShow: false,
              class: "twe",
            },
            {
              width: "100%",
              height: "15rem",
              title: "病害趋势",
              component: DiseaseCurrent,
              selectIsShow: false,
              class: "twe",
            },
          ];
          this.rightModuleList = [
            {
              width: "100%",
              height: "13rem",
              title: "工单统计",
              component: WorkOrder,
              selectIsShow: false,
              class: "one",
            },
            {
              width: "100%",
              height: "17rem",
              title: "PIC排名",
              component: PicRank,
              selectIsShow: false,
              class: "twe",
            },
            {
              width: "100%",
              height: "13rem",
              title: "路面状况排名",
              component: RoadRank,
              selectIsShow: false,
              class: "twe",
            },
          ];
        } else if (item.component === "RoadScreen") {
          this.leftModuleList = [
            {
              width: "100%",
              height: "9rem",
              title: "管养道路统计",
              component: ManageMaintain,
              selectIsShow: false,
              class: "one",
            },
            {
              width: "100%",
              height: "28rem",
              title: "附属设施分布",
              component: AncillaryFacilities,
              selectIsShow: false,
              class: "twe",
            },
          ];
          this.rightModuleList = [
            {
              width: "100%",
              height: "15rem",
              title: "附属设施异常统计",
              component: AnomalyFacilities,
              selectIsShow: false,
              class: "one",
            },
            {
              width: "100%",
              height: "29rem",
              title: "路产统计",
              component: RoadStatistic,
              selectIsShow: false,
              class: "twe",
            },
          ];
        }
      }
    },
    /* 跳转系统首页 */
    goIndex() {
      this.$router.push("/index");
    },
  },
  beforeDestroy() {
    clearInterval(this.timeFlag);
  },
};
</script>

<style lang="scss" scoped>
.screen-content {
  width: 100%;
  height: 100%;
}

// 中间样式
.screen-middle {
  width: 100%;
  height: 100%;

  .screen-left {
    width: 25.5%;
    height: calc(100% - 5rem);
    padding-left: 3.5rem;
    position: fixed;
    top: 5rem;
    z-index: 1;
    background-image: url("../../assets/screen/index/bg-left.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    grid-template-columns: 94.4rem 94.4rem;
    grid-template-areas:
      "one "
      "two "
      "three ";

    .one {
      grid-area: one;
    }

    .two {
      grid-area: two;
    }

    .three {
      grid-area: three;
    }
  }

  .screen-right {
    width: 25.5%;
    height: calc(100% - 5rem);
    top: 5rem;
    padding-right: 3.5rem;
    position: fixed;
    right: 0;
    z-index: 1;
    background-image: url("../../assets/screen/index/bg-right.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .middle-map {
    position: fixed;
    top: 0;
    z-index: 0;
  }
}

// 头部样式
.screen-header {
  width: 100%;
  height: 5rem;
  padding: 0 3rem;
  position: fixed;
  top: 0;
  display: flex;
  justify-content: space-between;
  z-index: 1;
  background-image: url("../../assets/screen/index/bg-top.png");
  background-repeat: no-repeat;
  background-size: 100% 120%;
  background-position-x: 50%;

  .header-weather {
    display: flex;
    align-items: flex-end;
    font-size: 1rem;
    color: #89c5e8;
  }

  .header-time {
    display: flex;
    color: #89c5e8;

    > div {
      margin: 0 0.5rem;
      display: flex;
      align-items: flex-end;
    }

    .header-data {
      font-size: 1.8rem;
    }

    .header-week {
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      flex-direction: column;
    }

    .header-home {
      cursor: pointer;
      font-size: 1.8rem;
    }
  }
}

// 大屏下方样式
.screen-footer {
  width: 49%;
  height: 7.55rem;
  position: fixed;
  bottom: 0;
  left: 25.5%;
  background-image: url("../../assets/screen/index/bg-foot.png");
  background-repeat: no-repeat;
  background-size: 100.1% 99%;

  .footer-change-map {
    width: 100%;
    height: 40%;
    padding-right: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #8deeff;
    font-style: italic;
    font-size: 0.7rem;

    .change-map-div {
      margin: 0 1.2rem;
    }

    .change-map-click {
      color: #fffed2;
    }
  }

  .footer-change-vue {
    width: 100%;
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: center;

    > div {
      height: 100%;
      width: 37.5%;
    }

    > div:nth-child(2) {
      height: 100%;
      width: 25%;
    }

    // 未点击样式
    .change-vue-DiseaseScreen {
      background-image: url("../../assets//screen/index/button-disease.png");
      background-repeat: no-repeat;
      background-size: 97% 65%;
      background-position: 100% 15%;
    }

    .change-vue-click-DiseaseScreen {
      background-image: url("../../assets//screen/index/button-disease-click.png");
      background-repeat: no-repeat;
      background-size: 98% 65%;
      background-position: 100% 15%;
    }

    .change-vue-RoadScreen {
      background-image: url("../../assets//screen/index/button-road.png");
      background-repeat: no-repeat;
      background-size: 98% 60%;
      background-position: 70% 15%;
    }
    .change-vue-click-RoadScreen {
      background-image: url("../../assets//screen/index/button-road-click.png");
      background-repeat: no-repeat;
      background-size: 98% 60%;
      background-position: 70% 15%;
    }

    .change-vue-TrafficScreen {
      background-image: url("../../assets//screen/index/button-traffic.png");
      background-repeat: no-repeat;
      background-size: 95% 60%;
      background-position: 15% 15%;
    }

    .change-vue-click-TrafficScreen {
      background-image: url("../../assets//screen/index/button-traffic-click.png");
      background-repeat: no-repeat;
      background-size: 95% 60%;
      background-position: 15% 15%;
    }
    // .change-vue-click {
    //   color: red;
    // }
  }
}
</style>