Skip to content

G
gassafety-progress
Commit 19291222 authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

快完成了

parent 05557e3e
Show whitespace changes
Inline Side-by-side
Showing with 548 additions and 33 deletions
gassafetyprogress-web/src/assets/styles/all.scss
View file @ 19291222
......@@ -574,6 +574,7 @@
}
}
}
.zzz {
overflow: hidden;
text-overflow: ellipsis;
......@@ -582,6 +583,10 @@
// 滚动条公共样式
.scrollStyle {
.el-table::before {
height: 0px !important;
}
&::-webkit-scrollbar {
width: 10px;
background: rgba(6, 29, 51, 0.8);
......@@ -614,6 +619,23 @@
// overflow-y: none !important;
}
}
// 巡检巡查table样式修改
.map-bottom-wrapper {
.el-table__header {
tr th {
background-color: rgba(24, 144, 255, 0.1);
&.gutter {
display: none;
}
}
}
.el-table__row {
td {
padding: 0 !important;
}
}
}
// map里的label
.amap-info {
position: fixed !important;
......
gassafetyprogress-web/src/utils/mapClass/xjxcmap.js 0 → 100644
View file @ 19291222
/*
* @Author: your name
* @Date: 2022-04-13 09:42:29
* @LastEditTime: 2022-04-13 10:03:22
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/utils/mapClass/xjxjmap.js
*/
import {EditorMap} from "./map"
export class XjxcMap extends EditorMap {
constructor(contaienr, config = {}, vue){
super(contaienr, config = {}, vue)
}
}
gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/MapBottom.vue 0 → 100644
View file @ 19291222
<!--
* @Author: your name
* @Date: 2022-04-13 10:27:33
* @LastEditTime: 2022-04-13 18:14:27
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/Bottom.vue
-->
<template>
<div class="map-bottom-wrapper">
<div id="xjxcmap" class="map"></div>
<div class="left-box all-flex-h">
<div class="top">
<div class="title">巡检任务查看</div>
<div class="wrapper">
<div class="top-wrapper flex">
<div class="input-wrapper">
<el-input
v-model="searchData.task"
placeholder="点击输入任务名称"
suffix-icon="el-icon-search"
size="mini"
>
</el-input>
</div>
<div class="enter">
<el-button size="mini" @click="enter"
><span class="text">确认</span></el-button
>
</div>
<div class="reset">
<el-button size="mini" @click="reset">
<span class="text">重置</span>
<i class="el-icon-refresh el-icon--right"></i>
</el-button>
</div>
</div>
<div class="middle-wrapper flex">
<div class="left">
<el-select
v-model="searchData.unt"
placeholder="执行单位"
size="mini"
>
<el-option
size="mini"
v-for="item in unt"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="middle">
<el-select
v-model="searchData.type"
placeholder="任务类型"
size="mini"
>
<el-option
v-for="item in type"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="right">
<el-select
v-model="searchData.state"
placeholder="任务状态"
size="mini"
>
<el-option
v-for="item in state"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</div>
<div class="bottom-wrapper">
<el-date-picker
v-model="searchData.value"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']"
size="mini"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</div>
</div>
</div>
<div class="bottom all-flex-h">
<div ref="table" class="table">
<el-table
v-loading="loading"
:data="
tableData.filter((item, index) => {
return index >= (page - 1) * limit && index < page * limit;
})
"
style="width: 100%"
:height="tableScrollH"
ref="t"
class="t"
>
<el-table-column fixed prop="name" label="任务名称" width="90">
<template v-slot="scope">
<div :title="scope.row.name" class="zzz">
{{ scope.row.name }}
</div>
</template>
</el-table-column>
<el-table-column prop="unt" label="执行单位" width="90">
<template v-slot="scope">
<div :title="scope.row.unt" class="zzz">
{{ scope.row.unt }}
</div>
</template>
</el-table-column>
<el-table-column prop="type" label="任务类型" width="90">
<template v-slot="scope">
<div :title="scope.row.type" class="zzz">
{{ scope.row.type }}
</div>
</template>
</el-table-column>
<el-table-column prop="state" label="任务状态" width="90">
<template v-slot="scope">
<div :title="scope.row.state" class="zzz">
{{ scope.row.state }}
</div>
</template>
</el-table-column>
<el-table-column prop="handle" label="操作" width="90">
<template v-slot="scope">
<el-button @click="mapDo(scope.row.id)" type="text"
>巡检信息</el-button
>
</template>
</el-table-column>
</el-table>
</div>
<div class="page">
<pagination
style="width: 100%; padding: 0px !important"
:small="true"
:total="tableData.length"
:page="page"
:limit.sync="limit"
@pagination="getList"
layout="prev, pager, next, jumper"
/>
</div>
</div>
</div>
</div>
</template>
<script>
import { XjxcMap } from "@/utils/mapClass/xjxcmap";
export default {
data() {
return {
map: null,
loading: false,
// 任务类型选项
unt: [
{ value: 1, label: "a" },
{ value: 2, label: "b" },
{ value: 3, label: "c" },
{ value: 4, label: "d" },
],
type: [
{ value: 1, label: "a" },
{ value: 2, label: "b" },
{ value: 3, label: "c" },
{ value: 4, label: "d" },
],
state: [
{ value: 1, label: "a" },
{ value: 2, label: "b" },
{ value: 3, label: "c" },
{ value: 4, label: "d" },
],
searchData: {
// 任务名称
task: "",
unt: "",
type: "",
state: "",
value: "",
},
tableScrollH: 100,
tableData: [
{
name: "忠诚燃最最最最最做做气",
unt: "燃气公司",
type: "巡检",
state: "正在执行",
id: 1,
},
{
name: "忠诚燃气",
unt: "燃气公司",
type: "巡检",
state: "正在执行",
id: 2,
},
{
name: "忠诚燃气",
unt: "燃气公司",
type: "巡检",
state: "正在执行",
id: 3,
},
{
name: "忠诚燃气",
unt: "燃气公司",
type: "巡检",
state: "正在执行",
id: 4,
},
{
name: "忠诚燃气",
unt: "燃气公司",
type: "巡检",
state: "正在执行",
id: 5,
},
{
name: "忠诚燃气",
unt: "燃气公司",
type: "巡检",
state: "正在执行",
id: 6,
},
{
name: "忠诚燃气",
unt: "燃气公司",
type: "巡检",
state: "正在执行",
id: 7,
},
{
name: "忠诚燃气",
unt: "燃气公司",
type: "巡检",
state: "正在执行",
id: 8,
},
{
name: "忠诚燃气",
unt: "燃气公司",
type: "巡检",
state: "正在执行",
id: 9,
},
{
name: "忠诚燃气",
unt: "燃气公司",
type: "巡检",
state: "正在执行",
id: 9,
},
{
name: "忠诚燃气",
unt: "燃气公司",
type: "巡检",
state: "正在执行",
id: 9,
},
{
name: "忠诚燃气",
unt: "燃气公司",
type: "巡检",
state: "正在执行",
id: 9,
},
{
name: "忠诚燃气",
unt: "燃气公司",
type: "巡检",
state: "正在执行",
id: 9,
},
],
page: 1,
limit: 10,
};
},
mounted() {
this.mapInit();
this.$nextTick(() => {
const dom = document.getElementsByClassName("t")[0];
dom.style.height = this.$refs.table.getBoundingClientRect().height + "px";
});
},
methods: {
mapInit() {
this.map = new XjxcMap("xjxcmap", {}, this);
},
reset() {
this.searchData = {
// 任务名称
task: "",
unt: "",
type: "",
state: "",
value: "",
};
},
enter() {
console.log(this.searchData);
},
getList(e) {
console.log(e);
this.loading = true;
setTimeout(() => {
this.page = e.page;
this.loading = false;
}, 200);
},
mapDo(id) {
console.log(id);
},
},
};
</script>
<style lang="scss" scoped>
.map-bottom-wrapper {
height: 100%;
position: relative;
& > .map {
height: 100%;
}
& > .left-box {
width: 497px;
position: absolute;
top: 0;
bottom: 0;
> .top {
width: 100%;
// height: 143px;
padding-bottom: 10px;
margin-bottom: 9px;
border-radius: 3px;
box-shadow: 2px 0px 10px 1px rgba(0, 0, 0, 0.1);
background: #fff;
.title {
padding: 8px 0 4px 15px;
border-bottom: 1px solid rgba(231, 231, 231, 1);
font-size: 21px;
font-weight: 400;
}
.wrapper {
padding: 6px 12px 0px 12px;
.top-wrapper {
margin-bottom: 6px;
div {
&.input-wrapper {
width: 337px;
margin-right: 3px;
}
&.enter,
&.reset {
// flex:1;
span.text {
font-size: 12px;
color: #333333;
}
}
}
}
.middle-wrapper {
width: 100%;
margin-bottom: 6px;
> div {
width: 150px;
// background: red;
}
}
}
}
> .bottom {
flex: 1;
border-radius: 3px;
box-shadow: 2px 0px 10px 1px rgba(0, 0, 0, 0.1);
background: #fff;
box-sizing: border-box;
padding: 12px 20px;
padding-bottom: 0;
justify-content: space-between;
.table {
flex: 1;
background-color: red;
}
.page {
// height: 100px;
width: 100%;
}
}
}
}
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/Right.vue → gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/Right.vue
View file @ 19291222
<!--
* @Author: your name
* @Date: 2022-04-11 15:07:47
* @LastEditTime: 2022-04-12 18:14:09
* @LastEditTime: 2022-04-13 09:25:51
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/left.vue
......@@ -29,7 +29,7 @@
<div class="scroll-wrapper">
<Scroll :dataList="arr">
<template v-slot="{ dataList }">
<!-- <ScroItem v-for="(item,index) in dataList" :key="item.companyName+index" :data="item"/> -->
<ScroItem v-for="(item,index) in dataList" :key="item.companyName+index" :data="item" :index="index"/>
</template>
</Scroll>
</div>
......@@ -49,40 +49,76 @@ export default {
return {
arr: [
{
companyName: 123,
companyName: "河北泽宏公司啊啊啊啊啊",
time: "2022-04-09 07:29",
text: "大师傅阿斯蒂芬阿斯蒂芬Î",
},
{
companyName: 123,
companyName: "河北泽宏公司啊啊啊啊啊",
time: "2022-04-09 07:29",
text: "大师傅阿斯蒂芬阿斯蒂芬Î",
},
{
companyName: 123,
companyName: "河北泽宏公司啊啊啊啊啊",
time: "2022-04-09 07:29",
text: "大师傅阿斯蒂芬阿斯蒂芬Î",
},
{
companyName: 123,
companyName: "河北泽宏公司啊啊啊啊啊",
time: "2022-04-09 07:29",
text: "大师傅阿斯蒂芬阿斯蒂芬Î",
},
{
companyName: 123,
companyName: "河北泽宏公司啊啊啊啊啊",
time: "2022-04-09 07:29",
text: "大师傅阿斯蒂芬阿斯蒂芬Î",
},
{
companyName: 123,
companyName: "河北泽宏公司啊啊啊啊啊",
time: "2022-04-09 07:29",
text: "大师傅阿斯蒂芬阿斯蒂芬Î",
},
{
companyName: 123,
companyName: "河北泽宏公司啊啊啊啊啊",
time: "2022-04-09 07:29",
text: "大师傅阿斯蒂芬阿斯蒂芬Î",
},
{
companyName: "河北泽宏公司啊啊啊啊啊",
time: "2022-04-09 07:29",
text: "大师傅阿斯蒂芬阿斯蒂芬Î",
},
{
companyName: "河北泽宏公司啊啊啊啊啊",
time: "2022-04-09 07:29",
text: "大师傅阿斯蒂芬阿斯蒂芬Î",
},
// {
// companyName: 123,
// time: "2022-04-09 07:29",
// text: "大师傅阿斯蒂芬阿斯蒂芬Î",
// },
// {
// companyName: 123,
// time: "2022-04-09 07:29",
// text: "大师傅阿斯蒂芬阿斯蒂芬Î",
// },
// {
// companyName: 123,
// time: "2022-04-09 07:29",
// text: "大师傅阿斯蒂芬阿斯蒂芬Î",
// },
// {
// companyName: 123,
// time: "2022-04-09 07:29",
// text: "大师傅阿斯蒂芬阿斯蒂芬Î",
// },
// {
// companyName: 123,
// time: "2022-04-09 07:29",
// text: "大师傅阿斯蒂芬阿斯蒂芬Î",
// },
],
};
},
......@@ -135,7 +171,7 @@ export default {
font-size: 14px;
// 这个解决子元素overhidden失效问题
min-height: 0;
.top {
>.top {
background: rgba(24, 144, 255, 0.1);
height: 29px;
line-height: 29px;
......
gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/ScroItem.vue → gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/ScroItem.vue
View file @ 19291222
<!--
* @Author: your name
* @Date: 2022-04-12 18:02:16
* @LastEditTime: 2022-04-12 18:12:50
* @LastEditTime: 2022-04-13 09:24:43
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/ScrollItem.vue
-->
<template>
<div class="top flex">
<div class="zzz">{{ data.companyName }}</div>
<div class="zzz">{{ data.time }}</div>
<div class="zzz">{{ data.text }}</div>
<div class="top flex" :class="[{ n: index % 2 == 0, n2: index % 2 == 1 }]">
<div class="left zzz" :title="data.companyName">{{ data.companyName }}</div>
<div class="zzz" :title="data.time">{{ data.time }}</div>
<div class="zzz" :title="data.text">{{ data.text }}</div>
</div>
</template>
......@@ -29,14 +29,25 @@ export default {
<style lang="scss" scoped>
.top {
background: rgba(24, 144, 255, 0.1);
width: 100%;
height: 29px;
line-height: 29px;
&.n {
color: #333333;
}
&.n2 {
color: #1f8df3;
background: rgba(0, 0, 0, 0.1);
}
> div {
flex: 1;
text-align: center;
// box-sizing: border-box;
// padding: 0 5px;
font-size: 12px;
box-sizing: border-box;
padding: 0 2px;
&.left{
padding: 0 5px;
}
}
}
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/Scroll.vue → gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/Scroll.vue
View file @ 19291222
<!--
* @Author: your name
* @Date: 2022-04-12 16:09:32
* @LastEditTime: 2022-04-12 17:53:32
* @LastEditTime: 2022-04-13 15:41:17
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/components/scrollCom/scroll.vue
......@@ -71,7 +71,7 @@ export default {
if (this.top <= maxTop) {
this.top = 0;
}
}, 30);
}, 24);
},
stopScroll() {
clearInterval(this.timer);
......@@ -90,11 +90,12 @@ export default {
<style lang="scss" scoped>
.scroll {
height: 100%;
background: red;
// background: red;
overflow: hidden;
position: relative;
}
.contain {
width: 100%;
position: absolute;
}
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/index.vue
View file @ 19291222
<!--
* @Author: your name
* @Date: 2022-04-11 14:11:04
* @LastEditTime: 2022-04-12 14:53:40
* @LastEditTime: 2022-04-13 10:34:15
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/index.vue
......@@ -14,33 +14,40 @@
<Left />
</div>
<div class="middle">
<Middle/>
<Middle />
</div>
<div class="right">
<Right/>
<Right />
</div>
</div>
<div class="middle"></div>
<div class="bottom">
<MapBottom/>
</div>
</div>
</div>
</template>
<script>
import Left from "./topChars/Left";
import Middle from "./topChars/Middle";
import Right from "./topChars/Right";
import Left from "./components/Left";
import Middle from "./components/Middle";
import Right from "./components/Right";
import MapBottom from "./components/MapBottom";
export default {
components: {
Left,
Middle,
Right
Right,
MapBottom
},
data() {
return {};
return {
};
},
mounted(){
}
};
</script>
......@@ -69,12 +76,10 @@ export default {
.middle {
width: 35.3%;
padding: 15px 80px 19px 71px;
}
.right {
width: 25.2%;
padding: 15px 29px;
}
> div {
// box-shadow: 2px 0px 13px 1px rgba(0, 0, 0, 0.1);
......@@ -82,8 +87,14 @@ export default {
border-radius: 3px;
}
}
>.middle {
margin: 5px 0;
background: repeating-linear-gradient(135deg, transparent, transparent 3px, #D6D6D6 3px, #D6D6D6 8px);
height: 2px;
}
.bottom {
flex: 1;
background-color: red;
}
> div {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment