Skip to content

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

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

parent 5dbe58b3
Hide 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 @@ ...@@ -2,35 +2,54 @@
<div class="navbar"> <div class="navbar">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/> <breadcrumb
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/> id="breadcrumb-container"
class="breadcrumb-container"
v-if="!topNav"
/>
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />
<div class="right-menu"> <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')">--> <!--<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;">--> <!--<img src="@/assets/xiaoxi.png" :hidden="xiaohidden" style="height: 40px;width: 40px;margin-top: 5px;cursor: pointer;">-->
<!--</div>--> <!--</div>-->
<!-- <search id="header-search" class="right-menu-item" /> --> <!-- <search id="header-search" class="right-menu-item" /> -->
<!--          <el-badge :value="total" :max="99" class="item" >--> <!--          <el-badge :value="total" :max="99" class="item" >-->
<!--            <i class="el-icon-chat-dot-round" style="width: 10px;height: 10px;" ></i>--> <!--            <i class="el-icon-chat-dot-round" style="width: 10px;height: 10px;" ></i>-->
<!--          </el-badge>--> <!--          </el-badge>-->
<el-dropdown class="avatar-container right-menu-item hover-effect" style="margin-right: 0px" trigger="click"> <el-dropdown
<div class="avatar-wrapper" > class="avatar-container right-menu-item hover-effect"
<el-badge :value="total" :max="99" class="item" > style="margin-right: 0px"
   <i class="el-icon-chat-dot-round" style="width: 10px;height: 10px;" ></i> trigger="click"
 </el-badge> >
