|
@@ -41,6 +41,7 @@
|
|
|
class="number"
|
|
|
v-for="(equip, index) in item.assetTypeList"
|
|
|
:key="index"
|
|
|
+ @click="navToInnerPage(item, equip)"
|
|
|
>
|
|
|
<div class="title">
|
|
|
<P
|
|
@@ -120,45 +121,39 @@
|
|
|
<!-- 进度调 -->
|
|
|
<div class="progress">
|
|
|
<div class="number">
|
|
|
- <div class="nu">19</div>
|
|
|
+ <div class="nu">{{ recordTotal }}</div>
|
|
|
<span>当月更新</span>
|
|
|
</div>
|
|
|
<div class="progress-box">
|
|
|
<div class="progress-list" ref="plist">
|
|
|
- <div class="progress-item"></div>
|
|
|
- <div class="progress-item"></div>
|
|
|
- <div class="progress-item"></div>
|
|
|
- <div class="progress-item progress-box-bottom"></div>
|
|
|
+ <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">
|
|
|
- <span class="legend-color"></span>
|
|
|
- <span class="title">重要维修</span>
|
|
|
- <span class="num">1条</span>
|
|
|
- </div>
|
|
|
- <div class="legend-item">
|
|
|
- <span class="legend-color"></span>
|
|
|
- <span class="title">重要维修</span>
|
|
|
- <span class="num">5条</span>
|
|
|
- </div>
|
|
|
- <div class="legend-item">
|
|
|
- <span class="legend-color"></span>
|
|
|
- <span class="title">重要维修</span>
|
|
|
- <span class="num">3条</span>
|
|
|
- </div>
|
|
|
- <div class="legend-item">
|
|
|
+ <div
|
|
|
+ class="legend-item"
|
|
|
+ v-for="(item, index) in recordList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
<span class="legend-color"></span>
|
|
|
- <span class="title">重要维修</span>
|
|
|
- <span class="num">5条</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">
|
|
|
+ <!-- <div class="lcgn-title">
|
|
|
<span class="span1">{{ floorInfo.code }}</span>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<floorMap
|
|
|
ref="floorMap"
|
|
|
:loadName="loadName"
|
|
@@ -167,11 +162,11 @@
|
|
|
></floorMap>
|
|
|
<!-- 图例 -->
|
|
|
<div class="legend-boxs">
|
|
|
- <Legend
|
|
|
+ <!-- <Legend
|
|
|
:floors="floorsArr"
|
|
|
type="1"
|
|
|
:editTips="`编辑${floorInfo.code}层楼层功能平面图`"
|
|
|
- ></Legend>
|
|
|
+ ></Legend> -->
|
|
|
<floor-list
|
|
|
v-if="floorsArr.length > 0"
|
|
|
:floorsArr="floorsArr"
|
|
@@ -183,80 +178,38 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
- <div class="box">
|
|
|
- <div class="box-center">
|
|
|
- <div class="system-main-title">
|
|
|
- <h4 class="section-title">维保</h4>
|
|
|
- <div class="downright"></div>
|
|
|
- </div>
|
|
|
- <div class="select">全部</div>
|
|
|
- </div>
|
|
|
- <div class="box-bottom">
|
|
|
- <div class="circle">
|
|
|
- <canvas id="canvas22" width="150" height="150"></canvas>
|
|
|
- </div>
|
|
|
- <div class="msg">
|
|
|
- <div class="msg-item item-1">
|
|
|
- <span class="msg-color"></span>
|
|
|
- <span class="type">未完成得任务</span>
|
|
|
- <span class="num">8</span>
|
|
|
- </div>
|
|
|
- <div class="msg-item item-1">
|
|
|
- <span class="msg-color"></span>
|
|
|
- <span class="type">即将逾期</span>
|
|
|
- <span class="num">8</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="box">
|
|
|
+ <div class="box" v-for="(item, index) in statisticsList" :key="index">
|
|
|
<div class="box-center">
|
|
|
<div class="system-main-title">
|
|
|
- <h4 class="section-title">第三方检测</h4>
|
|
|
+ <h4 class="section-title">{{ item.name }}</h4>
|
|
|
<div class="downright"></div>
|
|
|
</div>
|
|
|
- <div class="select">全部</div>
|
|
|
- </div>
|
|
|
- <div class="box-bottom">
|
|
|
- <div class="circle">
|
|
|
- <canvas id="canvas2" width="150" height="150"></canvas>
|
|
|
- </div>
|
|
|
- <div class="msg">
|
|
|
- <div class="msg-item item-1">
|
|
|
- <span class="msg-color"></span>
|
|
|
- <span class="type">未完成得任务</span>
|
|
|
- <span class="num">8</span>
|
|
|
- </div>
|
|
|
- <div class="msg-item item-1">
|
|
|
- <span class="msg-color"></span>
|
|
|
- <span class="type">即将逾期</span>
|
|
|
- <span class="num">8</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="box">
|
|
|
- <div class="box-center">
|
|
|
- <div class="system-main-title">
|
|
|
- <h4 class="section-title">专维</h4>
|
|
|
- <div class="downright"></div>
|
|
|
+ <div class="select">
|
|
|
+ <Select
|
|
|
+ width="110"
|
|
|
+ v-model="item.smsxt"
|
|
|
+ :isReadOnly="true"
|
|
|
+ @change="changeClick(item)"
|
|
|
+ :hideClear="true"
|
|
|
+ :selectdata="dataSelect"
|
|
|
+ :placeholder="'请选择'"
|
|
|
+ />
|
|
|
</div>
|
|
|
- <div class="select">全部</div>
|
|
|
</div>
|
|
|
<div class="box-bottom">
|
|
|
- <div class="circle">
|
|
|
- <canvas id="canvas3" width="150" height="150"></canvas>
|
|
|
+ <div class="circle canvas-circle">
|
|
|
+ <canvas :id="'canvas_' + item.type"></canvas>
|
|
|
</div>
|
|
|
<div class="msg">
|
|
|
- <div class="msg-item item-1">
|
|
|
+ <div class="msg-item">
|
|
|
<span class="msg-color"></span>
|
|
|
<span class="type">未完成得任务</span>
|
|
|
- <span class="num">8</span>
|
|
|
+ <span class="num">{{ item.unfinished }}</span>
|
|
|
</div>
|
|
|
- <div class="msg-item item-1">
|
|
|
+ <div class="msg-item">
|
|
|
<span class="msg-color"></span>
|
|
|
<span class="type">即将逾期</span>
|
|
|
- <span class="num">8</span>
|
|
|
+ <span class="num">{{ item.due_num }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -266,26 +219,125 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { getCardList } from "@/api/homePage";
|
|
|
+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 },
|
|
|
+ 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.7);
|
|
|
+ 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");
|
|
|
},
|
|
@@ -315,30 +367,18 @@ export default {
|
|
|
};
|
|
|
}
|
|
|
},
|
|
|
- expandRestItems(item, index) {
|
|
|
- this.cardsList.forEach((each) => {
|
|
|
- each.forEach((eq) => {
|
|
|
- if (eq.smsxt !== item.smsxt) {
|
|
|
- eq.expand = false;
|
|
|
- }
|
|
|
- eq.selected = false;
|
|
|
- });
|
|
|
- });
|
|
|
- item.expand = !item.expand;
|
|
|
- },
|
|
|
/**
|
|
|
* @Description 获取集团 中心 区域 项目 数据树数据
|
|
|
* @method param ccode 管理分区编码 集团首页必填
|
|
|
* @method param level 1集团 2中心 3区域 0广场 集团首页必填
|
|
|
* @method param plazaId 广场id 如果是广场则此参数必填 其他情况下非必填
|
|
|
*/
|
|
|
- getSystemList(ccode, level) {
|
|
|
- let params = null;
|
|
|
- if (level === 0) {
|
|
|
- params = { getParams: { plazaId: ccode, level } };
|
|
|
- } else {
|
|
|
- params = { getParams: { ccode, level } };
|
|
|
- }
|
|
|
+ getSystemList() {
|
|
|
+ let params = {
|
|
|
+ getParams: {
|
|
|
+ plazaId: this.plazaId,
|
|
|
+ },
|
|
|
+ };
|
|
|
return new Promise((resolve, reject) => {
|
|
|
getCardList(params).then((res) => {
|
|
|
if (res.result == "success") {
|
|
@@ -375,7 +415,6 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
-
|
|
|
emitFloor(item) {
|
|
|
this.floorInfo = item;
|
|
|
this.$refs.floorMap.init(this.floorInfo.gname);
|
|
@@ -386,8 +425,6 @@ export default {
|
|
|
},
|
|
|
init() {
|
|
|
this.loadName = `楼层功能-${this.floorInfo.code}`;
|
|
|
- console.log(this.floorsArr.length);
|
|
|
- console.log(this.$cookie.get("currentFloorId"));
|
|
|
if (this.floorsArr.length > 0 && this.$cookie.get("currentFloorId")) {
|
|
|
this.floorInfo = this.floorsArr.find((item) => {
|
|
|
return this.$cookie.get("currentFloorId") == item.seq;
|
|
@@ -395,35 +432,148 @@ export default {
|
|
|
} else {
|
|
|
}
|
|
|
},
|
|
|
- // 模拟横条数据
|
|
|
- getPercent() {
|
|
|
- let domList = this.$refs.plist.childNodes;
|
|
|
- let width = this.$refs.plist.offsetWidth - 18;
|
|
|
- setTimeout(() => {
|
|
|
- domList[0].style.width = width * 0.2 + "px";
|
|
|
- domList[1].style.width = width * 0.4 + "px";
|
|
|
- domList[2].style.width = width * 0.2 + "px";
|
|
|
- domList[3].style.width = width * 0.2 + "px";
|
|
|
- // 设置圆
|
|
|
- const circle = new SCircle('canvas22');
|
|
|
- circle.setPersent(37,50);
|
|
|
- circle.setText('1');
|
|
|
- // const circle2 = new SCircle('canvas2',100);
|
|
|
- // circle2.setPersent(70,20);
|
|
|
- // circle2.setText('23')
|
|
|
- // const circle3 = new SCircle('canvas3',100);
|
|
|
- // circle3.setPersent(40,80);
|
|
|
- // circle3.setText('39')
|
|
|
- }, 3000);
|
|
|
+ // 点击跳转
|
|
|
+ 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() {
|
|
|
+ // 设置圆环半径
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ // 对右侧数据做遍历
|
|
|
+ this.statisticsList.forEach((statisticItem) => {
|
|
|
+ const TYPE = statisticItem.type; // 类型
|
|
|
+ const Dom = document.getElementById(`canvas_${TYPE}`);
|
|
|
+ // 设置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.7
|
|
|
+ );
|
|
|
+ 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() {
|
|
|
- this.getSystemList(103000, 1);
|
|
|
+ let plazaId = localStorage.getItem("PLAZAID");
|
|
|
+ if (plazaId) {
|
|
|
+ this.plazaId = plazaId;
|
|
|
+ }
|
|
|
+ this.getSystemList();
|
|
|
},
|
|
|
mounted() {
|
|
|
this.init();
|
|
|
- this.getPercent();
|
|
|
+ // 获取右侧数据
|
|
|
+ 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);
|
|
|
},
|
|
|
};
|
|
@@ -441,11 +591,14 @@ export default {
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
.system-main-title {
|
|
|
- width: 152px;
|
|
|
+ min-width: 130px;
|
|
|
+ max-width: 200px;
|
|
|
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;
|
|
@@ -464,12 +617,24 @@ export default {
|
|
|
.left {
|
|
|
width: 30.05%;
|
|
|
height: 100%;
|
|
|
- padding: 16px 0px 16px 10px;
|
|
|
box-sizing: border-box;
|
|
|
- border-radius: 1px solid #cccccc;
|
|
|
+ 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: 100%;
|
|
|
+ height: ~"calc(100% - 44px)";
|
|
|
overflow-y: auto;
|
|
|
+ &::-webkit-scrollbar-track {
|
|
|
+ background: rgba(22, 73, 206, 0.3);
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ background: rgba(22, 73, 206, 0.8);
|
|
|
+ border-radius: 10px;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
ul {
|
|
|
li.system-item {
|
|
|
position: relative;
|
|
@@ -482,7 +647,7 @@ export default {
|
|
|
border: 1px solid#0C102C;
|
|
|
border-radius: 4px;
|
|
|
transition: 0.5s;
|
|
|
- background: #0d1d42;
|
|
|
+ background: rgba(13, 29, 66, 0.6);
|
|
|
cursor: pointer;
|
|
|
.system-name {
|
|
|
position: absolute;
|
|
@@ -582,8 +747,15 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
li.selected {
|
|
|
- border-color: #6883ff;
|
|
|
- box-shadow: 0 2px 10px 0px #6883ff;
|
|
|
+ /deep/ .p-select-header {
|
|
|
+ background: #cccccc !important;
|
|
|
+ }
|
|
|
+ /deep/ .p-select-cursor-input {
|
|
|
+ color: #ffffff !important;
|
|
|
+ &::-webkit-input-placeholder {
|
|
|
+ color: #ffffff !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
li:hover {
|
|
|
border-color: #e4e5e7;
|
|
@@ -604,10 +776,9 @@ export default {
|
|
|
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%
|
|
|
+ to left,
|
|
|
+ rgba(57, 152, 219, 0.3),
|
|
|
+ rgba(112, 187, 239, 0.3)
|
|
|
);
|
|
|
border-radius: 6px 0px 0px 6px;
|
|
|
}
|
|
@@ -645,8 +816,11 @@ export default {
|
|
|
.update-record {
|
|
|
width: 100%;
|
|
|
height: 196px;
|
|
|
- border: 1px solid #cccccc;
|
|
|
- padding: 10px;
|
|
|
+ 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;
|
|
@@ -655,14 +829,13 @@ export default {
|
|
|
height: 100%;
|
|
|
.progress-list {
|
|
|
height: 12px;
|
|
|
- background: #ccc;
|
|
|
+ background: rgba(56, 94, 204, 0.48);
|
|
|
border-radius: 6px 6px;
|
|
|
display: flex;
|
|
|
margin-right: 30px;
|
|
|
overflow: hidden;
|
|
|
.progress-item {
|
|
|
height: 12px;
|
|
|
- width: 30%;
|
|
|
border-right: 6px #0c102c solid;
|
|
|
overflow: hidden;
|
|
|
}
|
|
@@ -687,7 +860,7 @@ export default {
|
|
|
display: flex;
|
|
|
margin-top: 28px;
|
|
|
.legend-item {
|
|
|
- margin-right: 30px;
|
|
|
+ margin-right: 25px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
.legend-color {
|
|
@@ -796,10 +969,13 @@ export default {
|
|
|
box-sizing: border-box;
|
|
|
.box {
|
|
|
width: 100%;
|
|
|
- height: ~"calc(33% - 16px)";
|
|
|
- border: 1px solid #ccc;
|
|
|
+ height: ~"calc((100% - 30px) / 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;
|
|
|
- padding: 10px;
|
|
|
box-sizing: border-box;
|
|
|
.box-center {
|
|
|
display: flex;
|
|
@@ -807,21 +983,49 @@ export default {
|
|
|
.select {
|
|
|
width: 110px;
|
|
|
height: 36px;
|
|
|
- background: #1649ce;
|
|
|
+ /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: 150px;
|
|
|
- height: 150px;
|
|
|
+ max-width: 150px;
|
|
|
+ min-width: 120px;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ margin-left: 20px;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
.msg {
|
|
|
flex: 1;
|
|
|
- margin-top: 10px;
|
|
|
- .msg-item {
|
|
|
+ padding: 0 0 0 20px;
|
|
|
+ white-space:nowrap;
|
|
|
+ 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;
|
|
@@ -830,7 +1034,7 @@ export default {
|
|
|
width: 10px;
|
|
|
height: 10px;
|
|
|
border-radius: 10px 10px;
|
|
|
- background: #ffffff;
|
|
|
+ background: #cf233d;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
.type {
|