zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix:table滚动条和设备分类选择框颜色

This commit is contained in:
shijing 2024-04-23 16:05:25 +08:00
parent 4cc204c594
commit 51c79f1d6f
6 changed files with 1456 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/ly.glb Normal file
View File

Binary file not shown.

199
src/components/scScrollTable.vue
View File

@ -2,40 +2,82 @@
<el-container> <el-container>
<el-main> <el-main>
<div class="boxmain"> <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"> <table class="totall">
<tr class="title"> <tr class="title">
<th v-for="itemx in titleData" :key="itemx">{{ itemx }}</th> <th v-for="itemx in titleData" :key="itemx">
{{ itemx }}
</th>
</tr> </tr>
</table> </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 }"> <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-if="!noIndex">{{ index + 1 }}</td>
<td v-for="itemz in itemy" :key="itemz"> <td v-for="itemz in itemy" :key="itemz">
<el-progress v-if="itemz.elType == 'progress'" :text-inside="true" <el-progress
:stroke-width="14" :percentage="itemz.value" v-if="itemz.elType == 'progress'"
:status="getStatus(itemz.value)" /> :text-inside="true"
<el-tag v-else-if="itemz.elType == 'tag'" :type="getTagType(itemz.value)">{{ :stroke-width="14"
stateOption[itemz.value] }}</el-tag> :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> <span v-else>{{ itemz.value }}</span>
</td> </td>
</tr> </tr>
</table> </table>
<table :class="{ marquee_top: animate }" v-show="scrollVivible"> <table
<tr v-for="(itemy, index) in rowData" class="rollData" ref="con1" :key="itemy"> :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-if="!noIndex">{{ index + 1 }}</td>
<td v-for="itemz in itemy" :key="itemz"> <td v-for="itemz in itemy" :key="itemz">
<!-- <el-progress v-if="itemz.elType=='progress'" :text-inside="true" :stroke-width="14" :percentage="itemz.value" <!-- <el-progress v-if="itemz.elType=='progress'" :text-inside="true" :stroke-width="14" :percentage="itemz.value"
:status="getStatus(itemz.value)"/> --> :status="getStatus(itemz.value)"/> -->
<el-progress v-if="itemz.elType == 'progress'" :text-inside="true" <el-progress
:stroke-width="16" :percentage="itemz.value" v-if="itemz.elType == 'progress'"
:status="getStatus(itemz.value)"> :text-inside="true"
:stroke-width="16"
:percentage="itemz.value"
:status="getStatus(itemz.value)"
>
<span>{{ itemz.value }}</span> <span>{{ itemz.value }}</span>
</el-progress> </el-progress>
<el-tag v-else-if="itemz.elType == 'tag'" :type="getTagType(itemz.value)">{{ <el-tag
stateOption[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> <span v-else>{{ itemz.value }}</span>
</td> </td>
</tr> </tr>
@ -52,32 +94,32 @@ export default {
props: { props: {
noIndex: { noIndex: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
rowData: { rowData: {
type: Array, type: Array,
default() { default() {
return [] return [];
} },
}, },
titleData: { titleData: {
type: Array, type: Array,
default() { default() {
return [] return [];
} },
}, },
tableHeight: { tableHeight: {
type: Number, type: Number,
default() { default() {
return 100 return 100;
} },
}, },
refValue: { refValue: {
type: String, type: String,
default() { default() {
return '' return "";
} },
} },
}, },
data() { data() {
return { return {
@ -91,29 +133,31 @@ export default {
10: "创建中", 10: "创建中",
14: "已分解", 14: "已分解",
20: "已下达", 20: "已下达",
30: '生产中', 30: "生产中",
34: '已停止', 34: "已停止",
40: '已完成', 40: "已完成",
'q10': '完好', q10: "完好",
'q20': '限用', q20: "限用",
'q30': '在修', q30: "在修",
'q40': '禁用', q40: "禁用",
'normal': '正常', normal: "正常",
'late': '迟到', late: "迟到",
'未到岗': '未到岗', 未到岗: "未到岗",
}, },
} };
}, },
mounted() { mounted() {
let that = this; let that = this;
this.$nextTick(() => {
let Container = that.tableHeight; let Container = that.tableHeight;
let tableHeight = Container - 40; let tableHeight = Container - 40;
let idName = 'scrollWrapper' + that.refValue; let idName = "scrollWrapper" + that.refValue;
let idName2 = that.refValue; let idName2 = that.refValue;
document.getElementById(idName).style.height = Container + 'px'; document.getElementById(idName).style.height = Container + "px";
document.getElementById(idName2).style.height = tableHeight + 'px'; document.getElementById(idName2).style.height = tableHeight + "px";
// console.log(this.$refs[`${this.refValue}`]) // let scrollBody = "scrollBody" + this.refValue;
let scrollHeight = that.$refs[`${that.refValue}`].scrollHeight / 2; let scrollHeight = that.$refs[`${that.refValue}`].clientHeight / 2;
console.log("scrollHeight", scrollHeight);
if (tableHeight > scrollHeight) { if (tableHeight > scrollHeight) {
that.scrollVivible = false; that.scrollVivible = false;
} else { } else {
@ -122,35 +166,39 @@ export default {
that.scrollUp(); that.scrollUp();
}, that.speed); }, that.speed);
} }
});
}, },
methods: { methods: {
getTagType(type) { getTagType(type) {
if (type == 30 || type == 10 || type == 14 || type == 20) { if (type == 30 || type == 10 || type == 14 || type == 20) {
return "" return "";
} else if (type == 40) { } else if (type == 40) {
return "success" return "success";
} else if (type == 'normal') { } else if (type == "normal") {
return "success" return "success";
} else if (type == 'late') { } else if (type == "late") {
return "warning" return "warning";
} else if (type == '未到岗') { } else if (type == "未到岗") {
return "danger" return "danger";
} }
}, },
getStatus(status) { getStatus(status) {
if (status == 100) { if (status == 100) {
return "success" return "success";
} else if (status >= 80) { } else if (status >= 80) {
return "primary" return "primary";
} else if (status >= 60) { } else if (status >= 60) {
return "warning" return "warning";
} else { } else {
return "exception" return "exception";
} }
}, },
scrollUp() { 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 scrollTop = this.$refs[`${this.refValue}`].scrollTop;
let scrollHeight = this.$refs[`${this.refValue}`].scrollHeight; let scrollHeight = this.$refs[`${this.refValue}`].scrollHeight;
if (scrollTop >= scrollHeight / 2) { if (scrollTop >= scrollHeight / 2) {
@ -160,7 +208,6 @@ export default {
this.$refs[`${this.refValue}`].scrollTop = scrollTop + 40; this.$refs[`${this.refValue}`].scrollTop = scrollTop + 40;
} }
} }
}, },
// 鼠标滑过暂停滚动 // 鼠标滑过暂停滚动
mouseOver() { mouseOver() {
@ -170,8 +217,7 @@ export default {
mouseOut() { mouseOut() {
this.myScroll = setInterval(() => { this.myScroll = setInterval(() => {
this.scrollUp(); this.scrollUp();
}, }, this.speed);
this.speed);
}, },
}, },
beforeUnmount() { beforeUnmount() {
@ -184,7 +230,7 @@ export default {
clearInterval(that.myScroll1); clearInterval(that.myScroll1);
that.myScroll1 = null; that.myScroll1 = null;
}, },
} };
</script> </script>
<style scoped> <style scoped>
.boxmain { .boxmain {
@ -214,19 +260,19 @@ table {
table th { table th {
font-size: 14px; font-size: 14px;
background: rgba(0, 0, 0, .1); background: rgba(0, 0, 0, 0.1);
} }
table td { table td {
font-size: 14px; font-size: 14px;
height: 40px; height: 40px;
text-align: center; text-align: center;
color: rgba(255, 255, 255, .8); color: rgba(255, 255, 255, 0.8);
} }
table th, table th,
table td { table td {
padding: .1rem 0; padding: 0.1rem 0;
border-bottom: none !important; border-bottom: none !important;
background: none !important; background: none !important;
} }
@ -248,4 +294,31 @@ table td {
.rollData:nth-of-type(2n + 1) { .rollData:nth-of-type(2n + 1) {
background-color: rgb(0, 59, 81); 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> </style>

10
src/views/bigScreen/cesiumtest.vue
View File

@ -446,7 +446,9 @@ export default {
viewer.shadows = false; viewer.shadows = false;
//时间轴暂停，并将时间设置在某个固定时刻 //时间轴暂停，并将时间设置在某个固定时刻
viewer.clock.shouldAnimate = 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()) { if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
//判断是否支持图像渲染像素化处理 //判断是否支持图像渲染像素化处理
@ -1089,11 +1091,11 @@ export default {
.bottomMenu_item > .el-checkbox__input.is-checked > .el-checkbox__inner { .bottomMenu_item > .el-checkbox__input.is-checked > .el-checkbox__inner {
width: 20px; width: 20px;
height: 20px; height: 20px;
background-color: #1ca50a; background-color: #faed1f;
border-color: #1ca50a; border-color: #faed1f;
} }
.bottomMenu_item > .el-checkbox__input.is-checked + .el-checkbox__label { .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 { .bottomMenu_item > .el-checkbox__input.is-checked .el-checkbox__inner::after {
height: 11px; height: 11px;

1137
src/views/bigScreen/cesiumtest_ly.vue Normal file
View File

File diff suppressed because it is too large Load Diff

17
src/views/bigScreen/index_enp_blue.vue
View File

@ -657,17 +657,17 @@ export default {
{ value: 2, name: "新能源" }, { value: 2, name: "新能源" },
{ value: 6, name: "其他" }, { value: 6, name: "其他" },
], ],
containerHeight: 100, containerHeight: null,
refValue1: "moocBox1", refValue1: "moocBox1",
table1Visible: true, table1Visible: false,
lineData: [], lineData: [],
liData1: ["设备名称", "颗粒物", "SO₂", "NOx"], liData1: ["设备名称", "颗粒物", "SO₂", "NOx"],
refValue2: "moocBox2", refValue2: "moocBox2",
table2Visible: true, table2Visible: false,
lineData2: [], lineData2: [],
liData2: ["设备名称", "TSP测量值"], liData2: ["设备名称", "TSP测量值"],
refValue3: "moocBox3", refValue3: "moocBox3",
table3Visible: true, table3Visible: false,
lineData3: [], lineData3: [],
liData3: ["设备名称", "PM10", "PM2.5"], liData3: ["设备名称", "PM10", "PM2.5"],
noIndex: true, noIndex: true,
@ -691,6 +691,7 @@ export default {
mounted() { mounted() {
let that = this; let that = this;
that.initDomStyle(); that.initDomStyle();
that.$nextTick(() => {
that.getleft1Data(); that.getleft1Data();
that.getleft2Data(); that.getleft2Data();
that.getleft3Data(); that.getleft3Data();
@ -699,7 +700,6 @@ export default {
that.getright3Data(); that.getright3Data();
that.initCharts(); that.initCharts();
that.addListener(); that.addListener();
that.$nextTick(() => {
setTimeout(function () {}, 5000); setTimeout(function () {}, 5000);
}); });
// that.intervalinfo = setInterval(() => { // that.intervalinfo = setInterval(() => {
@ -936,13 +936,14 @@ export default {
} }
} }
let containerHeight = let containerHeight =
document.getElementsByClassName("panel1")[0].clientHeight; document.getElementsByClassName("panel1")[0].clientHeight - 70;
debugger;
// console.log('containerHeight', containerHeight);
that.containerHeight = containerHeight; that.containerHeight = containerHeight;
if (this.engine != null) { if (this.engine != null) {
this.engine.resize(); this.engine.resize();
} }
this.table1Visible = true;
this.table2Visible = true;
this.table3Visible = true;
}, },
// bindBtnClass(index) { // bindBtnClass(index) {
// let classInfo = { btns: true, btnsActive: false }; // let classInfo = { btns: true, btnsActive: false };

7
src/views/enm_limestone/handoverLog.vue
View File

@ -255,12 +255,17 @@ export default {
options: [], options: [],
optionsShift: [], optionsShift: [],
teamOptions: [], teamOptions: [],
exportLoading: false,
limitedExport: false, limitedExport: false,
reportItem: {}, reportItem: {},
sflogexpList: [], sflogexpList: [],
timeStamp: null,
}; };
}, },
mounted() { mounted() {
let that = this;
var nowDate = new Date();
that.timeStamp = nowDate.getTime();
this.$API.mtm.mgroup.list this.$API.mtm.mgroup.list
.req({ page: 0, search: "石灰石破碎" }) .req({ page: 0, search: "石灰石破碎" })
.then((res) => { .then((res) => {
@ -289,6 +294,8 @@ export default {
this.$refs.table.queryData(this.query); this.$refs.table.queryData(this.query);
}, },
sflog_export() { sflog_export() {
let nowDate = new Date();
this.timeStamp = nowDate.getTime();
this.limitedExport = true; this.limitedExport = true;
}, },
rowClick(row) { rowClick(row) {