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-29 10:25:21
 * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
 * @Description: 大屏首页
-->
<template>
  <div class="screen-content">
    <div class="screen-header">
      <div class="header-weather">
        <iframe
          width="150"
          scrolling="no"
          height="45"
          frameborder="0"
          allowtransparency="true"
          src="https://i.tianqi.com?c=code&id=12&icon=1&color=%2389C5E8&py=shenyang&num=1&site=12"
        ></iframe>
      </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">
          <div class="home" @click="goIndex"></div>
        </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 :select="item.select" :is="item.component"></component
          ></template>
          <template slot="operation" v-if="item.selectIsShow">
            <el-radio-group class="screen-checkBox" v-model="item.select">
              <el-radio-button
                v-for="(item, index) in selectTypeArr"
                :label="item.value"
                :key="`left-screen-${index}`"
                >{{ item.label }}</el-radio-button
              >
            </el-radio-group>
          </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 :select="item.select" :is="item.component"></component
          ></template>
          <template slot="operation" v-if="item.selectIsShow">
            <el-radio-group class="screen-checkBox" v-model="item.select">
              <el-radio-button
                v-for="(item, index) in selectTypeArr"
                :label="item.value"
                :key="`right-screen-${index}`"
                >{{ item.label }}</el-radio-button
              >
            </el-radio-group>
          </template>
        </module-block>
      </div>
      <div class="road-content">
        <!-- 左侧控制 -->
        <div class="road-select">
          <!-- 左上角病害筛查 -->
          <div class="road-div" v-if="mapClick === 'defect'" @click="clickImg">
            <span>病害筛查</span>
          </div>
          <!-- 返回图片底图 -->
          <div
            class="road-return"
            v-if="!showImgBk"
            @click="changeMap(true, '')"
          >
            返回
          </div>
        </div>
        <!-- 右上角切换坐标类型多选框 -->
        <div class="road-checkBox" v-if="!showImgBk">
          <fssm-scroll class="road-scroll">
            <el-checkbox-group v-model="iconType" @change="handleChecked">
              <el-checkbox
                v-for="(item, index) in iconTypeList"
                :label="item.value"
                :key="`check-${index}`"
                >{{ item.name }}</el-checkbox
              >
            </el-checkbox-group>
          </fssm-scroll>
        </div>
        <!-- 图片背景 -->
        <div class="disease-content" v-if="showImgBk">
          <div class="disease-title"></div>
          <div class="map-legend"></div>
          <div class="map-care">
            <div
              class="map-care-div"
              :class="`map-care-div-${index + 1}`"
              v-for="(item, index) in mapCareList"
              :key="`map-care-${index}`"
              :style="{ left: item.left, top: item.top }"
            >
              <span @click="changeMap(false, item)">{{ item.name }}</span>
            </div>
          </div>
        </div>
        <!-- 地图 -->
        <fssm-map
          v-if="!showImgBk"
          ref="roadMap"
          @map-moveend="mapMoveend"
          @map-zoom="getZoom"
          @feature-select="featureSelect"
        ></fssm-map>
      </div>
    </div>
    <div class="screen-footer">
      <div class="footer-change-map">
        <template v-if="!showImgBk">
          <div
            class="change-map-div"
            :class="mapClick === item.click ? 'change-map-click' : ''"
            v-for="(item, index) in changeMapBtn"
            :key="`btn-${index}`"
            @click="changeIconType(item.click)"
          >
            {{ item.name }}
          </div>
        </template>
      </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>
    <!-- 图片弹窗 -->
    <el-dialog
      :title="imgTitle"
      :visible.sync="imgVisible"
      width="80rem"
      append-to-body
      :close-on-click-modal="false"
      destroy-on-close
      @close="imgCancel"
    >
      <img-dialog></img-dialog>
    </el-dialog>
  </div>
</template>

