Skip to content

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

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

parent 5dbe58b3
Show whitespace changes
Inline Side-by-side
Showing with 837 additions and 152 deletions
gassafetyprogress-web/src/layout/components/Navbar.vue
View file @ cca291df
......@@ -2,35 +2,54 @@
<div class="navbar">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
<breadcrumb
id="breadcrumb-container"
class="breadcrumb-container"
v-if="!topNav"
/>
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />
<div class="right-menu">
<template v-if="device!=='mobile'">
<template v-if="device !== 'mobile'">
<!--<div class="right-menu-item" v-if="total>0" @click="$router.push('/emergency/emergency')">-->
<!--<img src="@/assets/xiaoxi.png" :hidden="xiaohidden" style="height: 40px;width: 40px;margin-top: 5px;cursor: pointer;">-->
<!--</div>-->
<!-- <search id="header-search" class="right-menu-item" /> -->
<!--          <el-badge :value="total" :max="99" class="item" >-->
<!--            <i class="el-icon-chat-dot-round" style="width: 10px;height: 10px;" ></i>-->
<!--          </el-badge>-->
<!--          <el-badge :value="total" :max="99" class="item" >-->
<!--            <i class="el-icon-chat-dot-round" style="width: 10px;height: 10px;" ></i>-->
<!--          </el-badge>-->
<el-dropdown class="avatar-container right-menu-item hover-effect" style="margin-right: 0px" trigger="click">
<div class="avatar-wrapper" >
<el-badge :value="total" :max="99" class="item" >
   <i class="el-icon-chat-dot-round" style="width: 10px;height: 10px;" ></i>
 </el-badge>
<el-dropdown
class="avatar-container right-menu-item hover-effect"
style="margin-right: 0px"
trigger="click"
>
<div class="avatar-wrapper">
<el-badge :value="total" :max="99" class="item">
   <i
class="el-icon-chat-dot-round"
style="width: 10px; height: 10px"
></i>
 </el-badge
