修改指挥部大屏页面
This commit is contained in:
Vce
parent
6ca443b835
commit
9617a78233
@ -5,7 +5,7 @@ NODE_ENV = 'development'
|
||||
# 后端本地
|
||||
# VITE_API_URL = 'http://192.168.34.221:19111'
|
||||
# VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
|
||||
# VITE_API_URL = 'http://182.90.224.237:51234' #雄哥远程
|
||||
VITE_API_URL = 'http://182.90.224.237:51234' #雄哥远程
|
||||
# VITE_API_URL = 'http://192.168.34.221:28889'
|
||||
# VITE_API_URL = 'http://121.196.214.246/api'
|
||||
# VITE_API_URL = 'http://jxj.zhgdyun.com:100'
|
||||
@ -24,7 +24,7 @@ NODE_ENV = 'development'
|
||||
# VITE_API_URL = 'http://182.90.224.237:15551'
|
||||
# agjt
|
||||
# VITE_API_URL = 'http://42.180.188.17:9809' #生产环境
|
||||
VITE_API_URL = 'http://42.180.188.17:11211' #测试环境
|
||||
# VITE_API_URL = 'http://42.180.188.17:11211' #测试环境
|
||||
# VITE_API_URL = 'http://jxj.zhgdyun.com:19812'
|
||||
# 苏立信
|
||||
# VITE_API_URL = 'http://101.43.164.214:11111'
|
||||
|
||||
BIN
src/assets/images/commandScreen/number-bg.png
Normal file
BIN
src/assets/images/commandScreen/number-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
@ -24,8 +24,8 @@ export const staticRouter: RouteRecordRaw[] = [
|
||||
{
|
||||
path: "/large",
|
||||
name: "大屏",
|
||||
component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
|
||||
// component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
|
||||
// component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
|
||||
component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
|
||||
// component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页)
|
||||
children: [
|
||||
{
|
||||
|
||||
@ -218,7 +218,7 @@ onMounted(async () => {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
// background: #fff;
|
||||
.item {
|
||||
width: 100%;
|
||||
|
||||
794
src/views/commandScreen/commandCenter/leftBottom(旧版2).vue
Normal file
794
src/views/commandScreen/commandCenter/leftBottom(旧版2).vue
Normal file
@ -0,0 +1,794 @@
|
||||
<template>
|
||||
<div class="leftBottom">
|
||||
<div class="header">
|
||||
<div class="hLeft">安全教育智能分析</div>
|
||||
<div class="hRight"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="contentTop">
|
||||
<div id="echartsEdu" style="width: 100%; height: 100%"></div>
|
||||
<div class="notoDta" v-if="dataList2.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="centerBottom">
|
||||
<div class="leftTop">
|
||||
<div class="header">
|
||||
<div class="hLeft" @click="openDialogData({ index: 8, title: '人员履职情况分析(整改人)' })">人员履职情况分析</div>
|
||||
<div class="hRight">
|
||||
<el-date-picker style="width: 85%" v-model="dateRange" type="daterange"
|
||||
value-format="YYYY-MM-DD" range-separator="至" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期" @change="dateChange" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
||||
<el-tab-pane :label="'整改人'" name="first"></el-tab-pane>
|
||||
<el-tab-pane :label="'检查人'" name="second"></el-tab-pane>
|
||||
<el-tab-pane :label="'按分包单位分析'" name="third"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="tabList">
|
||||
<div>排名</div>
|
||||
<div v-if="activeIndex === '0' || activeIndex === '1'">姓名</div>
|
||||
<div v-if="activeIndex === '2'">分包单位</div>
|
||||
<div v-if="activeIndex === '0' || activeIndex === '2'">整改数量</div>
|
||||
<div v-if="activeIndex === '1'">发起隐患数</div>
|
||||
<div>整改率</div>
|
||||
<div>及时整改率</div>
|
||||
</div>
|
||||
<div class="listBox">
|
||||
<el-scrollbar height="150">
|
||||
<div v-for="(item, index) in tabList" :key="index" class="listStyle">
|
||||
<div>{{ index + 1 }}</div>
|
||||
<div v-if="activeIndex === '0' || activeIndex === '1'">{{ item.workerName }}</div>
|
||||
<div v-if="activeIndex === '2'" :title="item.enterpriseName">{{ item.enterpriseName
|
||||
}}</div>
|
||||
<div v-if="activeIndex === '0' || activeIndex === '2'">{{ item.rectifiedNum }}</div>
|
||||
<div v-if="activeIndex === '1'">{{ item.createDangerNum }}</div>
|
||||
<div>{{ item.rectifiedNumRatio }}</div>
|
||||
<div>{{ item.rectifiedNumRatioTimely }}</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<div class="notoDta" v-if="tabList.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import { selectQualityStatisticsApi } from "@/api/modules/projectOverview";
|
||||
import { getMemberJobStatusApi, getInspectManStatusApi, getEnterpriseStatusApi } from "@/api/modules/agjtCommandApi";
|
||||
import { getPersonTypeAndEduStatisticsApi } from "@/api/modules/labor";
|
||||
import type { TabsPaneContext, ElMessageBox } from "element-plus";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
const emits = defineEmits(["openDialog"]);
|
||||
const activeName = ref("first");
|
||||
const activeIndex = ref("0" as any);
|
||||
const dateRange = ref([]);
|
||||
const tabList = ref([] as any);
|
||||
const inspectTabList = ref([] as any);
|
||||
let listData = ref([
|
||||
{ header: "重大风险", type: 1, content: "正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控" },
|
||||
{ header: "重大风险", type: 1, content: "正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控" },
|
||||
{ header: "重大风险", type: 1, content: "正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控" },
|
||||
{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" },
|
||||
{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" },
|
||||
{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" },
|
||||
{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" },
|
||||
{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" },
|
||||
{ header: "特种作业人员教育", type: 2, content: "1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止" }
|
||||
]);
|
||||
|
||||
let dataList2 = ref([
|
||||
{
|
||||
value: 0,
|
||||
show: true,
|
||||
name: "未教育人员",
|
||||
// 设置文本颜色
|
||||
// textStyle: {
|
||||
// color: '#038cf5'
|
||||
// },
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#038cf5",
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
show: true,
|
||||
name: "完成人员",
|
||||
// 设置文本颜色
|
||||
// textStyle: {
|
||||
// color: '#01d6f4'
|
||||
// }
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#01d6f4",
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
show: true,
|
||||
name: "现场人员",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#03e9f6",
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
]);
|
||||
// 打开弹窗
|
||||
const openDialogData = (obj: any) => {
|
||||
emits("openDialog", obj);
|
||||
};
|
||||
const dateChange = () => {
|
||||
if (activeIndex.value == "0") {
|
||||
getMemberJobStatusFn();
|
||||
} else if (activeIndex.value == "1") {
|
||||
getInspectManStatusFn();
|
||||
} else if (activeIndex.value == "2") {
|
||||
getEnterpriseStatusFn();
|
||||
}
|
||||
}
|
||||
//获取人员数据
|
||||
const getPersonList = async () => {
|
||||
const res: any = await getPersonTypeAndEduStatisticsApi({
|
||||
projectSn: store.sn
|
||||
});
|
||||
if (res.result) {
|
||||
dataList2.value[1].value = res.result.personType.toaltPerson.totalPerson;
|
||||
dataList2.value[2].value = res.result.personType.toaltPerson.totalPerson;
|
||||
console.log("安全教育智能分析666", res);
|
||||
drawEchart2();
|
||||
}
|
||||
};
|
||||
// 获取人员履职情况分析数据--整改人
|
||||
const getMemberJobStatusFn = async () => {
|
||||
let requestData: any = {
|
||||
projectSn: store.sn,
|
||||
pageSize: 5,
|
||||
pageNo: 1
|
||||
};
|
||||
if (dateRange.value && dateRange.value.length > 0) {
|
||||
requestData.inspectTime_begin = dateRange.value[0];
|
||||
requestData.inspectTime_end = dateRange.value[1];
|
||||
}
|
||||
const res: any = await getMemberJobStatusApi(requestData);
|
||||
console.log("人员履职情况res--整改人", res);
|
||||
if (res.result) {
|
||||
tabList.value = res.result.records;
|
||||
} else {
|
||||
tabList.value = [];
|
||||
}
|
||||
};
|
||||
// 获取人员履职情况分析数据--检查人
|
||||
const getInspectManStatusFn = async () => {
|
||||
let requestData: any = {
|
||||
projectSn: store.sn,
|
||||
pageSize: 5,
|
||||
pageNo: 1
|
||||
};
|
||||
if (dateRange.value && dateRange.value.length > 0) {
|
||||
requestData.inspectTime_begin = dateRange.value[0];
|
||||
requestData.inspectTime_end = dateRange.value[1];
|
||||
}
|
||||
const res: any = await getInspectManStatusApi(requestData);
|
||||
console.log("人员履职情况res--检查人", res);
|
||||
if (res.result) {
|
||||
tabList.value = res.result.records;
|
||||
} else {
|
||||
tabList.value = [];
|
||||
}
|
||||
};
|
||||
// 获取人员履职情况分析数据--按分包单位分析
|
||||
const getEnterpriseStatusFn = async () => {
|
||||
let requestData: any = {
|
||||
projectSn: store.sn,
|
||||
pageSize: 5,
|
||||
pageNo: 1
|
||||
};
|
||||
if (dateRange.value && dateRange.value.length > 0) {
|
||||
requestData.inspectTime_begin = dateRange.value[0];
|
||||
requestData.inspectTime_end = dateRange.value[1];
|
||||
}
|
||||
const res: any = await getEnterpriseStatusApi(requestData);
|
||||
console.log("人员履职情况res--按分包单位分析", res);
|
||||
if (res.result) {
|
||||
tabList.value = res.result.records;
|
||||
} else {
|
||||
tabList.value = [];
|
||||
}
|
||||
};
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||||
activeIndex.value = tab.index;
|
||||
console.log(tab);
|
||||
if (tab.index == "0") {
|
||||
getMemberJobStatusFn();
|
||||
} else if (tab.index == "1") {
|
||||
getInspectManStatusFn();
|
||||
} else if (tab.index == "2") {
|
||||
getEnterpriseStatusFn();
|
||||
}
|
||||
console.log("activeIndex", activeIndex.value);
|
||||
};
|
||||
function Pie() {
|
||||
let dataArr = [];
|
||||
for (var i = 0; i < 150; i++) {
|
||||
if (i % 2 === 0) {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#7cf4f1",
|
||||
borderWidth: 0,
|
||||
borderColor: "#7f6546"
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(0,0,0,0)",
|
||||
borderWidth: 0,
|
||||
borderColor: "rgba(0,0,0,0)"
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
return dataArr;
|
||||
}
|
||||
|
||||
function drawEchart2() {
|
||||
let echartsTest = echarts.init(document.getElementById("echartsEdu"));
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
title: {
|
||||
text: "100%",
|
||||
subtext: "入场三级教育\n完成率",
|
||||
x: "24%",
|
||||
y: "center",
|
||||
textAlign: "center",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 26,
|
||||
fontWeight: "normal"
|
||||
// align: "center",
|
||||
// width: "200px",
|
||||
// fontFamily: "sadigitalNumber"
|
||||
},
|
||||
subtextStyle: {
|
||||
color: "#ccc",
|
||||
fontSize: 12,
|
||||
fontWeight: "normal"
|
||||
// align: "center",
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
selectedMode: false, // 取消图例上的点击事件
|
||||
icon: "rect",
|
||||
type: "plain",
|
||||
orient: "vertical",
|
||||
left: "55%",
|
||||
top: "28%",
|
||||
align: "left",
|
||||
itemGap: 30,
|
||||
itemWidth: 8, // 设置宽度
|
||||
itemHeight: 7, // 设置高度
|
||||
symbolKeepAspect: false,
|
||||
textStyle: {
|
||||
// color: "#000",
|
||||
rich: {
|
||||
name: {
|
||||
verticalAlign: "right",
|
||||
align: "left",
|
||||
fontSize: 14,
|
||||
color: "#FFFFFF"
|
||||
},
|
||||
value1: {
|
||||
align: "left",
|
||||
fontSize: 14,
|
||||
color: "#FBDC00",
|
||||
fontFamily: "Source Han Sans CN, Source Han Sans CN",
|
||||
fontWeight: "bold"
|
||||
},
|
||||
value2: {
|
||||
align: "left",
|
||||
fontSize: 14,
|
||||
color: "#0DAF27",
|
||||
fontFamily: "Source Han Sans CN, Source Han Sans CN",
|
||||
fontWeight: "bold"
|
||||
},
|
||||
value3: {
|
||||
align: "left",
|
||||
fontSize: 14,
|
||||
color: "#047EFF",
|
||||
fontFamily: "Source Han Sans CN, Source Han Sans CN",
|
||||
fontWeight: "bold"
|
||||
}
|
||||
}
|
||||
},
|
||||
data: dataList2.value.map(item => {
|
||||
if (item.show) {
|
||||
return item.name;
|
||||
}
|
||||
}),
|
||||
formatter: function (data) {
|
||||
console.log(data, 666777);
|
||||
if (dataList2.value && dataList2.value.length) {
|
||||
for (var i = 0; i < dataList2.value.length; i++) {
|
||||
if (data === dataList2.value[i].name) {
|
||||
var value = dataList2.value[i].value;
|
||||
var percentage = value + "%";
|
||||
console.log(value, 888);
|
||||
if (data == "未教育人员") {
|
||||
return "{name| " + data + "} {gap| }" + "{value1|" + value + " " + "}";
|
||||
} else if (data == "完成人员") {
|
||||
return "{name| " + data + "} {gap| }" + "{value2|" + value + " " + "}";
|
||||
} else if (data == "现场人员") {
|
||||
return "{name| " + data + "} {gap| }" + "{value3|" + value + " " + "}";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
// 外侧光线
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
center: ["25%", "55%"],
|
||||
radius: "90%",
|
||||
startAngle: 235,
|
||||
endAngle: -50,
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: [
|
||||
[
|
||||
100 / 100,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#526277"
|
||||
},
|
||||
{
|
||||
offset: 0.25,
|
||||
color: "rgba(4, 14, 54,0.4)"
|
||||
},
|
||||
{
|
||||
offset: 0.7,
|
||||
color: "rgba(4, 14, 54,0.4)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#526277"
|
||||
}
|
||||
])
|
||||
],
|
||||
[1, "rgba(255,255,255,0)"]
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: 0
|
||||
},
|
||||
axisLabel: {
|
||||
show: 0
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
center: ["25%", "55%"],
|
||||
radius: "80%",
|
||||
startAngle: 245,
|
||||
endAngle: -115,
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: [
|
||||
[
|
||||
200 / 100,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0.8,
|
||||
color: "#52bef0"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "#13356b"
|
||||
}
|
||||
])
|
||||
],
|
||||
[1, "rgba(255,255,255,0)"]
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: 0
|
||||
},
|
||||
axisLabel: {
|
||||
show: 0
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "pie",
|
||||
radius: [65, 75],
|
||||
center: ["25%", "55%"],
|
||||
hoverAnimation: true,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderWidth: 10
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: "center"
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: dataList2.value
|
||||
},
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["57", "60"],
|
||||
center: ["25%", "55%"],
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
|
||||
data: Pie()
|
||||
}
|
||||
]
|
||||
};
|
||||
echartsTest.setOption(option, true);
|
||||
// window.addEventListener("resize", () => {
|
||||
// console.log(666)
|
||||
// echartsTest.resize();
|
||||
// })
|
||||
}
|
||||
onMounted(async () => {
|
||||
getMemberJobStatusFn();
|
||||
getPersonList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.leftBottom {
|
||||
background: url("@/assets/images/commandScreen/card-left-bottom.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
height: 100%;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20px 20px;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid #0059ff;
|
||||
|
||||
// height: 10%;
|
||||
.hLeft {
|
||||
width: 50%;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
background-image: linear-gradient(to bottom left, #c8e3ff, #007aff);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.hRight {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 90%;
|
||||
|
||||
// background-color: #fff;
|
||||
.contentTop {
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.centerBottom {
|
||||
// width: 100%;
|
||||
height: 60%;
|
||||
// background-color: #fff;
|
||||
position: relative;
|
||||
|
||||
.leftTop {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
|
||||
.header {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 20px;
|
||||
border-bottom: 1px solid #0059ff;
|
||||
|
||||
.hLeft {
|
||||
width: 50%;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
background-image: linear-gradient(to bottom left, #c8e3ff, #007aff);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.hRight {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 20px;
|
||||
|
||||
::v-deep .el-tabs__item {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__nav-wrap::after {
|
||||
background-color: rgba(255, 0, 0, 0);
|
||||
}
|
||||
|
||||
.tabList {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
// background: url("@/assets/images/dustNoise/rightBottom.png") no-repeat;
|
||||
background-color: #00224f;
|
||||
background-size: 100% 100%;
|
||||
left: 75.5%;
|
||||
top: 75%;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
justify-content: space-around;
|
||||
text-align: center;
|
||||
|
||||
div {
|
||||
width: 100px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.listBox {
|
||||
|
||||
// height: 10%;
|
||||
.listStyle {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
color: #fff;
|
||||
height: 12%;
|
||||
line-height: 25px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
|
||||
div {
|
||||
width: 100px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.listStyle:hover {
|
||||
background: #003c84;
|
||||
}
|
||||
}
|
||||
|
||||
.notoDta {
|
||||
top: 52%;
|
||||
width: 45%;
|
||||
left: 28%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
|
||||
img {
|
||||
width: 40%;
|
||||
margin: 5% 30%;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
margin: -6% 37%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-select .el-input .el-select__caret {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-input__wrapper {
|
||||
width: 85%;
|
||||
height: 0%;
|
||||
background: #0d2956;
|
||||
}
|
||||
|
||||
::v-deep .el-range-separator {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
::v-deep .el-range-input {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.dialogContainer {
|
||||
padding: 0 50px;
|
||||
|
||||
// height: 600px;
|
||||
::v-deep .el-tabs__item {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__nav-wrap::after {
|
||||
background-color: rgba(255, 0, 0, 0);
|
||||
}
|
||||
|
||||
.tabList {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 14%;
|
||||
background: url("@/assets/images/dustNoise/rightBottom.png") no-repeat;
|
||||
// background-color: #00224f;
|
||||
background-size: 100% 100%;
|
||||
left: 75.5%;
|
||||
top: 75%;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
justify-content: space-around;
|
||||
text-align: center;
|
||||
|
||||
div {
|
||||
width: 100px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.listBox {
|
||||
|
||||
// height: 10%;
|
||||
.listStyle {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
color: #fff;
|
||||
height: 12%;
|
||||
line-height: 25px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
|
||||
div {
|
||||
width: 100px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.listStyle:hover {
|
||||
background: #003c84;
|
||||
}
|
||||
}
|
||||
|
||||
.notoDta {
|
||||
top: 40%;
|
||||
width: 30%;
|
||||
left: 35%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
|
||||
img {
|
||||
width: 40%;
|
||||
margin: 5% 30%;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
margin: -6% 37%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-dialog {
|
||||
background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
|
||||
// background-color: #fff;
|
||||
background-size: 100% 100%;
|
||||
margin-top: 12%;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__headerbtn {
|
||||
right: 35px;
|
||||
top: 25px;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog .el-dialog__header .el-dialog__title {
|
||||
margin-left: 30px;
|
||||
margin-top: 10px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
::v-deep el-dialog__header {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user