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.

495
src/components/scScrollTable.vue
View File

@ -1,251 +1,324 @@
<template> <template>
<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
<table class="totall"> class="wrapper"
<tr class="title"> :id="'scrollWrapper' + refValue"
<th v-for="itemx in titleData" :key="itemx">{{ itemx }}</th> @mouseover="mouseOver"
</tr> @mouseout="mouseOut"
</table> >
<div :id="refValue" :ref="`${refValue}`" style="overflow:scroll"> <table class="totall">
<div> <tr class="title">
<table :class="{ marquee_top: animate }"> <th v-for="itemx in titleData" :key="itemx">
<tr v-for="(itemy, index) in rowData" class="rollData" ref="con1" :key="itemy"> {{ itemx }}
<td v-if="!noIndex">{{ index + 1 }}</td> </th>
<td v-for="itemz in itemy" :key="itemz"> </tr>
<el-progress v-if="itemz.elType == 'progress'" :text-inside="true" </table>
:stroke-width="14" :percentage="itemz.value" <div
:status="getStatus(itemz.value)" /> :id="refValue"
<el-tag v-else-if="itemz.elType == 'tag'" :type="getTagType(itemz.value)">{{ :ref="`${refValue}`"
stateOption[itemz.value] }}</el-tag> class="scrollTableBody"
<span v-else>{{ itemz.value }}</span> >
</td> <div :id="'scrollBody' + refValue">
</tr> <table :class="{ marquee_top: animate }">
</table> <tr
<table :class="{ marquee_top: animate }" v-show="scrollVivible"> v-for="(itemy, index) in rowData"
<tr v-for="(itemy, index) in rowData" class="rollData" ref="con1" :key="itemy"> class="rollData"
<td v-if="!noIndex">{{ index + 1 }}</td> ref="con1"
<td v-for="itemz in itemy" :key="itemz"> :key="itemy"
<!-- <el-progress v-if="itemz.elType=='progress'" :text-inside="true" :stroke-width="14" :percentage="itemz.value" >
<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
>
<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"
>
<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)"/> --> :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"
<span>{{ itemz.value }}</span> :stroke-width="16"
</el-progress> :percentage="itemz.value"
<el-tag v-else-if="itemz.elType == 'tag'" :type="getTagType(itemz.value)">{{ :status="getStatus(itemz.value)"
stateOption[itemz.value] }}</el-tag> >
<span v-else>{{ itemz.value }}</span> <span>{{ itemz.value }}</span>
</td> </el-progress>
</tr> <el-tag
</table> v-else-if="itemz.elType == 'tag'"
</div> :type="getTagType(itemz.value)"
</div> >{{
</div> stateOption[itemz.value]
</div> }}</el-tag
</el-main> >
</el-container> <span v-else>{{ itemz.value }}</span>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</el-main>
</el-container>
</template> </template>
<script> <script>
export default { 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 {
speed: 2000, speed: 2000,
myScroll: null, myScroll: null,
iliHeight: 30, iliHeight: 30,
time: null, time: null,
delay: 20, delay: 20,
scrollVivible: true, scrollVivible: true,
stateOption: { stateOption: {
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;
let Container = that.tableHeight; this.$nextTick(() => {
let tableHeight = Container - 40; let Container = that.tableHeight;
let idName = 'scrollWrapper' + that.refValue; let tableHeight = Container - 40;
let idName2 = that.refValue; let idName = "scrollWrapper" + that.refValue;
document.getElementById(idName).style.height = Container + 'px'; let idName2 = that.refValue;
document.getElementById(idName2).style.height = tableHeight + 'px'; document.getElementById(idName).style.height = Container + "px";
// console.log(this.$refs[`${this.refValue}`]) document.getElementById(idName2).style.height = tableHeight + "px";
let scrollHeight = that.$refs[`${that.refValue}`].scrollHeight / 2; // let scrollBody = "scrollBody" + this.refValue;
if (tableHeight > scrollHeight) { let scrollHeight = that.$refs[`${that.refValue}`].clientHeight / 2;
that.scrollVivible = false; console.log("scrollHeight", scrollHeight);
} else { if (tableHeight > scrollHeight) {
that.scrollVivible = true; that.scrollVivible = false;
that.myScroll = setInterval(() => { } else {
that.scrollUp(); that.scrollVivible = true;
}, that.speed); that.myScroll = setInterval(() => {
} that.scrollUp();
}, }, that.speed);
methods: { }
getTagType(type) { });
if (type == 30 || type == 10 || type == 14 || type == 20) { },
return "" methods: {
} else if (type == 40) { getTagType(type) {
return "success" if (type == 30 || type == 10 || type == 14 || type == 20) {
} else if (type == 'normal') { return "";
return "success" } else if (type == 40) {
} else if (type == 'late') { return "success";
return "warning" } else if (type == "normal") {
} else if (type == '未到岗') { return "success";
return "danger" } else if (type == "late") {
} return "warning";
}, } else if (type == "未到岗") {
getStatus(status) { return "danger";
if (status == 100) { }
return "success" },
} else if (status >= 80) { getStatus(status) {
return "primary" if (status == 100) {
} else if (status >= 60) { return "success";
return "warning" } else if (status >= 80) {
} else { return "primary";
return "exception" } else if (status >= 60) {
} return "warning";
}, } else {
return "exception";
}
},
scrollUp() { scrollUp() {
if (this.$refs[`${this.refValue}`] && this.$refs[`${this.refValue}`].scrollTop) { if (
let scrollTop = this.$refs[`${this.refValue}`].scrollTop; this.$refs[`${this.refValue}`] &&
let scrollHeight = this.$refs[`${this.refValue}`].scrollHeight; this.$refs[`${this.refValue}`].scrollTop
if (scrollTop >= scrollHeight / 2) { ) {
//判断条件是否达到临界 let scrollTop = this.$refs[`${this.refValue}`].scrollTop;
this.$refs[`${this.refValue}`].scrollTop = 0; let scrollHeight = this.$refs[`${this.refValue}`].scrollHeight;
} else { if (scrollTop >= scrollHeight / 2) {
this.$refs[`${this.refValue}`].scrollTop = scrollTop + 40; //判断条件是否达到临界
} this.$refs[`${this.refValue}`].scrollTop = 0;
} } else {
this.$refs[`${this.refValue}`].scrollTop = scrollTop + 40;
}, }
// 鼠标滑过暂停滚动 }
mouseOver() { },
clearInterval(this.myScroll); // 鼠标滑过暂停滚动
}, mouseOver() {
//鼠标移开重新滚动 clearInterval(this.myScroll);
mouseOut() { },
this.myScroll = setInterval(() => { //鼠标移开重新滚动
this.scrollUp(); mouseOut() {
}, this.myScroll = setInterval(() => {
this.speed); this.scrollUp();
}, }, this.speed);
}, },
beforeUnmount() { },
let that = this; beforeUnmount() {
clearInterval(that.myScroll1); let that = this;
that.myScroll1 = null; clearInterval(that.myScroll1);
}, that.myScroll1 = null;
beforeDestoryed() { },
let that = this; beforeDestoryed() {
clearInterval(that.myScroll1); let that = this;
that.myScroll1 = null; clearInterval(that.myScroll1);
}, that.myScroll1 = null;
} },
};
</script> </script>
<style scoped> <style scoped>
.boxmain { .boxmain {
height: calc(100% - 40px); height: calc(100% - 40px);
} }
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
.boxmain { .boxmain {
height: 200px; height: 200px;
} }
} }
table { table {
width: 100%; width: 100%;
text-align: center; text-align: center;
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
table-layout: fixed; table-layout: fixed;
width: 100%; width: 100%;
} }
.title { .title {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
text-align: center; text-align: center;
} }
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;
} }
.marquee_top { .marquee_top {
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
margin-top: -26px; margin-top: -26px;
} }
.totall { .totall {
color: #fff; color: #fff;
background-color: rgb(10, 63, 68); background-color: rgb(10, 63, 68);
} }
.rollData { .rollData {
background-color: rgb(10, 39, 50); background-color: rgb(10, 39, 50);
} }
.rollData:nth-of-type(2n+1) { .rollData:nth-of-type(2n + 1) {
background-color: rgb(0, 59, 81); background-color: rgb(0, 59, 81);
} }
</style> .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>

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