>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-if="total==0">
<el-dropdown-item v-if="total == 0">
<span>暂无消息</span>
</el-dropdown-item>
<div v-for="(item,index) in receivedList" >
<el-dropdown-item v-if="index==0" @click.native="openMassage(item.id,item.eventName)">
<span>您有新消息：{{item.eventName}}</span>
<div v-for="(item, index) in receivedList">
<el-dropdown-item
v-if="index == 0"
@click.native="openMassage(item.id, item.eventName)"
>
<span>您有新消息：{{ item.eventName }}</span>
</el-dropdown-item>
<el-dropdown-item v-if="index>0" divided @click.native="openMassage(item.id,item.eventName)">
<span>您有新消息：{{item.eventName}}</span>
<el-dropdown-item
v-if="index > 0"
divided
@click.native="openMassage(item.id, item.eventName)"
>
<span>您有新消息：{{ item.eventName }}</span>
</el-dropdown-item>
</div>
</el-dropdown-menu>
......@@ -40,12 +59,14 @@
<!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip> -->
</template>
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
<el-dropdown
class="avatar-container right-menu-item hover-effect"
trigger="click"
>
<div class="avatar-wrapper">
<img :src="avatar" class="user-avatar">
<img :src="avatar" class="user-avatar" />
<i class="el-icon-caret-bottom" />
</div>
<el-dropdown-menu slot="dropdown">
......@@ -65,13 +86,13 @@
</template>
<script>
import { mapGetters,mapMutations } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import TopNav from '@/components/TopNav'
import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import Search from '@/components/HeaderSearch'
import { mapGetters, mapMutations } from "vuex";
import Breadcrumb from "@/components/Breadcrumb";
import TopNav from "@/components/TopNav";
import Hamburger from "@/components/Hamburger";
import Screenfull from "@/components/Screenfull";
import SizeSelect from "@/components/SizeSelect";
import Search from "@/components/HeaderSearch";
import { getUserProfile } from "@/api/system/user";
import { listReceive } from "@/api/system/receive";
export default {
......@@ -81,45 +102,40 @@ export default {
Hamburger,
Screenfull,
SizeSelect,
Search
Search,
},
data() {
return {
userType:-2,
total:null,
xiaohidden:false,
receivedList:[],
routerPath:"",
}
userType: -2,
total: null,
xiaohidden: false,
receivedList: [],
routerPath: "",
};
},
computed: {
...mapGetters([
'sidebar',
'avatar',
'device',
]),
...mapGetters(["sidebar", "avatar", "device"]),
setting: {
get() {
return this.$store.state.settings.showSettings
return this.$store.state.settings.showSettings;
},
set(val) {
this.$store.dispatch('settings/changeSetting', {
key: 'showSettings',
value: val
})
}
this.$store.dispatch("settings/changeSetting", {
key: "showSettings",
value: val,
});
},
},
topNav: {
get() {
return this.$store.state.settings.topNav
}
}
return this.$store.state.settings.topNav;
},
mounted(){
getUserProfile().then(response => {
},
},
mounted() {
getUserProfile().then((response) => {
this.userType = response.data.deptId;
if(this.userType!=-2){
if (this.userType != -2) {
this.queryParams.enterpriseId = response.data.deptId;
}
this.getList();
......@@ -128,38 +144,40 @@ mounted(){
},
methods: {
...mapMutations({
SET_EMERGENCY:"bigWindowCompany/SET_EMERGENCY"
}
),
SET_EMERGENCY: "bigWindowCompany/SET_EMERGENCY",
}),
toggleSideBar() {
this.$store.dispatch('app/toggleSideBar')
this.$store.dispatch("app/toggleSideBar");
},
async logout() {
this.$confirm('确定注销并退出系统吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$store.dispatch('LogOut').then(() => {
location.href = '/index';
this.$confirm("确定注销并退出系统吗？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.$store.dispatch("LogOut").then(() => {
location.href = "/index";
});
})
}).catch(() => {});
.catch(() => {});
},
openMassage(id,title){
openMassage(id, title) {
//this.$router.push('/emergency/emergency?eventid='+id);
this.routerPath="/emergency/emergency";
if(window.location.pathname==this.routerPath){
this.routerPath = "/emergency/emergency";
if (window.location.pathname == this.routerPath) {
// this.$parent.showDetail(id,title);
this.SET_EMERGENCY({
eventId:id,
eventName:title,
})
}else {
this.$router.push({path: this.routerPath,query:{eventId:id,eventName:title}});
eventId: id,
eventName: title,
});
} else {
this.$router.push({
path: this.routerPath,
query: { eventId: id, eventName: title },
});
}
},
socket() {
console.log("socket执行");
......@@ -179,31 +197,31 @@ mounted(){
console.log("ws协议关闭");
};
},
getList(){
console.log(this.userType)
getList() {
console.log(this.userType);
var params = {
pageNum: 1,
pageSize: 100,
status:5,
enterpriseId:this.userType
status: 5,
enterpriseId: this.userType,
};
if(this.userType==-2){
params.governmentRead=0;
params.enterpriseId=null;
}else {
params.companyRead=0
if (this.userType == -2) {
params.governmentRead = 0;
params.enterpriseId = null;
} else {
params.companyRead = 0;
}
listReceive(params).then(response => {
listReceive(params).then((response) => {
this.receivedList = response.rows;
if(response.total!=0){
this.total= response.total;
}else{
this.total= "";
if (response.total != 0) {
this.total = response.total;
} else {
this.total = "";
}
});
}
}
}
},
},
};
</script>
<style lang="scss" scoped>
......@@ -212,18 +230,18 @@ mounted(){
overflow: hidden;
position: relative;
background: #fff;
box-shadow: 0 1px 4px rgba(0,21,41,.08);
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.hamburger-container {
line-height: 46px;
height: 100%;
float: left;
cursor: pointer;
transition: background .3s;
-webkit-tap-highlight-color:transparent;
transition: background 0.3s;
-webkit-tap-highlight-color: transparent;
&:hover {
background: rgba(0, 0, 0, .025)
background: rgba(0, 0, 0, 0.025);
}
}
......@@ -259,10 +277,10 @@ mounted(){
&.hover-effect {
cursor: pointer;
transition: background .3s;
transition: background 0.3s;
&:hover {
background: rgba(0, 0, 0, .025)
background: rgba(0, 0, 0, 0.025);
}
}
}
......
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