<!--深色样式首页-->
<template>
  <div class="homepage-darkcolor">
    <div class="homepage">
      <div class="left">
        <div class="system-main-title">
          <h4 class="section-title">系统概况</h4>
          <div class="downright"></div>
        </div>
        <div class="system-list">
          <ul>
            <li
              :class="['system-item', item.selected ? 'selected' : '']"
              v-for="(item, index) in systemList"
              :key="index"
            >
              <div class="system-name">
                <img :src="imgSrc(item.smsxt)" />
                <span>{{ item.smsxtname.replace("系统", "") }}</span>
              </div>
              <section
                v-if="item.assetTypeList.length"
                class="system-equipments-container"
              >
                <div
                  @click.stop.capture="expandRestItems(item, index)"
                  class="more"
                  v-if="item.hasArrow"
                  :style="{
                    transform: item.expand ? 'rotate(0)' : 'rotate(180deg)',
                  }"
                >
                  <img
                    v-if="item.showColor"
                    src="../../assets/images/icons/arrow.png"
                  />
                  <img v-else src="../../assets/images/icons/grey.png" />
                </div>
                <div class="system-equipments">
                  <div
                    class="number"
                    v-for="(equip, index) in item.assetTypeList"
                    :key="index"
                    @click='navToInnerPage(item, equip)'
                  >
                    <div class="title">
                      <P
                        :style="{
                          width:
                            equip.category_name.length > 6 ? '10rem' : 'auto',
                        }"
                        :title="equip.category_name"
                        >{{ equip.category_name }}</P
                      >
                      <span
                        :style="{
                          right: equip.category_name.length > 6 ? '0' : '-1rem',
                        }"
                        v-if="equip.is_exception_num"
                        >{{ equip.is_exception_num }}</span
                      >
                    </div>
                    <p>
                      <span class="amount">{{ equip.asset_num }}</span
                      ><span>{{
                        equip.category_name === "屋面logo"
                          ? "个"
                          : equip.category_name === "玻璃护栏"
                          ? "段"
                          : "台"
                      }}</span>
                    </p>
                  </div>
                </div>
                <section
                  class="system-equipments"
                  v-show="item.expand && item.restAssetTypeList.length"
                  style="margin-top: 0.4rem"
                >
                  <div
                    class="number"
                    v-for="(equip, index) in item.restAssetTypeList"
                    :key="index"
                  >
                    <div class="title">
                      <P :title="equip.category_name">{{
                        equip.category_name
                      }}</P>
                      <span
                        :style="{
                          right: equip.category_name.length > 6 ? '0' : '-1rem',
                        }"
                        v-if="equip.is_exception_num"
                        >{{ equip.is_exception_num }}</span
                      >
                    </div>
                    <p>
                      <span class="amount">{{ equip.asset_num }}</span
                      ><span>{{
                        equip.category_name === "屋面logo"
                          ? "个"
                          : equip.category_name === "玻璃护栏"
                          ? "段"
                          : "台"
                      }}</span>
                    </p>
                  </div>
                </section>
              </section>
              <div v-else style="width: 65%; text-align: center">暂无数据</div>
            </li>
          </ul>
        </div>
      </div>
      <div class="center">
        <div class="update-record">
          <div class="system-main-title">
            <h4 class="section-title">说明书更新记录</h4>
            <div class="downright"></div>
          </div>
          <!-- 进度调 -->
          <div class="progress">
            <div class="number">
              <div class="nu">{{ recordTotal }}</div>
              <span>当月更新</span>
            </div>
            <div class="progress-box">
              <div class="progress-list" ref="plist">
                <div
                  :class="[
                    'progress-item',
                    index + 1 >= backrecordLength ? 'progress-box-bottom' : '',
                  ]"
                  :style="'width:' + item.persent"
                  v-for="(item, index) in recordList"
                  :key="index"
                ></div>
              </div>
              <div class="progress-legend">
                <div
                  class="legend-item"
                  v-for="(item, index) in recordList"
                  :key="index"
                >
                  <span class="legend-color"></span>
                  <span class="title">{{ item.typeName }}</span>
                  <span class="num">{{ item.cnt }}条</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="feng-map" ref="fengmap">
          <div class="lcgn-title">
            <span class="span1">{{ floorInfo.code }}</span>
          </div>
          <floorMap
            ref="floorMap"
            :loadName="loadName"
            :type="'floor'"
            categoryId="LCGN"
          ></floorMap>
          <!-- 图例 -->
          <div class="legend-boxs">
            <Legend
              :floors="floorsArr"
              type="1"
              :editTips="`编辑${floorInfo.code}层楼层功能平面图`"
            ></Legend>
            <floor-list
              v-if="floorsArr.length > 0"
              :floorsArr="floorsArr"
              :type="1"
              @emitFloor="emitFloor"
              :id="'floor'"
            ></floor-list>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="box" v-for="(item, index) in statisticsList" :key="index">
          <div class="box-center">
            <div class="system-main-title">
              <h4 class="section-title">{{ item.name }}</h4>
              <div class="downright"></div>
            </div>
            <div class="select">
              <Select
                width="110"
                v-model="item.smsxt"
                :isReadOnly="true"
                @change="changeClick(item)"
                :hideClear="true"
                :selectdata="dataSelect"
                :placeholder="'请选择'"
              />
            </div>
          </div>
          <div class="box-bottom">
            <div class="circle canvas-circle">
              <canvas
                :id="'canvas_' + item.type"
              ></canvas>
            </div>
            <div class="msg">
              <div class="msg-item">
                <span class="msg-color"></span>
                <span class="type">未完成得任务</span>
                <span class="num">{{ item.unfinished }}</span>
              </div>
              <div class="msg-item">
                <span class="msg-color"></span>
                <span class="type">即将逾期</span>
                <span class="num">{{ item.due_num }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getCardList, projectStatistics, rptstatistic } from "@/api/homePage";
