Skip to content

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

配饰巡检巡查，企业数据监控，考核评价页面。

parent 9d3ad6ed
Expand all Show whitespace changes
Inline Side-by-side
Showing with 2306 additions and 502 deletions
gassafetyprogress-web/src/assets/styles/zehong.scss
View file @ 9660d88c
......@@ -4,61 +4,78 @@
*/
/** 基础通用 **/
.pt5 {
.pt5 {
padding-top: 5px;
}
.pr5 {
}
.pr5 {
padding-right: 5px;
}
.pb5 {
}
.pb5 {
padding-bottom: 5px;
}
.mt5 {
}
.mt5 {
margin-top: 5px;
}
.mr5 {
}
.mr5 {
margin-right: 5px;
}
.mb5 {
}
.mb5 {
margin-bottom: 5px;
}
.mb8 {
}
.mb8 {
margin-bottom: 8px;
}
.ml5 {
}
.ml5 {
margin-left: 5px;
}
.mt10 {
}
.mt10 {
margin-top: 10px;
}
.mr10 {
}
.mr10 {
margin-right: 10px;
}
.mb10 {
}
.mb10 {
margin-bottom: 10px;
}
.ml0 {
}
.ml0 {
margin-left: 10px;
}
.mt20 {
}
.mt20 {
margin-top: 20px;
}
.mr20 {
}
.mr20 {
margin-right: 20px;
}
.mb20 {
}
.mb20 {
margin-bottom: 20px;
}
.m20 {
}
.m20 {
margin-left: 20px;
}
}
.el-dialog:not(.is-fullscreen){
.el-dialog:not(.is-fullscreen) {
margin-top: 6vh !important;
}
}
.el-table {
.el-table {
.el-table__header-wrapper, .el-table__fixed-header-wrapper {
.el-table__header-wrapper,
.el-table__fixed-header-wrapper {
th {
word-break: break-word;
background-color: #f8f8f9;
......@@ -67,155 +84,156 @@
font-size: 13px;
}
}
.el-table__body-wrapper {
.el-button [class*="el-icon-"] + span {
.el-button [class*="el-icon-"]+span {
margin-left: 1px;
}
}
}
}
/** 表单布局 **/
.form-header {
font-size:15px;
color:#6379bb;
border-bottom:1px solid #ddd;
margin:8px 10px 25px 10px;
padding-bottom:5px
}
/** 表单布局 **/
.form-header {
font-size: 15px;
color: #6379bb;
border-bottom: 1px solid #ddd;
margin: 8px 10px 25px 10px;
padding-bottom: 5px
}
/** 表格布局 **/
.pagination-container {
/** 表格布局 **/
.pagination-container {
position: relative;
height: 25px;
margin-bottom: 10px;
margin-top: 15px;
padding: 10px 20px !important;
}
}
/* tree border */
.tree-border {
/* tree border */
.tree-border {
margin-top: 5px;
border: 1px solid #e5e6e7;
background: #FFFFFF none;
border-radius:4px;
}
border-radius: 4px;
}
.pagination-container .el-pagination {
.pagination-container .el-pagination {
right: 0;
position: absolute;
}
}
.el-table .fixed-width .el-button--mini {
.el-table .fixed-width .el-button--mini {
padding-left: 0;
padding-right: 0;
width: inherit;
}
}
.el-tree-node__content > .el-checkbox {
.el-tree-node__content>.el-checkbox {
margin-right: 8px;
}
}
.list-group-striped > .list-group-item {
.list-group-striped>.list-group-item {
border-left: 0;
border-right: 0;
border-radius: 0;
padding-left: 0;
padding-right: 0;
}
}
.list-group {
.list-group {
padding-left: 0px;
list-style: none;
}
}
.list-group-item {
.list-group-item {
border-bottom: 1px solid #e7eaec;
border-top: 1px solid #e7eaec;
margin-bottom: -1px;
padding: 11px 0px;
font-size: 13px;
}
}
.pull-right {
.pull-right {
float: right !important;
}
}
.el-card__header {
.el-card__header {
padding: 14px 15px 7px;
min-height: 40px;
}
}
.el-card__body {
.el-card__body {
padding: 15px 20px 20px 20px;
}
}
.card-box {
.card-box {
padding-right: 15px;
padding-left: 15px;
margin-bottom: 10px;
}
}
/* button color */
.el-button--cyan.is-active,
.el-button--cyan:active {
/* button color */
.el-button--cyan.is-active,
.el-button--cyan:active {
background: #20B2AA;
border-color: #20B2AA;
color: #FFFFFF;
}
}
.el-button--cyan:focus,
.el-button--cyan:hover {
.el-button--cyan:focus,
.el-button--cyan:hover {
background: #48D1CC;
border-color: #48D1CC;
color: #FFFFFF;
}
}
.el-button--cyan {
.el-button--cyan {
background-color: #20B2AA;
border-color: #20B2AA;
color: #FFFFFF;
}
}
/* text color */
.text-navy {
/* text color */
.text-navy {
color: #1ab394;
}
}
.text-primary {
.text-primary {
color: inherit;
}
}
.text-success {
.text-success {
color: #1c84c6;
}
}
.text-info {
.text-info {
color: #23c6c8;
}
}
.text-warning {
.text-warning {
color: #f8ac59;
}
}
.text-danger {
.text-danger {
color: #ed5565;
}
}
.text-muted {
.text-muted {
color: #888888;
}
}
/* image */
.img-circle {
/* image */
.img-circle {
border-radius: 50%;
}
}
.img-lg {
.img-lg {
width: 120px;
height: 120px;
}
}
.avatar-upload-preview {
.avatar-upload-preview {
position: absolute;
top: 50%;
transform: translate(50%, -50%);
......@@ -224,16 +242,23 @@
border-radius: 50%;
box-shadow: 0 0 4px #ccc;
overflow: hidden;
}
}
/* 拖拽列样式 */
.sortable-ghost{
/* 拖拽列样式 */
.sortable-ghost {
opacity: .8;
color: #fff!important;
background: #42b983!important;
}
color: #fff !important;
background: #42b983 !important;
}
.top-right-btn {
.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/views/bigWindow/index.vue
View file @ 9660d88c
<!--
* @Author: your name
* @Date: 2022-01-11 13:44:17
* @LastEditTime: 2022-08-24 11:23:42
* @LastEditTime: 2022-08-24 13:43:01
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/views/Home.vue
......@@ -739,13 +739,12 @@ export default {
.typelist-divZ {
width: 400px;
// height: 30px;
z-index: 9999;
z-index: 9998;
position: fixed;
top: 85px;
left: 50%;
margin-left: -200px;
.list {
z-index: 9999;
float: left;
margin-left: 15px;
color: #fff;
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCardZ.vue 0 → 100644
View file @ 9660d88c
<!--
* @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 @ 9660d88c
<!--
* @Author: your name
* @Date: 2022-03-29 09:41:23
* @LastEditTime: 2022-03-29 11:08:25
* @LastEditors: Please set LastEditors
* @LastEditTime: 2022-08-25 17:06:40
* @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/Filter.vue
-->
......@@ -14,7 +14,7 @@
<span
class="text"
:class="{
active: deviceTypeArr.length == filterList.length - 1
active: deviceTypeArr.length == filterList.length - 1,
}"
@click="fliterTypeChange(item)"
>{{ item.value }}
......@@ -83,6 +83,11 @@ export default {
.fliter-vue {
display: flex;
}
@media (max-width: 1100px) {
.filter {
margin-right: 20px !important;
}
}
.filter {
margin-right: 30px;
margin-top: 5px;
......@@ -112,7 +117,7 @@ export default {
font-size: 10px;
position: absolute;
left: -12px;
color: rgba(0, 0, 0, .5);
color: rgba(0, 0, 0, 0.5);
}
}
&.active {
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/TopCard.vue
View file @ 9660d88c
<!--
* @Author: your name
* @Date: 2022-03-25 13:46:23
* @LastEditTime: 2022-04-28 15:59:44
* @LastEditors: Please set LastEditors
* @LastEditTime: 2022-08-25 15:32: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/monitorData/component/charsData.vue
-->
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/TopCardZ.vue 0 → 100644
View file @ 9660d88c
<!--
* @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 @ 9660d88c
<!--
* @Author: your name
* @Date: 2022-03-25 13:46:23
* @LastEditTime: 2022-03-28 15:05:04
* @LastEditors: Please set LastEditors
* @LastEditTime: 2022-08-25 17:02:07
* @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="chars-data">
<TopCard :cardList="cardList"/>
<CzCard/>
<TopCard v-if="windowInnerWidth>1100" :cardList="cardList"/>
<TopCardZ v-else :cardList="cardList"/>
<CzCard v-if="windowInnerWidth>1100" />
<CzCardZ v-else />
<Cg/>
<Fmj/>
<Tyx/>
......@@ -18,7 +20,9 @@
<script>
import TopCard from "./TopCard";
import TopCardZ from "./TopCardZ";
import CzCard from "./CzCard";
import CzCardZ from "./CzCardZ";
import Cg from "./Cg";
import Fmj from "./Fmj";
import Tyx from "./Tyx";
......@@ -26,7 +30,9 @@ export default {
name: "charsData",
components: {
TopCard,
TopCardZ,
CzCard,
CzCardZ,
Cg,
Fmj,
Tyx
......@@ -39,8 +45,12 @@ export default {
{ deviceName: "探测器", count: 1238 },
],
deviceIconList: ["ylb", "llj", "tcq"],
windowInnerWidth:0,
};
},
created() {
this.windowInnerWidth = window.innerWidth;
},
};
</script>
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/index.vue
View file @ 9660d88c
<!--
* @Author: your name
* @Date: 2022-03-08 17:28:57
* @LastEditTime: 2022-03-28 17:20:55
* @LastEditors: Please set LastEditors
* @LastEditTime: 2022-08-25 15:29:31
* @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/index.vue
-->
......@@ -37,7 +37,7 @@ export default {
},
computed: {
currentTabComponent() {
return this.isCom == 0 ? tabledata : charsData;
return this.isCom === 0 ? tabledata : charsData;
},
},
methods: {
......
gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/LeftZ.vue 0 → 100644
View file @ 9660d88c
<!--
* @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 @ 9660d88c
<!--
* @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 @ 9660d88c
<!--
* @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 @ 9660d88c
<!--
* @Author: your name
* @Date: 2022-04-11 14:11:04
* @LastEditTime: 2022-04-14 10:45:52
* @LastEditors: Please set LastEditors
* @LastEditTime: 2022-08-25 15:24:33
* @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/index.vue
-->
......@@ -11,18 +11,22 @@
<div class="wrapper flex-h">
<div class="top flex">
<div class="left">
<Left />
<Left v-if="windowInnerWidth > 1100" />
<LeftZ v-else />
</div>
<div class="middle">
<Middle />
<div class="middle" :class="{ z: windowInnerWidth < 1100 }">
<Middle v-if="windowInnerWidth > 1100" />
<MiddleZ v-else />
</div>
<div class="right">
<Right />
<div class="right" :class="{ z: windowInnerWidth < 1100 }">
<Right v-if="windowInnerWidth > 1100" />
<RightZ v-else />
</div>
</div>
<div class="middle"></div>
<div class="bottom">
<MapBottom/>
<MapBottom v-if="windowInnerWidth > 1100" />
<MapBottomZ v-else />
</div>
</div>
</div>
......@@ -30,24 +34,33 @@
<script>
import Left from "./components/Left";
import LeftZ from "./components/LeftZ";
import Middle from "./components/Middle";
import MiddleZ from "./components/MiddleZ";
import Right from "./components/Right";
import RightZ from "./components/RightZ";
import MapBottom from "./components/MapBottom";
import MapBottomZ from "./components/MapBottomZ";
export default {
components: {
Left,
LeftZ,
Middle,
MiddleZ,
Right,
MapBottom
RightZ,
MapBottom,
MapBottomZ
},
data() {
return {
windowInnerWidth: 0,
};
},
mounted(){
}
created() {
this.windowInnerWidth = window.innerWidth;
},
mounted() {},
};
</script>
......@@ -72,14 +85,24 @@ export default {
.left {
width: 36.5%;
padding: 15px 24px 19px;
overflow: hidden;
}
.middle {
width: 35.3%;
padding: 15px 80px 19px 71px;
// padding: 15px 24px 19px;
overflow: hidden;
&.z {
padding: 15px 24px 19px;
}
}
.right {
width: 25.2%;
padding: 15px 29px;
overflow: hidden;
&.z {
padding: 15px 10px;
}
}
> div {
// box-shadow: 2px 0px 13px 1px rgba(0, 0, 0, 0.1);
......@@ -87,15 +110,20 @@ export default {
border-radius: 3px;
}
}
>.middle {
> .middle {
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;
}
.bottom {
flex: 1;
background-color: red;
}
> div {
// 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