Skip to content

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

配适统计分析概览1024的样式

parent 5dbe58b3
Expand all Show whitespace changes
Inline Side-by-side
Showing with 837 additions and 152 deletions
gassafetyprogress-web/src/store/modules/app.js
View file @ cca291df
import Cookies from 'js-cookie'
/*
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2022-02-26 22:22:56
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2022-08-25 17:40:03
* @FilePath: /gassafetyprogress-web/src/store/modules/app.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import Cookies from "js-cookie";
const state = {
sidebar: {
opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
withoutAnimation: false
// opened:window.innerWidth<1100?false:( Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true),
opened: Cookies.get("sidebarStatus")
? !!+Cookies.get("sidebarStatus")
: true,
withoutAnimation: false,
},
device: 'desktop',
size: Cookies.get('size') || 'medium'
}
device: "desktop",
size: Cookies.get("size") || "medium",
};
const mutations = {
TOGGLE_SIDEBAR: state => {
state.sidebar.opened = !state.sidebar.opened
state.sidebar.withoutAnimation = false
TOGGLE_SIDEBAR: (state) => {
state.sidebar.opened = !state.sidebar.opened;
// console.log("window.innerWidth",window.innerWidth)
state.sidebar.withoutAnimation = false;
if (state.sidebar.opened) {
Cookies.set('sidebarStatus', 1)
Cookies.set("sidebarStatus", 1);
} else {
Cookies.set('sidebarStatus', 0)
Cookies.set("sidebarStatus", 0);
}
},
CLOSE_SIDEBAR: (state, withoutAnimation) => {
Cookies.set('sidebarStatus', 0)
state.sidebar.opened = false
state.sidebar.withoutAnimation = withoutAnimation
Cookies.set("sidebarStatus", 0);
state.sidebar.opened = false;
state.sidebar.withoutAnimation = withoutAnimation;
},
TOGGLE_DEVICE: (state, device) => {
state.device = device
state.device = device;
},
SET_SIZE: (state, size) => {
state.size = size
Cookies.set('size', size)
}
}
state.size = size;
Cookies.set("size", size);
},
};
const actions = {
toggleSideBar({ commit }) {
commit('TOGGLE_SIDEBAR')
commit("TOGGLE_SIDEBAR");
},
closeSideBar({ commit }, { withoutAnimation }) {
commit('CLOSE_SIDEBAR', withoutAnimation)
commit("CLOSE_SIDEBAR", withoutAnimation);
},
toggleDevice({ commit }, device) {
commit('TOGGLE_DEVICE', device)
commit("TOGGLE_DEVICE", device);
},
setSize({ commit }, size) {
commit('SET_SIZE', size)
}
}
commit("SET_SIZE", size);
},
};
export default {
namespaced: true,
state,
mutations,
actions
}
actions,
};
gassafetyprogress-web/src/views/statistic/overview/conponents/Left/CharBoxAZ.vue 0 → 100644
View file @ cca291df
<!--
* @Author: your name
* @Date: 2022-04-19 14:38:28
* @LastEditTime: 2022-08-26 13:56:13
* @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/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">{{ textData[0].text }}</span
><span class="num">{{ textData[0].num }}</span
>{{ textData[0].unit }}
</div>
<div class="right">
<span class="text">{{ textData[1].text }}</span
><span class="num">{{ textData[1].num }}</span
>{{ textData[1].unit }}
</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,
textData: [
{ text: "隐患总数", num: 192, unit: "件" },
{ text: "已整改", num: 182, unit: "件" },
],
charData: [
[10, 30, 10, 20, 30, 10, 30, 10, 30, 50, 10, 20],
[10, 20, 5, 10, 20, 10, 30, 10, 20, 40, 7, 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, 5, 10, 20, 10, 30, 10, 20, 40, 7, 20],
];
const num1 = this.charData[0].reduce(function (prev, cur, index, arr) {
return prev + cur;
}, 0);
const num2 = this.charData[1].reduce(function (prev, cur, index, arr) {
return prev + cur;
}, 0);
// 更改按钮下的文字
this.textData = [
{ text: "隐患总数", num: num1, unit: "件" },
{ text: "已整改", num: num2, unit: "件" },
];
} else {
this.charData = [
[20, 10, 20, 30, 20, 40, 10, 20, 20, 10, 30, 60],
[2, 1, 3, 1, 2, 3, 1, 1, 1, 1, 1, 1],
];
const num1 = this.charData[0].reduce(function (prev, cur, index, arr) {
return prev + cur;
}, 0);
const num2 = this.charData[1].reduce(function (prev, cur, index, arr) {
return prev + cur;
}, 0);
// 更改按钮下的文字
this.textData = [
{ text: "事故数量", num: num1, unit: "件" },
{ text: "伤亡人数", num: num2, unit: "人" },
];
}
this.bottomOptions();
},
bottomOptions() {
const colors = ["#1890FF", "#FFC736"];
this.options = {
color: colors,
tooltip: {
// show:false,
// formatter: "{a}: {c}(件)",
formatter: (parm) => {
console.log(parm);
return `${parm.seriesName}：${parm.value}(${
this.textData[parm.seriesIndex].unit
})`;
},
// 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,
max: Math.max.apply(null, this.charData[0]) + 10,
},
],
series: [
{
name: this.textData[0].text,
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.textData[1].text,
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: 85px;
left: 10px;
> div {
font-size: 10px;
margin-left: 15px;
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/index.vue
View file @ cca291df
<!--
* @Author: your name
* @Date: 2022-04-18 18:00:22
* @LastEditTime: 2022-05-05 10:38:23
* @LastEditors: Please set LastEditors
* @LastEditTime: 2022-08-26 13:54: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/statistic/overview/conponents/Left.vue
-->
......@@ -15,11 +15,11 @@
<Scound title="双代设备" :left="two.left" :right="two.right" />
</div>
<div class="three">
<CharBoxA/>
<CharBoxA v-if="windowInnerWidth > 1100" />
<CharBoxAZ v-else/>
</div>
<div class="four">
<CharBoxB/>
<CharBoxB />
</div>
</div>
</template>
......@@ -27,13 +27,15 @@
<script>
import Scound from "./Scound";
import CharBoxA from "./CharBoxA";
import CharBoxAZ from "./CharBoxAZ";
import CharBoxB from "./CharBoxB";
export default {
name: "",
components: {
Scound,
CharBoxA,
CharBoxB
CharBoxAZ,
CharBoxB,
},
data() {
return {
......@@ -43,14 +45,18 @@ export default {
numArr: "442",
unit: "个",
},
right:{
right: {
text: "气代煤",
numArr: "393",
unit: "个",
}
},
},
windowInnerWidth: 0,
};
},
created() {
this.windowInnerWidth = window.innerWidth;
},
methods: {},
};
</script>
......@@ -66,7 +72,7 @@ export default {
&.one,
&.two {
height: 12.2%;
min-height:104px;
min-height: 104px;
// background-color: yellow;
}
&.three,
......
gassafetyprogress-web/src/views/statistic/overview/conponents/Middle/index.vue
View file @ cca291df
<!--
* @Author: your name
* @Date: 2022-04-19 09:46:51
* @LastEditTime: 2022-04-21 13:54:34
* @LastEditors: Please set LastEditors
* @LastEditTime: 2022-08-26 13:58:42
* @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/statistic/overview/conponents/Middle.vue
-->
<template>
<div class="middle-components all-flex-h">
<div class="top">
<img src="@/assets/image-overview/titlepic.jpg" alt="" />
<img :style="{width:windowInnerWidth>1100 ?'100%':'80%'}" src="@/assets/image-overview/titlepic.jpg" alt="" />
</div>
<div class="bottom">
<CharsBoxE/>
<CharsBoxE />
</div>
</div>
</template>
......@@ -25,7 +25,12 @@ export default {
CharsBoxE,
},
data() {
return {};
return {
windowInnerWidth: 0,
};
},
created() {
this.windowInnerWidth = window.innerWidth;
},
methods: {},
};
......
gassafetyprogress-web/src/views/statistic/overview/conponents/Right/CharBoxCZ.vue 0 → 100644
View file @ cca291df
<!--
* @Author: your name
* @Date: 2022-04-19 14:38:28
* @LastEditTime: 2022-08-26 14:11:38
* @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/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: 20, color: "#604AFF" },
{ name: "巡检", value: 30, color: "#FFC337" },
{ name: "专项检查", value: 40, color: "#86FF5B" },
{ name: "大排查整治", value: 99, color: "#03C4F1" },
{ name: "工程事故隐患", value: 18, color: "#1F8DF3" },
{ name: "其他", value: 18, color: "pink" },
];
} 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" },
];
} else {
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" },
];
}
// this.bottomData.sort((a,b)=>{
// return Math.random()-0.5
// })
this.bottomOptions();
},
bottomOptions() {
const rich = {};
this.bottomData
.map((item) => ({
fontsize: 10,
color: item.color,
}))
.forEach((item, index) => {
rich[`dataIndex${index}`] = item;
});
this.options = {
tooltip: {
// show:false,
formatter: "{b}: {c}(件)",
// trigger: "axis",
// axisPointer: {
// type: "cross",
// },
},
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: 5,
length2: 0,
maxSurfaceAngle: 50,
},
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;
}
}
</style>
gassafetyprogress-web/src/views/statistic/overview/conponents/Right/OneZ.vue 0 → 100644
View file @ cca291df
<!--
* @Author: your name
* @Date: 2022-04-20 09:01:12
* @LastEditTime: 2022-08-26 14:07:11
* @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/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 {
margin-left: 10px;
> div {
flex: 1;
display: flex;
justify-content: center;
font-size: 10px;
.text {
color: #1a91ff;
font-size: 10px;
}
}
}
.bottom {
display: flex;
align-items: center;
flex: 1;
> div {
.text {
font-size: 10px;
}
}
}
}
</style>
gassafetyprogress-web/src/views/statistic/overview/conponents/Right/index.vue
View file @ cca291df
<!--
* @Author: your name
* @Date: 2022-04-18 18:00:22
* @LastEditTime: 2022-04-20 14:12:27
* @LastEditors: Please set LastEditors
* @LastEditTime: 2022-08-26 14:08:39
* @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/statistic/overview/conponents/Left.vue
-->
<template>
<div class="all-flex-h right-component">
<div class="one">
<One />
<One v-if="windowInnerWidth>1100"/>
<OneZ v-else/>
</div>
<div class="two">
<Two />
</div>
<div class="three">
<CharBoxC />
<CharBoxC v-if="windowInnerWidth>1100"/>
<CharBoxCZ v-else/>
</div>
<div class="four">
<CharBoxD />
......@@ -25,19 +27,28 @@
<script>
import One from "./One";
import OneZ from "./OneZ";
import Two from "./Two";
import CharBoxC from "./CharBoxC";
import CharBoxCZ from "./CharBoxCZ";
import CharBoxD from "./CharBoxD";
export default {
name: "",
components: {
One,
OneZ,
Two,
CharBoxC,
CharBoxCZ,
CharBoxD,
},
data() {
return {};
return {
windowInnerWidth: 0,
};
},
created() {
this.windowInnerWidth = window.innerWidth;
},
methods: {},
};
......
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