import floorMap from "@/components/floorMap/darkColorIndex.vue";
import floorList from "@/components/floorListDark.vue";
import { mapGetters } from "vuex";
import { Legend } from "@/components/Legend/src/legendColor";
import { SCircle } from "./Circle.js";
import moment from "moment";
export default {
  components: { floorMap, floorList, Legend },
  data() {
    return {
      systemList: [], //系统数据
      plazaId: "",
      show: true,
      floorInfo: {},
      loadName: "",
      type: "",
      // 右侧统计
      statisticsList: [
        {
          name: "维保",
          type: 1,
          smsxt: "000",
          total: 0, //总任务
          due_num: 0, //即将逾期数量
          unfinished: 0, //未完成数量
        },
        {
          name: "第三方检测",
          type: 2,
          smsxt: "000",
          total: 0, //总任务
          due_num: 0, //即将逾期数量
          unfinished: 0, //未完成数量
        },
        {
          name: "专维",
          type: 0,
          smsxt: "000",
          total: 0, //总任务
          due_num: 0, //即将逾期数量
          unfinished: 0, //未完成数量
        },
      ],
      recordList: [
        // 更新记录数组
        { cnt: 0, objtype: 4, typeName: "重要维修", persent: "0" },
        { cnt: 0, objtype: 1, typeName: "重要维保", persent: "0" },
        { cnt: 0, objtype: 5, typeName: "其他事项", persent: "0" },
        { cnt: 0, objtype: 3, typeName: "综合事项", persent: "0" },
      ],
      recordTotal: 0, //更新总数
      backrecordLength: 0, // 更新数据对应得得数量
      dataSelect: [
        { id: "000", name: "全部" },
        { id: "1003", name: "消防系统" },
        { id: "1001", name: "供电系统" },
        { id: "1002", name: "暖通系统" },
        { id: "1006", name: "电梯系统" },
        { id: "1005", name: "给排水" },
        { id: "1004", name: "弱电系统" },
        { id: "1007", name: "燃气系统" },
        { id: "1008", name: "土建装饰" },
      ],
      canvasCircle:0 , //圆的半径
    };
  },
  computed: {
    ...mapGetters(["floorsArr", "floorObj"]),
  },
  methods: {
    // 点击下拉框选择
    changeClick(statisticItem, data) {
      this.projectStatistics(
        statisticItem.type,
        statisticItem.smsxt,
        statisticItem.type == 1
          ? moment().format("YYYYMM")
          : moment().format("YYYY")
      ).then((res) => {
        const TYPE = statisticItem.type; // 类型
        const circle = new SCircle(`canvas_${TYPE}`,this.canvasCircle*0.8);
        let circle_basename = null;
         statisticItem.type == 1 ? circle_basename = "本月总任务" :circle_basename = "本年总任务"
         circle.baseName = circle_basename
        // 总数
        let total = 0;
        // 即将预期
        let due_num = 0;
        //  未完成任务
        let unfinished = 0;
        // 累计统计
        res.data.forEach((item) => {
          total = total + item.total;
          due_num = due_num + item.due_num;
          unfinished = unfinished + item.unfinished;
        });
        // 赋值
        Object.assign(statisticItem, {
          total,
          due_num,
          unfinished,
        });
        circle.persentTransform(total, due_num, unfinished);
        circle.setText(total);
      });
    },

     expandRestItems(item, index) {
      this.systemList.forEach((eq) => {
        if (eq.smsxt !== item.smsxt) {
          eq.expand = false;
        }
        eq.selected = false;
      });
      item.selected = true;
      item.expand = !item.expand;
    },
    imgSrc(code) {
      return require("../../assets/images/icons/" + code + ".png");
    },
    itemStyle(option) {
      let num = 0;
      if (option.assetTypeList) {
        option.assetTypeList.forEach((item) => {
          if (typeof item.is_exception_num === "number") {
            num += item.is_exception_num;
          }
        });
      }
      if (option.rptGlsmsStatisticsList) {
        option.rptGlsmsStatisticsList.forEach((option) => {
          if (typeof option.due_num === "number") {
            num += option.due_num;
          }
        });
      }
      if (num > 0) {
        return {
          display: "block",
        };
      } else {
        return {
          display: "none",
        };
      }
    },
    /**
     * @Description 获取集团 中心 区域 项目 数据树数据
     * @method param ccode  管理分区编码 集团首页必填
     * @method param level  1集团 2中心 3区域 0广场 集团首页必填
     * @method param plazaId 广场id  如果是广场则此参数必填 其他情况下非必填
     */
    getSystemList() {
      let params = {
        getParams: {
          plazaId: this.plazaId,
        },
      };
      return new Promise((resolve, reject) => {
        getCardList(params).then((res) => {
          if (res.result == "success") {
            let result = res.data;
            if (result && Array.isArray(result)) {
              result.forEach((item) => {
                let list = item.assetTypeList;
                if (list) {
                  if (list.length > 3) {
                    item.hasArrow = true;
                    item.assetTypeList = list.splice(0, 3);
                    item.restAssetTypeList = list;
                    item.showColor = list.some((item) => {
                      return item.is_exception_num > 0;
                    });
                  } else {
                    item.hasArrow = false;
                    item.restAssetTypeList = [];
                  }
                }
              });
              res.data.forEach((item) => {
                item.selected = false;
                item.expand = false;
              });
              res.data[0].selected = true;
              this.currentSelectedSys = res.data[0];
              this.currentSysId = res.data[0].smsxt;

              this.systemList = res.data;
              resolve(res);
            }
          }
        });
      });
    },
    emitFloor(item) {
      this.floorInfo = item;
      this.$refs.floorMap.init(this.floorInfo.gname);
      this.init();
    },
    additionalColl() {
      this.show = !this.show;
    },
    init() {
      this.loadName = `楼层功能-${this.floorInfo.code}`;
      if (this.floorsArr.length > 0 && this.$cookie.get("currentFloorId")) {
        this.floorInfo = this.floorsArr.find((item) => {
          return this.$cookie.get("currentFloorId") == item.seq;
        });
      } else {
      }
    },
    // 点击跳转
    navToInnerPage (item, equip) {
      this.$router.push({path:"./analysis", query:{smsxt:item.smsxt, equipId: equip.category_code, module:'core'}})
    },

    /**
     * 项目首页右侧统计
     *
     * type 统计类型 0：专维 1：维保任务 2：第三方视图 //必填
     * system=1001//所属专业 (选填) //不填则默认全部专业（系统）
     * time 时间
     */
    projectStatistics(type, smsxt, time) {
      let params = null;
      if (smsxt == "000") {
        params = {
          getParams: {
            plazaId: this.plazaId,
            type: type, // 统计类型 0：专维 1：维保任务 2：第三方视图 //必填
            statisticsDate: time, //统计时间 type=0或type=2时:格式：yyyy  /  type=1时:格式：yyyyMM //必填
          },
        };
      } else {
        params = {
          getParams: {
            plazaId: this.plazaId,
            type: type, // 统计类型 0：专维 1：维保任务 2：第三方视图 //必填
            statisticsDate: time, //统计时间 type=0或type=2时:格式：yyyy  /  type=1时:格式：yyyyMM //必填
            smsxt: smsxt, //所属专业 (选填) //不填则默认全部专业（系统）
          },
        };
      }
      return projectStatistics(params);
    },
    // 广场统计说明书更新记录数量
    rptstatistic(startTime, endTime) {
      const params = {
        getParams: {
          plazaId: this.plazaId,
          changeDateStartDate: startTime, // 统计类型 0：专维 1：维保任务 2：第三方视图 //必填
          changeDateEndDate: endTime, //统计时间 type=0或type=2时:格式：yyyy  /  type=1时:格式：yyyyMM //必填
        },
      };
      rptstatistic(params).then((res) => {
        if (res.data.total && res.data.objcnt) {
          res.data.objcnt.forEach((obj) => {
            this.recordList.forEach((recorditem) => {
              if (obj.objtype == recorditem.objtype) {
                recorditem.cnt = obj.cnt;
                recorditem.persent =
                  Math.ceil((obj.cnt / res.data.total) * 100) + "%";
              }
            });
          });
          this.backrecordLength = res.data.objcnt.length;
          this.recordTotal = res.data.total;
        } else {
          this.backrecordLength = 0;
          this.recordTotal = 0;
        }
      });
    },
    // 获取右侧统计数据
    getRightstatic() {
      // 对右侧数据做遍历
      this.statisticsList.forEach((statisticItem) => {
      const TYPE = statisticItem.type; // 类型
      const Dom = document.getElementById(`canvas_${TYPE}`);
      const BoxDom = document.getElementsByClassName('canvas-circle')[0];
      this.canvasCircle = 0
      if(BoxDom.offsetHeight>BoxDom.offsetWidth){
         this.canvasCircle = BoxDom.offsetWidth / 2;
      }else{
          this.canvasCircle = BoxDom.offsetHeight / 2;
      }
      // 设置Dom得width\height
      Dom.height = this.canvasCircle*2;
      Dom.width = this.canvasCircle*2;
        this.projectStatistics(
          statisticItem.type,
          statisticItem.system,
          statisticItem.type == 1
            ? moment().format("YYYYMM")
            : moment().format("YYYY")
        ).then((res) => {
          let circle_basename = null
          statisticItem.type == 1 ? circle_basename = "本月总任务" :circle_basename = "本年总任务"
          const circle = new SCircle(`canvas_${TYPE}`,this.canvasCircle*0.8);
          circle.baseName = circle_basename
          // 总数
          let total = 0;
          // 即将预期
          let due_num = 0;
          //  未完成任务
          let unfinished = 0;
          // 累计统计
          res.data.forEach((item) => {
            total = total + item.total;
            due_num = due_num + item.due_num;
            unfinished = unfinished + item.unfinished;
          });
          // 赋值
          Object.assign(statisticItem, {
            total,
            due_num,
            unfinished,
          });
          circle.persentTransform(total, due_num, unfinished);
          circle.setText(total);
        });
      });
    },
  },
  created() {
    let plazaId = localStorage.getItem("PLAZAID");
    if (plazaId) {
      this.plazaId = plazaId;
    }
    this.getSystemList();
  },
  mounted() {
    this.init();
    // 获取右侧数据
    this.getRightstatic();
    // 获取说明书更新记录
    // 获取说明书更新记录
    const endTime = moment().add(1, "days").format("YYYYMMDD000000");
    const startTime = moment().subtract(29, "days").format("YYYYMMDD000000");
    this.rptstatistic(startTime, endTime);
    this.$refs.floorMap.init(this.floorInfo.gname);
  },
};
</script>
<style lang="less" scoped>
.homepage-darkcolor {
  width: 100%;
  height: 100%;
  background: #0c102c;
  color: #fff;
  .homepage {
    width: 100%;
    height: 100%;
    padding: 56px 16px 40px 16px;
    box-sizing: border-box;
    display: flex;
    .system-main-title {
      width: 152px;
      height: 40px;
      background: rgba(22, 73, 206, 0.36);
      line-height: 40px;
      margin-bottom: 12px;
      font-size: 18px;
      color: #95bfff;
      position: relative;
      h4 {
        color: #fff;
        margin-left: 18px;
      }
      .downright {
        position: absolute;
        width: 0;
        height: 0;
        border-left: 20px solid transparent;
        border-bottom: 48px solid #0c102c;
        right: 0px;
        top: 0;
      }
    }
    .left {
      width: 30.05%;
      height: 100%;
      box-sizing: border-box;
      background: radial-gradient(#20284f 20%, transparent 20%) 0 0;
      background-color: transparent;
      background-size: 8px 8px;
      border: 10px solid;
      border-image: url("../../assets/images/border.png") 14;
      .system-list {
        height: ~"calc(100% - 44px)";
        overflow-y: auto;
        ul {
          li.system-item {
            position: relative;
            display: flex;
            justify-content: flex-start;
            align-items: stretch;
            width: 100%;
            margin-bottom: 6px;
            box-sizing: border-box;
            border: 1px solid#0C102C;
            border-radius: 4px;
            transition: 0.5s;
            background: rgba(13, 29, 66, 0.6);
            cursor: pointer;
            .system-name {
              position: absolute;
              top: 0;
              bottom: 0;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              flex-shrink: 1;
              flex-grow: 1;
              width: 18%;
              height: auto;
              img {
                width: 32px;
                height: 32px;
                margin-bottom: 6px;
              }
              span {
                color: white;
                font-size: 14px;
                font-weight: bolder;
              }
            }
            .system-equipments-container {
              position: relative;
              width: 88%;
              padding: 10px;
              margin-left: 18%;
              .more {
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 14px;
                height: 14px;
                right: 8px;
                top: 50%;
                border-radius: 7px;
                cursor: pointer;
                transform: rotate(0);
                transform-origin: center;
                z-index: 100;
                transform: translateY(-7px);
                img {
                  width: 14px;
                  height: 14px;
                }
              }
              .system-equipments {
                display: flex;
                align-items: center;
                .number {
                  width: 30%;
                  margin-right: 1%;
                  background: rgba(56, 94, 204, 0.22);
                  border-radius: 2px;
                  padding: 14px 0 10px 4px;
                  color: #ffffff;
                  .title {
                    display: inline-block;
                    position: relative;
                    line-height: 1;
                    p {
                      display: inline-block;
                      position: relative;
                      color: #fff;
                      font-size: 14px;
                      line-height: 20px;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                      overflow: hidden;
                    }
                    span {
                      position: absolute;
                      top: -10px;
                      right: -20px;
                      padding: 2px 4px;
                      border-radius: 9px;
                      font-size: 12px;
                      color: #ffffff;
                      background: #f54e45;
                    }
                  }
                  p {
                    span:first-child {
                      color: #ffffff;
                      font-size: 18px;
                      font-weight: bold;
                    }
                    .amount {
                      font-size: bold;
                    }
                  }
                }
              }
            }
          }
          li.selected {
            /deep/ .p-select-header {
              background: #cccccc !important;
            }
          }
          li:hover {
            border-color: #e4e5e7;
            box-shadow: 0 2px 10px 0px rgba(195, 199, 203, 0.4);
          }
          li:nth-of-type(1),
          li:nth-of-type(5) {
            .system-name {
              background: linear-gradient(
                133deg,
                rgba(64, 204, 202, 0.3) 0%,
                rgba(108, 194, 226, 0.3) 100%
              );
              border-radius: 6px 0px 0px 6px;
            }
          }
          li:nth-of-type(2),
          li:nth-of-type(6) {
            .system-name {
              background: linear-gradient(
                133deg,
                rgba(57, 152, 219, 0.3) 0%,
                rgba(112, 187, 239, 0.3),
                100%
              );
              border-radius: 6px 0px 0px 6px;
            }
          }
          li:nth-of-type(3),
          li:nth-of-type(7) {
            .system-name {
              background: linear-gradient(
                133deg,
                rgba(174, 48, 118, 0.3) 0%,
                rgba(213, 83, 135, 0.3) 100%
              );
              border-radius: 6px 0px 0px 6px;
            }
          }
          li:nth-of-type(4),
          li:nth-of-type(8) {
            .system-name {
              background: linear-gradient(
                133deg,
                rgba(240, 84, 59, 0.3) 0%,
                rgba(226, 133, 108, 0.3) 100%
              );
              border-radius: 6px 0px 0px 6px;
            }
          }
        }
      }
    }
    .center {
      flex: 1;
      height: 100%;
      padding: 0 20px;
      position: relative;
      .update-record {
        width: 100%;
        height: 196px;
        background: radial-gradient(#20284f 20%, transparent 20%) 0 0;
        background-color: transparent;
        background-size: 8px 8px;
        border: 10px solid;
        border-image: url("../../assets/images/border.png") 14;
        .progress {
          display: flex;
          align-items: center;
          .progress-box {
            flex: 1;
            height: 100%;
            .progress-list {
              height: 12px;
              background: #ccc;
              border-radius: 6px 6px;
              display: flex;
              margin-right: 30px;
              overflow: hidden;
              .progress-item {
                height: 12px;
                border-right: 6px #0c102c solid;
                overflow: hidden;
              }
              .progress-item:nth-of-type(1) {
                background: #0a8fef;
              }
              .progress-item:nth-of-type(2) {
                background: #2bc58b;
              }
              .progress-item:nth-of-type(3) {
                background: #fd9039;
              }
              .progress-item:nth-of-type(4) {
                background: #c348fd;
              }
              .progress-box-bottom {
                border-right: 0px;
              }
            }
            .progress-legend {
              width: 100%;
              display: flex;
              margin-top: 28px;
              .legend-item {
                margin-right: 30px;
                display: flex;
                align-items: center;
                .legend-color {
                  display: block;
                  width: 10px;
                  height: 10px;
                  border-radius: 50% 50%;
                  background: #fd9039;
                  margin-right: 10px;
                }
                .title {
                  margin-right: 10px;
                }
              }
              .legend-item:nth-of-type(1) {
                .legend-color {
                  background: #0a8fef;
                }
              }
              .legend-item:nth-of-type(2) {
                .legend-color {
                  background: #2bc58b;
                }
              }
              .legend-item:nth-of-type(3) {
                .legend-color {
                  background: #fd9039;
                }
              }
              .legend-item:nth-of-type(4) {
                .legend-color {
                  background: #c348fd;
                }
              }
            }
          }
          .number {
            width: 140px;
            height: 100%;
            color: #c3c7cb;
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .nu {
              font-size: 30px;
              font-weight: bold;
              color: #ffffff;
              margin: 0 auto;
            }
            span {
              font-size: 16px;
              color: #c3c7cb;
              margin: 0 auto;
            }
          }
        }
      }

      .feng-map {
        width: 100%;
        height: calc(~"100% - 200px");
        position: relative;
        .lcgn-title {
          position: absolute;
          z-index: 2;
          display: block;
          top: 30px;
          left: 30px;
          width: 140px;
          height: 32px;
          background: linear-gradient(
            270deg,
            rgba(199, 217, 234, 0) 0%,
            rgba(199, 217, 234, 1) 100%
          );
          box-shadow: -6px 2px 8px 0px rgba(31, 36, 41, 0.1);
          color: #025baa;
          font-size: 16px;
          &::before {
            width: 2px;
            height: 16px;
            background: rgba(2, 91, 170, 1);
            display: inline-block;
            content: "";
            margin-right: 10px;
            margin-top: 8px;
          }
          .span1 {
            position: absolute;
            top: 3px;
          }
        }
        .legend-boxs {
          position: absolute;
          z-index: 9;
          right: 32px;
          top: 50px;
        }
      }
    }
    .right {
      width: 21.2%;
      height: 100%;
      padding-left: 10px;
      box-sizing: border-box;
      .box {
        width: 100%;
        height: ~"calc((100% - 16px) / 3)";
        background: radial-gradient(#20284f 20%, transparent 20%) 0 0;
        background-color: transparent;
        background-size: 8px 8px;
        border: 10px solid;
        border-image: url("../../assets/images/border.png") 14;
        margin-bottom: 20px;
        box-sizing: border-box;
        .box-center {
          display: flex;
          justify-content: space-between;
          .select {
            width: 110px;
            height: 36px;
            /deep/ .p-select-header {
              background: rgba(22, 73, 206, 0.36) !important;
              color: #fff !important;
            }
          }
        }
        .box-bottom {
          // padding-top: 36px;
          box-sizing: border-box;
          display: flex;
          position: relative;
          align-items: center;
          height:calc(100% - 52px);
          .circle {
            width: 140px;
            height: 100%;
            display: flex;
            align-items: center;
          }
          .msg {
            flex: 1;
            padding: 0 0 0 30px;
            box-sizing: border-box;
            .msg-item:nth-of-type(1) {
              display: flex;
              align-items: center;
              margin-top: 16px;
              .msg-color {
                display: block;
                width: 10px;
                height: 10px;
                border-radius: 10px 10px;
                background: #fd933c;
                margin-right: 10px;
              }
              .type {
                margin: 0 6px 0 4px;
              }
            }
            .msg-item:nth-of-type(2) {
              display: flex;
              align-items: center;
              margin-top: 16px;
              .msg-color {
                display: block;
                width: 10px;
                height: 10px;
                border-radius: 10px 10px;
                background: #cf233d;
                margin-right: 10px;
              }
              .type {
                margin: 0 6px 0 4px;
              }
            }
          }
        }
      }
    }
  }
}
/deep/ .p-select-option-box {
  background: rgba(22, 73, 206, 0.36) !important;
  .p-select-option-menu {
    background: rgba(22, 73, 206, 0.36) !important;
  }
}
</style>