123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026 |
- <!--深色样式首页-->
- <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>
|