Skip to content

G
gassafety-progress
Commit 91c3b8fc authored by 王晓倩's avatar 王晓倩
Browse files
Options

Merge branch 'master' of ssh://111.61.77.35:15/gengdidi/gassafety-progress

parents de064d7f d3c5d727
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 8071 additions and 14 deletions
gassafetyprogress-web/src/assets/styles/all.scss
View file @ 91c3b8fc
......@@ -740,3 +740,9 @@
text-overflow: ellipsis;
white-space: nowrap;
}
.echarts-tooltip{
background-color: transparent !important;
box-shadow:none !important;
// pointer-events:auto !important;
// top:-30px !important;
}
\ No newline at end of file
gassafetyprogress-web/src/assets/styles/index.scss
View file @ 91c3b8fc
......@@ -203,7 +203,7 @@ aside {
}
//终极flex布局
.all-flex,
all-flex-ar {
.all-flex-ar {
display: flex;
justify-content: space-around;
}
......
gassafetyprogress-web/src/components/allCharsCom/Chars.vue
View file @ 91c3b8fc
<!--
* @Author: your name
* @Date: 2022-04-11 17:13:13
* @LastEditTime: 2022-04-12 11:00:12
* @LastEditTime: 2022-04-20 13:48:45
* @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/allCharsCom/Chars.vue
......@@ -10,10 +10,10 @@
<div class="my-chars">
<div ref="chars" class="chars"></div>
<!-- <slot> -->
<!-- 如果是默认值，就显示这个 -->
<div v-if="!options" class="text" :style="{ color: color }">
<span class="num">87</span><span class="fh">%</span>
</div>
<!-- 如果是默认值，就显示这个 -->
<div v-if="!options" class="text" :style="{ color: color }">
<span class="num">87</span><span class="fh">%</span>
</div>
<!-- </slot> -->
</div>
</template>
......@@ -71,10 +71,10 @@ export default {
avoidLabelOverlap: false,
// hoverAnimation: false,
label: {
normal: {
show: false,
position: "center",
},
// normal: {
show: false,
position: "center",
// },
},
itemStyle: {
borderRadius: 10,
......@@ -97,15 +97,27 @@ export default {
},
mounted() {
// if (!this.options) {
this.charsInit();
this.charsInit();
// }
},
watch: {
options: {
handler: function (val, oldVal) {
console.log("val", val);
this.charsInit();
},
deep: true,
},
},
methods: {
charsInit() {
this.myChats = this.$echarts.init(this.$refs.chars);
if (!this.myChats) {
this.myChats = this.$echarts.init(this.$refs.chars);
}
let options;
// 如果传进来的options就用传进来的，否则就用默认的
if (this.options) {
if (this.options!=null) {
options = this.options;
} else {
options = JSON.parse(JSON.stringify(this.defaultOptions));
......
gassafetyprogress-web/src/utils/echarsMap/pingshan.js 0 → 100644
View file @ 91c3b8fc
This diff is collapsed.
gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/Middle.vue
View file @ 91c3b8fc
<!--
* @Author: your name
* @Date: 2022-04-11 15:07:47
* @LastEditTime: 2022-04-12 15:17:32
* @LastEditTime: 2022-04-20 11:09:34
* @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
......@@ -105,6 +105,7 @@ export default {
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
......
gassafetyprogress-web/src/views/statistic/overview/conponents/Left/CharBoxA.vue 0 → 100644
View file @ 91c3b8fc
<!--
* @Author: your name
* @Date: 2022-04-19 14:38:28
* @LastEditTime: 2022-04-21 17:25:12
* @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/statistic/overview/conponents/Left/CharBoxA.vue
-->
<template>
<div class="chars-box all-flex-h">
<div class="title">隐患处理和事故数量</div>
<div class="btn-wrapper">
<div
v-for="(item, index) in btnArr"
:key="item"
class="left"
:class="{ active: btnV == index }"
@click="btnClick(index)"
>
{{ item }}
</div>
</div>
<div class="num-wrapper">
<div class="left">
<span class="text">隐患总数</span><span class="num">12</span>件
</div>
<div class="right">
<span class="text">已整改</span><span class="num">10</span>件
</div>
</div>
<div class="chars">
<Chars :options="options" />
</div>
</div>
</template>
<script>
import Chars from "@/components/allCharsCom/Chars";
export default {
name: "",
components: {
Chars,
},
data() {
return {
btnArr: ["隐患处置", "事故数量"],
btnV: 0,
options: null,
charData: [
[10, 30, 10, 20, 30, 10, 30, 10, 30, 50, 10, 20],
[10, 20, 30, 40, 50, 10, 20, 30, 40, 50, 10, 20],
],
};
},
mounted() {
this.bottomOptions();
},
methods: {
btnClick(index) {
if (this.btnV == index) return;
this.btnV = index;
if (index === 0) {
this.charData = [
[10, 30, 10, 20, 30, 10, 30, 10, 30, 50, 10, 20],
[10, 20, 30, 40, 50, 10, 20, 30, 40, 50, 10, 20],
];
} else {
this.charData = [
[20, 10, 20, 30, 20, 40, 10, 20, 20, 10, 30, 60],
[20, 30, 10, 20, 30, 20, 10, 30, 40, 40, 20, 20],
];
}
this.bottomOptions();
},
bottomOptions() {
const colors = ["#1890FF", "#FFC736"];
this.options = {
color: colors,
tooltip: {
// trigger: "axis",
// axisPointer: {
// type: "cross",
// },
},
grid: {
top: "40",
left: "3%",
right: "10%",
bottom: "3%",
containLabel: true,
},
toolbox: {},
legend: {
// data: ['Evaporation', 'Temperature'],
// left: 'right'
show: false,
},
xAxis: [
{
type: "category",
axisTick: {
alignWithLabel: true,
},
// prettier-ignore
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
axisLabel: {
formatter: "{value}",
color: "#333",
// textStyle: {
// },
},
},
],
yAxis: [
{
type: "value",
name: "单位 (件)",
position: "left",
nameTextStyle: {
color: "#333",
},
axisLine: {
show: true,
},
axisLabel: {
formatter: "{value}",
// textStyle: {
color: "#333",
// },
},
splitLine: {
lineStyle: {
type: "dashed", //虚线
},
show: true, //隐藏
},
min: 0,
max: 60,
},
],
series: [
{
name: "Evaporation",
type: "bar",
data: this.charData[0],
yAxisIndex: 0,
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[0] },
{ offset: 1, color: "#ffffff" },
]),
},
barWidth: 6,
barGap: "0%",
},
{
name: "Temperature",
type: "bar",
data: this.charData[1],
yAxisIndex: 0,
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[1] },
{ offset: 1, color: "#ffffff" },
]),
},
barWidth: 6,
barGap: "0%",
},
],
};
},
},
};
</script>
<style lang="scss" scoped>
.chars-box {
width: 100%;
height: 100%;
position: relative;
.title {
font-size: 16px;
margin: 22px 0 11px 19px;
font-weight: 600;
}
.btn-wrapper {
display: flex;
font-size: 12px;
justify-content: flex-end;
margin-right: 34px;
margin-bottom: 12px;
> div {
border-radius: 3px 3px 3px 3px;
border: 1px solid #c5c5c5;
padding: 3px 6px;
cursor: pointer;
margin-left: 3px;
&.active {
background-color: #1a91ff;
color: #fff;
border: 1px solid #1a91ff;
}
&:hover {
background: #1a91ffcc;
color: #fff;
border: 1px solid #3291ebcc;
}
}
}
.num-wrapper {
position: absolute;
display: flex;
top: 100px;
right: 50px;
> div {
font-size: 12px;
margin-left: 19px;
display: inline-block;
position: relative;
.text {
margin-right: 10px;
}
.num {
margin-right: 2px;
}
&.left {
&::before {
content: "";
position: absolute;
width: 6px;
height: 6px;
background-color: #1a91ff;
border-radius: 50%;
left: -10px;
top: 50%;
margin-top: -3px;
}
&::after {
}
.num {
color: #1a91ff;
}
}
&.right {
&::before {
content: "";
position: absolute;
width: 6px;
height: 6px;
background-color: #ffcb44;
border-radius: 50%;
left: -10px;
top: 50%;
margin-top: -3px;
}
.num {
color: #ffcb44;
}
}
}
}
.chars {
flex: 1;
// background-color: red;
}
}
</style>
gassafetyprogress-web/src/views/statistic/overview/conponents/Left/CharBoxB.vue 0 → 100644
View file @ 91c3b8fc
<!--
* @Author: your name
* @Date: 2022-04-19 14:38:28
* @LastEditTime: 2022-04-21 17:24:56
* @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/statistic/overview/conponents/Left/CharBoxA.vue
-->
<template>
<div class="chars-box all-flex-h">
<div class="title">燃气事故排名</div>
<div class="btn-wrapper">
<div
v-for="(item, index) in btnArr"
:key="item"
class="left"
:class="{ active: btnV == index }"
@click="btnClick(index)"
>
{{ item }}
</div>
</div>
<div class="num-wrapper" v-if="false">
<div class="left">
<span class="text">隐患总数</span><span class="num">12</span>件
</div>
<div class="right">
<span class="text">已整改</span><span class="num">10</span>件
</div>
</div>
<div class="chars">
<Chars :options="options" />
</div>
</div>
</template>
<script>
import Chars from "@/components/allCharsCom/Chars";
export default {
name: "",
components: {
Chars,
},
data() {
return {
btnArr: ["隐患处置", "事故数量"],
btnV: 0,
options: null,
charData: [[50, 40, 20, 40, 10, 10, 30, 10, 30, 50]],
};
},
mounted() {
this.bottomOptions();
},
methods: {
btnClick(index) {
if (this.btnV == index) return;
this.btnV = index;
if (index === 0) {
this.charData = [[50, 40, 20, 40, 10, 10, 30, 10, 30, 50]];
} else {
this.charData = [[20, 10, 40, 30, 20, 20, 20, 10, 20, 10]];
}
this.bottomOptions();
},
bottomOptions() {
const colors = ["#1890FF"];
this.options = {
color: colors,
tooltip: {
// trigger: "axis",
// axisPointer: {
// type: "cross",
// },
},
grid: {
top: "30",
left: "3%",
right: "10%",
bottom: "3%",
containLabel: true,
},
toolbox: {},
legend: {
// data: ['Evaporation', 'Temperature'],
// left: 'right'
show: false,
},
xAxis: [
{
type: "category",
axisTick: {
alignWithLabel: true,
},
axisLabel: {
show: true, // 是否显示刻度标签，默认显示
interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
rotate: 30, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
inside: false, // 刻度标签是否朝内，默认朝外
margin: 6, // 刻度标签与轴线之间的距离
// formatter: "{value} Day", // 刻度标签的内容格式器
// textStyle: {
color: "#333",
// },
},
// prettier-ignore
data: ['营里乡', '下槐镇', '宅北乡', '合河口乡', '蛟潭庄镇', '孟家庄镇', '苏家庄乡', '东王坡乡', '上观音堂乡', '杨家桥乡'],
},
],
yAxis: [
{
type: "value",
name: "单位 (件)",
position: "left",
alignTicks: true,
axisLine: {
show: true,
},
splitLine: {
lineStyle: {
type: "dashed", //虚线
},
show: true, //隐藏
},
nameTextStyle: {
color: "#333",
},
axisLabel: {
formatter: "{value}",
// textStyle: {
color: "#333",
// },
},
min: 0,
max: 60,
},
],
series: [
{
name: "Evaporation",
type: "bar",
data: this.charData[0],
yAxisIndex: 0,
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[0] },
{ offset: 1, color: "#ffffff" },
]),
},
barWidth: 10,
barGap: "0%",
},
],
};
},
},
};
</script>
<style lang="scss" scoped>
.chars-box {
width: 100%;
height: 100%;
position: relative;
.title {
font-size: 16px;
margin: 22px 0 11px 19px;
font-weight: 600;
}
.btn-wrapper {
display: flex;
font-size: 12px;
justify-content: flex-end;
margin-right: 34px;
margin-bottom: 12px;
> div {
border-radius: 3px 3px 3px 3px;
border: 1px solid #c5c5c5;
padding: 3px 6px;
cursor: pointer;
margin-left: 3px;
&.active {
background-color: #1a91ff;
color: #fff;
border: 1px solid #1a91ff;
}
&:hover {
background: #1a91ffcc;
color: #fff;
border: 1px solid #3291ebcc;
}
}
}
// .num-wrapper {
// position: absolute;
// display: flex;
// top: 100px;
// right: 50px;
// > div {
// font-size: 12px;
// margin-left: 19px;
// display: inline-block;
// position: relative;
// .text {
// margin-right: 10px;
// }
// .num {
// margin-right: 2px;
// }
// &.left {
// &::before {
// content: "";
// position: absolute;
// width: 6px;
// height: 6px;
// background-color: #1a91ff;
// border-radius: 50%;
// left: -10px;
// top: 50%;
// margin-top: -3px;
// }
// &::after {
// }
// .num {
// color: #1a91ff;
// }
// }
// &.right {
// &::before {
// content: "";
// position: absolute;
// width: 6px;
// height: 6px;
// background-color: #ffcb44;
// border-radius: 50%;
// left: -10px;
// top: 50%;
// margin-top: -3px;
// }
// .num {
// color: #ffcb44;
// }
// }
// }
// }
.chars {
flex: 1;
// background-color: red;
}
}
</style>
gassafetyprogress-web/src/views/statistic/overview/conponents/Left/Scound.vue 0 → 100644
View file @ 91c3b8fc
<!--
* @Author: your name
* @Date: 2022-04-19 10:17:05
* @LastEditTime: 2022-04-21 17:24: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/statistic/overview/conponents/Left/Scound.vue
-->
<template>
<div class="scound-wrapper">
<div class="scound-title">{{ title }}</div>
<div class="contant flex">
<div class="left ">
<div class="top ">{{ left.text }}</div>
<div class="bottom">
<div class="number" v-for="item in left.numArr" :key="item">
{{ item }}
</div>
<div class="unit">{{ left.unit }}</div>
</div>
</div>
<div class="right">
<div class="top">{{ right.text }}</div>
<div class="bottom">
<div class="number" v-for="item in right.numArr" :key="item">
{{ item }}
</div>
<div class="unit">{{ right.unit }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: "title",
},
left: {
type: Object,
default: () => ({
text: "驻村安全员",
numArr: [1, 2],
unit: "名",
}),
},
right: {
type: Object,
default: () => ({
text: "燃气协管员",
numArr: [1, 9],
unit: "名",
}),
},
},
name: "",
data() {
return {};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.scound-wrapper {
box-sizing: border-box;
padding-top: 10px;
.scound-title {
font-size: 16px;
padding-left: 19px;
margin-bottom: 10px;
font-weight: 600;
}
.contant {
> div {
font-size: 14px;
width: 100px;
&.left{
margin-left:20%;
}
&.right{
margin-right: 20%;
}
> div {
&.top {
margin-bottom: 10px;
}
&.bottom {
display: flex;
.number {
font-size: 18px;
color: #1a91ff;
padding: 0px 4px;
border: 1px solid #ededed;
border-radius: 2px;
margin-right: 2px;
}
.unit {
font-size: 12px;
padding-top: 6px;
}
}
}
}
}
}
</style>
gassafetyprogress-web/src/views/statistic/overview/conponents/Left/index.vue 0 → 100644
View file @ 91c3b8fc
<!--
* @Author: your name
* @Date: 2022-04-18 18:00:22
* @LastEditTime: 2022-04-19 17:20:50
* @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/statistic/overview/conponents/Left.vue
-->
<template>
<div class="all-flex-h left-component">
<div class="one">
<Scound title="农村两员" />
</div>
<div class="two">
<Scound title="双代设备" :left="two.left" :right="two.right" />
</div>
<div class="three">
<CharBoxA/>
</div>
<div class="four">
<CharBoxB/>
</div>
</div>
</template>
<script>
import Scound from "./Scound";
import CharBoxA from "./CharBoxA";
import CharBoxB from "./CharBoxB";
export default {
name: "",
components: {
Scound,
CharBoxA,
CharBoxB
},
data() {
return {
two: {
left: {
text: "电代煤",
numArr: [1,8],
unit: "个",
},
right:{
text: "气代煤",
numArr: [1, 6],
unit: "个",
}
},
};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.left-component {
width: 99.8%;
height: 100%;
justify-content: space-between;
> div {
box-shadow: 2px 0px 10px 1px rgba(0, 0, 0, 0.1);
border-radius: 3px;
margin-bottom: 3px;
&.one,
&.two {
height: 12.2%;
min-height:104px;
// background-color: yellow;
}
&.three,
&.four {
// height: 37.3%;
flex: 1;
// background-color: blue;
}
}
}
</style>
gassafetyprogress-web/src/views/statistic/overview/conponents/Middle/CharBoxE.vue 0 → 100644
View file @ 91c3b8fc
<!--
* @Author: your name
* @Date: 2022-04-21 09:47:01
* @LastEditTime: 2022-04-24 09:29:53
* @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/statistic/overview/conponents/Middle/CharBoxE.vue
-->
<template>
<div class="chars-wrapper">
<Chars ref="chars" :options="options" />
</div>
</template>
<script>
import Chars from "@/components/allCharsCom/Chars";
import Infowindow from "./Infowindow";
import { pingshanArr } from "@/utils/echarsMap/pingshan";
import axios from "axios";
const data = [
{
name: "古月镇",
index: 0,
a: 1,
b: 1,
c: 1,
d: 1,
e: 1,
f: 1,
g: "1/2",
h: "1/2",
i: "1/2",
},
{
name: "西柏坡镇",
index: 1,
a: 2,
b: 2,
c: 2,
d: 2,
e: 2,
f: 2,
g: "2/3",
h: "2/3",
i: "2/3",
},
{
name: "温塘镇",
index: 2,
a: 3,
b: 3,
c: 3,
d: 3,
e: 3,
f: 3,
g: "3/4",
h: "3/4",
i: "3/4",
},
{
name: "平山镇",
index: 3,
a: 4,
b: 4,
c: 4,
d: 4,
e: 4,
f: 4,
g: "4/5",
h: "4/5",
i: "4/5",
},
{
name: "东回舍镇",
index: 4,
a: 5,
b: 5,
c: 5,
d: 5,
e: 5,
f: 5,
g: "5/6",
h: "5/6",
i: "5/6",
},
{
name: "西大吴乡",
index: 5,
a: 6,
b: 6,
c: 6,
d: 6,
e: 6,
f: 6,
g: "6/7",
h: "6/7",
i: "6/7",
},
{
name: "岗南镇",
index: 6,
a: 7,
b: 7,
c: 7,
d: 7,
e: 7,
f: 7,
g: "7/8",
h: "7/8",
i: "7/8",
},
{
name: "杨家桥乡",
index: 7,
a: 8,
b: 8,
c: 8,
d: 8,
e: 8,
f: 8,
g: "8/9",
h: "8/9",
i: "8/9",
},
{
name: "下口镇",
index: 8,
a: 9,
b: 9,
c: 9,
d: 9,
e: 9,
f: 9,
g: "9/10",
h: "9/10",
i: "9/10",
},
{
name: "北冶乡",
index: 9,
a: 10,
b: 10,
c: 10,
d: 10,
e: 10,
f: 10,
g: "10/11",
h: "10/11",
i: "10/11",
},
{
name: "小觉镇",
index: 10,
a: 11,
b: 11,
c: 11,
d: 11,
e: 11,
f: 11,
g: "11/12",
h: "11/12",
i: "11/12",
},
{
name: "下槐镇",
index: 11,
a: 12,
b: 12,
c: 12,
d: 12,
e: 12,
f: 12,
g: "12/13",
h: "12/13",
i: "12/13",
},
{
name: "上三汲乡",
index: 12,
a: 13,
b: 13,
c: 13,
d: 13,
e: 13,
f: 13,
g: "13/14",
h: "13/14",
i: "13/14",
},
{
name: "两河乡",
index: 13,
a: 14,
b: 14,
c: 14,
d: 14,
e: 14,
f: 14,
g: "14/15",
h: "14/15",
i: "14/15",
},
{
name: "南甸镇",
index: 14,
a: 15,
b: 15,
c: 15,
d: 15,
e: 15,
f: 15,
g: "15/16",
h: "15/16",
i: "15/16",
},
{
name: "东王坡乡",
index: 15,
a: 16,
b: 16,
c: 16,
d: 16,
e: 16,
f: 16,
g: "16/17",
h: "16/17",
i: "16/17",
},
{
name: "苏家庄乡",
index: 16,
a: 17,
b: 17,
c: 17,
d: 17,
e: 17,
f: 17,
g: "17/18",
h: "17/18",
i: "17/18",
},
{
name: "合河口乡",
index: 17,
a: 18,
b: 18,
c: 18,
d: 18,
e: 18,
f: 18,
g: "18/19",
h: "18/19",
i: "18/19",
},
{
name: "蛟潭庄镇",
index: 18,
a: 19,
b: 19,
c: 19,
d: 19,
e: 19,
f: 19,
g: "19/20",
h: "19/20",
i: "19/20",
},
{
name: "上观音堂乡",
index: 19,
a: 20,
b: 20,
c: 20,
d: 20,
e: 20,
f: 20,
g: "20/21",
h: "20/21",
i: "20/21",
},
{
name: "营里乡",
index: 20,
a: 21,
b: 21,
c: 21,
d: 21,
e: 21,
f: 21,
g: "21/22",
h: "21/22",
i: "21/22",
},
{
name: "孟家庄乡",
index: 21,
a: 22,
b: 22,
c: 22,
d: 22,
e: 22,
f: 22,
g: "22/23",
h: "22/23",
i: "22/23",
},
{
name: "宅北乡",
index: 22,
a: 23,
b: 23,
c: 23,
d: 23,
e: 23,
f: 23,
g: "23/24",
h: "23/24",
i: "23/24",
},
];
export default {
name: "",
components: {
Chars,
},
data() {
return {
options: {},
};
},
mounted() {
this.getPath();
this.$refs.chars.myChats.on("mousedown", () => {
// this.closeToolTip();
});
this.$refs.chars.myChats.on("georoam", () => {
// this.closeToolTip();
});
},
methods: {
async getPath() {
// const res = await axios(
// "https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/geo/HK.json"
// );
const geoJson = { features: pingshanArr, type: "FeatureCollection" };
console.log(geoJson);
this.$echarts.registerMap("HK", geoJson);
this.options = {
roam: true,
tooltip: {
trigger: "item",
triggerOn: "click",
enterable: true,
// alwaysShowContent: true,
// transitionDuration:0,
formatter: (p) => {
console.log("p", p);
const dom = this.createDom(p.data, this);
return dom;
},
borderWidth: 0,
padding: 0,
className: "echarts-tooltip",
},
series: [
{
name: "香港18区人口密度",
type: "map",
map: "HK",
label: {
show: true,
color: "#fff",
fontSize: 14,
fontWeight: 700,
},
select: {
// 地图选中区域样式
label: {
// 选中区域的label(文字)样式
color: "#ffffff",
},
itemStyle: {
// 选中区域的默认样式
areaColor: "#EEC25B",
},
},
itemStyle: {
// normal: {
borderWidth: 3, //边际线大小
borderColor: "#ffffff",
//边界线颜色
areaColor: "#1A91FF", //默认区域颜色
// areaShadowColor: "rgba(0, 0, 0, 0.5)",
// areaShadowBlur: 10,
// areaShadowOffsetY:0,
// areaShadowOffsetX:0,
// },
},
emphasis: {
show: true,
itemStyle: {
areaColor: "#EEC25B", //鼠标滑过区域颜色
},
label: {
show: true,
// textStyle: {
color: "#fff",
// },
},
},
data,
// 自定义名称映射
// nameMap: {
// "Central and Western": "中西区",
// Eastern: "东区",
// Islands: "离岛",
// "Kowloon City": "九龙城",
// "Kwai Tsing": "葵青",
// "Kwun Tong": "观塘",
// North: "北区",
// "Sai Kung": "西贡",
// "Sha Tin": "沙田",
// "Sham Shui Po": "深水埗",
// Southern: "南区",
// "Tai Po": "大埔",
// "Tsuen Wan": "荃湾",
// "Tuen Mun": "屯门",
// "Wan Chai": "湾仔",
// "Wong Tai Sin": "黄大仙",
// "Yau Tsim Mong": "油尖旺",
// "Yuen Long": "元朗",
// },
},
],
};
},
createDom(data, parent) {
const Component = this.$Vue.extend(Infowindow);
const com = new Component();
// console.log(com.data=data)
return new Component({
data() {
return { data, parent };
},
}).$mount().$el;
},
closeToolTip() {
this.$refs.chars.myChats.dispatchAction({
type: "hideTip",
});
// const dom = document.getElementsByClassName('tooltip-box')[0];
// const parent =dom.parentElement;
// parent.removeChild(dom);
console.log("关闭");
},
},
};
</script>
<style lang="scss" scoped>
.chars-wrapper {
width: 100%;
height: 100%;
}
</style>
gassafetyprogress-web/src/views/statistic/overview/conponents/Middle/Infowindow.vue 0 → 100644
View file @ 91c3b8fc
<!--
* @Author: your name
* @Date: 2022-04-21 13:50:28
* @LastEditTime: 2022-04-21 16:51:35
* @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/statistic/overview/conponents/Middle/Infowindow.vue
-->
<template>
<div class="tooltip-box all-flex-h" ref="self">
<div class="title">{{ data.name }}详情信息</div>
<!-- <div v-show="true" @click="close" class="close"></div> -->
<div class="bottom-wrapper all-flex-h">
<div class="bottom flex">
<div class="left">驻村安全员</div>
<div class="middle"></div>
<div class="right">{{data.index}}名</div>
</div>
<div class="bottom flex">
<div class="left">燃气协管员</div>
<div class="middle"></div>
<div class="right">{{data.b}}名</div>
</div>
<div class="bottom flex">
<div class="left">气代煤</div>
<div class="middle"></div>
<div class="right">{{data.c}}个</div>
</div>
<div class="bottom flex">
<div class="left">电代煤</div>
<div class="middle"></div>
<div class="right">{{data.d}}个</div>
</div>
<div class="bottom flex">
<div class="left">隐患处置</div>
<div class="middle"></div>
<div class="right">{{data.e}}件</div>
</div>
<div class="bottom flex">
<div class="left">事故数量</div>
<div class="middle"></div>
<div class="right">{{data.f}}件</div>
</div>
<div class="bottom flex">
<div class="left">城镇用户/加装率</div>
<div class="middle"></div>
<div class="right">{{data.g}}%</div>
</div>
<div class="bottom flex">
<div class="left">农村用户/加装率</div>
<div class="middle"></div>
<div class="right">{{data.h}}%</div>
</div>
<div class="bottom flex">
<div class="left">单位用户/加装率</div>
<div class="middle"></div>
<div class="right">{{data.i}}%</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "",
data() {
return {
data: null,
};
},
methods: {
close() {
const dom = document.getElementsByClassName("tooltip-box")[0];
const parent = dom.parentElement;
parent.removeChild(dom);
this.parent.closeToolTip();
},
},
mounted(){
console.log("data",this.data)
}
};
</script>
<style lang="scss" scoped>
.tooltip-box {
width: 213px;
height: 255px;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
box-shadow: inset 0px 0px 7px 1px rgba(255, 255, 255, 0.6);
border-radius: 3px;
font-size: 12px;
position: relative;
pointer-events: auto !important;
justify-content: space-between;
.title {
background-color: rgba(0, 0, 0, 0.6);
border-radius: 3px 0 3px 0;
padding: 4px 14px;
}
.close {
position: absolute;
top: 8px;
right: 15px;
font-size: 14px;
width: 10px;
height: 10px;
cursor: pointer;
opacity: 1;
&:hover {
opacity: 0.8;
}
&:before,
&:after {
position: absolute;
right: 5px;
top: 0px;
content: "";
height: 12px;
width: 1px;
background-color: #fff;
}
&:before {
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
}
.bottom-wrapper {
justify-content: space-between;
flex: 1;
box-sizing: border-box;
padding: 5px 0;
.bottom {
flex: 1;
padding: 0 14px;
font-size: 12px;
.left {
}
.right {
color: #eec25b;
}
.middle {
margin: 10px 2px;
flex: 1;
height: 1px;
background: repeating-linear-gradient(
90deg,
transparent 0px,
#fff 10px,
#fff 10px,
#fff 10px
);
}
}
}
}
</style>
gassafetyprogress-web/src/views/statistic/overview/conponents/Middle/index.vue 0 → 100644
View file @ 91c3b8fc
<!--
* @Author: your name
* @Date: 2022-04-19 09:46:51
* @LastEditTime: 2022-04-21 13:54:34
* @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/statistic/overview/conponents/Middle.vue
-->
<template>
<div class="middle-components all-flex-h">
<div class="top">
<img src="@/assets/image-overview/titlepic.jpg" alt="" />
</div>
<div class="bottom">
<CharsBoxE/>
</div>
</div>
</template>
<script>
import CharsBoxE from "./CharBoxE";
export default {
name: "",
components: {
CharsBoxE,
},
data() {
return {};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.middle-components {
height: 100%;
> div {
&.top {
padding: 15px 0;
text-align: center;
}
&.bottom {
flex: 1;
box-shadow: 2px 0px 10px 1px rgba(0, 0, 0, 0.1);
}
}
}
</style>
gassafetyprogress-web/src/views/statistic/overview/conponents/Right/CharBoxC.vue 0 → 100644
View file @ 91c3b8fc
<!--
* @Author: your name
* @Date: 2022-04-19 14:38:28
* @LastEditTime: 2022-04-21 17:25:10
* @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/statistic/overview/conponents/Left/CharBoxA.vue
-->
<template>
<div class="chars-box all-flex-h">
<div class="title">燃气事故排名</div>
<div class="btn-wrapper">
<div
v-for="(item, index) in btnArr"
:key="item"
class="left"
:class="{ active: btnV == index }"
@click="btnClick(index)"
>
{{ item }}
</div>
</div>
<div class="num-wrapper" v-if="false">
<div class="left">
<span class="text">隐患总数</span><span class="num">12</span>件
</div>
<div class="right">
<span class="text">已整改</span><span class="num">10</span>件
</div>
</div>
<div class="chars" ref="myChartWidth">
<!-- <Chars :options="bottomOptions()" /> -->
<Chars :options="options" />
</div>
</div>
</template>
<script>
import Chars from "@/components/allCharsCom/Chars";
export default {
name: "",
components: {
Chars,
},
data() {
return {
btnArr: ["事故原因", "事故类型", "隐患来源"],
btnV: 0,
options: {},
bottomData: [
{ name: "裂缝", value: 20, color: "#604AFF" },
{ name: "管道称重", value: 30, color: "#FFC337" },
{ name: "其他", value: 40, color: "#86FF5B" },
{ name: "腐蚀", value: 99, color: "#03C4F1" },
{ name: "漏气", value: 18, color: "#1F8DF3" },
],
};
},
mounted() {
this.bottomOptions();
},
methods: {
btnClick(index) {
this.btnV = index;
if (index === 2) {
this.bottomData = [
{ name: "裂缝", value: 10, color: "#604AFF" },
{ name: "管道称重", value: 20, color: "#FFC337" },
{ name: "其他", value: 100, color: "#86FF5B" },
{ name: "腐蚀", value: 99, color: "#03C4F1" },
{ name: "漏气", value: 18, color: "#1F8DF3" },
];
} else if (index === 1) {
this.bottomData = [
{ name: "裂缝", value: 40, color: "#604AFF" },
{ name: "管道称重", value: 30, color: "#FFC337" },
{ name: "其他", value: 20, color: "#86FF5B" },
{ name: "腐蚀", value: 19, color: "#03C4F1" },
{ name: "漏气", value: 50, color: "#1F8DF3" },
];
} else {
this.bottomData = [
{ name: "裂缝", value: 20, color: "#604AFF" },
{ name: "管道称重", value: 30, color: "#FFC337" },
{ name: "其他", value: 40, color: "#86FF5B" },
{ name: "腐蚀", value: 99, color: "#03C4F1" },
{ name: "漏气", value: 18, color: "#1F8DF3" },
];
}
this.bottomOptions();
},
bottomOptions() {
const rich = {};
this.bottomData
.map((item) => ({
fontsize: 12,
color: item.color,
}))
.forEach((item, index) => {
rich[`dataIndex${index}`] = item;
});
this.options = {
series: {
type: "pie",
radius: ["68%", "80%"],
left: "20",
right: "20",
color: this.bottomData.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}}`;
},
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich,
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80,
},
data: this.bottomData,
},
};
},
},
};
</script>
<style lang="scss" scoped>
.chars-box {
width: 100%;
height: 100%;
position: relative;
.title {
font-size: 16px;
margin: 22px 0 11px 19px;
font-weight: 600;
}
.btn-wrapper {
display: flex;
font-size: 12px;
justify-content: flex-end;
margin-right: 34px;
margin-bottom: 12px;
> div {
border-radius: 3px 3px 3px 3px;
border: 1px solid #c5c5c5;
padding: 3px 6px;
cursor: pointer;
margin-left: 3px;
&.active {
background-color: #1a91ff;
color: #fff;
border: 1px solid #1a91ff;
}
&:hover {
background: #1a91ffcc;
color: #fff;
border: 1px solid #3291ebcc;
}
}
}
// .num-wrapper {
// position: absolute;
// display: flex;
// top: 100px;
// right: 50px;
// > div {
// font-size: 12px;
// margin-left: 19px;
// display: inline-block;
// position: relative;
// .text {
// margin-right: 10px;
// }
// .num {
// margin-right: 2px;
// }
// &.left {
// &::before {
// content: "";
// position: absolute;
// width: 6px;
// height: 6px;
// background-color: #1a91ff;
// border-radius: 50%;
// left: -10px;
// top: 50%;
// margin-top: -3px;
// }
// &::after {
// }
// .num {
// color: #1a91ff;
// }
// }
// &.right {
// &::before {
// content: "";
// position: absolute;
// width: 6px;
// height: 6px;
// background-color: #ffcb44;
// border-radius: 50%;
// left: -10px;
// top: 50%;
// margin-top: -3px;
// }
// .num {
// color: #ffcb44;
// }
// }
// }
// }
.chars {
flex: 1;
// background-color: red;
}
}
</style>
gassafetyprogress-web/src/views/statistic/overview/conponents/Right/CharBoxD.vue 0 → 100644
View file @ 91c3b8fc
<!--
* @Author: your name
* @Date: 2022-04-19 14:38:28
* @LastEditTime: 2022-04-21 17:25:21
* @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/statistic/overview/conponents/Left/CharBoxA.vue
-->
<template>
<div class="chars-box all-flex-h">
<div class="title">隐患处理和事故数量</div>
<div class="btn-wrapper">
<!-- <div @click="btnClick(0)">燃气事故</div> -->
<div
v-for="(item, index) in btnArr"
:key="item"
:style="{
background: activeArr.indexOf(index) >= 0 ? colors[index] : '',
borderColor: activeArr.indexOf(index) >= 0 ? colors[index] : '',
color: activeArr.indexOf(index) >= 0 ? '#fff' : '',
}"
:class="[active(index)]"
@click="btnClick(index)"
>
{{ item }}
</div>
</div>
<div class="chars">
<Chars ref="chars" :options="options" />
</div>
</div>
</template>
<script>
import Chars from "@/components/allCharsCom/Chars";
export default {
name: "",
components: {
Chars,
},
data() {
return {
colors: [],
btnArr: ["燃气数量", "隐患事故"],
activeArr: [0, 1],
btnV: 0,
options: null,
charData: [
[1, 2, 3, 4, 5],
[10, 30, 30, 20, 30],
],
};
},
mounted() {
this.bottomOptions();
},
methods: {
active(index){
return "active"+index
},
btnClick(index) {
const ind = this.activeArr.indexOf(index);
this.$refs.chars.myChats.dispatchAction({
type: "legendToggleSelect",
// 图例名称
name: this.btnArr[index],
});
if (ind >= 0) {
this.activeArr.splice(ind, 1);
} else {
this.activeArr.push(index);
}
this.bottomOptions();
},
bottomOptions() {
const colors = ["#1890FF", "#FFC736"];
this.colors = colors;
this.options = {
color: colors,
tooltip: {
show:false,
// trigger: "axis",
// axisPointer: {
// type: "cross",
// },
},
grid: {
top: "30",
left: "3%",
right: "10%",
bottom: "3%",
containLabel: true,
},
toolbox: {},
legend: {
// data: ['Evaporation', 'Temperature'],
// left: 'right'
show: false,
// right: 30,
// top: 0,
// data: [
// {
// name: this.btnArr[0],
// textStyle: {
// backgroundColor: colors[0],
// },
// },
// {
// name: this.btnArr[1],
// textStyle: {
// backgroundColor: colors[1],
// },
// },
// ],
// formatter: function (name) {
// return name;
// },
// icon: "none",
// itemGap: -20,
// textStyle: {
// padding: [6, 8],
// fontSize: 12,
// borderRadius: 3,
// color: "#fff",
// },
// inactiveColor: "#ccc",
// inactiveBackground: "#ccc",
// selected: {
// // 选中'系列1'
// 燃气数量: this.activeArr.indexOf(0) >= 0,
// // 不选中'系列2'
// 隐患事故: this.activeArr.indexOf(1) >= 0,
// },
// selectorLabe:{
// color:"red",
// }
},
xAxis: [
{
type: "category",
axisTick: {
alignWithLabel: true,
},
// prettier-ignore
data: ['2017', '2018', '2019', '2020', '2021'],
axisLabel: {
formatter: "{value}",
color: "#333",
// textStyle: {
// },
},
},
],
yAxis: [
{
type: "value",
name: "单位 (起)",
position: "left",
nameTextStyle: {
color: "#333",
},
splitLine: {
lineStyle: {
type: "dashed", //虚线
},
show: true, //隐藏
},
axisLine: {
show: true,
lineStyle: {
color: colors[0],
},
},
axisLabel: {
formatter: "{value}",
// textStyle: {
color: "#333",
// },
},
min: 0,
max: 10,
},
{
type: "value",
name: "单位 (个)",
position: "right",
nameTextStyle: {
color: "#333",
},
splitLine: {
lineStyle: {
type: "dashed", //虚线
},
show: true, //隐藏
},
axisLine: {
show: true,
lineStyle: {
color: colors[1],
},
},
axisLabel: {
formatter: "{value}",
// textStyle: {
color: "#333",
// },
},
min: 0,
max: 50,
},
],
series: [
{
name: this.btnArr[0],
type: "bar",
data: this.charData[0],
yAxisIndex: 0,
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[0] },
{ offset: 1, color: "#ffffff" },
]),
},
barWidth: 6,
barGap: "0%",
},
{
name: this.btnArr[1],
type: "line",
data: this.charData[1],
yAxisIndex: 1,
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[1] },
{ offset: 1, color: "#ffffff" },
]),
},
barWidth: 6,
barGap: "0%",
},
],
};
},
},
};
</script>
<style lang="scss" scoped>
// "#1890FF", "#FFC736
.chars-box {
width: 100%;
height: 100%;
position: relative;
.title {
font-size: 16px;
margin: 22px 0 11px 19px;
font-weight: 600;
}
.btn-wrapper {
display: flex;
font-size: 12px;
justify-content: flex-end;
margin-right: 34px;
margin-bottom: 12px;
> div {
border-radius: 3px 3px 3px 3px;
border: 1px solid #c5c5c5;
padding: 3px 6px;
margin-left: 3px;
// &.left {
// background-color: red;
// }
cursor: pointer;
&.active0:hover{
background:#4e9de7 !important;
border-color:#4e9de7;
color:#fff
}
&.active1:hover{
background:#f0cb6d !important;
border-color:#f0cb6d;
color:#fff
}
}
}
.chars {
flex: 1;
// background-color: red;
}
}
</style>
gassafetyprogress-web/src/views/statistic/overview/conponents/Right/One.vue 0 → 100644
View file @ 91c3b8fc
<!--
* @Author: your name
* @Date: 2022-04-20 09:01:12
* @LastEditTime: 2022-04-21 17:25:32
* @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/statistic/overview/conponents/Right/One.vue
-->
<template>
<div class="one-wrapper all-flex-h">
<div class="top-title">重点工程项目</div>
<div class="middle flex">
<div class="left">
<div>新建/改扩建<span class="text">场站数量</span>、投资额</div>
</div>
<div class="right">
<div>新建/改扩建<span class="text">管道长度</span>、投资额</div>
</div>
</div>
<div class="bottom flex">
<div class="left">
<div><span class="text">180</span> 个、<span>125</span>万元</div>
</div>
<div class="right">
<div><span class="text">2002</span> 米、<span>100</span>万元</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "",
data() {
return {};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.one-wrapper {
height: 100%;
width: 100%;
box-sizing: border-box;
padding-top: 10px;
padding-bottom:5px;
.top-title {
font-size: 16px;
padding-left: 19px;
margin-bottom: 10px;
font-weight: 600;
}
.middle,.bottom {
> div {
flex: 1;
display: flex;
justify-content: center;
font-size: 13px;
.text {
color: #1a91ff;
font-size: 14px;
}
}
}
.bottom{
display: flex;
align-items: center;
flex:1;
>div{
.text{
font-size: 18px;
}
}
}
}
</style>
gassafetyprogress-web/src/views/statistic/overview/conponents/Right/Two.vue 0 → 100644
View file @ 91c3b8fc
<!--
* @Author: your name
* @Date: 2022-04-20 09:01:12
* @LastEditTime: 2022-04-21 17:25:36
* @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/statistic/overview/conponents/Right/One.vue
-->
<template>
<div class="one-wrapper all-flex-h">
<div class="top-title">燃气安全装置加装情况</div>
<div class="middle">
<div class="wrapper flex">
<div class="left">城镇用户/加装率</div>
<div class="center">农村用户/加装率</div>
<div class="right">单位用户/加装率</div>
</div>
</div>
<div class="bottom">
<div class="wrapper flex">
<div class="left"><span>81</span>个/<span>20%</span></div>
<div class="center"><span>55</span>个/<span>30%</span></div>
<div class="right"><span>62</span>个/<span>50%</span></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "",
data() {
return {};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.one-wrapper {
height: 100%;
width: 100%;
box-sizing: border-box;
padding-top: 10px;
.top-title {
font-size: 16px;
padding-left: 19px;
margin-bottom: 10px;
font-weight: 600;
}
.middle,
.bottom {
width: 100%;
display: flex;
justify-content: center;
.wrapper {
width: 82%;
background: rgba(24, 144, 255, 0.1);
border-radius: 3px;
height: 28px;
display: flex;
align-items: center;
> div {
flex: 1;
font-size: 13px;
text-align: center;
}
}
}
.middle{
font-size: 16px;
margin-bottom:2px
}
.bottom {
flex:1;
.wrapper {
background: #fff;
}
}
// .bottom {
// display: flex;
// align-items: center;
// flex: 1;
// > div {
// .text {
// font-size: 18px;
// }
// }
// }
}
</style>
gassafetyprogress-web/src/views/statistic/overview/conponents/Right/index.vue 0 → 100644
View file @ 91c3b8fc
<!--
* @Author: your name
* @Date: 2022-04-18 18:00:22
* @LastEditTime: 2022-04-20 14:12: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/statistic/overview/conponents/Left.vue
-->
<template>
<div class="all-flex-h right-component">
<div class="one">
<One />
</div>
<div class="two">
<Two />
</div>
<div class="three">
<CharBoxC />
</div>
<div class="four">
<CharBoxD />
</div>
</div>
</template>
<script>
import One from "./One";
import Two from "./Two";
import CharBoxC from "./CharBoxC";
import CharBoxD from "./CharBoxD";
export default {
name: "",
components: {
One,
Two,
CharBoxC,
CharBoxD,
},
data() {
return {};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.right-component {
width: 99.8%;
height: 100%;
justify-content: space-between;
> div {
box-shadow: 2px 0px 10px 1px rgba(0, 0, 0, 0.1);
border-radius: 3px;
margin-bottom: 3px;
&.one,
&.two {
height: 12.2%;
min-height: 104px;
// background-color: yellow;
}
&.three,
&.four {
// height: 37.3%;
flex: 1;
// background-color: blue;
}
}
}
</style>
gassafetyprogress-web/src/views/statistic/overview/index.vue 0 → 100644
View file @ 91c3b8fc
<!--
* @Author: your name
* @Date: 2022-04-18 17:21:51
* @LastEditTime: 2022-04-19 10:08:56
* @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/statistic/overview/index.vue
-->
<template>
<div class="app-container overview flex">
<div class="left">
<Left />
</div>
<div class="middle"><Middle/></div>
<div class="right"><Right/></div>
</div>
</template>
<script>
import Left from "./conponents/Left";
import Right from "./conponents/Right";
import Middle from "./conponents/Middle";
export default {
components: {
Left,
Right,
Middle
},
};
</script>
<style lang="scss" scoped>
.overview {
width: 100%;
height: calc(100vh - 50px) !important;
> div {
flex:1;
// background-color: red;
height: 100%;
margin-right:3px;
&.middle {
width: 40%;
flex:none;
// background-color: blue;
}
&.right{
margin-right: 0px;
}
}
}
</style>
\ No newline at end of file
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