Skip to content

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

左右写完了

parent d655baac
Hide whitespace changes
Inline Side-by-side
Showing with 1586 additions and 14 deletions
gassafetyprogress-web/src/assets/styles/index.scss
View file @ c1e3f679
...@@ -203,7 +203,7 @@ aside { ...@@ -203,7 +203,7 @@ aside {
} }
//终极flex布局 //终极flex布局
.all-flex, .all-flex,
all-flex-ar { .all-flex-ar {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
} }
......
gassafetyprogress-web/src/components/allCharsCom/Chars.vue
View file @ c1e3f679
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-04-11 17:13:13 * @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 * @LastEditors: Please set LastEditors
* @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/components/allCharsCom/Chars.vue * @FilePath: /gassafety-progress/gassafetyprogress-web/src/components/allCharsCom/Chars.vue
...@@ -10,10 +10,10 @@ ...@@ -10,10 +10,10 @@
<div class="my-chars"> <div class="my-chars">
<div ref="chars" class="chars"></div> <div ref="chars" class="chars"></div>
<!-- <slot> --> <!-- <slot> -->
<!-- 如果是默认值，就显示这个 --> <!-- 如果是默认值，就显示这个 -->
<div v-if="!options" class="text" :style="{ color: color }"> <div v-if="!options" class="text" :style="{ color: color }">
<span class="num">87</span><span class="fh">%</span> <span class="num">87</span><span class="fh">%</span>
</div> </div>
<!-- </slot> --> <!-- </slot> -->
</div> </div>
</template> </template>
...@@ -71,10 +71,10 @@ export default { ...@@ -71,10 +71,10 @@ export default {
avoidLabelOverlap: false, avoidLabelOverlap: false,
// hoverAnimation: false, // hoverAnimation: false,
label: { label: {
normal: { // normal: {
show: false, show: false,
position: "center", position: "center",
}, // },
}, },
itemStyle: { itemStyle: {
borderRadius: 10, borderRadius: 10,
...@@ -97,15 +97,27 @@ export default { ...@@ -97,15 +97,27 @@ export default {
}, },
mounted() { mounted() {
// if (!this.options) { // if (!this.options) {
this.charsInit(); this.charsInit();
// } // }
}, },
watch: {
options: {
handler: function (val, oldVal) {
console.log("val", val);
this.charsInit();
},
deep: true,
},
},
methods: { methods: {
charsInit() { charsInit() {
this.myChats = this.$echarts.init(this.$refs.chars); if (!this.myChats) {
this.myChats = this.$echarts.init(this.$refs.chars);
}
let options; let options;
// 如果传进来的options就用传进来的，否则就用默认的 // 如果传进来的options就用传进来的，否则就用默认的
if (this.options) { if (this.options!=null) {
options = this.options; options = this.options;
} else { } else {
options = JSON.parse(JSON.stringify(this.defaultOptions)); options = JSON.parse(JSON.stringify(this.defaultOptions));
......
gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/Middle.vue
View file @ c1e3f679
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-04-11 15:07:47 * @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 * @LastEditors: Please set LastEditors
* @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/topChars/left.vue * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/left.vue
...@@ -105,6 +105,7 @@ export default { ...@@ -105,6 +105,7 @@ export default {
const { width } = this.$refs.myChartWidth.getBoundingClientRect(); const { width } = this.$refs.myChartWidth.getBoundingClientRect();
const isLeft = params.labelRect.x < width / 2; const isLeft = params.labelRect.x < width / 2;
const points = params.labelLinePoints; const points = params.labelLinePoints;
console.log("points",points)
// Update the end point. // Update the end point.
points[2][0] = isLeft points[2][0] = isLeft
? params.labelRect.x ? params.labelRect.x
......
gassafetyprogress-web/src/views/statistic/overview/conponents/Left/CharBoxA.vue 0 → 100644
View file @ c1e3f679
<!--
* @Author: your name
* @Date: 2022-04-19 14:38:28
* @LastEditTime: 2022-04-20 15:23:58
* @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;
}
.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 @ c1e3f679
<!--
* @Author: your name
* @Date: 2022-04-19 14:38:28
* @LastEditTime: 2022-04-20 15:24:09
* @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;
}
.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 @ c1e3f679
<!--
* @Author: your name
* @Date: 2022-04-19 10:17:05
* @LastEditTime: 2022-04-19 11:36: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/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;
}
.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 @ c1e3f679
<!--
* @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/index.vue 0 → 100644
View file @ c1e3f679
<!--
* @Author: your name
* @Date: 2022-04-19 09:46:51
* @LastEditTime: 2022-04-19 10:02:17
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/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"></div>
</div>
</template>
<script>
export default {
name: "",
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 @ c1e3f679
<!--
* @Author: your name
* @Date: 2022-04-19 14:38:28
* @LastEditTime: 2022-04-20 14:07: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/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;
}
.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 @ c1e3f679
<!--
* @Author: your name
* @Date: 2022-04-19 14:38:28
* @LastEditTime: 2022-04-20 17:48:51
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/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;
}
.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 @ c1e3f679
<!--
* @Author: your name
* @Date: 2022-04-20 09:01:12
* @LastEditTime: 2022-04-20 09:51: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/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;
}
.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 @ c1e3f679
<!--
* @Author: your name
* @Date: 2022-04-20 09:01:12
* @LastEditTime: 2022-04-20 10:13:28
* @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;
}
.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 @ c1e3f679
<!--
* @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 @ c1e3f679
<!--
* @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