-
-
暂无数据
+
+
+
+
+
+
+
项目剩余天数
+
{{item}}
+
天
+
+
+
+
+
+
+
+ Top{{i+1}}
+
+
+
+
+
{{item.a}}
+
{{item.b}}%
+
+
+
+
@@ -69,442 +76,114 @@ 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 * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { GlobalStore } from "@/stores";
+import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
const store = GlobalStore();
-const emits = defineEmits(["openDialog"]);
-const activeName = ref("first");
+const activeName = ref("总包出勤情况分析");
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;
+//切换tab
+const handleTab = (val:string) => {
+ activeIndex.value = val
}
+//绘画柱状图
+let testData = ref({
+ xData:['中铝山东','岁的法国','哇哇哇哇','强强强强','古典风格','如果火箭','发给你们','气味让人','请问啊是','法国海军'],
+ yData:[120,11,66,33,53,11,77,51,157,90,],
+ hData:[
+ {a:120,b:100,c:'12%',d:'45%'},{a:120,b:100,c:'12%',d:'45%'},{a:120,b:100,c:'12%',d:'45%'},
+ {a:120,b:100,c:'12%',d:'45%'},{a:120,b:100,c:'12%',d:'45%'},{a:120,b:100,c:'12%',d:'45%'},
+ {a:120,b:100,c:'12%',d:'45%'},{a:120,b:100,c:'12%',d:'45%'},{a:120,b:100,c:'12%',d:'45%'},
+ {a:120,b:100,c:'12%',d:'45%'},
+ ]
+} as any)
+function drawBar() {
+ console.log("---------------------bar--------")
+ type EChartsOption = echarts.EChartsOption;
+ var chartDom = document.getElementById('bar')!;
+ var myChart = echarts.init(chartDom);
+ var option: EChartsOption;
-function drawEchart2() {
- let echartsTest = echarts.init(document.getElementById("echartsEdu"));
- let option = {
+ option = {
+ xAxis: {
+ type: 'category',
+ // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ data: testData.value.xData,
+ axisLabel: {
+ fontSize: 8, // 设置字体大小为12px
+ },
+ axisLine: {
+ lineStyle: {
+ color: 'white' // 设置X轴刻度线的颜色为灰色
+ }
+ },
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ fontSize: 8, // 设置字体大小为12px
+ },
+ axisLine: {
+ lineStyle: {
+ color: 'white' // 设置Y轴刻度线的颜色为灰色
+ }
+ },
+ // show:false
+ },
+ grid: {
+ top: "8%",
+ right: "0",
+ left:"5%",
+ bottom: "12%",
+
+ },
+ series: [{
+ // data: [120, 200, 150, 80, 70, 110, 130],
+ data: testData.value.yData,
+ type: 'bar',
+ itemStyle: {
+ color: '#3398DB' // 设置柱状图颜色为蓝色
+ },
+ emphasis: {
+ itemStyle: {
+ // color: '#8B0000' // 设置鼠标悬浮时的颜色为深红色
+ // color: '#ff6b70' // 设置鼠标悬浮时的颜色为水红色
+ color: '#00008B' // 设置鼠标悬浮时的颜色为深蓝色
+ }
+ }
+ }],
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",
+ borderColor: 'rgba(50,50,50, 0.5)',
+ backgroundColor: 'rgba(50,50,50, 0.5)',
+ textStyle: { color: '#fff',fontSize:'13'},
+ formatter: function(params) {
+ console.log(params)
+ return '
'+params.name+'
' +
+ '
●在册人员：'+params.data+'
' +
+ '
●出勤人员总数：'+params.data+'
' +
+ '
●出勤率：'+params.data+'%
' +
+ '
●出勤率日环比：'+params.data+'%
';
}
- },
- 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();
- // })
+ // window.addEventListener('resize',function(){
+ // myChart.resize()
+ // })
+
+ option && myChart.setOption(option);
}
+
+//进度数据
+let listData = ref([
+ {a:'新地能源工程技术有限公司',b:'54'},{a:'中冶沈勘秦皇岛工程设计研究总院有限公司',b:'23'},{a:'鞍山电力实业有限公司',b:'49'},{a:'鞍钢矿业资源利用（鞍山）有限公司',b:'35'},
+ {a:'上海建工五建集团有限公司',b:'34'},{a:'辽宁普凡建设有限公司',b:'67'},{a:'沈阳隆基电磁科技股份有限公司',b:'56'},{a:'中国科学院过程工程研究所',b:'78'},
+ {a:'宏大爆破工程集团有限责任公司',b:'45'},{a:'鞍钢集团矿业设计研究院有限公司',b:'23'},{a:'辽宁电力能源发展集团监理有限公司鞍山分公司',b:'69'},{a:'辽宁五寰特种材料与智能装备产业技术研究院有限公司',b:'27'},
+ {a:'中铝山东工程技术有限公司',b:'59'},{a:'中国华冶科工集团有限公司',b:'14'},{a:'沈阳岩土工程技术测试开发有限公司',b:'38'},{a:'永明项目管理有限公司',b:'41'},
+] as any)
+
onMounted(async () => {
- getMemberJobStatusFn();
- getPersonList();
+ drawBar()
});
@@ -517,13 +196,11 @@ onMounted(async () => {
.header {
display: flex;
justify-content: space-between;
- padding: 20px 20px;
+ padding: 10px 20px;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #0059ff;
-
- // height: 10%;
.hLeft {
width: 50%;
font-size: 20px;
@@ -533,37 +210,85 @@ onMounted(async () => {
background-clip: text;
color: transparent;
}
-
- .hRight {
- width: 50%;
- }
}
.content {
- height: 90%;
-
- // background-color: #fff;
+ // background-color: darkred;
+ height: 92.5%;
.contentTop {
+ padding: 0 10px;
height: 40%;
+ // background-color: #fff;
+ font-size: 13px;
+ .line1{
+ color: #fff;
+ padding-top: 5px;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ line-height: 30px;
+ height: 30px;
+ font-size: 15px;
+ .numberCard{
+ font-size: 15px;
+ padding: 0 8px;
+ margin-left: 3px;
+ font-weight: bold;
+ color: #47bcec;
+ background: url("@/assets/images/commandScreen/number-bg.png") no-repeat;
+ background-size: 100% 100%;
+ }
+ .dayRadio{
+ font-size: 15px;
+ margin-left: 15px;
+ font-weight: bold;
+ color: #47bcec;
+ }
+ .iconCenter{
+ display:flex;
+ justify-content:center;
+ align-items:center
+ }
+ }
+ .line2{
+ padding-top: 5px;
+ display:flex;
+ justify-content:flex-start;
+ align-items:center;
+ line-height:25px;
+ height: 25px;
+ .line2Item{
+ color: #fff;
+ width: 120px;
+ text-align: center;
+ cursor: pointer;
+ // background-color: #fff;
+ background: rgb(0,33,116);
+ background: linear-gradient(270deg, rgba(0,33,116,0.8) 0%, rgba(40,88,184,0.3) 96%);
+ }
+ .activeTab{
+ background: rgb(0,33,116);
+ background: linear-gradient(270deg, rgba(0,33,116,1) 0%, rgba(40,88,184,1) 96%);
+ }
+ }
+ .barContent{
+ height: calc(100% - 65px);
+ }
}
.centerBottom {
- // width: 100%;
height: 60%;
- // background-color: #fff;
position: relative;
- .leftTop {
+ .cbTop {
width: 100%;
- height: 35%;
+ height: 100%;
.header {
- // width: 100%;
- // height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
- padding: 20px 20px;
+ // padding: 20px 20px;
border-bottom: 1px solid #0059ff;
.hLeft {
@@ -575,220 +300,210 @@ onMounted(async () => {
background-clip: text;
color: transparent;
}
-
- .hRight {
- width: 50%;
- }
}
.content {
- padding: 0 20px;
-
- ::v-deep .el-tabs__item {
+ padding: 0 10px;
+ height: 90%;
+ // background-color: rgba($color: #fff, $alpha: 0.1);
+ .cbLine1{
color: #fff;
- }
-
- ::v-deep .el-tabs__nav-wrap::after {
- background-color: rgba(255, 0, 0, 0);
- }
-
- .tabList {
+ padding-top: 5px;
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;
+ justify-content: space-between;
+ align-items: center;
line-height: 30px;
- justify-content: space-around;
- text-align: center;
-
- div {
- width: 100px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
+ height: 30px;
+ font-size: 15px;
+ .numberCard{
+ font-size: 15px;
+ padding: 0 8px;
+ margin-left: 3px;
+ font-weight: bold;
+ color: #47bcec;
+ background: url("@/assets/images/commandScreen/number-bg.png") no-repeat;
+ background-size: 100% 100%;
}
}
-
- .listBox {
-
- // height: 10%;
- .listStyle {
+ .cbProcess{
+ padding-top: 5px;
+ height: calc(100% - 55px);
+ overflow: hidden;
+ // background-color: #fff;
+ .pItem{
+ width: 100%;
+ height: 55px;
display: flex;
- justify-content: space-around;
+ // background-color: #fff;
+ font-size: 13px;
color: #fff;
- height: 12%;
- line-height: 25px;
- font-size: 12px;
- text-align: center;
-
- div {
- width: 100px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
+ .pLeft{
+ width: 20%;
+ height: 55px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ .plInner{
+ width: 80px;
+ // text-align: center;
+ line-height: 30px;
+ // background-color: darkred;
+ border-radius: 100px;
+ }
+
+ }
+ .pRight{
+ width: 80%;
+ height: 55px;
+ .prTop{
+ // background-color: darkblue;
+ display: flex;
+ justify-content: space-between;
+ height: 30px;
+ .prtLeft{
+ display: flex;
+ justify-content: center;
+ align-items: flex-end;
+ }
+ .prtRight{
+ display: flex;
+ justify-content: center;
+ align-items: flex-end;
+ }
+ }
+ .prBottom{
+ // background-color: purple;
+ height: 15px;
+ .processLineBg{
+ background-color: rgba(50,50,50,0.5);
+ // transform: scaleX(-1);
+ .processLine{
+ margin-top: 10px;
+ // padding-top: 10px;
+ height: 5px;
+ display: flex;
+ justify-content: flex-end;
+ .processLineBtn{
+ width:3px;
+ height:9px;
+ background:#fff;
+ transform: translateY(-2px);
+ }
+ }
+ // .plBgc1{
+ // background: rgb(150,0,0);
+ // background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(150,0,0,1) 100%);
+ // }
+ }
+ }
}
}
-
- .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;
- }
}
}
}
+.scroll {
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+}
+.plBgc1{
+ background: rgb(139,0,0);
+ background: linear-gradient(90deg, rgba(139,0,0,1) 35%, rgba(0,0,0,0.5) 100%);
+}
+.plBtnBgc1{
+ background: rgb(139,0,0);
+ background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(139,0,0,1) 100%);
+}
+.plBgc2{
+ background: rgb(155,155,0);
+ background: linear-gradient(90deg, rgba(155,155,0,1) 35%, rgba(0,0,0,0.5) 100%);
+}
+.plBtnBgc2{
+ background: rgb(155,155,0);
+ background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(155,0,0,1) 100%);
+}
+.plBgc3{
+ background: rgb(0,0,139);
+ background: linear-gradient(90deg, rgba(0,0,139,1) 35%, rgba(0,0,0,0.5) 100%);
+}
+.plBtnBgc3{
+ background: rgb(0,0,139);
+ background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(0,0,139,1) 100%);
+}
+.plBgc4{
+ background: rgb(139,0,139);
+ background: linear-gradient(90deg, rgba(139,0,139,1) 35%, rgba(0,0,0,0.5) 100%);
+}
+.plBtnBgc4{
+ background: rgb(139,0,139);
+ background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(139,0,139,1) 100%);
+}
+.plBgc5{
+ background: rgb(72,61,139);
+ background: linear-gradient(90deg, rgba(72,61,139,1) 35%, rgba(0,0,0,0.5) 100%);
+}
+.plBtnBgc5{
+ background: rgb(72,61,139);
+ background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(72,61,139,1) 100%);
+}
+.plBgc6{
+ background: rgb(0,206,209);
+ background: linear-gradient(90deg, rgba(0,206,209,1) 35%, rgba(0,0,0,0.5) 100%);
+}
+.plBtnBgc6{
+ background: rgb(0,206,209);
+ background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(0,206,209,1) 100%);
+}
+.plBgc7{
+ background: rgb(47,79,79);
+ background: linear-gradient(90deg, rgba(47,79,79,1) 35%, rgba(0,0,0,0.5) 100%);
+}
+.plBtnBgc7{
+ background: rgb(47,79,79);
+ background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(47,79,79,1) 100%);
+}
+.plBgc8{
+ background: rgb(0,100,0);
+ background: linear-gradient(90deg, rgba(0,100,0,1) 35%, rgba(0,0,0,0.5) 100%);
+}
+.plBtnBgc8{
+ background: rgb(0,100,0);
+ background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(0,100,0,1) 100%);
+}
+.plBgc9{
+ background: rgb(189,183,107);
+ background: linear-gradient(90deg, rgba(189,183,107,1) 35%, rgba(0,0,0,0.5) 100%);
+}
+.plBtnBgc9{
+ background: rgb(189,183,107);
+ background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(189,183,107,1) 100%);
+}
+.plBgc10{
+ background: rgb(255,140,0);
+ background: linear-gradient(90deg, rgba(255,140,0,1) 35%, rgba(0,0,0,0.5) 100%);
+}
+.plBtnBgc10{
+ background: rgb(255,140,0);
+ background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(255,140,0,1) 100%);
+}
+.plBgc11{
+ background: rgb(233,150,122);
+ background: linear-gradient(90deg, rgba(233,150,122,1) 35%, rgba(0,0,0,0.5) 100%);
+}
+.plBtnBgc11{
+ background: rgb(233,150,122);
+ background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(233,150,122,1) 100%);
+}
+.plBgc0{
+ background: rgb(0,139,139);
+ background: linear-gradient(90deg, rgba(0,139,139,1) 35%, rgba(0,0,0,0.5) 100%);
+}
+.plBtnBgc0{
+ background: rgb(0,139,139);
+ background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(0,139,139,1) 100%);
+}
+