<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> </div>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item v-if="total==0"> <el-dropdown-item v-if="total == 0">
<span>暂无消息</span> <span>暂无消息</span>
</el-dropdown-item> </el-dropdown-item>
<div v-for="(item,index) in receivedList" > <div v-for="(item, index) in receivedList">
<el-dropdown-item v-if="index==0" @click.native="openMassage(item.id,item.eventName)"> <el-dropdown-item
<span>您有新消息：{{item.eventName}}</span> v-if="index == 0"
@click.native="openMassage(item.id, item.eventName)"
>
<span>您有新消息：{{ item.eventName }}</span>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item v-if="index>0" divided @click.native="openMassage(item.id,item.eventName)"> <el-dropdown-item
<span>您有新消息：{{item.eventName}}</span> v-if="index > 0"
divided
@click.native="openMassage(item.id, item.eventName)"
>
<span>您有新消息：{{ item.eventName }}</span>
</el-dropdown-item> </el-dropdown-item>
</div> </div>
</el-dropdown-menu> </el-dropdown-menu>
...@@ -40,12 +59,14 @@ ...@@ -40,12 +59,14 @@
<!-- <el-tooltip content="布局大小" effect="dark" placement="bottom"> <!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" /> <size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip> --> </el-tooltip> -->
</template> </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"> <div class="avatar-wrapper">
<img :src="avatar" class="user-avatar"> <img :src="avatar" class="user-avatar" />
<i class="el-icon-caret-bottom" /> <i class="el-icon-caret-bottom" />
</div> </div>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
...@@ -65,13 +86,13 @@ ...@@ -65,13 +86,13 @@
</template> </template>
<script> <script>
import { mapGetters,mapMutations } from 'vuex' import { mapGetters, mapMutations } from "vuex";
import Breadcrumb from '@/components/Breadcrumb' import Breadcrumb from "@/components/Breadcrumb";
import TopNav from '@/components/TopNav' import TopNav from "@/components/TopNav";
import Hamburger from '@/components/Hamburger' import Hamburger from "@/components/Hamburger";
import Screenfull from '@/components/Screenfull' import Screenfull from "@/components/Screenfull";
import SizeSelect from '@/components/SizeSelect' import SizeSelect from "@/components/SizeSelect";
import Search from '@/components/HeaderSearch' import Search from "@/components/HeaderSearch";
import { getUserProfile } from "@/api/system/user"; import { getUserProfile } from "@/api/system/user";
import { listReceive } from "@/api/system/receive"; import { listReceive } from "@/api/system/receive";
export default { export default {
...@@ -81,85 +102,82 @@ export default { ...@@ -81,85 +102,82 @@ export default {
Hamburger, Hamburger,
Screenfull, Screenfull,
SizeSelect, SizeSelect,
Search Search,
}, },
data() { data() {
return { return {
userType:-2, userType: -2,
total:null, total: null,
xiaohidden:false, xiaohidden: false,
receivedList:[], receivedList: [],
routerPath:"", routerPath: "",
} };
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(["sidebar", "avatar", "device"]),
'sidebar',
'avatar',
'device',
]),
setting: { setting: {
get() { get() {
return this.$store.state.settings.showSettings return this.$store.state.settings.showSettings;
}, },
set(val) { set(val) {
this.$store.dispatch('settings/changeSetting', { this.$store.dispatch("settings/changeSetting", {
key: 'showSettings', key: "showSettings",
value: val value: val,
}) });
} },
}, },
topNav: { topNav: {
get() { get() {
return this.$store.state.settings.topNav return this.$store.state.settings.topNav;
} },
} },
}, },
mounted(){ mounted() {
getUserProfile().then((response) => {
getUserProfile().then(response => { this.userType = response.data.deptId;
this.userType = response.data.deptId; if (this.userType != -2) {
if(this.userType!=-2){ this.queryParams.enterpriseId = response.data.deptId;
this.queryParams.enterpriseId = response.data.deptId; }
} this.getList();
this.getList(); });
});
this.socket(); this.socket();
}, },
methods: { methods: {
...mapMutations({ ...mapMutations({
SET_EMERGENCY:"bigWindowCompany/SET_EMERGENCY" SET_EMERGENCY: "bigWindowCompany/SET_EMERGENCY",
} }),
),
toggleSideBar() { toggleSideBar() {
this.$store.dispatch('app/toggleSideBar') this.$store.dispatch("app/toggleSideBar");
}, },
async logout() { async logout() {
this.$confirm('确定注销并退出系统吗？', '提示', { this.$confirm("确定注销并退出系统吗？", "提示", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning",
}).then(() => { })
this.$store.dispatch('LogOut').then(() => { .then(() => {
location.href = '/index'; this.$store.dispatch("LogOut").then(() => {
location.href = "/index";
});
}) })
}).catch(() => {}); .catch(() => {});
}, },
openMassage(id,title){ openMassage(id, title) {
//this.$router.push('/emergency/emergency?eventid='+id); //this.$router.push('/emergency/emergency?eventid='+id);
this.routerPath="/emergency/emergency"; this.routerPath = "/emergency/emergency";
if(window.location.pathname==this.routerPath){ if (window.location.pathname == this.routerPath) {
// this.$parent.showDetail(id,title); // this.$parent.showDetail(id,title);
this.SET_EMERGENCY({ this.SET_EMERGENCY({
eventId:id, eventId: id,
eventName:title, eventName: title,
}) });
}else { } else {
this.$router.push({path: this.routerPath,query:{eventId:id,eventName:title}}); this.$router.push({
path: this.routerPath,
query: { eventId: id, eventName: title },
});
} }
}, },
socket() { socket() {
console.log("socket执行"); console.log("socket执行");
...@@ -179,31 +197,31 @@ mounted(){ ...@@ -179,31 +197,31 @@ mounted(){
console.log("ws协议关闭"); console.log("ws协议关闭");
}; };
}, },
getList(){ getList() {
console.log(this.userType) console.log(this.userType);
var params = { var params = {
pageNum: 1, pageNum: 1,
pageSize: 100, pageSize: 100,
status:5, status: 5,
enterpriseId:this.userType enterpriseId: this.userType,
}; };
if(this.userType==-2){ if (this.userType == -2) {
params.governmentRead=0; params.governmentRead = 0;
params.enterpriseId=null; params.enterpriseId = null;
}else { } else {
params.companyRead=0 params.companyRead = 0;
} }
listReceive(params).then(response => { listReceive(params).then((response) => {
this.receivedList = response.rows; this.receivedList = response.rows;
if(response.total!=0){ if (response.total != 0) {
this.total= response.total; this.total = response.total;
}else{ } else {
this.total= ""; this.total = "";
} }
}); });
} },
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -212,18 +230,18 @@ mounted(){ ...@@ -212,18 +230,18 @@ mounted(){
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background: #fff; 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 { .hamburger-container {
line-height: 46px; line-height: 46px;
height: 100%; height: 100%;
float: left; float: left;
cursor: pointer; cursor: pointer;
transition: background .3s; transition: background 0.3s;
-webkit-tap-highlight-color:transparent; -webkit-tap-highlight-color: transparent;
&:hover { &:hover {
background: rgba(0, 0, 0, .025) background: rgba(0, 0, 0, 0.025);
} }
} }
...@@ -259,10 +277,10 @@ mounted(){ ...@@ -259,10 +277,10 @@ mounted(){
&.hover-effect { &.hover-effect {
cursor: pointer; cursor: pointer;
transition: background .3s; transition: background 0.3s;
&:hover { &: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 = { const state = {
sidebar: { sidebar: {
opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true, // opened:window.innerWidth<1100?false:( Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true),
withoutAnimation: false opened: Cookies.get("sidebarStatus")
? !!+Cookies.get("sidebarStatus")
: true,
withoutAnimation: false,
}, },
device: 'desktop', device: "desktop",
size: Cookies.get('size') || 'medium' size: Cookies.get("size") || "medium",
} };
const mutations = { const mutations = {
TOGGLE_SIDEBAR: state => { TOGGLE_SIDEBAR: (state) => {
state.sidebar.opened = !state.sidebar.opened state.sidebar.opened = !state.sidebar.opened;
state.sidebar.withoutAnimation = false // console.log("window.innerWidth",window.innerWidth)
state.sidebar.withoutAnimation = false;
if (state.sidebar.opened) { if (state.sidebar.opened) {
Cookies.set('sidebarStatus', 1) Cookies.set("sidebarStatus", 1);
} else { } else {
Cookies.set('sidebarStatus', 0) Cookies.set("sidebarStatus", 0);
} }
}, },
CLOSE_SIDEBAR: (state, withoutAnimation) => { CLOSE_SIDEBAR: (state, withoutAnimation) => {
Cookies.set('sidebarStatus', 0) Cookies.set("sidebarStatus", 0);
state.sidebar.opened = false state.sidebar.opened = false;
state.sidebar.withoutAnimation = withoutAnimation state.sidebar.withoutAnimation = withoutAnimation;
}, },
TOGGLE_DEVICE: (state, device) => { TOGGLE_DEVICE: (state, device) => {
state.device = device state.device = device;
}, },
SET_SIZE: (state, size) => { SET_SIZE: (state, size) => {
state.size = size state.size = size;
Cookies.set('size', size) Cookies.set("size", size);
} },
} };
const actions = { const actions = {
toggleSideBar({ commit }) { toggleSideBar({ commit }) {
commit('TOGGLE_SIDEBAR') commit("TOGGLE_SIDEBAR");
}, },
closeSideBar({ commit }, { withoutAnimation }) { closeSideBar({ commit }, { withoutAnimation }) {
commit('CLOSE_SIDEBAR', withoutAnimation) commit("CLOSE_SIDEBAR", withoutAnimation);
}, },
toggleDevice({ commit }, device) { toggleDevice({ commit }, device) {
commit('TOGGLE_DEVICE', device) commit("TOGGLE_DEVICE", device);
}, },
setSize({ commit }, size) { setSize({ commit }, size) {
commit('SET_SIZE', size) commit("SET_SIZE", size);
} },
} };
export default { export default {
namespaced: true, namespaced: true,
state, state,
mutations, 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 * @Author: your name
* @Date: 2022-04-18 18:00:22 * @Date: 2022-04-18 18:00:22
* @LastEditTime: 2022-05-05 10:38:23 * @LastEditTime: 2022-08-26 13:54:17
* @LastEditors: Please set LastEditors * @LastEditors: 纪泽龙 jizelong@qq.com
* @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/statistic/overview/conponents/Left.vue * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/conponents/Left.vue
--> -->
...@@ -15,11 +15,11 @@ ...@@ -15,11 +15,11 @@
<Scound title="双代设备" :left="two.left" :right="two.right" /> <Scound title="双代设备" :left="two.left" :right="two.right" />
</div> </div>
<div class="three"> <div class="three">
<CharBoxA/> <CharBoxA v-if="windowInnerWidth > 1100" />
<CharBoxAZ v-else/>
</div> </div>
<div class="four"> <div class="four">
<CharBoxB/> <CharBoxB />
</div> </div>
</div> </div>
</template> </template>
...@@ -27,13 +27,15 @@ ...@@ -27,13 +27,15 @@
<script> <script>
import Scound from "./Scound"; import Scound from "./Scound";
import CharBoxA from "./CharBoxA"; import CharBoxA from "./CharBoxA";
import CharBoxAZ from "./CharBoxAZ";
import CharBoxB from "./CharBoxB"; import CharBoxB from "./CharBoxB";
export default { export default {
name: "", name: "",
components: { components: {
Scound, Scound,
CharBoxA, CharBoxA,
CharBoxB CharBoxAZ,
CharBoxB,
}, },
data() { data() {
return { return {
...@@ -43,14 +45,18 @@ export default { ...@@ -43,14 +45,18 @@ export default {
numArr: "442", numArr: "442",
unit: "个", unit: "个",
}, },
right:{ right: {
text: "气代煤", text: "气代煤",
numArr: "393", numArr: "393",
unit: "个", unit: "个",
} },
}, },
windowInnerWidth: 0,
}; };
}, },
created() {
this.windowInnerWidth = window.innerWidth;
},
methods: {}, methods: {},
}; };
</script> </script>
...@@ -66,7 +72,7 @@ export default { ...@@ -66,7 +72,7 @@ export default {
&.one, &.one,
&.two { &.two {
height: 12.2%; height: 12.2%;
min-height:104px; min-height: 104px;
// background-color: yellow; // background-color: yellow;
} }
&.three, &.three,
......
gassafetyprogress-web/src/views/statistic/overview/conponents/Middle/index.vue
View file @ cca291df
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-04-19 09:46:51 * @Date: 2022-04-19 09:46:51
* @LastEditTime: 2022-04-21 13:54:34 * @LastEditTime: 2022-08-26 13:58:42
* @LastEditors: Please set LastEditors * @LastEditors: 纪泽龙 jizelong@qq.com
* @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/statistic/overview/conponents/Middle.vue * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/conponents/Middle.vue
--> -->
<template> <template>
<div class="middle-components all-flex-h"> <div class="middle-components all-flex-h">
<div class="top"> <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>
<div class="bottom"> <div class="bottom">
<CharsBoxE/> <CharsBoxE />
</div> </div>
</div> </div>
</template> </template>
...@@ -25,7 +25,12 @@ export default { ...@@ -25,7 +25,12 @@ export default {
CharsBoxE, CharsBoxE,
}, },
data() { data() {
return {}; return {
windowInnerWidth: 0,
};
},
created() {
this.windowInnerWidth = window.innerWidth;
}, },
methods: {}, 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 * @Author: your name
* @Date: 2022-04-18 18:00:22 * @Date: 2022-04-18 18:00:22
* @LastEditTime: 2022-04-20 14:12:27 * @LastEditTime: 2022-08-26 14:08:39
* @LastEditors: Please set LastEditors * @LastEditors: 纪泽龙 jizelong@qq.com
* @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/statistic/overview/conponents/Left.vue * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/conponents/Left.vue
--> -->
<template> <template>
<div class="all-flex-h right-component"> <div class="all-flex-h right-component">
<div class="one"> <div class="one">
<One /> <One v-if="windowInnerWidth>1100"/>
<OneZ v-else/>
</div> </div>
<div class="two"> <div class="two">
<Two /> <Two />
</div> </div>
<div class="three"> <div class="three">
<CharBoxC /> <CharBoxC v-if="windowInnerWidth>1100"/>
<CharBoxCZ v-else/>
</div> </div>
<div class="four"> <div class="four">
<CharBoxD /> <CharBoxD />
...@@ -25,19 +27,28 @@ ...@@ -25,19 +27,28 @@
<script> <script>
import One from "./One"; import One from "./One";
import OneZ from "./OneZ";
import Two from "./Two"; import Two from "./Two";
import CharBoxC from "./CharBoxC"; import CharBoxC from "./CharBoxC";
import CharBoxCZ from "./CharBoxCZ";
import CharBoxD from "./CharBoxD"; import CharBoxD from "./CharBoxD";
export default { export default {
name: "", name: "",
components: { components: {
One, One,
OneZ,
Two, Two,
CharBoxC, CharBoxC,
CharBoxCZ,
CharBoxD, CharBoxD,
}, },
data() { data() {
return {}; return {
windowInnerWidth: 0,
};
},
created() {
this.windowInnerWidth = window.innerWidth;
}, },
methods: {}, 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