Skip to content

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

Merge branch 'develop_jzl'

parents 8f0f589b 9660d88c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 4174 additions and 536 deletions
gassafetyprogress-web/src/assets/styles/zehong.scss
View file @ 5dbe58b3
...@@ -4,236 +4,261 @@ ...@@ -4,236 +4,261 @@
*/ */
/** 基础通用 **/ /** 基础通用 **/
.pt5 { .pt5 {
padding-top: 5px; padding-top: 5px;
} }
.pr5 {
padding-right: 5px; .pr5 {
} padding-right: 5px;
.pb5 { }
padding-bottom: 5px;
} .pb5 {
.mt5 { padding-bottom: 5px;
margin-top: 5px; }
}
.mr5 { .mt5 {
margin-right: 5px; margin-top: 5px;
} }
.mb5 {
margin-bottom: 5px; .mr5 {
} margin-right: 5px;
.mb8 { }
margin-bottom: 8px;
} .mb5 {
.ml5 { margin-bottom: 5px;
margin-left: 5px; }
}
.mt10 { .mb8 {
margin-top: 10px; margin-bottom: 8px;
} }
.mr10 {
margin-right: 10px; .ml5 {
} margin-left: 5px;
.mb10 { }
margin-bottom: 10px;
} .mt10 {
.ml0 { margin-top: 10px;
margin-left: 10px; }
}
.mt20 { .mr10 {
margin-top: 20px; margin-right: 10px;
} }
.mr20 {
margin-right: 20px; .mb10 {
} margin-bottom: 10px;
.mb20 { }
margin-bottom: 20px;
} .ml0 {
.m20 { margin-left: 10px;
margin-left: 20px; }
}
.mt20 {
.el-dialog:not(.is-fullscreen){ margin-top: 20px;
margin-top: 6vh !important; }
}
.mr20 {
.el-table { margin-right: 20px;
.el-table__header-wrapper, .el-table__fixed-header-wrapper { }
th {
word-break: break-word; .mb20 {
background-color: #f8f8f9; margin-bottom: 20px;
color: #515a6e; }
height: 40px;
font-size: 13px; .m20 {
} margin-left: 20px;
} }
.el-table__body-wrapper {
.el-button [class*="el-icon-"] + span { .el-dialog:not(.is-fullscreen) {
margin-left: 1px; margin-top: 6vh !important;
} }
}
} .el-table {
/** 表单布局 **/ .el-table__header-wrapper,
.form-header { .el-table__fixed-header-wrapper {
font-size:15px; th {
color:#6379bb; word-break: break-word;
border-bottom:1px solid #ddd; background-color: #f8f8f9;
margin:8px 10px 25px 10px; color: #515a6e;
padding-bottom:5px height: 40px;
} font-size: 13px;
}
/** 表格布局 **/ }
.pagination-container {
position: relative; .el-table__body-wrapper {
height: 25px; .el-button [class*="el-icon-"]+span {
margin-bottom: 10px; margin-left: 1px;
margin-top: 15px; }
padding: 10px 20px !important; }
} }
/* tree border */ /** 表单布局 **/
.tree-border { .form-header {
margin-top: 5px; font-size: 15px;
border: 1px solid #e5e6e7; color: #6379bb;
background: #FFFFFF none; border-bottom: 1px solid #ddd;
border-radius:4px; margin: 8px 10px 25px 10px;
} padding-bottom: 5px
}
.pagination-container .el-pagination {
right: 0; /** 表格布局 **/
position: absolute; .pagination-container {
} position: relative;
height: 25px;
.el-table .fixed-width .el-button--mini { margin-bottom: 10px;
padding-left: 0; margin-top: 15px;
padding-right: 0; padding: 10px 20px !important;
width: inherit; }
}
/* tree border */
.el-tree-node__content > .el-checkbox { .tree-border {
margin-right: 8px; margin-top: 5px;
} border: 1px solid #e5e6e7;
background: #FFFFFF none;
.list-group-striped > .list-group-item { border-radius: 4px;
border-left: 0; }
border-right: 0;
border-radius: 0; .pagination-container .el-pagination {
padding-left: 0; right: 0;
padding-right: 0; position: absolute;
} }
.list-group { .el-table .fixed-width .el-button--mini {
padding-left: 0px; padding-left: 0;
list-style: none; padding-right: 0;
} width: inherit;
}
.list-group-item {
border-bottom: 1px solid #e7eaec; .el-tree-node__content>.el-checkbox {
border-top: 1px solid #e7eaec; margin-right: 8px;
margin-bottom: -1px; }
padding: 11px 0px;
font-size: 13px; .list-group-striped>.list-group-item {
} border-left: 0;
border-right: 0;
.pull-right { border-radius: 0;
float: right !important; padding-left: 0;
} padding-right: 0;
}
.el-card__header {
padding: 14px 15px 7px; .list-group {
min-height: 40px; padding-left: 0px;
} list-style: none;
}
.el-card__body {
padding: 15px 20px 20px 20px; .list-group-item {
} border-bottom: 1px solid #e7eaec;
border-top: 1px solid #e7eaec;
.card-box { margin-bottom: -1px;
padding-right: 15px; padding: 11px 0px;
padding-left: 15px; font-size: 13px;
margin-bottom: 10px; }
}
.pull-right {
/* button color */ float: right !important;
.el-button--cyan.is-active, }
.el-button--cyan:active {
background: #20B2AA; .el-card__header {
border-color: #20B2AA; padding: 14px 15px 7px;
color: #FFFFFF; min-height: 40px;
} }
.el-button--cyan:focus, .el-card__body {
.el-button--cyan:hover { padding: 15px 20px 20px 20px;
background: #48D1CC; }
border-color: #48D1CC;
color: #FFFFFF; .card-box {
} padding-right: 15px;
padding-left: 15px;
.el-button--cyan { margin-bottom: 10px;
background-color: #20B2AA; }
border-color: #20B2AA;
color: #FFFFFF; /* button color */
} .el-button--cyan.is-active,
.el-button--cyan:active {
/* text color */ background: #20B2AA;
.text-navy { border-color: #20B2AA;
color: #1ab394; color: #FFFFFF;
} }
.text-primary { .el-button--cyan:focus,
color: inherit; .el-button--cyan:hover {
} background: #48D1CC;
border-color: #48D1CC;
.text-success { color: #FFFFFF;
color: #1c84c6; }
}
.el-button--cyan {
.text-info { background-color: #20B2AA;
color: #23c6c8; border-color: #20B2AA;
} color: #FFFFFF;
}
.text-warning {
color: #f8ac59; /* text color */
} .text-navy {
color: #1ab394;
.text-danger { }
color: #ed5565;
} .text-primary {
color: inherit;
.text-muted { }
color: #888888;
} .text-success {
color: #1c84c6;
/* image */ }
.img-circle {
border-radius: 50%; .text-info {
} color: #23c6c8;
}
.img-lg {
width: 120px; .text-warning {
height: 120px; color: #f8ac59;
} }
.avatar-upload-preview { .text-danger {
position: absolute; color: #ed5565;
top: 50%; }
transform: translate(50%, -50%);
width: 200px; .text-muted {
height: 200px; color: #888888;
border-radius: 50%; }
box-shadow: 0 0 4px #ccc;
overflow: hidden; /* image */
} .img-circle {
border-radius: 50%;
/* 拖拽列样式 */ }
.sortable-ghost{
opacity: .8; .img-lg {
color: #fff!important; width: 120px;
background: #42b983!important; height: 120px;
} }
.top-right-btn { .avatar-upload-preview {
position: relative; position: absolute;
float: right; top: 50%;
} transform: translate(50%, -50%);
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: 0 0 4px #ccc;
overflow: hidden;
}
/* 拖拽列样式 */
.sortable-ghost {
opacity: .8;
color: #fff !important;
background: #42b983 !important;
}
.top-right-btn {
position: relative;
float: right;
}
@media (max-width: 1100px) {
.amap-info {
transform-origin: 5% -100% !important;
transform: scale(.6) !important;
}
}
\ No newline at end of file
gassafetyprogress-web/src/components/bigWindow/leftBarZ.vue 0 → 100644
View file @ 5dbe58b3
This diff is collapsed.
gassafetyprogress-web/src/components/bigWindow/rightBarZ.vue 0 → 100644
View file @ 5dbe58b3
This diff is collapsed.
gassafetyprogress-web/src/views/bigWindow/index.vue
View file @ 5dbe58b3
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-01-11 13:44:17 * @Date: 2022-01-11 13:44:17
* @LastEditTime: 2022-08-22 14:15:59 * @LastEditTime: 2022-08-24 13:43:01
* @LastEditors: 纪泽龙 jizelong@qq.com * @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/views/Home.vue * @FilePath: /test/hello-world/src/views/Home.vue
...@@ -54,7 +54,12 @@ ...@@ -54,7 +54,12 @@
</div> </div>
<!-- 设备按钮 --> <!-- 设备按钮 -->
<div class="typelist-div"> <div
:class="{
'typelist-div': windowInnerWidth > 1100,
'typelist-divZ': windowInnerWidth < 1100,
}"
>
<div <div
class="list" class="list"
v-for="(item, index) in arr" v-for="(item, index) in arr"
...@@ -79,18 +84,26 @@ ...@@ -79,18 +84,26 @@
</div> </div>
<!-- 头部 --> <!-- 头部 -->
<div class="banner-test"> <div class="banner-test" :style="{height:windowInnerWidth>1100?'85px':'70px'}">
<!-- <dv-decoration-5 style="width:100%;height:100%;" /> --> <!-- <dv-decoration-5 style="width:100%;height:100%;" /> -->
<img src="@/assets/mapinages/tb.png" alt="" /> <img src="@/assets/mapinages/tb.png" alt="" />
</div> </div>
<!-- 左边 --> <!-- 左边 -->
<div class="leftbar"> <div
<leftBar ref="mychild2"></leftBar> class="leftbar"
:style="{ width: windowInnerWidth > 1024 ? '470px' : '300px' }"
>
<leftBar v-if="windowInnerWidth > 1024" ref="mychild2"></leftBar>
<leftBarZ v-else ref="mychild2"></leftBarZ>
</div> </div>
<!-- 右边 --> <!-- 右边 -->
<div class="rightbar"> <div
<rightBar ref="mychild"></rightBar> class="rightbar"
:style="{ width: windowInnerWidth > 1024 ? '470px' : '300px' }"
>
<rightBar v-if="windowInnerWidth > 1024" ref="mychild"></rightBar>
<rightBarZ v-else ref="mychild"></rightBarZ>
</div> </div>
<!-- 左上角天气 --> <!-- 左上角天气 -->
...@@ -179,12 +192,16 @@ import PipeColor from "@/components/bigWindow/PipeColor.vue"; ...@@ -179,12 +192,16 @@ import PipeColor from "@/components/bigWindow/PipeColor.vue";
// import markerInfoWindow from './components/markerInfoWindow.vue' // import markerInfoWindow from './components/markerInfoWindow.vue'
import leftBar from "@/components/bigWindow/leftBar.vue"; import leftBar from "@/components/bigWindow/leftBar.vue";
import leftBarZ from "@/components/bigWindow/leftBarZ.vue";
import rightBar from "@/components/bigWindow/rightBar.vue"; import rightBar from "@/components/bigWindow/rightBar.vue";
import rightBarZ from "@/components/bigWindow/rightBarZ.vue";
export default { export default {
name: "Home", name: "Home",
components: { components: {
leftBar, leftBar,
leftBarZ,
rightBar, rightBar,
rightBarZ,
// Center, // Center,
UserCenter, UserCenter,
OtherCenter, OtherCenter,
...@@ -268,6 +285,7 @@ export default { ...@@ -268,6 +285,7 @@ export default {
// 报警轮询timer // 报警轮询timer
alarmTimer: null, alarmTimer: null,
windowInnerWidth: 0,
}; };
}, },
...@@ -285,6 +303,9 @@ export default { ...@@ -285,6 +303,9 @@ export default {
} }
}, },
}, },
created() {
this.windowInnerWidth = window.innerWidth;
},
async mounted() { async mounted() {
// console.log(99999999999999) // console.log(99999999999999)
// getPipe().then(res=>{ // getPipe().then(res=>{
...@@ -293,7 +314,6 @@ export default { ...@@ -293,7 +314,6 @@ export default {
// console.log(123) // console.log(123)
// }) // })
// return; // return;
const path = eval(this.systemSetting.map_center); const path = eval(this.systemSetting.map_center);
this.map = new EditorMap( this.map = new EditorMap(
"map", "map",
...@@ -351,11 +371,11 @@ export default { ...@@ -351,11 +371,11 @@ export default {
}), }),
// 管道上图 // 管道上图
addPipeLine(data, component) { addPipeLine(data, component) {
console.log('zzzzzzsssssxxxxzxzxzxzxzxzxz') console.log("zzzzzzsssssxxxxzxzxzxzxzxzxz");
for (let comp in data) { for (let comp in data) {
data[comp].forEach((pipe) => { data[comp].forEach((pipe) => {
console.log(pipe) console.log(pipe);
this.map.addPipeLine(pipe, component); this.map.addPipeLine(pipe, component);
}); });
} }
...@@ -587,18 +607,21 @@ export default { ...@@ -587,18 +607,21 @@ export default {
} }
.leftbar { .leftbar {
width: 450px; width: 300px;
height: 90%; overflow: hidden;
height: calc(100vh - 85px);
position: fixed; position: fixed;
top: 10%; top: 85px;
left: 0; left: 0;
background: #112238; background: #112238;
} }
.rightbar { .rightbar {
width: 470px; width: 470px;
height: 90%; height: calc(100vh - 85px);
position: fixed; position: fixed;
top: 10%; top: 85px;
right: 0; right: 0;
background: #112238; background: #112238;
} }
...@@ -690,28 +713,58 @@ export default { ...@@ -690,28 +713,58 @@ export default {
top: 0; top: 0;
margin-top: 120px; margin-top: 120px;
right: 470px; right: 470px;
.list {
z-index: 9999;
float: left;
margin-left: 15px;
color: #fff;
line-height: auto;
text-align: center;
background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%);
box-shadow: inset 0px 1px 2px 1px #125c9b;
font-size: 15px;
padding: 5px 7px;
cursor: pointer;
line-height: 26px;
}
.list.active {
background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%);
box-shadow: inset 0px 1px 2px 1px #125c9b;
font-size: 14px;
}
.list img {
width: 22px;
}
} }
.list { .typelist-divZ {
z-index: 9999; width: 400px;
float: left; // height: 30px;
margin-left: 15px; z-index: 9998;
color: #fff; position: fixed;
line-height: auto; top: 85px;
text-align: center; left: 50%;
background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%); margin-left: -200px;
box-shadow: inset 0px 1px 2px 1px #125c9b; .list {
font-size: 15px; float: left;
padding: 5px 7px; margin-left: 15px;
cursor: pointer; color: #fff;
line-height: 26px; line-height: auto;
} text-align: center;
background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%);
.list.active { box-shadow: inset 0px 1px 2px 1px #125c9b;
background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%); font-size: 10px;
box-shadow: inset 0px 1px 2px 1px #125c9b; padding: 5px 7px;
font-size: 14px; cursor: pointer;
} margin-bottom: 5px;
.list img{ // line-height: 30px;
width: 22px; }
.list.active {
background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%);
box-shadow: inset 0px 1px 2px 1px #125c9b;
font-size: 10px;
}
.list img {
width: 15px;
}
} }
</style> </style>
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCardZ.vue 0 → 100644
View file @ 5dbe58b3
<!--
* @Author: your name
* @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-29 10:09:52
* @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/monitorData/component/charsData/CzCard.vue
-->
<template>
<div class="czcard">
<my-collapse
title="场站"
ref="myCollapse"
:listNum="czList.filter((item) => item.show).length"
>
<template v-slot:chackbox>
<FilterVue
:filterList="filterList"
@fliterTypeChange="fliterTypeChange"
/>
</template>
<template #container>
<div class="container" :class="{ start: getShowNum }">
<div
v-for="(item, index) in czList"
:key="item.deviceName + index"
v-show="item.show"
>
<CzItem ref="czItem" :list="item" v-if="item.show" />
</div>
</div>
</template>
</my-collapse>
</div>
</template>
<script>
import MyCollapse from "./MyCollapse";
import CzItem from "./CzItem";
import FilterVue from "./FilterVue";
export default {
// 场站
components: {
MyCollapse,
CzItem,
FilterVue,
},
data() {
return {
carHide: true,
addStartNum: 3,
filterList: [
{ value: "全部", count: 6, type: "all" },
{ value: "加气站", count: 2, type: 1 },
{ value: "门站", count: 0, type: 2 },
{ value: "调压站", count: 0, type: 3 },
{ value: "储备站", count: 0, type: 4 },
{ value: "气化站", count: 4, type: 5 },
],
deviceTypeArr: [1, 2, 3, 4],
czList: [
{
deviceName: "中诚燃气门站",
state: 1,
a: 12,
b: 57.7,
c: 0.46,
d: 54.2,
// e: 56,
image: "",
show: true,
type: 1,
},
{
deviceName: "平山中燃气站",
state: 1,
a: 13.1,
b: 64.3,
c: 0.51,
d: 48.2,
// e: 56,
image: "",
show: true,
type: 1,
},
// {
// deviceName: "门站",
// state: 2,
// a: 25,
// b: 56,
// c: 54,
// d: 15,
// e: 56,
// image: "",
// show: true,
// type: 2,
// },
// {
// deviceName: "调压站",
// state: 1,
// a: 25,
// b: 56,
// c: 54,
// d: 15,
// e: 56,
// image: "",
// show: true,
// type: 3,
// },
// {
// deviceName: "储备站",
// state: 1,
// a: 25,
// b: 56,
// c: 54,
// d: 15,
// e: 56,
// image: "",
// show: true,
// type: 4,
// },
{
deviceName: "隆和气化站",
state: 1,
a: 15.2,
b: 52.9,
c: 0.49,
d: 54,
// e: 56,
image: "",
show: true,
type: 5,
},
{
deviceName: "温塘气化站",
state: 1,
a: 12.6,
b: 61.8,
c: 0.47,
d: 49,
// e: 56,
image: "",
show: true,
type: 5,
},
{
deviceName: "93701部队气化站",
state: 1,
a: 14.6,
b: 56.5,
c: 0.58,
d: 47.6,
// e: 56,
image: "",
show: true,
type: 5,
},
{
deviceName: "隆城绿都气化站",
state: 1,
a: 12.5,
b: 54,
c: 0.52,
d: 50,
// e: 56,
image: "",
show: true,
type: 5,
},
// {
// deviceName: "储备站",
// state: 1,
// a: 25,
// b: 56,
// c: 54,
// d: 15,
// e: 56,
// image: "",
// show: true,
// type: 4,
// },
],
};
},
computed: {
// 计算有多少个展示的对象,如果小于3个,就把justify-content: space-between;取消
getShowNum() {
return this.czList.filter((item) => item.show).length < this.addStartNum;
},
},
mounted() {
this.changeAddStartNum();
},
methods: {
hide() {
this.carHide = !this.carHide;
// this.myCollapse();
},
// 根据父子元素自动计算是否需要添加值start
changeAddStartNum() {
const czItem = this.$refs.czItem;
let czItemWidth;
// 组件有可能是一个数组，所以要这样判断
if (Array.isArray(czItem)) {
const { width } = czItem[0].$el.getBoundingClientRect();
czItemWidth = width;
} else {
const { width } = czItem.$el.getBoundingClientRect();
czItemWidth = width;
}
// 取出collap的宽
const { width: CollapseWidth } =
this.$refs.myCollapse.$el.getBoundingClientRect();
// 得到最小的承载数量
this.addStartNum = Math.floor(CollapseWidth / czItemWidth);
},
//过滤选择
fliterTypeChange(data) {
this.filter([...data]);
// 改变大小,因为动画原因加个延迟
// this.$nextTick(() => {
// setTimeout(()=>{
// this.myCollapse()
// }, 300);
// });
},
myCollapse() {
// this.$refs.myCollapse.getHeight();
},
// 过滤对象
filter(arr) {
this.czList.forEach((item) => {
const { type } = item;
if (arr.includes(type)) {
item.show = true;
} else {
item.show = false;
}
});
},
},
};
</script>
<style lang="scss" scoped>
.container {
width: 100%;
flex-wrap: wrap;
display: flex;
&.start {
justify-content: flex-start;
& > div {
// margin-right: 50px;
}
}
& > div {
margin-bottom: 20px;
margin-left: 1%;
width: 24%;
min-width: 295px;
border: 1px solid #e6ebf5;
border-radius: 4px;
box-sizing: border-box;
}
}
.flex {
display: flex;
justify-content: space-between;
}
</style>
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/FilterVue.vue
View file @ 5dbe58b3
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-03-29 09:41:23 * @Date: 2022-03-29 09:41:23
* @LastEditTime: 2022-03-29 11:08:25 * @LastEditTime: 2022-08-25 17:06:40
* @LastEditors: Please set LastEditors * @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Filter.vue * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Filter.vue
--> -->
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<span <span
class="text" class="text"
:class="{ :class="{
active: deviceTypeArr.length == filterList.length - 1 active: deviceTypeArr.length == filterList.length - 1,
}" }"
@click="fliterTypeChange(item)" @click="fliterTypeChange(item)"
>{{ item.value }} >{{ item.value }}
...@@ -83,6 +83,11 @@ export default { ...@@ -83,6 +83,11 @@ export default {
.fliter-vue { .fliter-vue {
display: flex; display: flex;
} }
@media (max-width: 1100px) {
.filter {
margin-right: 20px !important;
}
}
.filter { .filter {
margin-right: 30px; margin-right: 30px;
margin-top: 5px; margin-top: 5px;
...@@ -112,11 +117,11 @@ export default { ...@@ -112,11 +117,11 @@ export default {
font-size: 10px; font-size: 10px;
position: absolute; position: absolute;
left: -12px; left: -12px;
color: rgba(0, 0, 0, .5); color: rgba(0, 0, 0, 0.5);
} }
} }
&.active { &.active {
.iconfont { .iconfont {
font-size: 10px; font-size: 10px;
position: absolute; position: absolute;
left: -12px; left: -12px;
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/TopCard.vue
View file @ 5dbe58b3
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-03-25 13:46:23 * @Date: 2022-03-25 13:46:23
* @LastEditTime: 2022-04-28 15:59:44 * @LastEditTime: 2022-08-25 15:32:17
* @LastEditors: Please set LastEditors * @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData.vue * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData.vue
--> -->
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/TopCardZ.vue 0 → 100644
View file @ 5dbe58b3
<!--
* @Author: your name
* @Date: 2022-03-25 13:46:23
* @LastEditTime: 2022-08-25 16:27:49
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData.vue
-->
<template>
<div class="">
<div class="top-card flex">
<div
class="box-card"
v-for="(item, index) in cardList"
:key="item.deviceName"
>
<div class="top flex">
<div class="top-left">
<span
class="iconfont"
:class="`icon-` + deviceIconList[index]"
></span>
<span class="text">{{ item.deviceName }}</span>
</div>
<div class="top-right flex">
<span class="text">总数</span>
<span class="count">{{ item.count }}</span>
</div>
</div>
<div class="middle flex">
<div class="first">正常</div>
<!-- 2是探测器，探测器只有报警，没有高低报 -->
<template v-if="index != 2">
<div>高报</div>
<div>低报</div>
</template>
<template v-else>
<div>报警</div>
</template>
<div class="last">离线数</div>
</div>
<div class="bottom flex">
<div class="first" v-if="index != 2">8</div>
<div class="first" v-if="index == 2">1238</div>
<!-- 2是探测器，探测器只有报警，没有高低报 -->
<template v-if="index == 0">
<div>2</div>
<div>1</div>
</template>
<template v-if="index == 1">
<div>0</div>
<div>0</div>
</template>
<template v-if="index == 2">
<div>0</div>
</template>
<div class="last" v-if="index != 1">0</div>
<div class="last" v-if="index == 1">1</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "charsData",
props: {
cardList: {
type: Array,
},
},
data() {
return {
deviceIconList: ["ylb", "llj", "tcq"],
};
},
};
</script>
<style lang="scss" scoped>
.top-card {
margin-bottom: 22px;
& > div {
flex: 1;
margin-right: 20px;
height: 212px;
background: #ffffff;
box-shadow: 2px 0px 12px 1px rgba(0, 0, 0, 0.1);
border-radius: 4px 4px 4px 4px;
border: 1px solid #e6ebf5;
box-sizing: border-box;
// padding: 34px 40px 38px;
padding: 34px 0 38px;
.top {
font-size: 15px;
margin-bottom: 46px;
padding: 0 30px;
// justify-content:space-between;
.top-left {
color: #1890ff;
.iconfont {
font-size: 20px;
margin-right: 4px;
}
.text {
font-weight: 500;
}
}
.top-right {
// padding-top: 5px;
font-size: 15px;
.text {
font-size: 16px;
font-weight: 500;
margin-right: 2px;
padding-top: 3px;
}
.count {
color: #1890ff;
font-size: 22px;
letter-spacing: 1px;
}
}
}
&:last-child {
margin-right: 0;
}
}
.middle,
.bottom {
// justify-content: space-around;
& > div {
// flex: 1;
text-align: center;
font-size: 16px;
flex: 1;
&.first {
// text-align: left;
}
&.last {
// text-align: right;
}
}
}
.middle {
margin-bottom: 20px;
& > div {
font-weight: 500;
}
}
}
.flex {
display: flex;
justify-content: space-between;
}
</style>
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/index.vue
View file @ 5dbe58b3
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-03-25 13:46:23 * @Date: 2022-03-25 13:46:23
* @LastEditTime: 2022-03-28 15:05:04 * @LastEditTime: 2022-08-25 17:02:07
* @LastEditors: Please set LastEditors * @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData.vue * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData.vue
--> -->
<template> <template>
<div class="chars-data"> <div class="chars-data">
<TopCard :cardList="cardList"/> <TopCard v-if="windowInnerWidth>1100" :cardList="cardList"/>
<CzCard/> <TopCardZ v-else :cardList="cardList"/>
<CzCard v-if="windowInnerWidth>1100" />
<CzCardZ v-else />
<Cg/> <Cg/>
<Fmj/> <Fmj/>
<Tyx/> <Tyx/>
...@@ -18,7 +20,9 @@ ...@@ -18,7 +20,9 @@
<script> <script>
import TopCard from "./TopCard"; import TopCard from "./TopCard";
import TopCardZ from "./TopCardZ";
import CzCard from "./CzCard"; import CzCard from "./CzCard";
import CzCardZ from "./CzCardZ";
import Cg from "./Cg"; import Cg from "./Cg";
import Fmj from "./Fmj"; import Fmj from "./Fmj";
import Tyx from "./Tyx"; import Tyx from "./Tyx";
...@@ -26,7 +30,9 @@ export default { ...@@ -26,7 +30,9 @@ export default {
name: "charsData", name: "charsData",
components: { components: {
TopCard, TopCard,
TopCardZ,
CzCard, CzCard,
CzCardZ,
Cg, Cg,
Fmj, Fmj,
Tyx Tyx
...@@ -39,8 +45,12 @@ export default { ...@@ -39,8 +45,12 @@ export default {
{ deviceName: "探测器", count: 1238 }, { deviceName: "探测器", count: 1238 },
], ],
deviceIconList: ["ylb", "llj", "tcq"], deviceIconList: ["ylb", "llj", "tcq"],
windowInnerWidth:0,
}; };
}, },
created() {
this.windowInnerWidth = window.innerWidth;
},
}; };
</script> </script>
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/index.vue
View file @ 5dbe58b3
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-03-08 17:28:57 * @Date: 2022-03-08 17:28:57
* @LastEditTime: 2022-03-28 17:20:55 * @LastEditTime: 2022-08-25 15:29:31
* @LastEditors: Please set LastEditors * @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/index.vue * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/index.vue
--> -->
...@@ -37,7 +37,7 @@ export default { ...@@ -37,7 +37,7 @@ export default {
}, },
computed: { computed: {
currentTabComponent() { currentTabComponent() {
return this.isCom == 0 ? tabledata : charsData; return this.isCom === 0 ? tabledata : charsData;
}, },
}, },
methods: { methods: {
......
gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/LeftZ.vue 0 → 100644
View file @ 5dbe58b3
<!--
* @Author: your name
* @Date: 2022-04-11 15:07:47
* @LastEditTime: 2022-08-25 11:04:17
* @LastEditors: 纪泽龙 jizelong@qq.com
* @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
-->
<template>
<div class="charsCom all-flex-h">
<div class="title">巡检巡查计划</div>
<div class="two all-flex">
<div class="left">
<div class="first">
<span class="text">巡检年度计划</span>
<span>23次</span>
</div>
<div class="second all-flex">
<div class="left">泄露监测</div>
<div class="right">防腐层监测</div>
</div>
<div class="third all-flex">
<div class="left">15次</div>
<div class="right">8次</div>
</div>
<div class="first fourth">
<div class="">泄漏检测完成比例</div>
</div>
<div class="fifth">
<div class="contant">
<Chars></Chars>
</div>
</div>
</div>
<div class="right">
<div class="first">
<span class="text">巡检完成情况</span>
<span>18次</span>
</div>
<div class="second all-flex">
<div class="left">泄露监测</div>
<div class="right">防腐层监测</div>
</div>
<div class="third all-flex">
<div class="left">10次</div>
<div class="right">8次</div>
</div>
<div class="first fourth">
<div class="">防腐层检测完成比例</div>
</div>
<div class="fifth">
<div class="contant">
<Chars color="#00C3F1"></Chars>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Chars from "@/components/allCharsCom/Chars";
export default {
components: {
Chars,
},
};
</script>
<style lang="scss" scoped>
.charsCom {
width: 100%;
height: 100%;
color: #333333;
}
.title {
text-align: center;
font-size: 18px;
margin-bottom: 7px;
}
.two {
flex: 1;
> .left {
// margin-right: 70px;
}
> .right {
}
> div {
font-size: 10px;
width: 50%;
flex: 1;
overflow: hidden;
// display: flex;
// flex-direction: column;
}
.left,
.right {
display: flex;
flex-direction: column;
justify-content: space-between;
.first {
margin-bottom: 6px;
text-align: left;
.text {
display: inline-block;
margin-right: 8px;
}
}
.second {
width: 100%;
height: 20px;
line-height: 20px;
box-sizing: border-box;
box-shadow: 0px 0px 3px 1px #dddddd;
margin-bottom: 10px;
> div {
// flex: 1;
text-align: center;
font-size: 10px;
&.left {
color: #1d8cf3;
}
&.right {
color: #00c3f1;
}
}
}
.third {
text-align: center;
// width: 213px;
width: 100%;
margin-bottom: 10px;
}
.fifth {
flex: 1;
// background: red;
padding-top: 5px;
.contant {
width: 120px;
height: 94px;
margin: 0 auto;
}
}
}
}
</style>
gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/MiddleZ.vue 0 → 100644
View file @ 5dbe58b3
<!--
* @Author: your name
* @Date: 2022-04-11 15:07:47
* @LastEditTime: 2022-08-25 15:07:26
* @LastEditors: 纪泽龙 jizelong@qq.com
* @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
-->
<template>
<div class="charsCom all-flex-h">
<div class="title">隐患整改</div>
<div class="two all-flex">
<div class="left">
<div class="first">
<span class="text">隐患发现情况</span>
<span>20次</span>
</div>
<div class="second all-flex">
<div class="left">隐患总数</div>
<div class="right">隐患已整改数</div>
</div>
<div class="third all-flex">
<div class="left">13次</div>
<div class="right">7次</div>
</div>
</div>
<div class="right">
<div class="first">
<span class="text">隐患整改率</span>
</div>
<div class="chars-box">
<Chars color="#604AFF"></Chars>
</div>
</div>
</div>
<div class="three all-flex-h">
<div class="first">隐患原因</div>
<div ref="myChartWidth" class="chars-box">
<Chars :options="bottomOptions()" />
</div>
</div>
</div>
</template>
<script>
import Chars from "@/components/allCharsCom/Chars";
export default {
components: {
Chars,
},
data() {
return {
bottomData: [
[
{ name: "裂缝", value: 8, color: "#604AFF" },
{ name: "管道称重", value: 16, color: "#FFC337" },
{ name: "其他", value: 13, color: "#86FF5B" },
{ name: "腐蚀", value: 7, color: "#03C4F1" },
{ name: "漏气", value: 5, color: "#1F8DF3" },
],
],
};
},
methods: {
bottomOptions() {
return {
series: this.bottomData.map((data, idx) => {
const rich = {};
data
.map((item) => ({
fontsize: 12,
color: item.color,
}))
.forEach((item, index) => {
rich[`dataIndex${index}`] = item;
});
return {
type: "pie",
radius: ["68%", "80%"],
color: data.map((item) => item.color),
itemStyle: {
borderWidth: 2,
borderRadius: 10,
borderColor: "#fff",
},
label: {
alignTo: "edge",
// formatter: "{name|{b}}\n{num|{c} 个}",
formatter: (parm) => {
return `{dataIndex${parm.dataIndex}|${parm.data.name}}\n{dataIndex${parm.dataIndex}|${parm.data.value}}`;
},
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich,
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80,
},
labelLayout: (params) => {
const { width } = this.$refs.myChartWidth.getBoundingClientRect();
const isLeft = params.labelRect.x < width / 2;
const points = params.labelLinePoints;
console.log("points",points)
// Update the end point.
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points,
};
},
data: data,
};
}),
};
},
},
};
</script>
<style lang="scss" scoped>
.charsCom {
width: 100%;
height: 100%;
color: #333333;
}
.title {
text-align: center;
font-size: 18px;
margin-bottom: 7px;
}
.two {
// flex: 1;
> .left {
// margin-right: 70px;
margin-left:10px;
.first {
margin-bottom: 6px;
width: 150px;
font-size: 10px;
}
.second {
width: 140px;
height: 20px;
line-height: 20px;
box-sizing: border-box;
box-shadow: 0px 0px 3px 1px #dddddd;
margin-bottom: 10px;
font-size: 10px;
> div {
// flex: 1;
text-align: center;
&.left {
color: #1d8cf3;
}
&.right {
color: #00c3f1;
}
}
}
.third {
text-align: center;
width: 150px;
margin-bottom: 10px;
font-size: 10px;
}
}
> .right {
.first {
text-align: center !important;
font-size: 10px;
}
.chars-box {
width: 70px;
height: 70px;
margin: 0 auto;
}
}
> div {
font-size: 16px;
flex: 1;
// display: flex;
// flex-direction: column;
}
.left,
.right {
// display: flex;
// flex-direction: column;
// justify-content: space-between;
.first {
text-align: left;
.text {
display: inline-block;
margin-right: 8px;
}
}
}
}
.three {
font-size: 16px;
flex: 1;
// background: red;
.chars-box {
flex: 1;
}
}
</style>
gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/RightZ.vue 0 → 100644
View file @ 5dbe58b3
<!--
* @Author: your name
* @Date: 2022-04-11 15:07:47
* @LastEditTime: 2022-08-25 15:15:32
* @LastEditors: 纪泽龙 jizelong@qq.com
* @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
-->
<template>
<div class="charsCom all-flex-h">
<div class="title">第三方施工情况</div>
<div class="two flex">
<div class="left">已备案</div>
<div class="middle">已完成</div>
<div class="right">进行中</div>
</div>
<div class="three flex">
<div class="left zzz">6</div>
<div class="middle zzz">4</div>
<div class="right zzz">2</div>
</div>
<div class="four all-flex-h">
<div class="top flex">
<div>施工单位</div>
<div>备案时间</div>
<div>施工描述</div>
</div>
<div class="scroll-wrapper">
<Scroll :dataList="arr">
<template v-slot="{ dataList }">
<ScroItem v-for="(item,index) in dataList" :key="item.companyName+index" :data="item" :index="index"/>
</template>
</Scroll>
</div>
</div>
</div>
</template>
<script>
import Scroll from "./Scroll";
import ScroItem from "./ScroItem";
export default {
components: {
Scroll,
ScroItem
},
data() {
return {
arr: [
{
companyName: "中燃祥科",
time: "2022-01-11 07:29",
text: "安装探头",
},
{
companyName: "河北泽宏",
time: "2022-01-13 07:29",
text: "安装管道",
},
{
companyName: "河北泽宏科技股份有限公司",
time: "2022-01-14 07:29",
text: "气体报警器",
},
{
companyName: "政府部门",
time: "2022-01-15 07:29",
text: "安装设备监控",
},
{
companyName: "中诚然气",
time: "2022-01-17 07:29",
text: "安装管道",
},
{
companyName: "中诚然气",
time: "2022-02-20 07:29",
text: "轻工路1号施工",
},
{
companyName: "中燃祥科",
time: "2022-02-21 07:29",
text: "轻工路1号施工",
},
{
companyName: "河北泽宏",
time: "2022-03-11 07:29",
text: "安装管道",
},
{
companyName: "河北泽宏",
time: "2022-04-16 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: "大师傅阿斯蒂芬阿斯蒂芬Î",
// },
],
};
},
mounted() {},
};
</script>
<style lang="scss" scoped>
.charsCom {
width: 100%;
height: 100%;
}
.title {
text-align: center;
font-size: 18px;
margin-bottom: 22px;
}
.two {
box-shadow: 0px 0px 3px 1px #dddddd;
height: 20px;
font-size: 10px;
margin-bottom: 10px;
> div {
line-height: 20px;
flex: 1;
text-align: center;
&.left {
color: #1f8df3;
}
&.middle {
flex: 1;
color: #03c4f1;
}
&.right {
color: #ffc337;
}
}
}
.three {
font-size: 10px;
margin-bottom: 5px;
> div {
flex: 1;
line-height: 24px;
text-align: center;
}
}
.four {
flex: 1;
font-size: 10px;
// 这个解决子元素overhidden失效问题
min-height: 0;
>.top {
background: rgba(24, 144, 255, 0.1);
height: 29px;
line-height: 29px;
> div {
flex: 1;
text-align: center;
}
}
.scroll-wrapper {
// font-size: 14px;
flex: 1;
// 这个解决子元素overhidden失效问题
min-height: 0;
// background: red;
// overflow: hidden;
// position:relative;
}
}
</style>
gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/index.vue
View file @ 5dbe58b3
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-04-11 14:11:04 * @Date: 2022-04-11 14:11:04
* @LastEditTime: 2022-04-14 10:45:52 * @LastEditTime: 2022-08-25 15:24:33
* @LastEditors: Please set LastEditors * @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @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 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/index.vue
--> -->
...@@ -11,18 +11,22 @@ ...@@ -11,18 +11,22 @@
<div class="wrapper flex-h"> <div class="wrapper flex-h">
<div class="top flex"> <div class="top flex">
<div class="left"> <div class="left">
<Left /> <Left v-if="windowInnerWidth > 1100" />
<LeftZ v-else />
</div> </div>
<div class="middle"> <div class="middle" :class="{ z: windowInnerWidth < 1100 }">
<Middle /> <Middle v-if="windowInnerWidth > 1100" />
<MiddleZ v-else />
</div> </div>
<div class="right"> <div class="right" :class="{ z: windowInnerWidth < 1100 }">
<Right /> <Right v-if="windowInnerWidth > 1100" />
<RightZ v-else />
</div> </div>
</div> </div>
<div class="middle"></div> <div class="middle"></div>
<div class="bottom"> <div class="bottom">
<MapBottom/> <MapBottom v-if="windowInnerWidth > 1100" />
<MapBottomZ v-else />
</div> </div>
</div> </div>
</div> </div>
...@@ -30,24 +34,33 @@ ...@@ -30,24 +34,33 @@
<script> <script>
import Left from "./components/Left"; import Left from "./components/Left";
import LeftZ from "./components/LeftZ";
import Middle from "./components/Middle"; import Middle from "./components/Middle";
import MiddleZ from "./components/MiddleZ";
import Right from "./components/Right"; import Right from "./components/Right";
import RightZ from "./components/RightZ";
import MapBottom from "./components/MapBottom"; import MapBottom from "./components/MapBottom";
import MapBottomZ from "./components/MapBottomZ";
export default { export default {
components: { components: {
Left, Left,
LeftZ,
Middle, Middle,
MiddleZ,
Right, Right,
MapBottom RightZ,
MapBottom,
MapBottomZ
}, },
data() { data() {
return { return {
windowInnerWidth: 0,
}; };
}, },
mounted(){ created() {
this.windowInnerWidth = window.innerWidth;
} },
mounted() {},
}; };
</script> </script>
...@@ -72,14 +85,24 @@ export default { ...@@ -72,14 +85,24 @@ export default {
.left { .left {
width: 36.5%; width: 36.5%;
padding: 15px 24px 19px; padding: 15px 24px 19px;
overflow: hidden;
} }
.middle { .middle {
width: 35.3%; width: 35.3%;
padding: 15px 80px 19px 71px; padding: 15px 80px 19px 71px;
// padding: 15px 24px 19px;
overflow: hidden;
&.z {
padding: 15px 24px 19px;
}
} }
.right { .right {
width: 25.2%; width: 25.2%;
padding: 15px 29px; padding: 15px 29px;
overflow: hidden;
&.z {
padding: 15px 10px;
}
} }
> div { > div {
// box-shadow: 2px 0px 13px 1px rgba(0, 0, 0, 0.1); // box-shadow: 2px 0px 13px 1px rgba(0, 0, 0, 0.1);
...@@ -87,15 +110,20 @@ export default { ...@@ -87,15 +110,20 @@ export default {
border-radius: 3px; border-radius: 3px;
} }
} }
>.middle { > .middle {
margin: 5px 0; margin: 5px 0;
background: repeating-linear-gradient(135deg, transparent, transparent 3px, #D6D6D6 3px, #D6D6D6 8px); background: repeating-linear-gradient(
135deg,
transparent,
transparent 3px,
#d6d6d6 3px,
#d6d6d6 8px
);
height: 2px; height: 2px;
} }
.bottom { .bottom {
flex: 1; flex: 1;
background-color: red; background-color: red;
} }
> div { > div {
// height: 50%; // height: 50%;
......
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