fix:table滚动条和设备分类选择框颜色
This commit is contained in:
parent
4cc204c594
commit
51c79f1d6f
Binary file not shown.
|
|
@ -2,40 +2,82 @@
|
|||
<el-container>
|
||||
<el-main>
|
||||
<div class="boxmain">
|
||||
<div class="wrapper" :id="'scrollWrapper' + refValue" @mouseover="mouseOver" @mouseout="mouseOut">
|
||||
<div
|
||||
class="wrapper"
|
||||
:id="'scrollWrapper' + refValue"
|
||||
@mouseover="mouseOver"
|
||||
@mouseout="mouseOut"
|
||||
>
|
||||
<table class="totall">
|
||||
<tr class="title">
|
||||
<th v-for="itemx in titleData" :key="itemx">{{ itemx }}</th>
|
||||
<th v-for="itemx in titleData" :key="itemx">
|
||||
{{ itemx }}
|
||||
</th>
|
||||
</tr>
|
||||
</table>
|
||||
<div :id="refValue" :ref="`${refValue}`" style="overflow:scroll">
|
||||
<div>
|
||||
<div
|
||||
:id="refValue"
|
||||
:ref="`${refValue}`"
|
||||
class="scrollTableBody"
|
||||
>
|
||||
<div :id="'scrollBody' + refValue">
|
||||
<table :class="{ marquee_top: animate }">
|
||||
<tr v-for="(itemy, index) in rowData" class="rollData" ref="con1" :key="itemy">
|
||||
<tr
|
||||
v-for="(itemy, index) in rowData"
|
||||
class="rollData"
|
||||
ref="con1"
|
||||
:key="itemy"
|
||||
>
|
||||
<td v-if="!noIndex">{{ index + 1 }}</td>
|
||||
<td v-for="itemz in itemy" :key="itemz">
|
||||
<el-progress v-if="itemz.elType == 'progress'" :text-inside="true"
|
||||
:stroke-width="14" :percentage="itemz.value"
|
||||
:status="getStatus(itemz.value)" />
|
||||
<el-tag v-else-if="itemz.elType == 'tag'" :type="getTagType(itemz.value)">{{
|
||||
stateOption[itemz.value] }}</el-tag>
|
||||
<el-progress
|
||||
v-if="itemz.elType == 'progress'"
|
||||
:text-inside="true"
|
||||
:stroke-width="14"
|
||||
:percentage="itemz.value"
|
||||
:status="getStatus(itemz.value)"
|
||||
/>
|
||||
<el-tag
|
||||
v-else-if="itemz.elType == 'tag'"
|
||||
:type="getTagType(itemz.value)"
|
||||
>{{
|
||||
stateOption[itemz.value]
|
||||
}}</el-tag
|
||||
>
|
||||
<span v-else>{{ itemz.value }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table :class="{ marquee_top: animate }" v-show="scrollVivible">
|
||||
<tr v-for="(itemy, index) in rowData" class="rollData" ref="con1" :key="itemy">
|
||||
<table
|
||||
:class="{ marquee_top: animate }"
|
||||
v-show="scrollVivible"
|
||||
>
|
||||
<tr
|
||||
v-for="(itemy, index) in rowData"
|
||||
class="rollData"
|
||||
ref="con1"
|
||||
:key="itemy"
|
||||
>
|
||||
<td v-if="!noIndex">{{ index + 1 }}</td>
|
||||
<td v-for="itemz in itemy" :key="itemz">
|
||||
<!-- <el-progress v-if="itemz.elType=='progress'" :text-inside="true" :stroke-width="14" :percentage="itemz.value"
|
||||
:status="getStatus(itemz.value)"/> -->
|
||||
<el-progress v-if="itemz.elType == 'progress'" :text-inside="true"
|
||||
:stroke-width="16" :percentage="itemz.value"
|
||||
:status="getStatus(itemz.value)">
|
||||
<el-progress
|
||||
v-if="itemz.elType == 'progress'"
|
||||
:text-inside="true"
|
||||
:stroke-width="16"
|
||||
:percentage="itemz.value"
|
||||
:status="getStatus(itemz.value)"
|
||||
>
|
||||
<span>{{ itemz.value }}</span>
|
||||
</el-progress>
|
||||
<el-tag v-else-if="itemz.elType == 'tag'" :type="getTagType(itemz.value)">{{
|
||||
stateOption[itemz.value] }}</el-tag>
|
||||
<el-tag
|
||||
v-else-if="itemz.elType == 'tag'"
|
||||
:type="getTagType(itemz.value)"
|
||||
>{{
|
||||
stateOption[itemz.value]
|
||||
}}</el-tag
|
||||
>
|
||||
<span v-else>{{ itemz.value }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -52,32 +94,32 @@ export default {
|
|||
props: {
|
||||
noIndex: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
rowData: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
return [];
|
||||
},
|
||||
},
|
||||
titleData: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
return [];
|
||||
},
|
||||
},
|
||||
tableHeight: {
|
||||
type: Number,
|
||||
default() {
|
||||
return 100
|
||||
}
|
||||
return 100;
|
||||
},
|
||||
},
|
||||
refValue: {
|
||||
type: String,
|
||||
default() {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
return "";
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -91,29 +133,31 @@ export default {
|
|||
10: "创建中",
|
||||
14: "已分解",
|
||||
20: "已下达",
|
||||
30: '生产中',
|
||||
34: '已停止',
|
||||
40: '已完成',
|
||||
'q10': '完好',
|
||||
'q20': '限用',
|
||||
'q30': '在修',
|
||||
'q40': '禁用',
|
||||
'normal': '正常',
|
||||
'late': '迟到',
|
||||
'未到岗': '未到岗',
|
||||
30: "生产中",
|
||||
34: "已停止",
|
||||
40: "已完成",
|
||||
q10: "完好",
|
||||
q20: "限用",
|
||||
q30: "在修",
|
||||
q40: "禁用",
|
||||
normal: "正常",
|
||||
late: "迟到",
|
||||
未到岗: "未到岗",
|
||||
},
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
let that = this;
|
||||
this.$nextTick(() => {
|
||||
let Container = that.tableHeight;
|
||||
let tableHeight = Container - 40;
|
||||
let idName = 'scrollWrapper' + that.refValue;
|
||||
let idName = "scrollWrapper" + that.refValue;
|
||||
let idName2 = that.refValue;
|
||||
document.getElementById(idName).style.height = Container + 'px';
|
||||
document.getElementById(idName2).style.height = tableHeight + 'px';
|
||||
// console.log(this.$refs[`${this.refValue}`])
|
||||
let scrollHeight = that.$refs[`${that.refValue}`].scrollHeight / 2;
|
||||
document.getElementById(idName).style.height = Container + "px";
|
||||
document.getElementById(idName2).style.height = tableHeight + "px";
|
||||
// let scrollBody = "scrollBody" + this.refValue;
|
||||
let scrollHeight = that.$refs[`${that.refValue}`].clientHeight / 2;
|
||||
console.log("scrollHeight", scrollHeight);
|
||||
if (tableHeight > scrollHeight) {
|
||||
that.scrollVivible = false;
|
||||
} else {
|
||||
|
|
@ -122,35 +166,39 @@ export default {
|
|||
that.scrollUp();
|
||||
}, that.speed);
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
getTagType(type) {
|
||||
if (type == 30 || type == 10 || type == 14 || type == 20) {
|
||||
return ""
|
||||
return "";
|
||||
} else if (type == 40) {
|
||||
return "success"
|
||||
} else if (type == 'normal') {
|
||||
return "success"
|
||||
} else if (type == 'late') {
|
||||
return "warning"
|
||||
} else if (type == '未到岗') {
|
||||
return "danger"
|
||||
return "success";
|
||||
} else if (type == "normal") {
|
||||
return "success";
|
||||
} else if (type == "late") {
|
||||
return "warning";
|
||||
} else if (type == "未到岗") {
|
||||
return "danger";
|
||||
}
|
||||
},
|
||||
getStatus(status) {
|
||||
if (status == 100) {
|
||||
return "success"
|
||||
return "success";
|
||||
} else if (status >= 80) {
|
||||
return "primary"
|
||||
return "primary";
|
||||
} else if (status >= 60) {
|
||||
return "warning"
|
||||
return "warning";
|
||||
} else {
|
||||
return "exception"
|
||||
return "exception";
|
||||
}
|
||||
},
|
||||
|
||||
scrollUp() {
|
||||
if (this.$refs[`${this.refValue}`] && this.$refs[`${this.refValue}`].scrollTop) {
|
||||
if (
|
||||
this.$refs[`${this.refValue}`] &&
|
||||
this.$refs[`${this.refValue}`].scrollTop
|
||||
) {
|
||||
let scrollTop = this.$refs[`${this.refValue}`].scrollTop;
|
||||
let scrollHeight = this.$refs[`${this.refValue}`].scrollHeight;
|
||||
if (scrollTop >= scrollHeight / 2) {
|
||||
|
|
@ -160,7 +208,6 @@ export default {
|
|||
this.$refs[`${this.refValue}`].scrollTop = scrollTop + 40;
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
// 鼠标滑过暂停滚动
|
||||
mouseOver() {
|
||||
|
|
@ -170,8 +217,7 @@ export default {
|
|||
mouseOut() {
|
||||
this.myScroll = setInterval(() => {
|
||||
this.scrollUp();
|
||||
},
|
||||
this.speed);
|
||||
}, this.speed);
|
||||
},
|
||||
},
|
||||
beforeUnmount() {
|
||||
|
|
@ -184,7 +230,7 @@ export default {
|
|||
clearInterval(that.myScroll1);
|
||||
that.myScroll1 = null;
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.boxmain {
|
||||
|
|
@ -214,19 +260,19 @@ table {
|
|||
|
||||
table th {
|
||||
font-size: 14px;
|
||||
background: rgba(0, 0, 0, .1);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
table td {
|
||||
font-size: 14px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, .8);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
table th,
|
||||
table td {
|
||||
padding: .1rem 0;
|
||||
padding: 0.1rem 0;
|
||||
border-bottom: none !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
|
@ -248,4 +294,31 @@ table td {
|
|||
.rollData:nth-of-type(2n + 1) {
|
||||
background-color: rgb(0, 59, 81);
|
||||
}
|
||||
.scrollTableBody {
|
||||
/* overflow: scroll;
|
||||
overflow-x: scroll; */
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.scrollTableBody::-webkit-scrollbar {
|
||||
width: 1px;
|
||||
}
|
||||
/*
|
||||
.scrollTableBody::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(to bottom right, #4d7fff 0%, #1a56ff 100%);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.scrollTableBody::-webkit-scrollbar-track {
|
||||
background-color: #ddd;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.scrollTableBody::-webkit-scrollbar-button {
|
||||
background-color: #4d7fff;
|
||||
border-radius: 5px;
|
||||
} */
|
||||
|
||||
/* .scrollTableBody::-webkit-scrollbar-button:hover {
|
||||
background-color: #999999;
|
||||
} */
|
||||
</style>
|
||||
|
|
@ -446,7 +446,9 @@ export default {
|
|||
viewer.shadows = false;
|
||||
//时间轴暂停，并将时间设置在某个固定时刻
|
||||
viewer.clock.shouldAnimate = false; //时间轴动画停止
|
||||
viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2023-09-01T06:00:00Z");//这个UTC时间对应的北京时间是14时
|
||||
viewer.clock.currentTime = Cesium.JulianDate.fromIso8601(
|
||||
"2023-09-01T06:00:00Z"
|
||||
); //这个UTC时间对应的北京时间是14时
|
||||
|
||||
if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
|
||||
//判断是否支持图像渲染像素化处理
|
||||
|
|
@ -1089,11 +1091,11 @@ export default {
|
|||
.bottomMenu_item > .el-checkbox__input.is-checked > .el-checkbox__inner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #1ca50a;
|
||||
border-color: #1ca50a;
|
||||
background-color: #faed1f;
|
||||
border-color: #faed1f;
|
||||
}
|
||||
.bottomMenu_item > .el-checkbox__input.is-checked + .el-checkbox__label {
|
||||
color: #1ca50a;
|
||||
color: #faed1f;
|
||||
}
|
||||
.bottomMenu_item > .el-checkbox__input.is-checked .el-checkbox__inner::after {
|
||||
height: 11px;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -657,17 +657,17 @@ export default {
|
|||
{ value: 2, name: "新能源" },
|
||||
{ value: 6, name: "其他" },
|
||||
],
|
||||
containerHeight: 100,
|
||||
containerHeight: null,
|
||||
refValue1: "moocBox1",
|
||||
table1Visible: true,
|
||||
table1Visible: false,
|
||||
lineData: [],
|
||||
liData1: ["设备名称", "颗粒物", "SO₂", "NOx"],
|
||||
refValue2: "moocBox2",
|
||||
table2Visible: true,
|
||||
table2Visible: false,
|
||||
lineData2: [],
|
||||
liData2: ["设备名称", "TSP测量值"],
|
||||
refValue3: "moocBox3",
|
||||
table3Visible: true,
|
||||
table3Visible: false,
|
||||
lineData3: [],
|
||||
liData3: ["设备名称", "PM10", "PM2.5"],
|
||||
noIndex: true,
|
||||
|
|
@ -691,6 +691,7 @@ export default {
|
|||
mounted() {
|
||||
let that = this;
|
||||
that.initDomStyle();
|
||||
that.$nextTick(() => {
|
||||
that.getleft1Data();
|
||||
that.getleft2Data();
|
||||
that.getleft3Data();
|
||||
|
|
@ -699,7 +700,6 @@ export default {
|
|||
that.getright3Data();
|
||||
that.initCharts();
|
||||
that.addListener();
|
||||
that.$nextTick(() => {
|
||||
setTimeout(function () {}, 5000);
|
||||
});
|
||||
// that.intervalinfo = setInterval(() => {
|
||||
|
|
@ -936,13 +936,14 @@ export default {
|
|||
}
|
||||
}
|
||||
let containerHeight =
|
||||
document.getElementsByClassName("panel1")[0].clientHeight;
|
||||
debugger;
|
||||
// console.log('containerHeight', containerHeight);
|
||||
document.getElementsByClassName("panel1")[0].clientHeight - 70;
|
||||
that.containerHeight = containerHeight;
|
||||
if (this.engine != null) {
|
||||
this.engine.resize();
|
||||
}
|
||||
this.table1Visible = true;
|
||||
this.table2Visible = true;
|
||||
this.table3Visible = true;
|
||||
},
|
||||
// bindBtnClass(index) {
|
||||
// let classInfo = { btns: true, btnsActive: false };
|
||||
|
|
|
|||
|
|
@ -255,12 +255,17 @@ export default {
|
|||
options: [],
|
||||
optionsShift: [],
|
||||
teamOptions: [],
|
||||
exportLoading: false,
|
||||
limitedExport: false,
|
||||
reportItem: {},
|
||||
sflogexpList: [],
|
||||
timeStamp: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
let that = this;
|
||||
var nowDate = new Date();
|
||||
that.timeStamp = nowDate.getTime();
|
||||
this.$API.mtm.mgroup.list
|
||||
.req({ page: 0, search: "石灰石破碎" })
|
||||
.then((res) => {
|
||||
|
|
@ -289,6 +294,8 @@ export default {
|
|||
this.$refs.table.queryData(this.query);
|
||||
},
|
||||
sflog_export() {
|
||||
let nowDate = new Date();
|
||||
this.timeStamp = nowDate.getTime();
|
||||
this.limitedExport = true;
|
||||
},
|
||||
rowClick(row) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue