Commit 6ddbde87 authored by 纪泽龙's avatar 纪泽龙

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

parent a06dcdcf
<!--
* @Author: your name
* @Date: 2022-04-11 17:13:13
* @LastEditTime: 2022-04-20 13:48:45
* @LastEditors: Please set LastEditors
* @LastEditTime: 2026-05-06 11:35:37
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/components/allCharsCom/Chars.vue
-->
......@@ -132,7 +132,7 @@ export default {
<style lang="scss" scoped>
.my-chars {
width: 100%;
height: 100%;
height: 93%;
position: relative;
// background-color: blue;
}
......
<!--
* @Author: your name
* @Date: 2022-04-11 15:07:47
* @LastEditTime: 2022-04-12 09:55:18
* @LastEditors: Please set LastEditors
* @LastEditTime: 2026-05-06 10:58:53
* @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/operationMonitor/xunjianxuncha/topChars/left.vue
-->
......@@ -10,7 +10,7 @@
<div class="charsCom all-flex-h">
<div class="title">各年度监督检查统计</div>
<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>
</template>
......@@ -77,7 +77,7 @@ export default {
grid: {
left: '3%',
right: '4%',
bottom: '10%',
bottom: '0%',
top: '15%',
containLabel: true
},
......
<!--
* @Author: your name
* @Date: 2022-04-11 15:07:47
* @LastEditTime: 2022-04-12 09:55:18
* @LastEditors: Please set LastEditors
* @LastEditTime: 2026-05-06 10:58:25
* @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/operationMonitor/xunjianxuncha/topChars/left.vue
-->
......@@ -10,7 +10,7 @@
<div class="charsCom all-flex-h">
<div class="title">各公司巡检统计</div>
<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>
</template>
......@@ -90,7 +90,7 @@ export default {
grid: {
left: '3%',
right: '4%',
bottom: '10%',
bottom: '0%',
top: '15%',
containLabel: true
},
......@@ -98,7 +98,7 @@ export default {
type: 'category',
data: [],
axisLabel: {
fontSize: 12,
fontSize: 8,
interval: 0,
rotate: 30, // 如果公司名称太长,可以旋转角度
width: 80,
......
<!--
* @Author: your name
* @Date: 2022-04-11 15:07:47
* @LastEditTime: 2022-04-20 11:09:34
* @LastEditors: Please set LastEditors
* @LastEditTime: 2026-05-06 11:34:44
* @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/operationMonitor/xunjianxuncha/topChars/left.vue
-->
......@@ -13,15 +13,17 @@
<div class="left">
<div class="first">
<span class="text">隐患发现情况</span>
<span>{{hiddenBookInfo.finishNum + hiddenBookInfo.unFinishNum}}</span>
<span
>{{ hiddenBookInfo.finishNum + hiddenBookInfo.unFinishNum }}</span
>
</div>
<div class="second all-flex">
<div class="left">隐患未整改数</div>
<div class="right">隐患已整改数</div>
</div>
<div class="third all-flex">
<div class="left">{{ hiddenBookInfo.unFinishNum}}</div>
<div class="right">{{hiddenBookInfo.finishNum}}</div>
<div class="left">{{ hiddenBookInfo.unFinishNum }}</div>
<div class="right">{{ hiddenBookInfo.finishNum }}</div>
</div>
</div>
<div class="right">
......@@ -38,6 +40,7 @@
<div class="first">隐患原因</div>
<div ref="myChartWidth" class="chars-box">
<Chars :options="reasonOptions" />
</div>
</div>
</div>
......@@ -50,10 +53,10 @@ export default {
components: {
Chars,
},
created(){
created() {
this.getHiddenBookInfo();
},
props:{
props: {
annual: {
type: String,
default: 2025,
......@@ -74,8 +77,8 @@ export default {
{ name: "漏气", value: 0, color: "#1F8DF3" },
],
],
option:{
color:['blue','lightblue'],
option: {
color: ["blue", "lightblue"],
grid: {
bottom: "7%",
containLabel: true,
......@@ -85,28 +88,28 @@ export default {
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['40%', '70%'],
name: "访问来源",
type: "pie",
radius: ["40%", "70%"],
label: {
show: true,
position: 'center'
position: "center",
},
labelLine: {
show: false
show: false,
},
data: [
{value: 0, name: '整改'},
{value: 0, name: '未整改'},
]
}
]
{ value: 0, name: "整改" },
{ value: 0, name: "未整改" },
],
},
],
},
reasonOptions:{},
reasonOptions: {},
hiddenBookInfo: {
unFinishNum: 0,
finishNum: 0
}
finishNum: 0,
},
};
},
watch: {
......@@ -114,10 +117,9 @@ export default {
console.log(`Message changed from "${oldVal}" to "${newVal}"`);
this.getHiddenBookInfo();
},
companyInfoId(newVal, oldVal){
companyInfoId(newVal, oldVal) {
this.getHiddenBookInfo();
}
},
},
methods: {
bottomOptions() {
......@@ -178,27 +180,40 @@ export default {
}),
};
},
getHiddenBookInfo(){
console.log("this.companyInfoId",this.companyInfoId)
console.log("this.annual",this.annual)
hiddenBookStatistics({companyInfoId:this.companyInfoId,annual:this.annual,source:'1'}).then(res =>{
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" },
getHiddenBookInfo() {
console.log("this.companyInfoId", this.companyInfoId);
console.log("this.annual", this.annual);
hiddenBookStatistics({
companyInfoId: this.companyInfoId,
annual: this.annual,
source: "1",
}).then((res) => {
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.crackNum, color: "#86FF5B" },
{ 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.otherNum, color: "#1F8DF3" }]
{ name: "其他", value: res.data.otherNum, color: "#1F8DF3" },
],
this.reasonOptions = this.bottomOptions();
}
//console.log("res==================",res)
})
}
]),
(this.reasonOptions = this.bottomOptions());
}
//console.log("res==================",res)
});
},
},
};
</script>
......@@ -278,8 +293,8 @@ export default {
}
.three {
font-size: 16px;
flex: 1;
// background: red;
.chars-box {
flex: 1;
}
......
<!--
* @Author: your name
* @Date: 2022-04-11 14:11:04
* @LastEditTime: 2022-04-14 10:45:52
* @LastEditors: Please set LastEditors
* @LastEditTime: 2026-05-06 11:39:01
* @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/operationMonitor/xunjianxuncha/index.vue
-->
<template>
<div class="app-container xjxc">
<div class="shai" >
<div class="shai">
<el-select
clearable
v-model="danwei"
placeholder="请选择单位"
@change="selectcompanyId"
>
<el-option
v-for="item in enterprises"
:key="item.enterpriseId"
:label="item.enterpriseName"
:value="item.enterpriseId"
></el-option>
</el-select>
<el-option
v-for="item in enterprises"
:key="item.enterpriseId"
:label="item.enterpriseName"
:value="item.enterpriseId"
></el-option>
</el-select>
</div>
<el-tabs v-model="activeName" style="width: 300px" @tab-click="handleClick">
<el-tab-pane label="2026年度" name="2026"></el-tab-pane>
......@@ -30,35 +29,34 @@
<el-tab-pane label="2024年度" name="2024"></el-tab-pane>
<el-tab-pane label="2023年度" name="2023"></el-tab-pane>
</el-tabs>
<div class="wrapper flex-h">
<div class="top flex">
<div class="middle">
<XjMiddle :annual="activeName" :companyInfoId="companyInfoId"/>
<div class="wrapper-b-wrapper">
<div class="wrapper-b flex-h">
<div class="top flex">
<div class="middle">
<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 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="middle">
<XjLeft :annual="activeName"/>
</div>
<div class="middle">
<Left />
<div class="bottom flex">
<div class="middle">
<XjLeft :annual="activeName" />
</div>
<div class="middle">
<Left />
</div>
<div class="middle">
<Right />
</div>
</div>
<div class="middle">
<Right/>
</div>
</div>
<!-- <div class="bottom">
<!-- <div class="bottom">
<div class="left">
<XjLeft />
</div>
......@@ -70,9 +68,7 @@
</div>
</div>-->
<!-- <div class="top flex">
<!-- <div class="top flex">
<div class="right">
<Right :annual="activeName" :companyInfoId="companyInfoId" />
</div>
......@@ -88,6 +84,7 @@
<div class="bottom">
<Middle :annual="activeName" :companyInfoId="companyInfoId" />
</div>-->
</div>
</div>
</div>
</template>
......@@ -108,68 +105,82 @@ export default {
Left,
XjLeft,
Middle,
Right
Right,
},
data() {
return {
danwei:null,
danwei: null,
enterprises: [],
activeName: '2025',
companyInfoId:''
activeName: "2025",
companyInfoId: "",
};
},
created() {
this.getEnterpriseLists();
},
methods: {
selectcompanyId(e){
selectcompanyId(e) {
this.companyInfoId = e;
},
//所属单位
getEnterpriseLists(){
getEnterpriseLists() {
const param = {};
enterpriseLists(param).then(response => {
enterpriseLists(param).then((response) => {
this.enterprises = response.rows;
});
},
handleClick(tab, event) {
console.log(tab, event);
}
},
},
mounted(){
}
mounted() {},
};
</script>
<style lang="scss" scoped>
.app-main {
}
.app-container {
display: flex;
flex-direction: column;
}
.xjxc {
height: calc(100vh - 50px) !important;
overflow: auto;
}
.flex {
display: flex;
justify-content: space-between;
}
.flex-h {
.wrapper-b-wrapper{
flex:1;
// border:1px solid red
// background: red;
}
.wrapper-b {
display: flex;
// justify-content: space-around;
flex-direction: column;
min-height: 818px;
height: 100%;
.top {
height: 47%;
.top,
.bottom {
height: 55%;
.left {
width: 70%;
box-sizing: border-box;
padding: 15px 24px 19px;
}
.middle {
width: 35.3%;
padding: 15px 80px 19px 71px;
width: 33.3%;
box-sizing: border-box;
padding: 15px 20px 19px 20px;
}
.right {
width: 30.2%;
box-sizing: border-box;
padding: 15px 29px;
}
> div {
......@@ -178,26 +189,31 @@ export default {
border-radius: 3px;
}
}
>.middle {
> .middle {
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;
}
.bottom {
flex: 1;
flex: 1 !important;
}
> div {
// height: 50%;
}
}
.shai{
position: fixed;
right: 20px;
width: 300px;
height: 40px;
}
::v-deep .el-select{
.shai {
position: fixed;
right: 20px;
width: 300px;
height: 40px;
}
::v-deep .el-select {
width: 300px;
}
</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