This commit is contained in:
unknown 2023-12-14 17:45:00 +08:00
commit f558b2eac3
4 changed files with 206 additions and 85 deletions

60
src/components/tab.vue Normal file
View File

@ -0,0 +1,60 @@
<template>
<div class="data">
<span
v-for="item in list"
:class="value == item ? 'active' : ''"
@click="selectTab(item)"
>{{ item }}</span
>
</div>
</template>
<script>
export default {
props: ["list", "defaultValue"],
data() {
return {
value: "",
};
},
created() {
this.value = this.defaultValue;
},
methods: {
selectTab(item) {
this.value = item;
this.$emit("input", item);
},
},
};
</script>
<style scoped lang="less">
.data {
position: absolute;
font-size: 20px;
font-family: "DOUYU";
color: #ffffff;
line-height: 18px;
display: flex;
right: 0;
top: 120px;
z-index: 1;
span {
width: 122px;
height: 38px;
margin: 10px;
display: block;
line-height: 38px;
text-align: center;
cursor: pointer;
}
.active {
background: linear-gradient(
to right,
rgba(33, 76, 124, 0.3) 20%,
rgba(152, 207, 230, 0.3) 100%,
rgba(33, 76, 124, 0.3) 20%
);
}
}
</style>

View File

@ -63,17 +63,8 @@
<img src="../../assets/img/小标题栏.png" class="img" />
<p>全厂实时电荷</p>
</div>
<div class="data">
<span :class="res == '年' ? 'active' : ''" @click="res = '年'"
></span
>
<span :class="res == '月' ? 'active' : ''" @click="res = '月'"
></span
>
<span :class="res == '日' ? 'active' : ''" @click="res = '日'"
></span
>
</div>
<tab :list="arr" :defaultValue="res" v-model="selectValue"></tab>
<div id="qcssdh"></div>
</div>
<div class="qcydl">
@ -174,12 +165,15 @@
import { RouterView } from "vue-router";
import * as echarts from "echarts";
import tpt from "../../components/tpt.vue";
import tab from "../../components/tab.vue";
export default {
data() {
return {
res: "月",
arr: ["年", "月", "日"],
click1: "",
click2: "",
selectValue: "月",
flag: false,
option1: {
xAxis: {
@ -691,7 +685,7 @@ export default {
this.defineEcharts("ljfdl", this.option3);
},
components: { RouterView, tpt },
components: { RouterView, tpt, tab },
};
</script>
<style lang="less" scoped>
@ -796,36 +790,6 @@ export default {
position: relative;
margin-top: 56px;
.data {
position: absolute;
font-size: 20px;
font-family: "DOUYU";
color: #ffffff;
line-height: 18px;
display: flex;
right: 0;
top: 120px;
z-index: 1;
span {
width: 122px;
height: 38px;
margin: 10px;
display: block;
line-height: 38px;
text-align: center;
}
.active {
background: linear-gradient(
to right,
rgba(33, 76, 124, 0.3) 20%,
rgba(152, 207, 230, 0.3) 100%,
rgba(33, 76, 124, 0.3) 20%
);
}
}
.imgBox {
height: 93px;
width: 1156px;

View File

@ -99,7 +99,7 @@
<el-table-column prop="date2" label="出水压力" align="center"
><template slot-scope="scope">
<span style="color: #58ff70"> {{ scope.row.date2 }}</span
><span>MP</span>
><span>Mpa</span>
</template>
</el-table-column>
<el-table-column prop="date3" label="瞬间流量" align="center"

View File

@ -238,7 +238,7 @@
</el-table-column>
<el-table-column prop="date3" label="巡检区域" align="center">
</el-table-column>
<el-table-column prop="date4" label="巡检周期" align="center">
<el-table-column prop="date4" label="巡检周期(h)" align="center">
<template scope="scope">
<span style="color: #58ff70">{{ scope.row.date4 }}</span>
</template>
@ -321,60 +321,148 @@ export default {
],
plan: [
{
date1: "巡检计划1",
date2: "1号生产线",
date3: "回转窑",
date4: "5",
date5: "2023-10-21",
date6: "张三",
date1: "计划检修",
date2: "定量给料机(2#3512)检修",
date3: "给料机",
date4: "24",
date5: "2023-12-01",
date6: "贾同凯",
},
{
date1: "巡检计划2",
date2: "2号生产线",
date3: "回转窑",
date4: "6",
date5: "2023-10-22",
date6: "李四",
date1: "计划检修",
date2: "单段锤式破碎机 检修",
date3: "破碎机",
date4: "8",
date5: "2023-08-14",
date6: "",
},
{
date1: "巡检计划3",
date2: "3#线空压站",
date3: "一号空压机",
date4: "4",
date5: "2023-10-26",
date6: "王五",
date1: "计划检修",
date2: "1#模式喂料机检修",
date3: "喂料机",
date4: "10",
date5: "2023-05-30",
date6: "",
},
{
date1: "巡检计划4",
date2: "水泥制备",
date1: "计划检修",
date2: "1#带式输送机",
date3: "输送机",
date4: "1",
date5: "2023-04-20",
date6: "江宗林",
},
{
date1: "计划检修",
date2: "1#板式喂料机检修",
date3: "喂料机",
date4: "0",
date5: "2023-02-24",
date6: "邱傲宇",
},
{
date1: "计划检修",
date2: "料饼提升机检修",
date3: "提升机",
date4: "60",
date5: "2022-12-22",
date6: "朱涛",
},
{
date1: "计划检修",
date2: "锅压机检修",
date3: "锅压机",
date4: "20",
date5: "2022-12-22",
date6: "古荣平",
},
{
date1: "计划检修",
date2: "锅压机检修",
date3: "锅压机",
date4: "30",
date5: "2022-12-22",
date6: "古荣平",
},
{
date1: "计划检修",
date2: "水泥磨检修",
date3: "水泥磨",
date4: "5",
date5: "2023-10-23",
date6: "王五",
date4: "130",
date5: "2022-12-22",
date6: "朱涛",
},
{
date1: "巡检计划5",
date2: "矿山开发",
date3: "一号破碎机",
date4: "3",
date5: "2023-10-28",
date6: "李四",
date1: "计划检修",
date2: "水泥磨主减速机检修",
date3: "减速机",
date4: "10",
date5: "2022-12-22",
date6: "古荣平",
},
{
date1: "巡检计划6",
date2: "余热发电站",
date3: "蒸汽轮机",
date4: "6",
date5: "2023-10-29",
date6: "张三",
date1: "计划检修",
date2: "水泥磨检修",
date3: "水泥磨",
date4: "20",
date5: "2022-12-22",
date6: "古荣平",
},
{
date1: "巡检计划7",
date2: "垃圾处理",
date3: "垃圾破碎机",
date4: "5",
date5: "2023-10-30",
date6: "赵六",
date1: "计划检修",
date2: "水泥磨检修",
date3: "水泥磨",
date4: "30",
date5: "2022-12-22",
date6: "钱林堂",
},
{
date1: "内协任务单",
date2: "水泥磨检修",
date3: "水泥磨",
date4: "40",
date5: "2022-12-22",
date6: "",
},
{
date1: "计划检修",
date2: "水泥磨检修",
date3: "水泥磨",
date4: "60",
date5: "2022-12-21",
date6: "钱林堂",
},
{
date1: "内协任务单",
date2: "水泥磨检修",
date3: "水泥磨",
date4: "60",
date5: "2022-12-21",
date6: "",
},
{
date1: "计划检修",
date2: "2#RF5/5000旋风预热器",
date3: "预热器",
date4: "20",
date5: "2022-12-27",
date6: "钱吉亮",
},
{
date1: "计划检修",
date2: "1#回转窑(58.01)检修",
date3: "回转窑",
date4: "4",
date5: "2022-12-18",
date6: "尹茂建",
},
{
date1: "计划检修",
date2: "胶带输送机1#2404检修",
date3: "输送机",
date4: "16",
date5: "2022-12-22",
date6: "",
},
],
selectedRow: null, //
@ -939,6 +1027,15 @@ export default {
.table {
margin-top: 50px;
//table
/deep/ .el-table__body-wrapper {
overflow-y: auto;
height: 500px;
}
//
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
display: none;
}
//
/deep/.el-table tr {