Skip to content

Z
zh-baseversion-project
Commit 6ddbde87 authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

更新一下监督检查-检查结果分析的高度 出滚动条

parent a06dcdcf
Hide whitespace changes
Inline Side-by-side
Showing with 151 additions and 120 deletions
zh-baseversion-web/src/components/allCharsCom/Chars.vue
View file @ 6ddbde87
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-04-11 17:13:13 * @Date: 2022-04-11 17:13:13
* @LastEditTime: 2022-04-20 13:48:45 * @LastEditTime: 2026-05-06 11:35:37
* @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/components/allCharsCom/Chars.vue * @FilePath: /gassafety-progress/gassafetyprogress-web/src/components/allCharsCom/Chars.vue
--> -->
...@@ -132,7 +132,7 @@ export default { ...@@ -132,7 +132,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.my-chars { .my-chars {
width: 100%; width: 100%;
height: 100%; height: 93%;
position: relative; position: relative;
// background-color: blue; // background-color: blue;
} }
......
zh-baseversion-web/src/views/supervision/analysisInspection/components/Right.vue
View file @ 6ddbde87
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-04-11 15:07:47 * @Date: 2022-04-11 15:07:47
* @LastEditTime: 2022-04-12 09:55:18 * @LastEditTime: 2026-05-06 10:58:53
* @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/operationMonitor/xunjianxuncha/topChars/left.vue * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/left.vue
--> -->
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<div class="charsCom all-flex-h"> <div class="charsCom all-flex-h">
<div class="title">各年度监督检查统计</div> <div class="title">各年度监督检查统计</div>
<div class="two all-flex"> <div class="two all-flex">
<div id="Jcchars" class="chars" style="width: 100%; height: 300px;"></div> <div id="Jcchars" class="chars" style="width: 100%;"></div>
</div> </div>
</div> </div>
</template> </template>
...@@ -77,7 +77,7 @@ export default { ...@@ -77,7 +77,7 @@ export default {
grid: { grid: {
left: '3%', left: '3%',
right: '4%', right: '4%',
bottom: '10%', bottom: '0%',
top: '15%', top: '15%',
containLabel: true containLabel: true
}, },
......
zh-baseversion-web/src/views/supervision/analysisInspection/components/XjLeft.vue
View file @ 6ddbde87
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-04-11 15:07:47 * @Date: 2022-04-11 15:07:47
* @LastEditTime: 2022-04-12 09:55:18 * @LastEditTime: 2026-05-06 10:58:25
* @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/operationMonitor/xunjianxuncha/topChars/left.vue * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/left.vue
--> -->
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<div class="charsCom all-flex-h"> <div class="charsCom all-flex-h">
<div class="title">各公司巡检统计</div> <div class="title">各公司巡检统计</div>
<div class="two all-flex"> <div class="two all-flex">
<div id="chars" class="chars" style="width: 100%; height: 300px;"></div> <div id="chars" class="chars" style="width: 100%;"></div>
</div> </div>
</div> </div>
</template> </template>
...@@ -90,7 +90,7 @@ export default { ...@@ -90,7 +90,7 @@ export default {
grid: { grid: {
left: '3%', left: '3%',
right: '4%', right: '4%',
bottom: '10%', bottom: '0%',
top: '15%', top: '15%',
containLabel: true containLabel: true
}, },
...@@ -98,7 +98,7 @@ export default { ...@@ -98,7 +98,7 @@ export default {
type: 'category', type: 'category',
data: [], data: [],
axisLabel: { axisLabel: {
fontSize: 12, fontSize: 8,
interval: 0, interval: 0,
rotate: 30, // 如果公司名称太长，可以旋转角度 rotate: 30, // 如果公司名称太长，可以旋转角度
width: 80, width: 80,
......
zh-baseversion-web/src/views/supervision/analysisInspection/components/XjMiddle.vue
View file @ 6ddbde87
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-04-11 15:07:47 * @Date: 2022-04-11 15:07:47
* @LastEditTime: 2022-04-20 11:09:34 * @LastEditTime: 2026-05-06 11:34:44
* @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/operationMonitor/xunjianxuncha/topChars/left.vue * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/left.vue
--> -->
...@@ -13,15 +13,17 @@ ...@@ -13,15 +13,17 @@
<div class="left"> <div class="left">
<div class="first"> <div class="first">
<span class="text">隐患发现情况</span> <span class="text">隐患发现情况</span>
<span>{{hiddenBookInfo.finishNum + hiddenBookInfo.unFinishNum}}次</span> <span
>{{ hiddenBookInfo.finishNum + hiddenBookInfo.unFinishNum }}次</span
>
</div> </div>
<div class="second all-flex"> <div class="second all-flex">
<div class="left">隐患未整改数</div> <div class="left">隐患未整改数</div>
<div class="right">隐患已整改数</div> <div class="right">隐患已整改数</div>
</div> </div>
<div class="third all-flex"> <div class="third all-flex">
<div class="left">{{ hiddenBookInfo.unFinishNum}}</div> <div class="left">{{ hiddenBookInfo.unFinishNum }}</div>
<div class="right">{{hiddenBookInfo.finishNum}}</div> <div class="right">{{ hiddenBookInfo.finishNum }}</div>
</div> </div>
</div> </div>
<div class="right"> <div class="right">
...@@ -38,6 +40,7 @@ ...@@ -38,6 +40,7 @@
<div class="first">隐患原因</div> <div class="first">隐患原因</div>
<div ref="myChartWidth" class="chars-box"> <div ref="myChartWidth" class="chars-box">
<Chars :options="reasonOptions" /> <Chars :options="reasonOptions" />
</div> </div>
</div> </div>
</div> </div>
...@@ -50,10 +53,10 @@ export default { ...@@ -50,10 +53,10 @@ export default {
components: { components: {
Chars, Chars,
}, },
created(){ created() {
this.getHiddenBookInfo(); this.getHiddenBookInfo();
}, },
props:{ props: {
annual: { annual: {
type: String, type: String,
default: 2025, default: 2025,
...@@ -74,8 +77,8 @@ export default { ...@@ -74,8 +77,8 @@ export default {
{ name: "漏气", value: 0, color: "#1F8DF3" }, { name: "漏气", value: 0, color: "#1F8DF3" },
], ],
], ],
option:{ option: {
color:['blue','lightblue'], color: ["blue", "lightblue"],
grid: { grid: {
bottom: "7%", bottom: "7%",
containLabel: true, containLabel: true,
...@@ -85,28 +88,28 @@ export default { ...@@ -85,28 +88,28 @@ export default {
}, },
series: [ series: [
{ {
name: '访问来源', name: "访问来源",
type: 'pie', type: "pie",
radius: ['40%', '70%'], radius: ["40%", "70%"],
label: { label: {
show: true, show: true,
position: 'center' position: "center",
}, },
labelLine: { labelLine: {
show: false show: false,
}, },
data: [ data: [
{value: 0, name: '整改'}, { value: 0, name: "整改" },
{value: 0, name: '未整改'}, { value: 0, name: "未整改" },
] ],
} },
] ],
}, },
reasonOptions:{}, reasonOptions: {},
hiddenBookInfo: { hiddenBookInfo: {
unFinishNum: 0, unFinishNum: 0,
finishNum: 0 finishNum: 0,
} },
}; };
}, },
watch: { watch: {
...@@ -114,10 +117,9 @@ export default { ...@@ -114,10 +117,9 @@ export default {
console.log(`Message changed from "${oldVal}" to "${newVal}"`); console.log(`Message changed from "${oldVal}" to "${newVal}"`);
this.getHiddenBookInfo(); this.getHiddenBookInfo();
}, },
companyInfoId(newVal, oldVal){ companyInfoId(newVal, oldVal) {
this.getHiddenBookInfo(); this.getHiddenBookInfo();
} },
}, },
methods: { methods: {
bottomOptions() { bottomOptions() {
...@@ -178,27 +180,40 @@ export default { ...@@ -178,27 +180,40 @@ export default {
}), }),
}; };
}, },
getHiddenBookInfo(){ getHiddenBookInfo() {
console.log("this.companyInfoId",this.companyInfoId) console.log("this.companyInfoId", this.companyInfoId);
console.log("this.annual",this.annual) console.log("this.annual", this.annual);
hiddenBookStatistics({companyInfoId:this.companyInfoId,annual:this.annual,source:'1'}).then(res =>{ hiddenBookStatistics({
if(res.code == 200){ companyInfoId: this.companyInfoId,
this.hiddenBookInfo= res.data; annual: this.annual,
this.option.series[0].data = [{value: res.data.finishNum, name: '整改'},{value: res.data.unFinishNum, name: '未整改'}]; source: "1",
this.bottomData = [ }).then((res) => {
[{ name: "漏气", value: res.data.blowNum, color: "#604AFF" }, if (res.code == 200) {
this.hiddenBookInfo = res.data;
this.option.series[0].data = [
{ value: res.data.finishNum, name: "整改" },
{ value: res.data.unFinishNum, name: "未整改" },
];
(this.bottomData = [
[
{ name: "漏气", value: res.data.blowNum, color: "#604AFF" },
{ name: "腐蚀", value: res.data.corrosionNum, color: "#FFC337" }, { name: "腐蚀", value: res.data.corrosionNum, color: "#FFC337" },
{ name: "裂缝", value: res.data.crackNum, color: "#86FF5B" }, { name: "裂缝", value: res.data.crackNum, color: "#86FF5B" },
{ name: "设备故障", value: res.data.deviceNum, color: "#03C4F1" }, { name: "设备故障", value: res.data.deviceNum, color: "#03C4F1" },
{ name: "安全距离不足", value: res.data.distanceNum, color: "#1F8DF3" }, {
name: "安全距离不足",
value: res.data.distanceNum,
color: "#1F8DF3",
},
{ name: "管道承重", value: res.data.pipeNum, color: "#03C4F1" }, { name: "管道承重", value: res.data.pipeNum, color: "#03C4F1" },
{ name: "其他", value: res.data.otherNum, color: "#1F8DF3" }] { name: "其他", value: res.data.otherNum, color: "#1F8DF3" },
], ],
this.reasonOptions = this.bottomOptions(); ]),
} (this.reasonOptions = this.bottomOptions());
//console.log("res==================",res) }
}) //console.log("res==================",res)
} });
},
}, },
}; };
</script> </script>
...@@ -278,8 +293,8 @@ export default { ...@@ -278,8 +293,8 @@ export default {
} }
.three { .three {
font-size: 16px; font-size: 16px;
flex: 1; flex: 1;
// background: red;
.chars-box { .chars-box {
flex: 1; flex: 1;
} }
......
zh-baseversion-web/src/views/supervision/analysisInspection/index.vue
View file @ 6ddbde87
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-04-11 14:11:04 * @Date: 2022-04-11 14:11:04
* @LastEditTime: 2022-04-14 10:45:52 * @LastEditTime: 2026-05-06 11:39:01
* @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/operationMonitor/xunjianxuncha/index.vue * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/index.vue
--> -->
<template> <template>
<div class="app-container xjxc"> <div class="app-container xjxc">
<div class="shai" > <div class="shai">
<el-select <el-select
clearable clearable
v-model="danwei" v-model="danwei"
placeholder="请选择单位" placeholder="请选择单位"
@change="selectcompanyId" @change="selectcompanyId"
> >
<el-option <el-option
v-for="item in enterprises" v-for="item in enterprises"
:key="item.enterpriseId" :key="item.enterpriseId"
:label="item.enterpriseName" :label="item.enterpriseName"
:value="item.enterpriseId" :value="item.enterpriseId"
></el-option> ></el-option>
</el-select> </el-select>
</div> </div>
<el-tabs v-model="activeName" style="width: 300px" @tab-click="handleClick"> <el-tabs v-model="activeName" style="width: 300px" @tab-click="handleClick">
<el-tab-pane label="2026年度" name="2026"></el-tab-pane> <el-tab-pane label="2026年度" name="2026"></el-tab-pane>
...@@ -30,35 +29,34 @@ ...@@ -30,35 +29,34 @@
<el-tab-pane label="2024年度" name="2024"></el-tab-pane> <el-tab-pane label="2024年度" name="2024"></el-tab-pane>
<el-tab-pane label="2023年度" name="2023"></el-tab-pane> <el-tab-pane label="2023年度" name="2023"></el-tab-pane>
</el-tabs> </el-tabs>
<div class="wrapper-b-wrapper">
<div class="wrapper flex-h"> <div class="wrapper-b flex-h">
<div class="top flex">
<div class="top flex"> <div class="middle">
<div class="middle"> <XjMiddle :annual="activeName" :companyInfoId="companyInfoId" />
<XjMiddle :annual="activeName" :companyInfoId="companyInfoId"/> </div>
<div class="middle">
<Middle :annual="activeName" :companyInfoId="companyInfoId" />
</div>
<div class="middle">
<JcMiddle :annual="activeName" :companyInfoId="companyInfoId" />
</div>
</div> </div>
<div class="middle">
<Middle :annual="activeName" :companyInfoId="companyInfoId" />
</div>
<div class="middle">
<JcMiddle :annual="activeName" :companyInfoId="companyInfoId"/>
</div>
</div>
<div class="middle"></div> <div class="middle"></div>
<div class="top flex"> <div class="bottom flex">
<div class="middle"> <div class="middle">
<XjLeft :annual="activeName"/> <XjLeft :annual="activeName" />
</div> </div>
<div class="middle"> <div class="middle">
<Left /> <Left />
</div>
<div class="middle">
<Right />
</div>
</div> </div>
<div class="middle"> <!-- <div class="bottom">
<Right/>
</div>
</div>
<!-- <div class="bottom">
<div class="left"> <div class="left">
<XjLeft /> <XjLeft />
</div> </div>
...@@ -70,9 +68,7 @@ ...@@ -70,9 +68,7 @@
</div> </div>
</div>--> </div>-->
<!-- <div class="top flex">
<!-- <div class="top flex">
<div class="right"> <div class="right">
<Right :annual="activeName" :companyInfoId="companyInfoId" /> <Right :annual="activeName" :companyInfoId="companyInfoId" />
</div> </div>
...@@ -88,6 +84,7 @@ ...@@ -88,6 +84,7 @@
<div class="bottom"> <div class="bottom">
<Middle :annual="activeName" :companyInfoId="companyInfoId" /> <Middle :annual="activeName" :companyInfoId="companyInfoId" />
</div>--> </div>-->
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -108,68 +105,82 @@ export default { ...@@ -108,68 +105,82 @@ export default {
Left, Left,
XjLeft, XjLeft,
Middle, Middle,
Right Right,
}, },
data() { data() {
return { return {
danwei:null, danwei: null,
enterprises: [], enterprises: [],
activeName: '2025', activeName: "2025",
companyInfoId:'' companyInfoId: "",
}; };
}, },
created() { created() {
this.getEnterpriseLists(); this.getEnterpriseLists();
}, },
methods: { methods: {
selectcompanyId(e){ selectcompanyId(e) {
this.companyInfoId = e; this.companyInfoId = e;
}, },
//所属单位 //所属单位
getEnterpriseLists(){ getEnterpriseLists() {
const param = {}; const param = {};
enterpriseLists(param).then(response => { enterpriseLists(param).then((response) => {
this.enterprises = response.rows; this.enterprises = response.rows;
}); });
}, },
handleClick(tab, event) { handleClick(tab, event) {
console.log(tab, event); console.log(tab, event);
} },
}, },
mounted(){ mounted() {},
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-main { .app-main {
} }
.app-container {
display: flex;
flex-direction: column;
}
.xjxc { .xjxc {
height: calc(100vh - 50px) !important; height: calc(100vh - 50px) !important;
overflow: auto;
} }
.flex { .flex {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.flex-h { .wrapper-b-wrapper{
flex:1;
// border:1px solid red
// background: red;
}
.wrapper-b {
display: flex; display: flex;
// justify-content: space-around; // justify-content: space-around;
flex-direction: column; flex-direction: column;
min-height: 818px;
height: 100%; height: 100%;
.top { .top,
height: 47%; .bottom {
height: 55%;
.left { .left {
width: 70%; width: 70%;
box-sizing: border-box;
padding: 15px 24px 19px; padding: 15px 24px 19px;
} }
.middle { .middle {
width: 35.3%; width: 33.3%;
padding: 15px 80px 19px 71px; box-sizing: border-box;
padding: 15px 20px 19px 20px;
} }
.right { .right {
width: 30.2%; width: 30.2%;
box-sizing: border-box;
padding: 15px 29px; padding: 15px 29px;
} }
> div { > div {
...@@ -178,26 +189,31 @@ export default { ...@@ -178,26 +189,31 @@ export default {
border-radius: 3px; border-radius: 3px;
} }
} }
>.middle { > .middle {
margin: 5px 0; margin: 5px 0;
background: repeating-linear-gradient(135deg, transparent, transparent 3px, #D6D6D6 3px, #D6D6D6 8px); background: repeating-linear-gradient(
135deg,
transparent,
transparent 3px,
#d6d6d6 3px,
#d6d6d6 8px
);
height: 2px; height: 2px;
} }
.bottom { .bottom {
flex: 1; flex: 1 !important;
} }
> div { > div {
// height: 50%; // height: 50%;
} }
} }
.shai{ .shai {
position: fixed; position: fixed;
right: 20px; right: 20px;
width: 300px; width: 300px;
height: 40px; height: 40px;
} }
::v-deep .el-select{ ::v-deep .el-select {
width: 300px; width: 300px;
} }
</style> </style>
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