@ -438,15 +438,17 @@ export default {
}); });
this.viewer = viewer; this.viewer = viewer;
// 关闭时间对模型明暗的影响 // 关闭时间对模型明暗的影响
// viewer.scene.light = new Cesium.DirectionalLight({ // viewer.scene.light = new Cesium.DirectionalLight({
// direction: new Cesium.Cartesian3(0.354925, -0.890918, -0.283358) // direction: new Cesium.Cartesian3(0.354925, -0.890918, -0.283358)
// }) // })
viewer.scene.light = new Cesium.SunLight(); viewer.scene.light = new Cesium.SunLight();
viewer.scene.globe.enableLighting = true; viewer.scene.globe.enableLighting = true;
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()) {
//判断是否支持图像渲染像素化处理 //判断是否支持图像渲染像素化处理
@ -578,7 +580,7 @@ export default {
getChartTime() { getChartTime() {
let endDate = new Date(); let endDate = new Date();
endDate.setTime(endDate.getTime() - 1000 * 60); endDate.setTime(endDate.getTime() - 1000 * 60);
endDate.setSeconds(0); endDate.setSeconds(0);
let startDate = new Date(); let startDate = new Date();
startDate.setTime(endDate.getTime() - 1000 * 3600 * 6); startDate.setTime(endDate.getTime() - 1000 * 3600 * 6);
startDate.setSeconds(0); startDate.setSeconds(0);
@ -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

33
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,15 +691,15 @@ export default {
mounted() { mounted() {
let that = this; let that = this;
that.initDomStyle(); that.initDomStyle();
that.getleft1Data();
that.getleft2Data();
that.getleft3Data();
that.getright1Data();
that.getright2Data();
that.getright3Data();
that.initCharts();
that.addListener();
that.$nextTick(() => { that.$nextTick(() => {
that.getleft1Data();
that.getleft2Data();
that.getleft3Data();
that.getright1Data();
that.getright2Data();
that.getright3Data();
that.initCharts();
that.addListener();
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 };
@ -1114,7 +1115,7 @@ header {
width: 100%; width: 100%;
text-align: center; text-align: center;
line-height: 6.3vh; line-height: 6.3vh;
font-weight: bold; font-weight: bold;
color: #ffffff; color: #ffffff;
position: absolute; position: absolute;
top: 0; top: 0;

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) {