|
|
@@ -0,0 +1,287 @@
|
|
|
+<template>
|
|
|
+ <div class="maintenance-supervision" >
|
|
|
+ <div class="maintenance-supervision_header" >
|
|
|
+ <div style="display: flex; ">
|
|
|
+ <el-select v-model="value" placeholder="告警年限">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="value" placeholder="告警类型">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="value" placeholder="处置状态">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-button>搜索</el-button>
|
|
|
+ </div>
|
|
|
+ <div >
|
|
|
+ <div class="row header">
|
|
|
+ <span class="num">序号</span>
|
|
|
+ <span class="time">区域</span>
|
|
|
+ <span class="person">未处理</span>
|
|
|
+ <span class="result">已处理</span>
|
|
|
+ </div>
|
|
|
+ <VueSeamlessScroll :data="list1" :class-option="classOption" class="warp">
|
|
|
+ <ul class="item">
|
|
|
+ <li class="row" v-for="(item, index) in list1" :key="index">
|
|
|
+ <span class="num">{{ index + 1 }}</span>
|
|
|
+ <span class="time">{{ item[0] }}</span>
|
|
|
+ <span class="person">{{ item[1] }}</span>
|
|
|
+ <LinearText
|
|
|
+ class="result"
|
|
|
+ style="display: inline-block"
|
|
|
+ text="676"
|
|
|
+ fontSize="16px"
|
|
|
+
|
|
|
+ ></LinearText
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </VueSeamlessScroll>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <script>
|
|
|
+ import VueSeamlessScroll from "vue-seamless-scroll";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "MaintenanceSupervision",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ search: "",
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ value: '1',
|
|
|
+ label: '1111'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '2',
|
|
|
+ label: '2222'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '3',
|
|
|
+ label: '3333'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ list1: [
|
|
|
+ ["万州区", "1200", "8765"],
|
|
|
+ ["万州区", "1200", "8765"],
|
|
|
+ ["万州区", "1200", "8765"],
|
|
|
+ ["万州区", "1200", "8765"],
|
|
|
+ ["万州区", "1200", "8765"],
|
|
|
+ ["万州区", "1200", "8765"],
|
|
|
+ ["万州区", "1200", "8765"],
|
|
|
+ ["万州区", "1200", "8765"],
|
|
|
+ ["万州区", "1200", "8765"],
|
|
|
+ ["万州区", "1200", "8765"],
|
|
|
+ ],
|
|
|
+ value: "",
|
|
|
+
|
|
|
+ checked: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ VueSeamlessScroll,
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ classOption() {
|
|
|
+ return {
|
|
|
+ singleHeight: 43,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ change(idx) {
|
|
|
+ this.checked = idx;
|
|
|
+ console.log("切换索引", idx);
|
|
|
+ },
|
|
|
+ resultType(text) {
|
|
|
+ return {
|
|
|
+ 合格: "#23f59d",
|
|
|
+ 不合格: "#df575b",
|
|
|
+ 是: "#23f59d",
|
|
|
+ 否: "#df575b",
|
|
|
+ }[text];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <style scoped lang="less">
|
|
|
+ .maintenance-supervision {
|
|
|
+ // padding: 10px 10px 0px 20px;
|
|
|
+ ::v-deep(.el-input__inner) {
|
|
|
+ border: none;
|
|
|
+ background: linear-gradient(360deg, rgba(0,148,255, .5) 0%, rgba(0,148,255, .31) 100%);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ ::v-deep(.el-button) {
|
|
|
+ border: none;
|
|
|
+ background: linear-gradient(360deg, #0094ff90 0%, #0094ff10 100%);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .maintenance-supervision_header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ border-bottom: 1px solid #154956;
|
|
|
+ padding-bottom: 2px;
|
|
|
+ margin: 10px 6px 6px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgb(79, 149, 186);
|
|
|
+ }
|
|
|
+ .warp {
|
|
|
+ height: 520px;
|
|
|
+ margin: 0 auto;
|
|
|
+ overflow: hidden;
|
|
|
+ .item {
|
|
|
+ list-style: none;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0 auto;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .header {
|
|
|
+ color: #fff;
|
|
|
+ height: 33px !important;
|
|
|
+ line-height: 33px !important;
|
|
|
+ background-color: rgba(0, 163, 255, 0.3) !important;
|
|
|
+ color: #61dbff;
|
|
|
+ margin-top: 15px;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row,
|
|
|
+ li,
|
|
|
+ a {
|
|
|
+ display: block;
|
|
|
+ height: 39px;
|
|
|
+ line-height: 39px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 16px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.2);
|
|
|
+ .time,
|
|
|
+ .num,
|
|
|
+ .person,
|
|
|
+ .result {
|
|
|
+ flex: 0.33;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .num {
|
|
|
+ flex: 0.15;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ background-color: #184254;
|
|
|
+ width: 100px;
|
|
|
+ height: 30px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.el-button {
|
|
|
+ width: 120px;
|
|
|
+ height: 32px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 2px;
|
|
|
+ background: #184254;
|
|
|
+ margin: 0 20px 0 30px;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ // /deep/.el-select-dropdown{
|
|
|
+
|
|
|
+ // background-color:#184254 !important;
|
|
|
+ // position: fixed;
|
|
|
+
|
|
|
+ // }
|
|
|
+
|
|
|
+ // /deep/.el-select-dropdown{
|
|
|
+ // border: none;
|
|
|
+ // background-color: #184254 ;
|
|
|
+ // }
|
|
|
+ //输入框
|
|
|
+ // /deep/.el-input__inner{
|
|
|
+ // color:#eee;
|
|
|
+ // border-color: #00fff6;
|
|
|
+ // background-color: rgba(1, 28, 82, 0.8);
|
|
|
+ // }
|
|
|
+ // //聚焦时的样式
|
|
|
+ // /deep/.el-select .el-input.is-focus .el-input__inner{
|
|
|
+ // border-color: #0B61AA;
|
|
|
+ // background-color: rgba(1, 28, 82, 0.8);
|
|
|
+ // color:#00D3E9;
|
|
|
+ // }
|
|
|
+ // //下拉框选中
|
|
|
+ // /deep/.el-select-dropdown__item{
|
|
|
+ // color: #eee;
|
|
|
+ // }
|
|
|
+ // //鼠标经过下拉框
|
|
|
+ // /deep/.el-select-dropdown__item.hover,
|
|
|
+ // /deep/.el-select-dropdown__item:hover{
|
|
|
+ // color:#00D3E9;
|
|
|
+ // background-color: #0F3360;
|
|
|
+ // }
|
|
|
+ </style>
|
|
|
+
|
|
|
+
|
|
|
+ <style>
|
|
|
+
|
|
|
+ .el-select-dropdown.el-popper {
|
|
|
+ background-color: #4167a0;
|
|
|
+ }
|
|
|
+ .el-popper[x-placement^=bottom] .popper__arrow::after {
|
|
|
+ border-bottom-color: #4167a0 !important;
|
|
|
+ }
|
|
|
+ .el-select-dropdown.el-popper {
|
|
|
+ border: 1px solid rgba(0, 213, 255, 0.6) !important;
|
|
|
+ }
|
|
|
+ .el-select-dropdown.el-popper li.el-select-dropdown__item span {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .el-select-dropdown.el-popper
|
|
|
+ li.el-select-dropdown__item.selected
|
|
|
+ span {
|
|
|
+ color: #2f7df2;
|
|
|
+ }
|
|
|
+ .el-select-dropdown.el-popper .el-select-dropdown__item.hover {
|
|
|
+ background-color: #2f7df2;
|
|
|
+ }
|
|
|
+ .el-select-dropdown.el-popper
|
|
|
+ li.el-select-dropdown__item.hover.selected
|
|
|
+ span {
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+ .select_btn {
|
|
|
+margin-left: -10px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+
|
