数据大屏右侧
This commit is contained in:
Vce
parent
41d148a0d3
commit
78d05bea05
64
package-lock.json
generated
64
package-lock.json
generated
@ -22,7 +22,7 @@
|
||||
"date-fns": "^2.29.3",
|
||||
"dhtmlx-gantt": "^8.0.6",
|
||||
"driver.js": "^0.9.8",
|
||||
"echarts": "^5.3.0",
|
||||
"echarts": "^4.9.0",
|
||||
"echarts-gl": "^2.0.9",
|
||||
"echarts-liquidfill": "^3.1.0",
|
||||
"element-china-area-data": "^5.0.2",
|
||||
@ -6204,7 +6204,7 @@
|
||||
},
|
||||
"node_modules/dhtmlx-gantt": {
|
||||
"version": "8.0.6",
|
||||
"resolved": "https://registry.npmjs.org/dhtmlx-gantt/-/dhtmlx-gantt-8.0.6.tgz",
|
||||
"resolved": "https://registry.npmmirror.com/dhtmlx-gantt/-/dhtmlx-gantt-8.0.6.tgz",
|
||||
"integrity": "sha512-GrEQ40/vgV1wDWkv/IvjJEM27Z4lDv76XvE5nlvMtFQTqUuo5VnL1XNDv/uFSJVMRnaN9StYaPxP1ebGamDLFg=="
|
||||
},
|
||||
"node_modules/diff": {
|
||||
@ -6448,12 +6448,11 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/echarts": {
|
||||
"version": "5.4.2",
|
||||
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.2.tgz",
|
||||
"integrity": "sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==",
|
||||
"version": "4.9.0",
|
||||
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-4.9.0.tgz",
|
||||
"integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0",
|
||||
"zrender": "5.4.3"
|
||||
"zrender": "4.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/echarts-gl": {
|
||||
@ -6476,6 +6475,11 @@
|
||||
"echarts": "^5.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/echarts/node_modules/zrender": {
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-4.3.2.tgz",
|
||||
"integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
|
||||
},
|
||||
"node_modules/ee-first": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
|
||||
@ -7553,9 +7557,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/ezuikit-js": {
|
||||
"version": "7.7.8",
|
||||
"resolved": "https://registry.npmjs.org/ezuikit-js/-/ezuikit-js-7.7.8.tgz",
|
||||
"integrity": "sha512-DfcPxUhLgchkQU5+0WllD3QghAJYG9mCybCCs0znLoSnMupup6WB1+wjrxPtpt49praQDuMrGoBVe0Mtl1z9/w=="
|
||||
"version": "7.7.10",
|
||||
"resolved": "https://registry.npmmirror.com/ezuikit-js/-/ezuikit-js-7.7.10.tgz",
|
||||
"integrity": "sha512-mpySnXY3F4LzW0R262IZIFBfp3fpDNVaB5UBAeO/IhofZii+2UD0p5Oc/2BrPfjADmcZnGCMOvJ92hlUMkk5EQ=="
|
||||
},
|
||||
"node_modules/fast-deep-equal": {
|
||||
"version": "3.1.3",
|
||||
@ -9174,16 +9178,16 @@
|
||||
"integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
|
||||
},
|
||||
"node_modules/jquery-ui": {
|
||||
"version": "1.13.2",
|
||||
"resolved": "https://registry.npmmirror.com/jquery-ui/-/jquery-ui-1.13.2.tgz",
|
||||
"integrity": "sha512-wBZPnqWs5GaYJmo1Jj0k/mrSkzdQzKDwhXNtHKcBdAcKVxMM3KNYFq+iJ2i1rwiG53Z8M4mTn3Qxrm17uH1D4Q==",
|
||||
"version": "1.13.3",
|
||||
"resolved": "https://registry.npmmirror.com/jquery-ui/-/jquery-ui-1.13.3.tgz",
|
||||
"integrity": "sha512-D2YJfswSJRh/B8M/zCowDpNFfwsDmtfnMPwjJTyvl+CBqzpYwQ+gFYIbUUlzijy/Qvoy30H1YhoSui4MNYpRwA==",
|
||||
"dependencies": {
|
||||
"jquery": ">=1.8.0 <4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/jquery-ui-dist": {
|
||||
"version": "1.13.2",
|
||||
"resolved": "https://registry.npmjs.org/jquery-ui-dist/-/jquery-ui-dist-1.13.2.tgz",
|
||||
"resolved": "https://registry.npmmirror.com/jquery-ui-dist/-/jquery-ui-dist-1.13.2.tgz",
|
||||
"integrity": "sha512-oVDRd1NLtTbBwpRKAYdIRgpWVDzeBhfy7Gu0RmY6JEaZtmBq6kDn1pm5SgDiAotrnDS+RoTRXO6xvcNTxA9tOA==",
|
||||
"dependencies": {
|
||||
"jquery": ">=1.8.0 <4.0.0"
|
||||
@ -20629,7 +20633,7 @@
|
||||
},
|
||||
"dhtmlx-gantt": {
|
||||
"version": "8.0.6",
|
||||
"resolved": "https://registry.npmjs.org/dhtmlx-gantt/-/dhtmlx-gantt-8.0.6.tgz",
|
||||
"resolved": "https://registry.npmmirror.com/dhtmlx-gantt/-/dhtmlx-gantt-8.0.6.tgz",
|
||||
"integrity": "sha512-GrEQ40/vgV1wDWkv/IvjJEM27Z4lDv76XvE5nlvMtFQTqUuo5VnL1XNDv/uFSJVMRnaN9StYaPxP1ebGamDLFg=="
|
||||
},
|
||||
"diff": {
|
||||
@ -20815,12 +20819,18 @@
|
||||
"dev": true
|
||||
},
|
||||
"echarts": {
|
||||
"version": "5.4.2",
|
||||
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.2.tgz",
|
||||
"integrity": "sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==",
|
||||
"version": "4.9.0",
|
||||
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-4.9.0.tgz",
|
||||
"integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
|
||||
"requires": {
|
||||
"tslib": "2.3.0",
|
||||
"zrender": "5.4.3"
|
||||
"zrender": "4.3.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"zrender": {
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-4.3.2.tgz",
|
||||
"integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"echarts-gl": {
|
||||
@ -21563,9 +21573,9 @@
|
||||
}
|
||||
},
|
||||
"ezuikit-js": {
|
||||
"version": "7.7.8",
|
||||
"resolved": "https://registry.npmjs.org/ezuikit-js/-/ezuikit-js-7.7.8.tgz",
|
||||
"integrity": "sha512-DfcPxUhLgchkQU5+0WllD3QghAJYG9mCybCCs0znLoSnMupup6WB1+wjrxPtpt49praQDuMrGoBVe0Mtl1z9/w=="
|
||||
"version": "7.7.10",
|
||||
"resolved": "https://registry.npmmirror.com/ezuikit-js/-/ezuikit-js-7.7.10.tgz",
|
||||
"integrity": "sha512-mpySnXY3F4LzW0R262IZIFBfp3fpDNVaB5UBAeO/IhofZii+2UD0p5Oc/2BrPfjADmcZnGCMOvJ92hlUMkk5EQ=="
|
||||
},
|
||||
"fast-deep-equal": {
|
||||
"version": "3.1.3",
|
||||
@ -22780,16 +22790,16 @@
|
||||
"integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
|
||||
},
|
||||
"jquery-ui": {
|
||||
"version": "1.13.2",
|
||||
"resolved": "https://registry.npmmirror.com/jquery-ui/-/jquery-ui-1.13.2.tgz",
|
||||
"integrity": "sha512-wBZPnqWs5GaYJmo1Jj0k/mrSkzdQzKDwhXNtHKcBdAcKVxMM3KNYFq+iJ2i1rwiG53Z8M4mTn3Qxrm17uH1D4Q==",
|
||||
"version": "1.13.3",
|
||||
"resolved": "https://registry.npmmirror.com/jquery-ui/-/jquery-ui-1.13.3.tgz",
|
||||
"integrity": "sha512-D2YJfswSJRh/B8M/zCowDpNFfwsDmtfnMPwjJTyvl+CBqzpYwQ+gFYIbUUlzijy/Qvoy30H1YhoSui4MNYpRwA==",
|
||||
"requires": {
|
||||
"jquery": ">=1.8.0 <4.0.0"
|
||||
}
|
||||
},
|
||||
"jquery-ui-dist": {
|
||||
"version": "1.13.2",
|
||||
"resolved": "https://registry.npmjs.org/jquery-ui-dist/-/jquery-ui-dist-1.13.2.tgz",
|
||||
"resolved": "https://registry.npmmirror.com/jquery-ui-dist/-/jquery-ui-dist-1.13.2.tgz",
|
||||
"integrity": "sha512-oVDRd1NLtTbBwpRKAYdIRgpWVDzeBhfy7Gu0RmY6JEaZtmBq6kDn1pm5SgDiAotrnDS+RoTRXO6xvcNTxA9tOA==",
|
||||
"requires": {
|
||||
"jquery": ">=1.8.0 <4.0.0"
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
"date-fns": "^2.29.3",
|
||||
"dhtmlx-gantt": "^8.0.6",
|
||||
"driver.js": "^0.9.8",
|
||||
"echarts": "^5.3.0",
|
||||
"echarts": "^4.9.0",
|
||||
"echarts-gl": "^2.0.9",
|
||||
"echarts-liquidfill": "^3.1.0",
|
||||
"element-china-area-data": "^5.0.2",
|
||||
|
||||
@ -61,3 +61,34 @@ export const getSelectQualityStatisticsNumApi = (params: {}) => {
|
||||
export const getCountDangerLevelApi = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/countDangerLevel`, params);
|
||||
};
|
||||
|
||||
// 分包单位统计
|
||||
export const getStatsByEnterpriseApi = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/statsByEnterprise`, params);
|
||||
};
|
||||
|
||||
// 责任区域排名
|
||||
export const getCountQualityInspectionRecordRegionApi = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/countQualityInspectionRecordRegion`, params);
|
||||
};
|
||||
|
||||
// 隐患类型分析
|
||||
export const getStatsDangerTypeApi = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/statsDangerType`, params);
|
||||
};
|
||||
|
||||
// 弹窗列表
|
||||
export const getXzSecurityQualitylnspectionRecordlistApi = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/list`, params);
|
||||
};
|
||||
// 督办
|
||||
export const getXzSecurityQualitylnspectionRecordSuperviseApi = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/supervise`, params);
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 隐患智能分析
|
||||
export const getNoticeListApi = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/notice/list`, params);
|
||||
};
|
||||
|
||||
@ -3,19 +3,19 @@
|
||||
<div class="cbHeader">
|
||||
<div class="cbHeaderInfo">
|
||||
<div class="cubeIcon"></div>
|
||||
<div>公告提示</div>
|
||||
<div class="cLeft">公告提示</div>
|
||||
</div>
|
||||
<div class="cbHeaderLine"></div>
|
||||
</div>
|
||||
<div class="cbContent">
|
||||
<el-scrollbar height="370">
|
||||
<div class="item" v-for="(item,index) in listData" :key="index">
|
||||
<vue3-seamless-scroll :list="listData" :step="1" :hover="true" class="scroll">
|
||||
<div class="item" v-for="(item, index) in listData" :key="index">
|
||||
<div class="itemHead">
|
||||
<div class="itemHeadInner" v-if="item.type === 1">{{item.header}}</div>
|
||||
<div class="itemHeadInner2" v-if="item.type === 3">{{item.header}}</div>
|
||||
<div class="itemHeadInner" v-if="item.type === 1">{{ item.header }}</div>
|
||||
<div class="itemHeadInner2" v-if="item.type === 3">{{ item.header }}</div>
|
||||
<div class="itemContent">
|
||||
<el-tooltip class="box-item" effect="dark" :content="item.content" placement="top-start">
|
||||
<text style="margin-left:10px">{{item.content}}</text>
|
||||
<text style="margin-left:10px">{{ item.content }}</text>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
@ -25,15 +25,16 @@
|
||||
</el-tooltip>
|
||||
</div> -->
|
||||
<div class="itemTime">
|
||||
<text class="timeInfo">{{item.startTime + '-' + item.endTime}}</text>
|
||||
<text class="timeInfo">{{ item.startTime + '-' + item.endTime }}</text>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</vue3-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
|
||||
import Card from "@/components/card.vue";
|
||||
import { ref, watch, onMounted } from "vue";
|
||||
import { getStageOption } from "@/api/modules/projectOverview";
|
||||
@ -41,27 +42,36 @@ import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
|
||||
let listData = ref([
|
||||
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...',startTime: '2024-04-01',endTime:"2024-04-20"},
|
||||
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...',startTime: '2024-04-01',endTime:"2024-04-20"},
|
||||
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...',startTime: '2024-04-01',endTime:"2024-04-20"},
|
||||
{header: 'AI报警',type: 3,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...',startTime: '2024-04-01',endTime:"2024-04-20"},
|
||||
{header: 'AI报警',type: 3,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...',startTime: '2024-04-01',endTime:"2024-04-20"},
|
||||
{header: 'AI报警',type: 3,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...',startTime: '2024-04-01',endTime:"2024-04-20"},
|
||||
{header: 'AI报警',type: 3,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...',startTime: '2024-04-01',endTime:"2024-04-20"},
|
||||
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...',startTime: '2024-04-01',endTime:"2024-04-20"},
|
||||
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...',startTime: '2024-04-01',endTime:"2024-04-20"},
|
||||
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...',startTime: '2024-04-01',endTime:"2024-04-20"},
|
||||
{header: 'AI报警',type: 3,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...',startTime: '2024-04-01',endTime:"2024-04-20"},
|
||||
{header: 'AI报警',type: 3,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...',startTime: '2024-04-01',endTime:"2024-04-20"},
|
||||
{ header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
||||
{ header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
||||
{ header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
||||
{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
||||
{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
||||
{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
||||
{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
||||
{ header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
||||
{ header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
||||
{ header: '重大风险', type: 1, content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
||||
{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
||||
{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
||||
{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
||||
{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
||||
{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
||||
{ header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" },
|
||||
])
|
||||
|
||||
onMounted( async () => {
|
||||
onMounted(async () => {
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.centerBottom{
|
||||
.scroll {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.centerBottom {
|
||||
background: url("@/assets/images/commandScreen/card-center-bottom.png") no-repeat;
|
||||
// background: #fff;
|
||||
background-size: 100% 100%;
|
||||
@ -70,17 +80,30 @@ onMounted( async () => {
|
||||
// background-color: #fff;
|
||||
padding: 10px 20px;
|
||||
position: relative;
|
||||
|
||||
// padding-top: 15px;
|
||||
.cbHeader{
|
||||
width:100%;
|
||||
.cbHeader {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
|
||||
// background-color: darkred;
|
||||
.cbHeaderInfo{
|
||||
.cbHeaderInfo {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.cubeIcon{
|
||||
|
||||
.cLeft {
|
||||
width: 50%;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
background-image: linear-gradient(to bottom left, #c8E3FF, #007AFF);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.cubeIcon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
// background-color: #fff;
|
||||
@ -90,7 +113,8 @@ onMounted( async () => {
|
||||
margin: 0 3px 0 -5px;
|
||||
}
|
||||
}
|
||||
.cbHeaderLine{
|
||||
|
||||
.cbHeaderLine {
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
// background-color: darkblue;
|
||||
@ -98,11 +122,13 @@ onMounted( async () => {
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.cbContent{
|
||||
|
||||
.cbContent {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
|
||||
// background: #fff;
|
||||
.item{
|
||||
.item {
|
||||
width: 100%;
|
||||
line-height: 130%;
|
||||
display: flex;
|
||||
@ -111,33 +137,37 @@ onMounted( async () => {
|
||||
justify-content: space-between;
|
||||
// background-color: green;
|
||||
color: #fff;
|
||||
.itemHead{
|
||||
|
||||
.itemHead {
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
width: 75%;
|
||||
.itemHeadInner{
|
||||
border: 1px solid #f77c7d;
|
||||
|
||||
.itemHeadInner {
|
||||
border: 1px solid #f77c7d;
|
||||
box-shadow: 0 0 0 1px #f77c7d;
|
||||
background: rgba(247,124,125, 0.4);
|
||||
background: rgba(247, 124, 125, 0.4);
|
||||
border-radius: 3px;
|
||||
padding: 0 15px;
|
||||
margin: 9px 0;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.itemHeadInner2{
|
||||
|
||||
.itemHeadInner2 {
|
||||
font-size: 16px;
|
||||
border: 1px solid #0db027;
|
||||
border: 1px solid #0db027;
|
||||
box-shadow: 0 0 0 1px #0db027;
|
||||
background: rgba(13,176,39, 0.4);
|
||||
background: rgba(13, 176, 39, 0.4);
|
||||
border-radius: 3px;
|
||||
padding: 0 15px;
|
||||
margin: 9px 0;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.itemContent{
|
||||
|
||||
.itemContent {
|
||||
margin-left: 10px;
|
||||
font-size: 15px;
|
||||
white-space: nowrap;
|
||||
@ -146,11 +176,13 @@ onMounted( async () => {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.itemTime{
|
||||
|
||||
.itemTime {
|
||||
// background-color: #fff;
|
||||
width: 25%;
|
||||
font-size: 16px;
|
||||
.timeInfo{
|
||||
|
||||
.timeInfo {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-right: 10px;
|
||||
|
||||
@ -5,13 +5,15 @@
|
||||
隐患统计智能分析
|
||||
</div>
|
||||
<div class="hRight">
|
||||
<el-date-picker style="width: 85%" v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :size="size"/>
|
||||
<el-date-picker style="width: 85%" v-model="dateRange" type="daterange" range-separator="至"
|
||||
start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="contentTop">
|
||||
<div class="ctHead">
|
||||
<div>重大隐患超期未整改<text>{{overdueMajorDangerCount}}</text>个，占比<text>{{overdueMajorDangerRate}}%</text></div>
|
||||
<div>重大隐患超期未整改<text>{{ overdueMajorDangerCount }}</text>个，占比<text>{{ overdueMajorDangerRate }}%</text>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ctContent">
|
||||
<div id="echartsSafe" style="width: 100%; height: 100%"></div>
|
||||
@ -20,7 +22,7 @@
|
||||
|
||||
<div class="contentMiddle">
|
||||
<div class="cmHead">
|
||||
<div>重大隐患未销项<text>{{majorDangerCount}}</text>个，占比<text>{{majorDangerRate}}%</text></div>
|
||||
<div>重大隐患未销项<text>{{ majorDangerCount }}</text>个，占比<text>{{ majorDangerRate }}%</text></div>
|
||||
</div>
|
||||
<div class="cmContent">
|
||||
<div id="echarts2" style="width: 100%; height: 100%"></div>
|
||||
@ -32,24 +34,25 @@
|
||||
<div class="cbHeader">
|
||||
<div class="cbHeaderInfo">
|
||||
<div class="cubeIcon"></div>
|
||||
<div>教育智能提示</div>
|
||||
<div class="cLeft">隐患智能分析</div>
|
||||
</div>
|
||||
<div class="cbHeaderLine"></div>
|
||||
</div>
|
||||
<div class="cbContent">
|
||||
<el-scrollbar height="350">
|
||||
<div class="item" v-for="(item,index) in listData" :key="index">
|
||||
<vue3-seamless-scroll :list="listData" :step="1" :limitScrollNum="13" :hover="true" class="scroll">
|
||||
<div class="item" v-for="(item, index) in listData" :key="index">
|
||||
<div class="itemHead">
|
||||
<div class="itemHeadInner" v-if="item.type === 1">{{item.header}}</div>
|
||||
<div class="itemHeadInner2" v-if="item.type === 2">{{item.header}}</div>
|
||||
<div class="itemHeadInner" v-if="item.type === 1">{{ item.title }}</div>
|
||||
<div class="itemHeadInner2" v-if="item.type === 2">{{ item.title }}</div>
|
||||
<div class="itemHeadInner3" v-if="item.type == 10">{{ item.title }}</div>
|
||||
</div>
|
||||
<div class="itemContent">
|
||||
<el-tooltip class="box-item" effect="dark" :content="item.content" placement="top-start">
|
||||
{{item.content}}
|
||||
<el-tooltip class="box-item" effect="dark" :content="item.msg" placement="top-start">
|
||||
{{ item.msg }}
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</vue3-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -57,11 +60,17 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
|
||||
import Card from "@/components/card.vue";
|
||||
import { onMounted, ref } from "vue";
|
||||
import { onMounted, ref,watch } from "vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
import { getProjectInspectRecordCountApi, getSelectQualityStatisticsNumApi, getCountDangerLevelApi } from "@/api/modules/projectOverview";
|
||||
import {
|
||||
getProjectInspectRecordCountApi,
|
||||
getSelectQualityStatisticsNumApi,
|
||||
getCountDangerLevelApi,
|
||||
getNoticeListApi
|
||||
} from "@/api/modules/projectOverview";
|
||||
import { selectQualityStatisticsApi } from "@/api/modules/projectOverview";
|
||||
import * as echarts from "echarts";
|
||||
const echartsTest = ref();
|
||||
@ -77,23 +86,20 @@ let overdueMajorDangerCount = ref(20 as any);
|
||||
let overdueMajorDangerRate = ref(50 as any);
|
||||
|
||||
let listData = ref([
|
||||
{header: '隐患分类',type: 1,content: '经过智能分析统计，近一个月脚手架类安全隐患最多达...'},
|
||||
{header: '重大隐患',type: 1,content: '组织专业人员对隐患进行彻底排查和评估，明确隐患的性质、范围和...'},
|
||||
{header: '隐患责任区域',type: 1,content: '经过智能分析统计，近一个月区域-1安全隐患多达4对设备进行...'},
|
||||
{header: '隐患分包单位',type: 1,content: '经过智能分析统计，近一月木工班组-管理一组隐患期对设备进行...'},
|
||||
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止...'},
|
||||
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止...'},
|
||||
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止...'},
|
||||
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止...'},
|
||||
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止...'},
|
||||
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止...'},
|
||||
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止...'},
|
||||
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止...'},
|
||||
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止...'},
|
||||
{ title: '隐患分类', type: 1, msg: '经过智能分析统计，近一个月脚手架类安全隐患最多达...' },
|
||||
{ title: '重大隐患', type: 2, msg: '组织专业人员对隐患进行彻底排查和评估，明确隐患的性质、范围和...' },
|
||||
{ title: '隐患分类', type: 1, msg: '经过智能分析统计，近一个月脚手架类安全隐患最多达...' },
|
||||
{ title: '重大隐患', type: 2, msg: '组织专业人员对隐患进行彻底排查和评估，明确隐患的性质、范围和...' },
|
||||
{ title: '隐患分类', type: 1, msg: '经过智能分析统计，近一个月脚手架类安全隐患最多达...' },
|
||||
{ title: '重大隐患', type: 2, msg: '组织专业人员对隐患进行彻底排查和评估，明确隐患的性质、范围和...' },
|
||||
{ title: '隐患分类', type: 1, msg: '经过智能分析统计，近一个月脚手架类安全隐患最多达...' },
|
||||
{ title: '重大隐患', type: 2, msg: '组织专业人员对隐患进行彻底排查和评估，明确隐患的性质、范围和...' },
|
||||
{ title: '隐患分类', type: 1, msg: '经过智能分析统计，近一个月脚手架类安全隐患最多达...' },
|
||||
])
|
||||
|
||||
let dataList = ref([
|
||||
{
|
||||
enumType:"",
|
||||
value: 30,
|
||||
show: true,
|
||||
name: "重大隐患",
|
||||
@ -105,6 +111,7 @@ let dataList = ref([
|
||||
}
|
||||
},
|
||||
{
|
||||
enumType:"",
|
||||
value: 70,
|
||||
show: true,
|
||||
name: "一般隐患",
|
||||
@ -117,6 +124,8 @@ let dataList = ref([
|
||||
}
|
||||
]);
|
||||
|
||||
const classColorList = ref(["#EC6266","#6375C7","#038cf5","#01d6f4"]);
|
||||
|
||||
function Pie() {
|
||||
let dataArr = [];
|
||||
for (var i = 0; i < 150; i++) {
|
||||
@ -182,9 +191,9 @@ function drawEchart() {
|
||||
type: "plain",
|
||||
orient: "vertical",
|
||||
left: "55%",
|
||||
top: "35%",
|
||||
top: "20%",
|
||||
align: "left",
|
||||
itemGap: 30,
|
||||
itemGap: 20,
|
||||
itemWidth: 8, // 设置宽度
|
||||
itemHeight: 7, // 设置高度
|
||||
symbolKeepAspect: false,
|
||||
@ -209,7 +218,7 @@ function drawEchart() {
|
||||
return item.name;
|
||||
}
|
||||
}),
|
||||
formatter: function (data) {
|
||||
formatter: function (data:any) {
|
||||
if (dataList.value && dataList.value.length) {
|
||||
for (var i = 0; i < dataList.value.length; i++) {
|
||||
if (data === dataList.value[i].name) {
|
||||
@ -368,17 +377,24 @@ function drawEchart() {
|
||||
echartsTest.value.resize();
|
||||
})
|
||||
console.log(echartsTest.value);
|
||||
|
||||
|
||||
//图例点击事件
|
||||
echartsTest.value.on('legendselectchanged', (params:any) => {
|
||||
echartsTest.value.on('legendselectchanged', (params: any) => {
|
||||
console.log(emits);
|
||||
echartsTest.value.setOption({
|
||||
legend:{selected:{[params.name]: true}}
|
||||
})
|
||||
legend: { selected: { [params.name]: true } }
|
||||
})
|
||||
|
||||
emits("openDialog",{
|
||||
index:7,
|
||||
title:params.name,
|
||||
emits("openDialog", {
|
||||
index: 7,
|
||||
title: params.name + "超期未整改",
|
||||
majorInfo:{
|
||||
isOverdueRectification:1,
|
||||
isNotQualified:0,
|
||||
enumType:dataList.value.find(item => item.name == params.name)?.enumType,
|
||||
inspectStartTime:dateRange.value[0],
|
||||
inspectEndTime:dateRange.value[1],
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
@ -389,29 +405,37 @@ const getSafeInfo = async () => {
|
||||
// safeData.value = res.result;
|
||||
// dataList.value[0].value = res.result.rectificationNum;
|
||||
// dataList.value[1].value = res.result.totalNum - res.result.rectificationNum;
|
||||
|
||||
|
||||
const res: any = await getCountDangerLevelApi({ projectSn: store.sn,isOverdueRectification:true, });
|
||||
dataList.value = res.result.data.map((item:any,index:number) => {
|
||||
|
||||
const res: any = await getCountDangerLevelApi({ projectSn: store.sn, isOverdueRectification: 1,inspectStartTime:dateRange.value[0],inspectEndTime:dateRange.value[1], });
|
||||
dataList.value = res.result.data.map((item: any, index: number) => {
|
||||
return {
|
||||
...item,
|
||||
value: item.count,
|
||||
show: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: index == 0 ? "#EC6266" : '#6375C7',
|
||||
borderWidth: 20
|
||||
...item,
|
||||
value: item.count,
|
||||
show: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: classColorList.value[index],
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
});
|
||||
questionTotal.value = res.result.count;
|
||||
console.log("饼图", res);
|
||||
|
||||
const filterResult = res.result.data.find((item:any) => item.enumType == 1);
|
||||
|
||||
overdueMajorDangerCount.value = filterResult.count;
|
||||
overdueMajorDangerRate.value = filterResult.percent;
|
||||
|
||||
drawEchart();
|
||||
};
|
||||
|
||||
|
||||
let dataList2 = ref([
|
||||
{
|
||||
enumType:"",
|
||||
value: 30,
|
||||
show: true,
|
||||
name: "重大隐患",
|
||||
@ -464,14 +488,14 @@ function drawEchart2() {
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
selectedMode: false, // 取消图例上的点击事件
|
||||
selectedMode: true, // 取消图例上的点击事件
|
||||
icon: "rect",
|
||||
type: "plain",
|
||||
orient: "vertical",
|
||||
left: "55%",
|
||||
top: "35%",
|
||||
top: "20%",
|
||||
align: "left",
|
||||
itemGap: 30,
|
||||
itemGap: 20,
|
||||
itemWidth: 8, // 设置宽度
|
||||
itemHeight: 7, // 设置高度
|
||||
symbolKeepAspect: false,
|
||||
@ -496,7 +520,7 @@ function drawEchart2() {
|
||||
return item.name;
|
||||
}
|
||||
}),
|
||||
formatter: function (data) {
|
||||
formatter: function (data:any) {
|
||||
if (dataList2.value && dataList2.value.length) {
|
||||
for (var i = 0; i < dataList2.value.length; i++) {
|
||||
if (data === dataList2.value[i].name) {
|
||||
@ -651,10 +675,28 @@ function drawEchart2() {
|
||||
]
|
||||
};
|
||||
echartsTest.setOption(option, true);
|
||||
// window.addEventListener("resize", () => {
|
||||
// console.log(666)
|
||||
// echartsTest.resize();
|
||||
// })
|
||||
window.addEventListener("resize", () => {
|
||||
echartsTest.resize();
|
||||
})
|
||||
//图例点击事件
|
||||
echartsTest.on('legendselectchanged', (params: any) => {
|
||||
console.log(emits);
|
||||
echartsTest.setOption({
|
||||
legend: { selected: { [params.name]: true } }
|
||||
})
|
||||
|
||||
emits("openDialog", {
|
||||
index: 7,
|
||||
title: params.name + "未消项目",
|
||||
majorInfo:{
|
||||
isOverdueRectification:0,
|
||||
isNotQualified:1,
|
||||
enumType:dataList2.value.find(item => item.name == params.name)?.enumType,
|
||||
inspectStartTime:dateRange.value[0],
|
||||
inspectEndTime:dateRange.value[1],
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const qualityInfo = async () => {
|
||||
@ -663,50 +705,81 @@ const qualityInfo = async () => {
|
||||
// dataList2.value[1].value = res.result.total.totalNum - res.result.total.rectificationNum;
|
||||
// questionTotal.value = res.result.total.totalNum;
|
||||
|
||||
const res: any = await getCountDangerLevelApi({ projectSn: store.sn,isNotQualified:true, });
|
||||
dataList2.value = res.result.data.map((item:any,index:number) => {
|
||||
const res: any = await getCountDangerLevelApi({
|
||||
projectSn: store.sn,
|
||||
isNotQualified: 1,
|
||||
inspectStartTime:dateRange.value[0],
|
||||
inspectEndTime:dateRange.value[1],
|
||||
});
|
||||
dataList2.value = res.result.data.map((item: any, index: number) => {
|
||||
return {
|
||||
...item,
|
||||
value: item.count,
|
||||
show: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: index == 0 ? "#038cf5" : '#01d6f4',
|
||||
borderWidth: 20
|
||||
...item,
|
||||
value: item.count,
|
||||
show: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: classColorList.value[index],
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
});
|
||||
questionTotal.value = res.result.count;
|
||||
|
||||
const filterResult = res.result.data.find((item:any) => item.enumType == 1);
|
||||
majorDangerCount.value = filterResult.count;
|
||||
majorDangerRate.value = filterResult.percent;
|
||||
|
||||
drawEchart2();
|
||||
};
|
||||
|
||||
const getSelectQualityStatisticsNum= async () => {
|
||||
const res: any = await getSelectQualityStatisticsNumApi({ projectSn: store.sn, });
|
||||
const getSelectQualityStatisticsNum = async () => {
|
||||
const res: any = await getSelectQualityStatisticsNumApi({
|
||||
projectSn: store.sn,
|
||||
inspectStartTime:dateRange.value[0],
|
||||
inspectEndTime:dateRange.value[1],
|
||||
});
|
||||
console.log(res);
|
||||
overdueMajorDangerCount.value = res.result.overdueRectificationNum;
|
||||
overdueMajorDangerRate.value = res.result.overdueRectificationNumRatio;
|
||||
majorDangerCount.value = res.result.notCloseNum;
|
||||
// majorDangerRate.value = res.result.overdueRectificationNumRatio;
|
||||
}
|
||||
|
||||
const getNoticeList = async () => {
|
||||
const res: any = await getNoticeListApi({ projectSn: store.sn, type: 10, pageNo: 1, pageSize: 99999, });
|
||||
console.log('隐患智能分析', res);
|
||||
listData.value = res.result.records;
|
||||
}
|
||||
|
||||
watch(dateRange,async () => {
|
||||
if(dateRange.value == null) {
|
||||
dateRange.value = [];
|
||||
}
|
||||
await getSafeInfo();
|
||||
await qualityInfo();
|
||||
// await getSelectQualityStatisticsNum();
|
||||
},{deep:true})
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
await getSafeInfo();
|
||||
await qualityInfo();
|
||||
await getSelectQualityStatisticsNum();
|
||||
await getNoticeList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.scroll {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rightAll {
|
||||
background: url("@/assets/images/commandScreen/card-right-all.png") no-repeat;
|
||||
// background-color: #fff;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 102.1%;
|
||||
.header{
|
||||
|
||||
.header {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
display: flex;
|
||||
@ -714,22 +787,32 @@ onMounted(async () => {
|
||||
justify-content: space-between;
|
||||
padding: 20px 20px;
|
||||
border-bottom: 1px solid #0059ff;
|
||||
.hLeft{
|
||||
|
||||
.hLeft {
|
||||
width: 50%;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
background-image: linear-gradient(to bottom left, #c8E3FF, #007AFF);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
.hRight{
|
||||
|
||||
.hRight {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
|
||||
.content {
|
||||
padding: 0 20px;
|
||||
height: 100%;
|
||||
.contentTop{
|
||||
|
||||
.contentTop {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
height: 25%;
|
||||
.ctHead{
|
||||
|
||||
.ctHead {
|
||||
background-color: #002f69;
|
||||
padding-bottom: 5px;
|
||||
color: #fff;
|
||||
@ -738,20 +821,24 @@ onMounted(async () => {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
text{
|
||||
|
||||
text {
|
||||
font-size: 24px;
|
||||
color: #fc4c4c;
|
||||
}
|
||||
}
|
||||
.ctContent{
|
||||
|
||||
.ctContent {
|
||||
height: 85%;
|
||||
// background-color: darkred;
|
||||
}
|
||||
}
|
||||
.contentMiddle{
|
||||
|
||||
.contentMiddle {
|
||||
width: 100%;
|
||||
height: 25%;
|
||||
.cmHead{
|
||||
|
||||
.cmHead {
|
||||
background-color: #002f69;
|
||||
padding-bottom: 5px;
|
||||
color: #fff;
|
||||
@ -760,17 +847,20 @@ onMounted(async () => {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
text{
|
||||
|
||||
text {
|
||||
font-size: 24px;
|
||||
color: #0db027;
|
||||
}
|
||||
}
|
||||
.cmContent{
|
||||
|
||||
.cmContent {
|
||||
height: 85%;
|
||||
// background-color: darkred;
|
||||
}
|
||||
}
|
||||
.contentBottom{
|
||||
|
||||
.contentBottom {
|
||||
// width: 100%;
|
||||
height: 42.5%;
|
||||
// background-color: darkred;
|
||||
@ -779,16 +869,29 @@ onMounted(async () => {
|
||||
// background-color: #fff;
|
||||
// padding: 0 20px;
|
||||
position: relative;
|
||||
.cbHeader{
|
||||
width:100%;
|
||||
|
||||
.cbHeader {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
|
||||
// background-color: darkred;
|
||||
.cbHeaderInfo{
|
||||
.cbHeaderInfo {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.cubeIcon{
|
||||
|
||||
.cLeft {
|
||||
width: 50%;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
background-image: linear-gradient(to bottom left, #c8E3FF, #007AFF);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.cubeIcon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
// background-color: #fff;
|
||||
@ -798,7 +901,8 @@ onMounted(async () => {
|
||||
margin: 0 3px 0 -5px;
|
||||
}
|
||||
}
|
||||
.cbHeaderLine{
|
||||
|
||||
.cbHeaderLine {
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
// background-color: darkblue;
|
||||
@ -806,11 +910,13 @@ onMounted(async () => {
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.cbContent{
|
||||
|
||||
.cbContent {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
|
||||
// background: #fff;
|
||||
.item{
|
||||
.item {
|
||||
// width: 100%;
|
||||
line-height: 130%;
|
||||
display: flex;
|
||||
@ -818,36 +924,51 @@ onMounted(async () => {
|
||||
justify-content: flex-start;
|
||||
// background-color: green;
|
||||
color: #fff;
|
||||
.itemHead{
|
||||
|
||||
.itemHead {
|
||||
white-space: nowrap;
|
||||
.itemHeadInner{
|
||||
|
||||
.itemHeadInner {
|
||||
font-size: 16px;
|
||||
border: 1px solid #f77c7d;
|
||||
border: 1px solid #f77c7d;
|
||||
box-shadow: 0 0 0 1px #f77c7d;
|
||||
background: rgba(247,124,125, 0.4);
|
||||
background: rgba(247, 124, 125, 0.4);
|
||||
border-radius: 3px;
|
||||
padding: 0 15px;
|
||||
margin: 9px 0;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.itemHeadInner2{
|
||||
|
||||
.itemHeadInner2 {
|
||||
font-size: 16px;
|
||||
border: 1px solid #56a8f8;
|
||||
border: 1px solid #56a8f8;
|
||||
box-shadow: 0 0 0 1px #56a8f8;
|
||||
background: rgba(86,168,248, 0.4);
|
||||
background: rgba(86, 168, 248, 0.4);
|
||||
border-radius: 3px;
|
||||
padding: 0 15px;
|
||||
margin: 9px 0;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.itemHeadInner3 {
|
||||
font-size: 16px;
|
||||
border: 1px solid #0db027;
|
||||
box-shadow: 0 0 0 1px #0db027;
|
||||
background: rgba(13, 176, 39, 0.4);
|
||||
border-radius: 3px;
|
||||
padding: 0 15px;
|
||||
margin: 9px 0;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
.itemContent{
|
||||
|
||||
.itemContent {
|
||||
margin-left: 10px;
|
||||
font-size: 15px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -858,18 +979,22 @@ onMounted(async () => {
|
||||
::v-deep .el-input__inner {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-select .el-input .el-select__caret {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-input__wrapper {
|
||||
width: 85%;
|
||||
height: 0%;
|
||||
background: #0d2956;
|
||||
}
|
||||
|
||||
::v-deep .el-range-separator {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
::v-deep .el-range-input {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
<aiAlarm ref="historyAlarmList" tip="安全教育"></aiAlarm>
|
||||
</div>
|
||||
<div class="political-outlook" v-if="showIndex == 7">
|
||||
<majorHidder ref="historyAlarmList" tip="重大隐患未销项目"></majorHidder>
|
||||
<majorHidder ref="historyAlarmList" :majorInfo="majorInfo" :tip="'重大隐患未销项目'"></majorHidder>
|
||||
</div>
|
||||
<div class="political-outlook" v-if="showIndex == 8">
|
||||
<safeEducationDialog ref="historyAlarmList" tip="安全教育"></safeEducationDialog>
|
||||
@ -54,14 +54,19 @@ let showDialog = ref(false as any);
|
||||
const showIndex = ref(0);
|
||||
const postData = ref({} as any);
|
||||
let dialogTitle = ref("危大工程" as any);
|
||||
const majorInfo = ref({});
|
||||
|
||||
const closeDialog = () => {
|
||||
showDialog.value = false;
|
||||
postData.value = {};
|
||||
}
|
||||
function openDialog(obj: any) {
|
||||
console.log("obj", obj);
|
||||
postData.value = obj
|
||||
showIndex.value = obj.index
|
||||
postData.value = obj;
|
||||
showIndex.value = obj.index;
|
||||
if(obj.index == 7) {
|
||||
majorInfo.value = {...obj.majorInfo, title:obj.title};
|
||||
}
|
||||
showDialog.value = true;
|
||||
}
|
||||
|
||||
|
||||
@ -6,16 +6,25 @@
|
||||
<div class="ctHead">
|
||||
<div>按分包单位排名</div>
|
||||
</div>
|
||||
<div class="ctContent">
|
||||
<div id="echartsSafe" ref="echarts1" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
<div class="ctContent" style="position: relative;">
|
||||
<div v-show="dataList1.length > 0" id="echartsSafe" ref="echarts1" style="width: 100%; height: 100%"></div>
|
||||
<div class="notoDta" style="width: 50%;" v-if="dataList1.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentTop">
|
||||
<div class="ctHead">
|
||||
<div>按责任区域排名</div>
|
||||
</div>
|
||||
<div class="ctContent">
|
||||
<div id="echartsSafe" ref="echarts2" style="width: 100%; height: 100%"></div>
|
||||
<div class="ctContent" style="position: relative;">
|
||||
<div id="echartsSafe" v-show="dataList2.length > 0" ref="echarts2" style="width: 100%; height: 100%"></div>
|
||||
<div class="notoDta" style="width: 50%;" v-if="dataList2.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentTop">
|
||||
@ -37,29 +46,34 @@
|
||||
<div>整改时限</div>
|
||||
<div>检查人</div>
|
||||
<div>检查时间</div>
|
||||
<div>整改人</div>
|
||||
<div>责任人</div>
|
||||
<div>分包单位</div>
|
||||
<div>操作</div>
|
||||
</div>
|
||||
<el-scrollbar class="listBox" ref="refScrollbar">
|
||||
<div v-for="(item, index) in partyMemberList" class="listStyle" :key="item.id">
|
||||
<div>{{ index + 1 }}</div>
|
||||
<div>{{ item.workerName }}</div>
|
||||
<div class="list-img">
|
||||
<el-image fit="contain" class="el-img" :src="BASEURL + '/image/' + item.fieldAcquisitionUrl"
|
||||
:preview-src-list="[BASEURL + '/image/' + item.fieldAcquisitionUrl]">
|
||||
</el-image>
|
||||
<!-- <img :src="item.fieldAcquisitionUrl" alt="" srcset=""> -->
|
||||
<div>{{ statusTypeList.find(ele => ele.id == item.status)?.title }}{{ item.overTime ? '(超期)' : '' }}
|
||||
</div>
|
||||
<div>{{ item.phoneNumber }}</div>
|
||||
<div>{{ item.personType == 1 ? item.teamName : item.personType == 2 ? item.departmentName : "" }}
|
||||
<div :style="`color:${classColorList[props.majorInfo?.enumType - 1]}`">{{ props.majorInfo?.title.substr(0, 2) }}</div>
|
||||
<div style="white-space:initial;">
|
||||
<div style="width: 100%;" :style="`white-space: ${item.whiteSpace ? 'inherit' : 'nowrap'}`">{{ item.problemDescription }}{{ item.remark }}</div>
|
||||
<div style="width:100%; color:#479DC2" @click="item.whiteSpace = !item.whiteSpace">{{item.whiteSpace ? '收起全部' : '展开全部'}}</div>
|
||||
</div>
|
||||
<div>{{ item.changeLimitTime }}</div>
|
||||
<div>{{ item.inspectManName }}</div>
|
||||
<div>{{ item.inspectTime }}</div>
|
||||
|
||||
<div>{{ item.changeName }}</div>
|
||||
<div>{{ item.enterpriseName }}</div>
|
||||
<div>
|
||||
<el-button type="primary" @click="onSupervise(item)">督办</el-button>
|
||||
</div>
|
||||
<div>{{ item.phoneNumber }}</div>
|
||||
</div>
|
||||
<!-- <div class="notoDta" v-if="partyMemberList.length == 0">
|
||||
<div class="notoDta" v-if="partyMemberList.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div> -->
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
@ -67,47 +81,79 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ref, onMounted, defineProps } from "vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { getCompanyDataList, getMemberInfoList } from "@/api/modules/labor";
|
||||
import type { TabsPaneContext } from "element-plus";
|
||||
import { getSelectQualityStatisticsNumApi } from "@/api/modules/projectOverview";
|
||||
import {
|
||||
getStatsByEnterpriseApi,
|
||||
getCountQualityInspectionRecordRegionApi,
|
||||
getStatsDangerTypeApi,
|
||||
getXzSecurityQualitylnspectionRecordlistApi,
|
||||
getXzSecurityQualitylnspectionRecordSuperviseApi,
|
||||
} from "@/api/modules/projectOverview";
|
||||
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
|
||||
import * as echarts from "echarts";
|
||||
const echartsTest = ref();
|
||||
|
||||
let dataList = ref([
|
||||
{
|
||||
value: 30,
|
||||
show: true,
|
||||
name: "重大隐患",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#EC6266",
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 70,
|
||||
show: true,
|
||||
name: "一般隐患",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#6375C7",
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
const props = defineProps({
|
||||
tip: String,
|
||||
majorInfo: {
|
||||
type: Object,
|
||||
},
|
||||
});
|
||||
|
||||
const statusTypeList = [
|
||||
{ id: 2, title: "待整改" },
|
||||
{ id: 3, title: "待复查" },
|
||||
{ id: 4, title: "待核验" },
|
||||
{ id: 5, title: "合格" },
|
||||
{ id: 6, title: "已撤回" }]
|
||||
|
||||
let questionTotal = ref(0 as number | string);
|
||||
const echarts1 = ref(null);
|
||||
const echarts2 = ref(null);
|
||||
const echarts3 = ref(null);
|
||||
const dataList1 = ref([{
|
||||
enterpriseName: "",
|
||||
rectifiedNum: "",
|
||||
totalNum:"",
|
||||
}]);
|
||||
const dataList2 = ref([{
|
||||
x: "",
|
||||
y: "",
|
||||
}]);
|
||||
const dataList3 = ref([{
|
||||
value: 30,
|
||||
show: true,
|
||||
name: "重大隐患",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#1EF1FF",
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 70,
|
||||
show: true,
|
||||
name: "一般隐患",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#00A0E9",
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
}]);
|
||||
|
||||
const classColorList = ref(["#EC6266", "#6375C7", "#038cf5", "#01d6f4"]);
|
||||
|
||||
|
||||
const store = GlobalStore();
|
||||
const props = defineProps(["tip"]);
|
||||
|
||||
const BASEURL = import.meta.env.VITE_API_URL;
|
||||
const dateTime = ref(null);
|
||||
const calendarVal = ref(new Date());
|
||||
@ -136,7 +182,27 @@ const searchForm = ref({
|
||||
idCard: ""
|
||||
});
|
||||
|
||||
const partyMemberList = ref({} as any);
|
||||
const partyMemberList = ref([{
|
||||
id: "1",
|
||||
name: "状态(待整改超期)",
|
||||
type: "重大",
|
||||
contont: "会判啊圣诞快乐家里的撒",
|
||||
createTime: "2024-5-10 14:14",
|
||||
userName: "张三",
|
||||
updateTime: "2024-5-11 14:14",
|
||||
userName2: "李四",
|
||||
company: "湖南建筑有限公司",
|
||||
}, {
|
||||
id: "1",
|
||||
name: "状态(待整改超期)",
|
||||
type: "重大",
|
||||
contont: "会判啊圣诞快乐家里的撒",
|
||||
createTime: "2024-5-10 14:14",
|
||||
userName: "张三",
|
||||
updateTime: "2024-5-11 14:14",
|
||||
userName2: "李四",
|
||||
company: "湖南建筑有限公司",
|
||||
}] as any);
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||||
// console.log(tab, event)
|
||||
// console.log('tab',tab.index)
|
||||
@ -239,7 +305,7 @@ function drawEchart1() {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon11', 'Tue', 'Wed'],
|
||||
data: dataList1.value.map(item => item.enterpriseName),
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
formatter: function (params: any) {
|
||||
@ -304,7 +370,7 @@ function drawEchart1() {
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [120, 200, 150],
|
||||
data: dataList1.value.map(item => item.totalNum),
|
||||
type: 'bar',
|
||||
barWidth: '20%',
|
||||
itemStyle: {
|
||||
@ -333,278 +399,223 @@ function drawEchart1() {
|
||||
|
||||
function drawEchart2() {
|
||||
let ageChart = echarts.init(echarts2.value);
|
||||
|
||||
var data = [
|
||||
{ code: "5#号楼", stock: "aaa", fundPost: "21.987691" },
|
||||
{ code: "4#号楼", stock: "bbb", fundPost: "20.377176" },
|
||||
{ code: "3#号楼", stock: "ccc", fundPost: "19.127404" },
|
||||
{ code: "2#号楼", stock: "ddd", fundPost: "18.40882" },
|
||||
{ code: "1#号楼", stock: "eee", fundPost: "17.980597" },
|
||||
];
|
||||
function contains(arr, dst) {
|
||||
var i = arr.length;
|
||||
while ((i -= 1)) {
|
||||
if (arr[i] == dst) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
let attackSourcesColor = [
|
||||
"#0E90E5",
|
||||
"#0E90E5",
|
||||
"#0E90E5",
|
||||
"#0E90E5",
|
||||
];
|
||||
let attackSourcesColor1 = [
|
||||
"#0E90E5",
|
||||
"#0E90E5",
|
||||
"#0E90E5",
|
||||
"#0E90E5",
|
||||
"#0E90E5",
|
||||
];
|
||||
let attaData = [];
|
||||
let attaName = [];
|
||||
let topName = [];
|
||||
data.forEach((it, index) => {
|
||||
attaData[index] = parseFloat(it.fundPost).toFixed(2);
|
||||
attaName[index] = it.stock;
|
||||
topName[index] = `${it.code}`;
|
||||
});
|
||||
var salvProMax = []; //背景按最大值
|
||||
for (let i = 0; i < attaData.length; i++) {
|
||||
salvProMax.push(attaData[0]);
|
||||
}
|
||||
function attackSourcesDataFmt(sData) {
|
||||
var sss = [];
|
||||
sData.forEach(function (item, i) {
|
||||
let itemStyle = {
|
||||
color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i],
|
||||
};
|
||||
sss.push({
|
||||
value: item,
|
||||
itemStyle: itemStyle,
|
||||
var data = dataList2.value.map(item => {
|
||||
return {
|
||||
code: item.x,
|
||||
fundPost: item.y,
|
||||
}
|
||||
})
|
||||
const dataCountMax = data.sort((a: any, b: any) => parseInt(a.fundPost) - parseInt(b.fundPost))
|
||||
let attaData = [] as any;
|
||||
let attaName = [] as any;
|
||||
let topName = [] as any;
|
||||
data.forEach((it, index) => {
|
||||
attaData[index] = parseFloat(it.fundPost).toFixed(2);
|
||||
attaName[index] = it.fundPost;
|
||||
topName[index] = `${it.code}`;
|
||||
});
|
||||
});
|
||||
return sss;
|
||||
}
|
||||
var salvProMax = []; //背景按最大值
|
||||
for (let i = 0; i < attaData.length; i++) {
|
||||
salvProMax.push(dataCountMax[dataCountMax.length - 1].fundPost + 5);
|
||||
}
|
||||
function attackSourcesDataFmt(sData: any) {
|
||||
var sss = [] as any;
|
||||
sData.forEach(function (item: any, i: number) {
|
||||
let itemStyle = {
|
||||
color: "#0E90E5",
|
||||
};
|
||||
sss.push({
|
||||
value: item,
|
||||
itemStyle: itemStyle,
|
||||
});
|
||||
});
|
||||
return sss;
|
||||
}
|
||||
|
||||
let option = {
|
||||
// backgroundColor: "#000",
|
||||
tooltip: {
|
||||
show: true,
|
||||
// backgroundColor: "rgba(3,169,244, 0.5)", //背景颜色（此时为默认色）
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
color: ["#F7B731"],
|
||||
legend: {
|
||||
pageIconSize: [12, 12],
|
||||
itemWidth: 20,
|
||||
itemHeight: 10,
|
||||
textStyle: {
|
||||
//图例文字的样式
|
||||
fontSize: 10,
|
||||
color: "#fff",
|
||||
},
|
||||
selectedMode: false,
|
||||
// data: ["个人所得(亿元)"],
|
||||
},
|
||||
grid: {
|
||||
left: "2%",
|
||||
right: "2%",
|
||||
width: "100%",
|
||||
bottom: "2%",
|
||||
top: "8%",
|
||||
// containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "value",
|
||||
let option = {
|
||||
// backgroundColor: "#000",
|
||||
tooltip: {
|
||||
show: true,
|
||||
// backgroundColor: "rgba(3,169,244, 0.5)", //背景颜色（此时为默认色）
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
},
|
||||
formatter: function (value: any, index: number) {
|
||||
return `${data[value.dataIndex].code}\n\n${data[value.dataIndex].fundPost}`
|
||||
},
|
||||
},
|
||||
color: ["#F7B731"],
|
||||
legend: {
|
||||
pageIconSize: [12, 12],
|
||||
itemWidth: 20,
|
||||
itemHeight: 10,
|
||||
textStyle: {
|
||||
//图例文字的样式
|
||||
fontSize: 10,
|
||||
color: "#fff",
|
||||
},
|
||||
selectedMode: false,
|
||||
// data: ["个人所得(亿元)"],
|
||||
},
|
||||
grid: {
|
||||
left: "2%",
|
||||
right: "2%",
|
||||
width: "100%",
|
||||
bottom: "2%",
|
||||
top: "8%",
|
||||
// containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "value",
|
||||
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
inverse: true,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisPointer: {
|
||||
label: {
|
||||
show: true,
|
||||
//margin: 30
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
pdaaing: [5, 0, 0, 0],
|
||||
postion: "right",
|
||||
data: attaName,
|
||||
axisLabel: {
|
||||
margin: 30,
|
||||
fontSize: 10,
|
||||
align: "left",
|
||||
padding: [10, 0, 0, 0],
|
||||
color: "#000",
|
||||
rich: {
|
||||
nt1: {
|
||||
color: "#fff",
|
||||
backgroundColor: attackSourcesColor1[0],
|
||||
width: 13,
|
||||
height: 13,
|
||||
fontSize: 10,
|
||||
align: "center",
|
||||
borderRadius: 100,
|
||||
lineHeight: "5",
|
||||
padding: [0, 1, 2, 1],
|
||||
// padding:[0,0,2,0],
|
||||
},
|
||||
nt2: {
|
||||
color: "#fff",
|
||||
backgroundColor: attackSourcesColor1[1],
|
||||
width: 13,
|
||||
height: 13,
|
||||
fontSize: 10,
|
||||
align: "center",
|
||||
borderRadius: 100,
|
||||
padding: [0, 1, 2, 1],
|
||||
},
|
||||
nt3: {
|
||||
color: "#fff",
|
||||
backgroundColor: attackSourcesColor1[2],
|
||||
width: 13,
|
||||
height: 13,
|
||||
fontSize: 10,
|
||||
align: "center",
|
||||
borderRadius: 100,
|
||||
padding: [0, 1, 2, 1],
|
||||
},
|
||||
nt: {
|
||||
color: "#fff",
|
||||
backgroundColor: attackSourcesColor1[3],
|
||||
width: 13,
|
||||
height: 13,
|
||||
fontSize: 10,
|
||||
align: "center",
|
||||
lineHeight: 3,
|
||||
borderRadius: 100,
|
||||
padding: [0, 1, 2, 1],
|
||||
lineHeight: 5,
|
||||
},
|
||||
},
|
||||
// formatter: function (value, index) {
|
||||
// index = contains(attaName, value) + 1;
|
||||
// if (index - 1 < 3) {
|
||||
// return ["{nt" + index + "|" + index + "}"].join("\n");
|
||||
// } else {
|
||||
// return ["{nt|" + index + "}"].join("\n");
|
||||
// }
|
||||
// },
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
inverse: true,
|
||||
axisTick: "none",
|
||||
axisLine: "none",
|
||||
show: true,
|
||||
axisLabel: {
|
||||
margin: 30,
|
||||
padding: [-120, 0, 0, -100],
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: "10",
|
||||
},
|
||||
},
|
||||
data: attackSourcesDataFmt(attaName),
|
||||
},
|
||||
{
|
||||
//名称
|
||||
type: "category",
|
||||
offset: -10,
|
||||
position: "left",
|
||||
axisLabel: {
|
||||
color: `#fff`,
|
||||
fontSize: 10,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
inverse: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
color: ["#fff"],
|
||||
align: "left",
|
||||
verticalAlign: "bottom",
|
||||
lineHeight: 32,
|
||||
fontSize: 10,
|
||||
},
|
||||
data: topName,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
zlevel: 1,
|
||||
// name: "个人所得(亿元)",
|
||||
type: "bar",
|
||||
barWidth: "15px",
|
||||
animationDuration: 1500,
|
||||
data: attackSourcesDataFmt(attaData),
|
||||
align: "center",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// barBorderRadius: 10,
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
fontSize: 10,
|
||||
color: "#fff",
|
||||
textBorderWidth: 2,
|
||||
padding: [2, 0, 0, 0],
|
||||
},
|
||||
},
|
||||
{
|
||||
// name: "个人所得(亿元)",
|
||||
type: "bar",
|
||||
barWidth: 13,
|
||||
barGap: "-50%",
|
||||
margin: "30",
|
||||
data: salvProMax,
|
||||
textStyle: {
|
||||
//图例文字的样式
|
||||
fontSize: 10,
|
||||
color: "#fff",
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#06407B",
|
||||
//width:"100%",
|
||||
fontSize: 10,
|
||||
// barBorderRadius: 30,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
inverse: true,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisPointer: {
|
||||
label: {
|
||||
show: true,
|
||||
//margin: 30
|
||||
},
|
||||
},
|
||||
pdaaing: [5, 0, 0, 0],
|
||||
postion: "right",
|
||||
data: attaName,
|
||||
axisLabel: {
|
||||
margin: 30,
|
||||
fontSize: 10,
|
||||
align: "left",
|
||||
padding: [10, 0, 0, 0],
|
||||
color: "#000",
|
||||
rich: {
|
||||
nt1: {
|
||||
color: "#fff",
|
||||
backgroundColor: "#0E90E5",
|
||||
width: 13,
|
||||
height: 13,
|
||||
fontSize: 10,
|
||||
align: "center",
|
||||
borderRadius: 100,
|
||||
lineHeight: "5",
|
||||
padding: [0, 1, 2, 1],
|
||||
// padding:[0,0,2,0],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
inverse: true,
|
||||
axisTick: "none",
|
||||
axisLine: "none",
|
||||
show: true,
|
||||
axisLabel: {
|
||||
padding: [-30, 0, 0, -60],
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: "10",
|
||||
},
|
||||
},
|
||||
data: attackSourcesDataFmt(attaName),
|
||||
},
|
||||
{
|
||||
//名称
|
||||
type: "category",
|
||||
offset: -10,
|
||||
position: "left",
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
inverse: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
color: ["#fff"],
|
||||
align: "left",
|
||||
verticalAlign: "bottom",
|
||||
lineHeight: 32,
|
||||
fontSize: 10,
|
||||
},
|
||||
data: topName,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
// {
|
||||
// zlevel: 1,
|
||||
// type: "pictorialBar",
|
||||
// symbol: "path://M286.031,265l-16.025,3L300,223l29.994,45-16.041-3-13.961,69Z",
|
||||
// symbolSize: [20, 30],
|
||||
// // symbolOffset: [0, 0],
|
||||
// color: "orange",
|
||||
// symbolPosition: "end",
|
||||
// data: salvProMax,
|
||||
// },
|
||||
{
|
||||
zlevel: 1,
|
||||
// name: "个人所得(亿元)",
|
||||
type: "bar",
|
||||
barWidth: "15px",
|
||||
animationDuration: 1500,
|
||||
data: attackSourcesDataFmt(attaData),
|
||||
align: "center",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// barBorderRadius: 10,
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
fontSize: 10,
|
||||
color: "#fff",
|
||||
textBorderWidth: 2,
|
||||
padding: [2, 0, 0, 0],
|
||||
},
|
||||
},
|
||||
{
|
||||
// name: "个人所得(亿元)",
|
||||
type: "bar",
|
||||
barWidth: 13,
|
||||
barGap: "-50%",
|
||||
margin: "30",
|
||||
data: salvProMax,
|
||||
textStyle: {
|
||||
//图例文字的样式
|
||||
fontSize: 10,
|
||||
color: "#fff",
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#06407B",
|
||||
//width:"100%",
|
||||
fontSize: 10,
|
||||
// barBorderRadius: 30,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
ageChart.setOption(option, true);
|
||||
@ -622,8 +633,8 @@ function drawEchart3() {
|
||||
trigger: "item"
|
||||
},
|
||||
title: {
|
||||
text: "2",
|
||||
subtext: "超期未整改数",
|
||||
text: questionTotal.value,
|
||||
subtext: "隐患总数",
|
||||
x: "24%",
|
||||
y: "center",
|
||||
textAlign: "center",
|
||||
@ -669,16 +680,16 @@ function drawEchart3() {
|
||||
}
|
||||
}
|
||||
},
|
||||
data: dataList.value.map(item => {
|
||||
data: dataList3.value.map(item => {
|
||||
if (item.show) {
|
||||
return item.name;
|
||||
}
|
||||
}),
|
||||
formatter: function (data) {
|
||||
if (dataList.value && dataList.value.length) {
|
||||
for (var i = 0; i < dataList.value.length; i++) {
|
||||
if (data === dataList.value[i].name) {
|
||||
var value = dataList.value[i].value;
|
||||
formatter: function (data: any) {
|
||||
if (dataList3.value && dataList3.value.length) {
|
||||
for (var i = 0; i < dataList3.value.length; i++) {
|
||||
if (data === dataList3.value[i].name) {
|
||||
var value = dataList3.value[i].value;
|
||||
var percentage = value + "%";
|
||||
return "{name| " + data + "} {gap| }" + "{value|" + value + " " + "}";
|
||||
}
|
||||
@ -814,7 +825,7 @@ function drawEchart3() {
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: dataList.value
|
||||
data: dataList3.value
|
||||
},
|
||||
{
|
||||
type: "pie",
|
||||
@ -835,21 +846,124 @@ function drawEchart3() {
|
||||
console.log(echartsTest.value);
|
||||
}
|
||||
|
||||
const getSafeInfo = async () => {
|
||||
const res: any = await getSelectQualityStatisticsNumApi({ projectSn: store.sn });
|
||||
console.log("获取隐患智能分析", res);
|
||||
// safeData.value = res.result;
|
||||
// dataList.value[0].value = res.result.rectificationNum;
|
||||
// dataList.value[1].value = res.result.totalNum - res.result.rectificationNum;
|
||||
// questionTotal.value = res.result.totalNum;
|
||||
// drawEchart();
|
||||
const getStatsByEnterprise = async () => {
|
||||
console.log("我是子组件", props.majorInfo);
|
||||
console.log(props.majorInfo?.inspectStartTime, props.majorInfo?.inspectEndTime,);
|
||||
|
||||
const res: any = await getStatsByEnterpriseApi({
|
||||
pageNo: 1,
|
||||
pageSize: 99999,
|
||||
projectSn: store.sn,
|
||||
isNotQualified: props.majorInfo?.isNotQualified,
|
||||
isOverdueRectification: props.majorInfo?.isOverdueRectification,
|
||||
inspectTime_begin: props.majorInfo?.inspectStartTime,
|
||||
inspectTime_end: props.majorInfo?.inspectEndTime,
|
||||
enumType: parseInt(props.majorInfo?.enumType),
|
||||
});
|
||||
console.log("获取分包单位统计", res);
|
||||
dataList1.value = res.result.records;
|
||||
drawEchart1();
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await getSafeInfo();
|
||||
drawEchart1();
|
||||
const getCountQualityInspectionRecordRegion = async () => {
|
||||
const res: any = await getCountQualityInspectionRecordRegionApi({
|
||||
projectSn: store.sn,
|
||||
inspectTime_begin: props.majorInfo?.inspectStartTime,
|
||||
inspectTime_end: props.majorInfo?.inspectEndTime,
|
||||
isNotQualified: props.majorInfo?.isNotQualified,
|
||||
isOverdueRectification: props.majorInfo?.isOverdueRectification,
|
||||
enumType: parseInt(props.majorInfo?.enumType),
|
||||
});
|
||||
console.log("获取责任区域排名", res);
|
||||
dataList2.value = res.result;
|
||||
drawEchart2();
|
||||
};
|
||||
|
||||
const getStatsDangerType = async () => {
|
||||
const res: any = await getStatsDangerTypeApi({
|
||||
projectSn: store.sn,
|
||||
inspectTime_begin: props.majorInfo?.inspectStartTime,
|
||||
inspectTime_end: props.majorInfo?.inspectEndTime,
|
||||
isNotQualified: props.majorInfo?.isNotQualified,
|
||||
isOverdueRectification: props.majorInfo?.isOverdueRectification,
|
||||
enumType: parseInt(props.majorInfo?.enumType),
|
||||
});
|
||||
console.log("隐患类型分析", res);
|
||||
dataList3.value = res.result.data.map((item: any, index: number) => {
|
||||
return {
|
||||
...item,
|
||||
value: item.count,
|
||||
show: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: classColorList.value[index],
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
questionTotal.value = parseFloat(res.result.count).toFixed(0);
|
||||
|
||||
drawEchart3();
|
||||
};
|
||||
|
||||
const getXzSecurityQualitylnspectionRecordlist = async (tip: any) => {
|
||||
const res: any = await getXzSecurityQualitylnspectionRecordlistApi({
|
||||
pageNo: tip == "search" ? 1 : pageNo.value,
|
||||
pageSize: 10,
|
||||
projectSn: store.sn,
|
||||
isNotQualified: props.majorInfo?.isNotQualified,
|
||||
isOverdueRectification: props.majorInfo?.isOverdueRectification,
|
||||
inspectStartTime: props.majorInfo?.inspectStartTime,
|
||||
inspectEndTime: props.majorInfo?.inspectEndTime,
|
||||
enumType: parseInt(props.majorInfo?.enumType),
|
||||
});
|
||||
console.log("获取列表", res);
|
||||
if (tip == "more") {
|
||||
const newResult = res.result.page.records.map((item:any) => {
|
||||
return {
|
||||
...item,
|
||||
whiteSpace:false,
|
||||
}
|
||||
})
|
||||
partyMemberList.value = partyMemberList.value.concat(newResult);
|
||||
} else {
|
||||
partyMemberList.value = res.result.page.records;
|
||||
}
|
||||
|
||||
if (res.result.page.pages == pageNo.value) {
|
||||
moreScroll.value = false;
|
||||
} else {
|
||||
pageNo.value = pageNo.value + 1;
|
||||
}
|
||||
};
|
||||
|
||||
// 督办
|
||||
const onSupervise = async (row: any) => {
|
||||
ElMessageBox.confirm("是否继续督办?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(async () => {
|
||||
const res = await getXzSecurityQualitylnspectionRecordSuperviseApi({
|
||||
id: row.id,
|
||||
})
|
||||
}).catch(() => {
|
||||
ElMessage({
|
||||
type: "info",
|
||||
message: "已取消督办"
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await getStatsByEnterprise();
|
||||
await getCountQualityInspectionRecordRegion();
|
||||
await getStatsDangerType();
|
||||
await getXzSecurityQualitylnspectionRecordlist("search");
|
||||
|
||||
// drawEchart2();
|
||||
// drawEchart3();
|
||||
// await getCompanyList();
|
||||
// await getMemberCountList("search");
|
||||
refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
|
||||
@ -870,6 +984,10 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-button {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 20px;
|
||||
height: 35%;
|
||||
@ -927,7 +1045,7 @@ onMounted(async () => {
|
||||
|
||||
.top-statistics {
|
||||
display: grid;
|
||||
grid-gap: 20px;
|
||||
// grid-gap: 20px;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
color: white;
|
||||
margin: 0 5%;
|
||||
@ -1204,9 +1322,11 @@ onMounted(async () => {
|
||||
.notoDta {
|
||||
top: 35%;
|
||||
width: 20%;
|
||||
left: 40%;
|
||||
// left: 40%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
left:50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
img {
|
||||
width: 40%;
|
||||
@ -1216,7 +1336,7 @@ onMounted(async () => {
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
margin: -6% 37%;
|
||||
margin: -6% 30%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user