<script>
// 地图
import FssmMap from "@/components/map/fssm-map.vue";
import { Feature } from "ol";
import { Point } from "ol/geom";
import { Style, Icon, Fill, Stroke, Circle, Text } from "ol/style";
import logo from "@/assets/xc.png";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
import * as geomExports from "ol/geom";
import Cluster from "ol/source/Cluster";
// 组件
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";
import TrafficSafety from "./traffic-components/traffic-safety.vue";
import TrafficTrend from "./traffic-components/traffic-trend.vue";
import TrafficStatistic from "./traffic-components/traffic-statistic.vue";
import TrafficRank from "./traffic-components/traffic-rank.vue";
import TrafficEmergency from "./traffic-components/traffic-emergency.vue";
import ImgDialog from "./components/img-dialog.vue";
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
// 接口
import {
  selectTypeList,
  mapPointList,
  mapPciList,
} from "@/api/xj/screen/index";
export default {
  name: "BigScreen",
  components: {
    FssmMap,
    ModuleBlock,
    TodayInspection,
    DiseaseTrends,
    DiseaseCurrent,
    WorkOrder,
    PicRank,
    RoadRank,
    RoadStatistic,
    ManageMaintain,
    AnomalyFacilities,
    AncillaryFacilities,
    TrafficSafety,
    TrafficTrend,
    TrafficStatistic,
    TrafficRank,
    TrafficEmergency,
    ImgDialog,
    FssmScroll,
  },
  data() {
    return {
      // 计时器标识
      timeFlag: null,
      // 时间
      dataTime: "",
      // 星期
      weekTime: "",
      // 年
      yearTime: "",
      // 数据栏右上角选择框
      selectTypeArr: [],
      // 左侧切换模块
      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: true,
          select: "",
          class: "twe",
        },
      ],
      // 右侧切换模块
      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: true,
          select: "",
          class: "twe",
        },
      ],
      // 是否显示图片背景
      showImgBk: true,
      // 图片背景下打点坐标数据
      mapCareList: [],
      // 切换地图图标类别按钮
      changeMapBtn: [
        { name: "巡查车", click: "1" },
        { name: "病害", click: "defect" },
        { name: "路产", click: "equipment" },
        { name: "事件", click: "event" },
      ],
      /* 具体icon类别 */
      iconTypeList: [],
      // icon类别绑定
      iconType: [],
      // 图标类别切换标识
      mapClick: "",
      // 中间展示的动态组件绑定
      elementDiv: "DiseaseScreen",
      // 下方三个按钮数据
      elementList: [
        { name: "病害巡检", component: "DiseaseScreen" },
        { name: "道路资产", component: "RoadScreen" },
        { name: "交安事件", component: "TrafficScreen" },
      ],
      // 中心点集合
      centerPiont: [],
      // 线段点集合
      lineString: [],
      // 地图放大缩小层级
      mapZoom: "",
      // 聚合图层
      clusters: null,
      // 线段图层
      markLayerLines: null,
      // 图片弹窗标题
      imgTitle: "查看",
      // 图片弹窗显隐控制
      imgVisible: false,
    };
  },
  created() {
    this.setTime();
    this.getSelect();
    this.getMapCare();
  },
  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);
    },
    /* 获取数据栏右上角选项数据 */
    getSelect() {
      selectTypeList().then(({ code, data }) => {
        if (code === 200) {
          this.selectTypeArr = data;
        }
      });
    },
    /* 获取图片背景下坐标数据 */
    getMapCare() {
      this.mapCareList = [
        {
          name: "沈抚",
          left: "63%",
          top: "15%",
          tip: "1",
        },
        {
          name: "沈阳",
          left: "55%",
          top: "12%",
          tip: "2",
        },
        {
          name: "锦州",
          left: "35%",
          top: "25%",
          tip: "3",
        },
        {
          name: "朝阳",
          left: "20%",
          top: "20%",
          tip: "4",
        },
        {
          name: "大连",
          left: "50%",
          top: "50%",
          tip: "5",
        },
        {
          name: "丹东",
          left: "70%",
          top: "40%",
          tip: "6",
        },
      ];
    },
    /* 点击病害筛查 */
    clickImg() {
      this.imgVisible = true;
    },
    /* 关闭图片查看弹窗 */
    imgCancel() {
      this.imgVisible = false;
    },
    /* 切换icon类型多选框事件 */
    handleChecked(value) {
      console.log(value, "icontype");
    },
    /* 点击图片点位切换地图事件 */
    changeMap(boolen, value) {
      this.showImgBk = boolen;
      if (!boolen) {
        // 默认点击的图标是巡查车
        this.changeIconType("defect");
      } else {
        this.mapClick = "";
        this.mapZoom = "";
        this.clusters = null;
        this.markLayerLines = null;
      }
    },
    /* 获取地图点位信息 */
    getCenterPiont() {
      // 如果当前已经有打点坐标
      if (!this.clusters) {
        mapPointList({ type: this.mapClick }).then(({ code, data }) => {
          if (code === 200) {
            this.centerPiont = data.map((item) => {
              return [item.geometry[0], item.geometry[1]];
            });
            this.drawPoint();
          }
        });
      }
    },
    /* 绘制地图点位 */
    drawPoint() {
      const features = [];
      this.centerPiont.forEach((element) => {
        // 修改坐标样式
        const point = new Point(element);
        const feature = new Feature({
          geometry: point,
          data: { data: "123", type: "icon" },
          // 自己设置一个标识
          type: "icon",
        });
        // 可以给点位设置样式
        // feature.setStyle([
        //   new Style({
        //     image: new Icon({
        //       crossOrigin: "anonymous",
        //       src: logo,
        //       // 图标缩放比例
        //       scale: 0.05,
        //     }),
        //   }),
        // ]);
        features.push(feature);
      });
      const clusterSource = new Cluster({
        distance: 40,
        minDistance: 40,
        source: new VectorSource({
          features,
        }),
        type: "Cluster",
      });
      this.clusters = new VectorLayer({
        source: clusterSource,
        name: "clusterLayer",
        zIndex: 10,
        style: function clusterStyle(feature) {
          const count = feature.get("features").length;
          return new Style({
            image: new Icon({
              crossOrigin: "anonymous",
              src: logo,
              // 图标缩放比例
              scale: 0.05,
              // 0.3为30度
              rotation: 0.3,
            }),
            text: new Text({
              textAlign: "center", //位置
              textBaseline: "middle",
              font: "normal 14px 微软雅黑",
              offsetY: 15,
              fill: new Fill({
                color: "#ffffff",
              }),
              text: count > 1 ? count.toString() : "",
            }),
          });
        },
      });
      this.$nextTick(() => {
        const map = this.$refs.roadMap.instance.get("map");
        map.addLayer(this.clusters);
      });
    },
    /* 获取地图线段点位信息 */
    getLinePoint() {
      if (!this.markLayerLines) {
        mapPciList({ type: this.mapClick }).then(({ code, data }) => {
          if (code === 200) {
            this.lineString = data.map((item) => {
              return item.coordinates.split(";").map((it) => {
                return it.split(",").map(Number);
              });
            });
            this.drawLine();
          }
        });
      }
    },
    /* 绘制地图线段 */
    drawLine() {
      const features = [];
      this.lineString.forEach((element) => {
        const line = new Feature({
          geometry: new geomExports.LineString(element),
          type: "line",
        });
        line.setStyle([
          new Style({
            // 填充色
            fill: new Fill({
              color: "red",
            }),
            // 边线颜色
            stroke: new Stroke({
              color: "blue",
              width: 5,
            }),
            // 形状
            image: new Circle({
              radius: 17,
              fill: new Fill({
                color: "#ffffff",
              }),
            }),
          }),
        ]);
        features.push(line);
      });
      const lineSource = new VectorSource({
        features,
      });
      this.markLayerLines = new VectorLayer({
        source: lineSource,
        properties: {
          type: "line",
        },
      });
      this.$nextTick(() => {
        const map = this.$refs.roadMap.instance.get("map");
        map.addLayer(this.markLayerLines);
      });
    },
    /* 图标类别切换点击事件 */
    changeIconType(value) {
      if (this.mapClick !== value) {
        this.mapClick = value;
        if (this.$refs.roadMap) {
          const map = this.$refs.roadMap.instance.get("map");
          map.removeLayer(this.markLayerLines);
          map.removeLayer(this.clusters);
          this.clusters = null;
          this.markLayerLines = null;
        }
        // 获取对应右上角icon类型
        this.getIconType(value);
        // 请求地图打点/绘制线段接口
        if (!this.mapZoom) {
          this.getZoom("10");
        } else {
          this.getZoom(this.mapZoom);
        }
      }
    },
    /* 获取icon多选数据 */
    getIconType(value) {
      if (value === "defect") {
        this.iconTypeList = [
          { name: "淤泥路面", value: "1" },
          { name: "沥青路面", value: "2" },
          { name: "面", value: "3" },
        ];
        this.iconType = this.iconTypeList.map((item) => {
          return item.value;
        });
      } else {
        this.iconTypeList = [
          { name: "淤泥路面", value: "1" },
          { name: "沥青路面", value: "2" },
          { name: "面", value: "3" },
          { name: "淤泥", value: "4" },
          { name: "淤泥路面阿萨", value: "5" },
          { name: "淤泥路面", value: "6" },
          { name: "淤泥", value: "4" },
          { name: "淤泥路面阿萨", value: "5" },
          { name: "淤泥路面", value: "6" },
          { name: "淤泥", value: "4" },
          { name: "淤泥路面阿萨", value: "5" },
          { name: "淤泥路面", value: "6" },
          { name: "淤泥", value: "4" },
          { name: "淤泥路面阿萨", value: "5" },
          { name: "淤泥路面", value: "6" },
        ];
        this.iconType = this.iconTypeList.map((item) => {
          return item.value;
        });
      }
    },
    /* 传回来的地图图层 */
    getZoom(zoom) {
      if (zoom === "10") {
        // 绘制点位
        this.$nextTick(() => {
          const map = this.$refs.roadMap.instance.get("map");
          map.removeLayer(this.markLayerLines);
          this.markLayerLines = null;
        });
        this.getCenterPiont();
        this.mapZoom = zoom;
      } else if (zoom === "9") {
        // 绘制线段
        this.$nextTick(() => {
          const map = this.$refs.roadMap.instance.get("map");
          map.removeLayer(this.clusters);
          this.clusters = null;
        });
        this.getLinePoint();
        this.mapZoom = zoom;
      }
    },
    /* 地图缩放完成事件 */
    mapMoveend(zoom) {
      if (this.clusters && zoom > 13) {
        this.clusters.getSource().setDistance(0);
      } else if (this.clusters && zoom <= 13) {
        this.clusters.getSource().setDistance(40);
      }
    },
    /* 地图选中feature事件 */
    featureSelect(e) {
      const map = this.$refs.roadMap.instance.get("map");
      let selectedFeatures = e.selected;
      if (selectedFeatures.length > 0) {
        let feature = selectedFeatures[0];
        let features = feature.get("features");
        // 点击线段事件
        if (feature.getProperties().type === "line") {
          console.log(feature, "线段参数");
        } else {
          if (features.length === 1) {
            // 单个点位
            // 执行之前的业务逻辑
            // 获取点击的图层信息
            const selectFeature = feature.getProperties().features[0];
            console.log(selectFeature, "点位");
            // 获取点位数据
            console.log(selectFeature.get("data"));
          } else {
            // 聚合点
            // 放大地图层级
            map.getView().animate({
              center: feature.getGeometry().getCoordinates(),
              zoom: map.getView().getZoom() + 1,
            });
          }
        }
      }
    },
    /* 数据栏切换事件 */
    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: true,
              select: "",
              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: true,
              select: "",
              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: true,
              select: "",
              class: "one",
            },
            {
              width: "100%",
              height: "29rem",
              title: "路产统计",
              component: RoadStatistic,
              selectIsShow: true,
              select: "",
              class: "twe",
            },
          ];
        } else if (item.component === "TrafficScreen") {
          this.leftModuleList = [
            {
              width: "100%",
              height: "14rem",
              title: "交安事件",
              component: TrafficSafety,
              selectIsShow: false,
              class: "one",
            },
            {
              width: "100%",
              height: "14rem",
              title: "交安事件趋势",
              component: TrafficTrend,
              selectIsShow: true,
              class: "twe",
            },
            {
              width: "100%",
              height: "17rem",
              title: "交安事件统计",
              component: TrafficStatistic,
              selectIsShow: true,
              select: "",
              class: "twe",
            },
          ];
          this.rightModuleList = [
            {
              width: "100%",
              height: "29rem",
              title: "交安事件排名",
              component: TrafficRank,
              selectIsShow: true,
              select: "",
              class: "one",
            },
            {
              width: "100%",
              height: "15rem",
              title: "交安突发事件",
              component: TrafficEmergency,
              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;
    }

    ::v-deep .screen-checkBox {
      .el-radio-button__inner {
        background-color: transparent;
        padding: 0 0.3rem;
        border: none;
      }

      .el-radio-button__orig-radio:checked + .el-radio-button__inner {
        color: #1cb6ff;
      }
    }
  }

  .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%;

    ::v-deep .screen-checkBox {
      .el-radio-button__inner {
        background-color: transparent;
        padding: 0 0.3rem;
        border: none;
      }

      .el-radio-button__orig-radio:checked + .el-radio-button__inner {
        color: #1cb6ff;
      }
    }
  }

  .road-content {
    width: 100%;
    height: 100%;
    position: relative;

    // 病害筛查按钮样式
    .road-select {
      width: 4rem;
      height: 6.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: absolute;
      left: 27%;
      top: 10%;

      .road-div {
        width: 100%;
        height: 5rem;
        margin-bottom: 0.5rem;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        cursor: pointer;
        color: #8deeff;
        background-image: url("../../assets/screen/road/road-select.png");
        background-repeat: no-repeat;
        background-size: 80%;
        background-position: 50% 0;
        z-index: 1;

        span {
          font-size: 0.8rem;
        }

        ::v-deep .el-select {
          width: 8rem;

          .el-input .el-select__caret {
            line-height: 1.5rem;
          }

          .el-input--medium .el-input__inner {
            height: 1.5rem;
            background-color: transparent;
            color: #89c5e8;
            border-color: #6991cd;
          }

          .el-select-dropdown {
            background-color: #102649;
            border-color: #08204f;
            .el-scrollbar {
              .el-select-dropdown__wrap {
                .el-scrollbar__view {
                  .el-select-dropdown__item:hover {
                    background-color: #2b4c7e;
                  }

                  .el-select-dropdown__item.selected {
                    background-color: #2b4c7e;
                  }

                  .el-select-dropdown__item.hover {
                    background-color: #2b4c7e;
                  }
                }

                .el-select-dropdown__list {
                  background-color: #102649;
                }
              }
            }
          }
        }
      }
      // 返回样式
      .road-return {
        cursor: pointer;
        width: 4rem;
        height: 1.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.8rem;
        color: #ffffff;
        background-color: #395569;
        border: 1px #1cb6ff solid;
        border-radius: 0.5rem;
        z-index: 1;

        &:hover {
          background-color: #2b4367;
        }
      }
    }

    // 右上角切换图标样式多选框
    .road-checkBox {
      width: 8rem;
      height: 10rem;
      position: absolute;
      right: 26%;
      top: 10%;
      padding: 0.4rem;
      border-radius: 0.4rem;
      border: 1px solid #193dae;
      background-color: #082843;
      z-index: 1;

      .road-scroll {
        overflow-x: hidden;
      }

      ::v-deep .el-checkbox__label {
        color: #9aadd8;
      }
    }

    // 图片背景样式
    .disease-content {
      width: 100%;
      height: 100%;
      background-image: url("../../assets/screen/index/map-liaoning.jpg");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: relative;

      // 标题
      .disease-title {
        width: 20rem;
        height: 2.8rem;
        position: absolute;
        // top: 5rem;
        left: 50%;
        transform: translate(-50%, 5rem);
        background-image: url("../../assets/screen/index/disease-title.png");
        background-repeat: no-repeat;
        background-size: 100%;
      }

      // 图例
      .map-legend {
        height: 9rem;
        width: 2rem;
        position: absolute;
        top: 13%;
        left: 26%;
        background-color: #1cb6ff;
        z-index: 1;
      }

      // 打点部分
      .map-care {
        width: 48%;
        height: 73%;
        position: absolute;
        left: 26%;
        top: 13%;

        .map-care-div {
          height: 8.5rem;
          min-width: 3.5rem;
          display: flex;
          justify-content: center;
          line-height: 1.6rem;
          font-size: 0.7rem;
          color: #ffffff;
          position: absolute;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-position: 50%;

          span {
            height: 1rem;
            cursor: pointer;
          }
        }

        .map-care-div-1 {
          background-image: url("../../assets/screen/index/map-care-div-1.png");
        }

        .map-care-div-2 {
          background-image: url("../../assets/screen/index/map-care-div-2.png");
        }

        .map-care-div-3 {
          background-image: url("../../assets/screen/index/map-care-div-3.png");
        }

        .map-care-div-4 {
          background-image: url("../../assets/screen/index/map-care-div-4.png");
        }

        .map-care-div-5 {
          background-image: url("../../assets/screen/index/map-care-div-5.png");
        }

        .map-care-div-6 {
          background-image: url("../../assets/screen/index/map-care-div-6.png");
        }
      }
    }

    ::v-deep .baseLayerClass {
      filter: grayscale(200%) invert(200%) sepia(50%) hue-rotate(175deg)
        brightness(80%) saturate(550%);
    }
  }
}

// 头部样式
.screen-header {
  width: 100%;
  height: 5rem;
  padding: 1rem 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 {
      .home {
        cursor: pointer;
        height: 1.5rem;
        width: 1.2rem;
        background-image: url("../../assets/screen/index/exit.png");
        background-repeat: no-repeat;
        background-size: 100%;
      }
    }
  }
}

// 大屏下方样式
.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 {
      cursor: pointer;
      margin: 0 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;
    // }
  }
}

/* 修改弹窗样式 */
::v-deep .el-dialog__header {
  background-color: #113463;

  span,
  i {
    color: #ffffff;
  }
}

::v-deep .el-dialog__body {
  background-color: #113463;
}
</style>