1328 lines
33 KiB
Vue
1328 lines
33 KiB
Vue
<template>
|
|
<view class="content">
|
|
<!-- <headers class="fixedheader" :showBack="true">
|
|
<view class="headerName">
|
|
质量管理
|
|
</view>
|
|
</headers> -->
|
|
<view class="count-statistics">
|
|
<view class="top-title">
|
|
<view class="line"></view>
|
|
<text>检查统计</text>
|
|
<view class="right-date">
|
|
<uni-datetime-picker v-model="timeCombo.timeRange1" type="daterange" rangeSeparator="至"
|
|
@change="e => confirmTimeRange(e,1)" />
|
|
</view>
|
|
</view>
|
|
<view class="bottom-content">
|
|
<div class="count-type-list" v-for="(item,index) in typeList" :key="index"
|
|
:style="{backgroundColor: item.backgroundColor}">
|
|
<text :style="{color: item.color}">{{item.value}}</text>
|
|
<text>{{item.name}}</text>
|
|
</div>
|
|
</view>
|
|
</view>
|
|
<view class="count-statistics">
|
|
<view class="top-title">
|
|
<view class="line"></view>
|
|
<text>分包单位质量隐患统计</text>
|
|
<view class="right-date">
|
|
<uni-datetime-picker v-model="timeCombo.timeRange2" type="daterange" rangeSeparator="至"
|
|
@change="e => confirmTimeRange(e,2)" />
|
|
</view>
|
|
</view>
|
|
<view class="count-content">
|
|
<div class="chart-content">
|
|
<qiun-data-charts type="column" :ontouch="true" :opts="opts" :chartData="chartData" v-if="chartData.categories && chartData.categories.length > 0"/>
|
|
<view class="noData" v-else>
|
|
<image class="noDataImg" src="../../../static/noData.png"></image>
|
|
<view>暂无数据</view>
|
|
</view>
|
|
</div>
|
|
</view>
|
|
</view>
|
|
<view class="count-statistics">
|
|
<view class="top-title">
|
|
<view class="line"></view>
|
|
<text>风险统计</text>
|
|
</view>
|
|
<view class="risk-content">
|
|
<view class="risk-count">
|
|
<view class="count-title">{{riskDataObj.dangerNum || 0}}个</view>
|
|
<view class="risk-all-title">风险总数</view>
|
|
</view>
|
|
<view class="risk-type">
|
|
<view class="risk-type-item" v-for="(item,index) in riskTypeList" :key="index"
|
|
:style="{backgroundColor: item.backgroundColor}">
|
|
<text>{{item.name}}</text>
|
|
<view>{{item.value}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="count-statistics">
|
|
<view class="top-title">
|
|
<view class="line"></view>
|
|
<text>隐患分析</text>
|
|
</view>
|
|
<view class="hidden-content">
|
|
<view class="chart-hidden-content">
|
|
<qiun-data-charts type="radar" :opts="radarOpts" :chartData="radarChartData" v-if="radarChartData.categories"/>
|
|
<view class="noData" v-else>
|
|
<image class="noDataImg" src="../../../static/noData.png"></image>
|
|
<view>暂无数据</view>
|
|
</view>
|
|
<view class="chart-tip-legend">
|
|
<view class="color-zfx"></view>
|
|
<text>质量检查</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="count-statistics">
|
|
<view class="top-title">
|
|
<view class="line"></view>
|
|
<text>风险走势图
|
|
<!-- <text class="subTitle">(44%↓比上个月(4月))</text> -->
|
|
</text>
|
|
<!-- <view class="right-date">
|
|
<uni-datetime-picker v-model="timeCombo.timeRange3" type="daterange" rangeSeparator="至"
|
|
@change="e => confirmTimeRange(e,3)" />
|
|
</view> -->
|
|
</view>
|
|
<view class="trend-content">
|
|
<view class="chart-trend-content">
|
|
<qiun-data-charts type="line" :opts="lineOpts" :chartData="lineChartData" :ontouch="true" v-if="lineChartData.categories"/>
|
|
<view class="noData" v-else>
|
|
<image class="noDataImg" src="../../../static/noData.png"></image>
|
|
<view>暂无数据</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="count-statistics">
|
|
<view class="top-title">
|
|
<view class="line"></view>
|
|
<text>隐患数量展示</text>
|
|
<view class="right-date">
|
|
<uni-datetime-picker v-model="timeCombo.timeRange4" type="daterange" rangeSeparator="至"
|
|
@change="e => confirmTimeRange(e,4)" />
|
|
</view>
|
|
</view>
|
|
<view class="hidden-sum-content">
|
|
<view class="title-one">隐患超期未整改</view>
|
|
<view class="title-two" v-for="(item,index) in noChangeTypeList" :key="'隐患超期未整改' + index" v-show="index<2">{{item.name}}未整改隐患{{item.value}}个，占比{{item.percent}}%</view>
|
|
<view class="hidden-chart-content">
|
|
<view class="hidden-chart-left">
|
|
<view class="left-legend-diy">
|
|
<view class="diy-item" v-for="(item,index) in noChangeTypeList" :key="index">
|
|
<view class="zfx" :style="{backgroundColor: item.backgroundColor}"></view>
|
|
<text>{{item.name}}</text>
|
|
<text>{{item.value}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="hidden-chart-right">
|
|
<qiun-data-charts type="arcbar" :opts="noChangeOpts" :chartData="noChangeChartData" v-if="noChangeChartData.series"/>
|
|
<view class="noData" v-else>
|
|
<image class="noDataImg" src="../../../static/noData.png"></image>
|
|
<view>暂无数据</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="divider-line"></view>
|
|
<view class="title-one">未销项隐患</view>
|
|
<view class="title-two" v-for="(item,index) in noDestroyTypeList" :key="'未销项隐患' + index" v-show="index<2">{{item.name}}未销项{{item.value}}个，占比{{item.percent}}%</view>
|
|
<view class="hidden-chart-content">
|
|
<view class="hidden-chart-left">
|
|
<view class="left-legend-diy">
|
|
<view class="diy-item" v-for="(item,index) in noDestroyTypeList" :key="index">
|
|
<view class="zfx" :style="{backgroundColor: item.backgroundColor}"></view>
|
|
<text>{{item.name}}</text>
|
|
<text>{{item.value}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="hidden-chart-right">
|
|
<qiun-data-charts type="arcbar" :opts="noDestroyOpts" :chartData="noDestroyChartData" v-if="noDestroyChartData.series"/>
|
|
<view class="noData" v-else>
|
|
<image class="noDataImg" src="../../../static/noData.png"></image>
|
|
<view>暂无数据</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="count-statistics">
|
|
<view class="top-title">
|
|
<view class="line"></view>
|
|
<text>责任区域问题统计 TOP10</text>
|
|
<view class="right-option">
|
|
<view class="option-item" v-for="(item,index) in optionList" :key="index"
|
|
:style="{backgroundColor: checkIndex == index?'#268DFF':'#fff'}" @click="optionClick(index)">
|
|
{{item.name}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="question-content">
|
|
<view class="question-content">
|
|
<view style="width:100%;"><l-echart ref="chartRef" @finished="init" :is-disable-scroll="true"></l-echart></view>
|
|
<!-- <qiun-data-charts type="bar" :opts="questionOpts" :chartData="questionChartData" v-show="questionChartData.categories"/>
|
|
<view class="noData" v-show="!questionChartData.categories">
|
|
<image class="noDataImg" src="../../../static/noData.png"></image>
|
|
<view>暂无数据</view>
|
|
</view> -->
|
|
</view>
|
|
<!-- <qiun-data-charts type="bar" :opts="questionOpts" :chartData="questionChartData" v-show="questionChartData.categories"/>
|
|
<view class="noData" v-show="!questionChartData.categories">
|
|
<image class="noDataImg" src="../../../static/noData.png"></image>
|
|
<view>暂无数据</view>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import headers from "../../../components/headers/headers.vue"
|
|
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
|
|
export default {
|
|
name: "standardScheduleNewsHome",
|
|
data() {
|
|
return {
|
|
questionOpts: {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
grid: {
|
|
left: '0%',
|
|
right: 20,
|
|
bottom: '0%',
|
|
top: 20,
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
boundaryGap: [0, 0.01]
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
},
|
|
dataZoom: [{
|
|
id: 'dataZoomY',
|
|
type: 'inside',
|
|
yAxisIndex: [0],
|
|
brushSelect: false,
|
|
zoomOnMouseWheel: false,
|
|
moveOnMouseWheel: true, // 开启滚轮平移
|
|
moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
|
|
preventDefaultMouseMove: false,
|
|
start: 100,
|
|
startValue: 0,
|
|
endValue: 3,
|
|
// 滚动条高度
|
|
width: 8,
|
|
// 滚动条显示位置
|
|
// height: "80%",
|
|
// 距离右边
|
|
right: 3,
|
|
// 控制手柄的尺寸
|
|
handleSize: 0,
|
|
filterMode: 'empty',
|
|
top: "top",
|
|
}, ],
|
|
series: [{
|
|
name: '2011',
|
|
type: 'bar',
|
|
itemStyle: {
|
|
color: "#278EFF"
|
|
},
|
|
label: {
|
|
show: true, //开启显示
|
|
position: 'right', //在上方显示
|
|
formatter: function(val) {
|
|
if (val.value !== 0) {
|
|
return val.value;
|
|
} else {
|
|
return '';
|
|
}
|
|
},
|
|
textStyle: { //数值样式
|
|
color: '#1a1a1a',
|
|
// fontSize: 12
|
|
}
|
|
},
|
|
barWidth: '40',
|
|
data: [18203, 23489, 29034, 104970, 131744, 630230]
|
|
}]
|
|
},
|
|
// questionOpts: {
|
|
// color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
|
// "#ea7ccc"
|
|
// ],
|
|
// padding: [15, 30, 0, 5],
|
|
// enableScroll: false,
|
|
// legend: {
|
|
// show: false
|
|
// },
|
|
// xAxis: {
|
|
// boundaryGap: "justify",
|
|
// disableGrid: false,
|
|
// min: 0,
|
|
// axisLine: false
|
|
// },
|
|
// yAxis: {},
|
|
// extra: {
|
|
// bar: {
|
|
// type: "stack",
|
|
// width: 30,
|
|
// meterBorde: 1,
|
|
// meterFillColor: "#FFFFFF",
|
|
// activeBgColor: "#000000",
|
|
// activeBgOpacity: 0.08,
|
|
// categoryGap: 2
|
|
// }
|
|
// }
|
|
// },
|
|
questionChartData: {},
|
|
checkIndex: 0,
|
|
optionList: [{
|
|
name: "全部",
|
|
value: 1
|
|
},
|
|
{
|
|
name: "重大",
|
|
value: 2
|
|
},
|
|
{
|
|
name: "较大",
|
|
value: 3
|
|
},
|
|
{
|
|
name: "一般",
|
|
value: 4
|
|
},
|
|
{
|
|
name: "低",
|
|
value: 5
|
|
}
|
|
],
|
|
noDestroyTypeList: [{
|
|
name: "重大隐患",
|
|
backgroundColor: "#FF0303",
|
|
value: 0,
|
|
percent: 0
|
|
},
|
|
{
|
|
name: "严重隐患",
|
|
backgroundColor: "#FF9901",
|
|
value: 0,
|
|
percent: 0
|
|
},
|
|
{
|
|
name: "一般隐患",
|
|
backgroundColor: "#FFE500",
|
|
value: 0,
|
|
percent: 0
|
|
},
|
|
{
|
|
name: "其他隐患",
|
|
backgroundColor: "#3A3AE7",
|
|
value: 0,
|
|
percent: 0
|
|
},
|
|
],
|
|
noDestroyChartData: {},
|
|
noDestroyOpts: {
|
|
color: ["#3A3AE7", "#FFE500", "#FF9901", "#FF0303"],
|
|
padding: undefined,
|
|
title: {
|
|
name: "隐患未销项",
|
|
fontSize: 12,
|
|
color: "#000000"
|
|
},
|
|
subtitle: {
|
|
name: "9个",
|
|
fontSize: 22,
|
|
color: "#000000"
|
|
},
|
|
extra: {
|
|
arcbar: {
|
|
type: "circle",
|
|
width: 12,
|
|
backgroundColor: "#E9E9E9",
|
|
startAngle: 1.5,
|
|
endAngle: 0.25,
|
|
gap: 2
|
|
}
|
|
}
|
|
},
|
|
noChangeTypeList: [{
|
|
name: "重大延期",
|
|
backgroundColor: "#FF0303",
|
|
value: 0,
|
|
percent: 0
|
|
},
|
|
{
|
|
name: "严重隐患超期",
|
|
backgroundColor: "#FF9901",
|
|
value: 0,
|
|
percent: 0
|
|
},
|
|
{
|
|
name: "一般隐患超期",
|
|
backgroundColor: "#FFE500",
|
|
value: 0,
|
|
percent: 0
|
|
},
|
|
{
|
|
name: "其他隐患超期",
|
|
backgroundColor: "#3A3AE7",
|
|
value: 0,
|
|
percent: 0
|
|
},
|
|
],
|
|
noChangeChartData: {},
|
|
noChangeOpts: {
|
|
color: ["#3A3AE7", "#FFE500", "#FF9901", "#FF0303"],
|
|
padding: undefined,
|
|
title: {
|
|
name: "超期未整改",
|
|
fontSize: 12,
|
|
color: "#000000"
|
|
},
|
|
subtitle: {
|
|
name: "7个",
|
|
fontSize: 22,
|
|
color: "#000000"
|
|
},
|
|
extra: {
|
|
arcbar: {
|
|
type: "circle",
|
|
width: 12,
|
|
backgroundColor: "#E9E9E9",
|
|
startAngle: 1.5,
|
|
endAngle: 0.25,
|
|
gap: 2
|
|
}
|
|
}
|
|
},
|
|
lineChartData: {},
|
|
lineOpts: {
|
|
color: ["#5EE4DA", "#FF0303", "#FF9A04", "#FFE603", "#3C3CE8"],
|
|
padding: [-10,0,0,0],
|
|
enableScroll: true,
|
|
legend: {
|
|
position: "top",
|
|
float: "left",
|
|
fontSize: 11,
|
|
margin: 20
|
|
},
|
|
xAxis: {
|
|
disableGrid: true,
|
|
itemCount: 6,
|
|
scrollShow: true
|
|
// rotateLabel: true,
|
|
// rotateAngle: 90
|
|
},
|
|
yAxis: {
|
|
gridType: "dash",
|
|
dashLength: 2
|
|
},
|
|
extra: {
|
|
line: {
|
|
type: "straight",
|
|
width: 2,
|
|
activeType: "hollow"
|
|
}
|
|
}
|
|
},
|
|
radarChartData: {},
|
|
//您可以通过修改 config-ucharts.js 文件中下标为 ['radar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
|
|
radarOpts: {
|
|
color: ["#5470C6"
|
|
],
|
|
padding: [5, 5, 5, 5],
|
|
dataLabel: false,
|
|
enableScroll: false,
|
|
legend: {
|
|
show: false,
|
|
position: "right",
|
|
lineHeight: 25
|
|
},
|
|
extra: {
|
|
radar: {
|
|
gridType: "radar",
|
|
gridColor: "#CCCCCC",
|
|
gridCount: 3,
|
|
opacity: 0.2,
|
|
max: 10,
|
|
labelShow: true,
|
|
border: true,
|
|
axisLabel: true
|
|
}
|
|
}
|
|
},
|
|
chartData: {},
|
|
//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
|
|
opts: {
|
|
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
|
"#ea7ccc"
|
|
],
|
|
padding: [15, 15, 0, 5],
|
|
enableScroll: true,
|
|
legend: {
|
|
show: false
|
|
},
|
|
xAxis: {
|
|
disableGrid: true,
|
|
itemCount: 5,
|
|
scrollShow: true
|
|
},
|
|
yAxis: {
|
|
data: [{
|
|
min: 0
|
|
}]
|
|
},
|
|
extra: {
|
|
column: {
|
|
type: "group",
|
|
width: 30,
|
|
activeBgColor: "#000000",
|
|
activeBgOpacity: 0.08
|
|
}
|
|
}
|
|
},
|
|
typeList: [{
|
|
name: "检查总数",
|
|
value: 0,
|
|
color: "#70CEC8",
|
|
backgroundColor: "#ECF8F7"
|
|
},
|
|
{
|
|
name: "隐患总数",
|
|
value: 0,
|
|
color: "#EAC131",
|
|
backgroundColor: "#FCF8E8"
|
|
},
|
|
{
|
|
name: "重大隐患",
|
|
value: 0,
|
|
color: "#FC7D81",
|
|
backgroundColor: "#FFEDED"
|
|
},
|
|
{
|
|
name: "超期未闭合",
|
|
value: 0,
|
|
color: "#B859A3",
|
|
backgroundColor: "#E6C3DE"
|
|
}
|
|
],
|
|
riskTypeList: [{
|
|
name: "重大风险",
|
|
value: 0,
|
|
backgroundColor: "#FF0000"
|
|
},
|
|
{
|
|
name: "较大风险",
|
|
value: 0,
|
|
backgroundColor: "#FF9901"
|
|
},
|
|
{
|
|
name: "一般风险",
|
|
value: 0,
|
|
backgroundColor: "#FFE500"
|
|
},
|
|
{
|
|
name: "低风险",
|
|
value: 0,
|
|
backgroundColor: "#3A3AE7"
|
|
}
|
|
],
|
|
timeCombo: {
|
|
timeRange1: [],
|
|
timeRange2: [],
|
|
timeRange3: [],
|
|
timeRange4: []
|
|
},
|
|
riskDataObj: {}
|
|
};
|
|
},
|
|
onLoad() {
|
|
// for(let i in this.timeCombo){
|
|
// this.timeCombo[i] = [this.$formatDates(new Date().getTime(), 'yyyy-MM-dd'), this.$formatDates(new Date()
|
|
// .getTime(), 'yyyy-MM-dd')]
|
|
// }
|
|
this.getStatisticsNumFn();
|
|
this.getStatsByEnterpriseFn();
|
|
this.getRiskStatisticsFn();
|
|
this.getHiddenAnalysisFn();
|
|
this.getRiskTrendFn();
|
|
this.getNoChangeHiddenNumFn();
|
|
this.getNoDestroyNumFn();
|
|
this.getRecordRegionNumFn();
|
|
},
|
|
methods: {
|
|
async init() {
|
|
// chart 图表实例不能存在data里
|
|
const chart = await this.$refs.chartRef.init(echarts);
|
|
chart.setOption(this.questionOpts)
|
|
},
|
|
// 责任区域问题统计TOP10
|
|
getRecordRegionNumFn() {
|
|
let that = this
|
|
let requestData = {
|
|
projectSn: uni.getStorageSync("dept")
|
|
}
|
|
if (this.checkIndex != 0) {
|
|
requestData.enumType = this.checkIndex;
|
|
}
|
|
this.sendRequest({
|
|
url: "xmgl/qualityInspectionRecord/countQualityInspectionRecordRegion",
|
|
data: requestData,
|
|
method: "post",
|
|
success(res) {
|
|
let responseData = res.result;
|
|
let xArr = [];
|
|
let yArr = [];
|
|
responseData.map(item => {
|
|
xArr.push(+item.y)
|
|
if (item.x && item.x.length > 5) {
|
|
yArr.push(item.x.substring(0, 6)) + '...'
|
|
} else if (item.x && (item.x.length < 5 || item.x.length == 5)) {
|
|
yArr.push(item.x)
|
|
}
|
|
})
|
|
that.questionOpts.yAxis.data = yArr;
|
|
that.questionOpts.series[0].data = xArr;
|
|
console.log(that.questionOpts, 777888)
|
|
that.$refs.chartRef.setOption(that.questionOpts)
|
|
// console.log(res, "责任区域问题统计")
|
|
// let responseData = res.result;
|
|
// let xArr = [];
|
|
// let yArr = [];
|
|
// responseData.map(item => {
|
|
// xArr.push(+item.y)
|
|
// if(item.x && item.x.length > 5){
|
|
// yArr.push(item.x.substring(0,6)) + '...'
|
|
// } else if(item.x && (item.x.length < 5 || item.x.length == 5)){
|
|
// yArr.push(item.x)
|
|
// }
|
|
// })
|
|
// let chartObj = {
|
|
// categories: yArr,
|
|
// series: [{
|
|
// name: "数据值",
|
|
// data: xArr
|
|
// }
|
|
// ]
|
|
// };
|
|
// that.questionChartData = JSON.parse(JSON.stringify(chartObj));
|
|
// setTimeout(function() {
|
|
// that.$forceUpdate();
|
|
// }, 500)
|
|
}
|
|
})
|
|
},
|
|
// 隐患数量未销项展示
|
|
getNoDestroyNumFn() {
|
|
let that = this
|
|
let requestData = {
|
|
projectSn: uni.getStorageSync("dept"),
|
|
isNotQualified: 1
|
|
}
|
|
if(this.timeCombo.timeRange4 && this.timeCombo.timeRange4){
|
|
requestData.inspectStartTime = this.timeCombo.timeRange4[0]
|
|
requestData.inspectEndTime = this.timeCombo.timeRange4[1]
|
|
}
|
|
this.sendRequest({
|
|
url: "xmgl/qualityInspectionRecord/countDangerLevel",
|
|
data: requestData,
|
|
method: "post",
|
|
success(res) {
|
|
console.log(res, "隐患数量未销项展示")
|
|
let responseData = res.result;
|
|
that.noDestroyOpts.subtitle.name = responseData.count + "个"
|
|
let dataArr = [];
|
|
responseData.data.map((item,index) => {
|
|
dataArr.push({
|
|
name: item.name,
|
|
data: Number(item.percent) / 100
|
|
})
|
|
that.noDestroyTypeList[index].name = item.name
|
|
that.noDestroyTypeList[index].value = +item.count
|
|
that.noDestroyTypeList[index].percent = +item.percent
|
|
})
|
|
let chartObj = {
|
|
series: dataArr
|
|
};
|
|
that.noDestroyChartData = JSON.parse(JSON.stringify(chartObj));
|
|
}
|
|
})
|
|
},
|
|
// 隐患数量超期未整改展示
|
|
getNoChangeHiddenNumFn() {
|
|
let that = this
|
|
let requestData = {
|
|
projectSn: uni.getStorageSync("dept"),
|
|
isOverdueRectification: 1
|
|
}
|
|
if(this.timeCombo.timeRange4 && this.timeCombo.timeRange4){
|
|
requestData.inspectStartTime = this.timeCombo.timeRange4[0]
|
|
requestData.inspectEndTime = this.timeCombo.timeRange4[1]
|
|
}
|
|
this.sendRequest({
|
|
url: "xmgl/qualityInspectionRecord/countDangerLevel",
|
|
data: requestData,
|
|
method: "post",
|
|
success(res) {
|
|
console.log(res, "隐患数量超期未整改展示")
|
|
let responseData = res.result;
|
|
that.noChangeOpts.subtitle.name = responseData.count + "个"
|
|
let dataArr = [];
|
|
responseData.data.map((item,index) => {
|
|
dataArr.push({
|
|
name: item.name,
|
|
data: Number(item.percent) / 100
|
|
})
|
|
that.noChangeTypeList[index].name = item.name
|
|
that.noChangeTypeList[index].value = +item.count
|
|
that.noChangeTypeList[index].percent = +item.percent
|
|
})
|
|
let chartObj = {
|
|
series: dataArr
|
|
};
|
|
that.noChangeChartData = JSON.parse(JSON.stringify(chartObj));
|
|
}
|
|
})
|
|
},
|
|
// 风险走势图
|
|
getRiskTrendFn() {
|
|
let that = this
|
|
let requestData = {
|
|
projectSn: uni.getStorageSync("dept")
|
|
}
|
|
this.sendRequest({
|
|
url: "xmgl/qualityInspectionRecord/riskChart",
|
|
data: requestData,
|
|
method: "post",
|
|
success(res) {
|
|
console.log(res, "风险走势图")
|
|
let responseData = res.result;
|
|
let categoriesArr = [];
|
|
let allArr = [];
|
|
let oneArr = [];
|
|
let twoArr = [];
|
|
let threeArr = [];
|
|
let fourArr = [];
|
|
responseData.map(item => {
|
|
categoriesArr.push(item.yearMonth)
|
|
allArr.push(+item.dangerNum)
|
|
oneArr.push(+item.greatFaultLevelNum)
|
|
twoArr.push(+item.largerRiskNum)
|
|
threeArr.push(+item.generalRiskNum)
|
|
fourArr.push(+item.lowRiskNum)
|
|
})
|
|
let chartObj = {
|
|
categories: categoriesArr,
|
|
series: [{
|
|
name: "全部",
|
|
data: allArr
|
|
},
|
|
{
|
|
name: "重大风险",
|
|
data: oneArr
|
|
},
|
|
{
|
|
name: "较大风险",
|
|
data: twoArr
|
|
},
|
|
{
|
|
name: "一般风险",
|
|
data: threeArr
|
|
},
|
|
{
|
|
name: "低风险",
|
|
data: fourArr
|
|
}
|
|
]
|
|
};
|
|
that.lineChartData = JSON.parse(JSON.stringify(chartObj));
|
|
}
|
|
})
|
|
},
|
|
// 隐患分析
|
|
getHiddenAnalysisFn() {
|
|
let that = this
|
|
let requestData = {
|
|
projectSn: uni.getStorageSync("dept")
|
|
}
|
|
this.sendRequest({
|
|
url: "xmgl/qualityInspectionRecord/selectQualityStatisticsNum",
|
|
data: requestData,
|
|
method: "post",
|
|
success(res) {
|
|
console.log(res, "获取隐患分析")
|
|
let responseData = res.result;
|
|
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
|
|
let chartObj = {
|
|
categories: ["排查记录", "待核验", "待复查", "待整改", "超期未关闭", "未闭合"],
|
|
series: [{
|
|
name: "数量",
|
|
data: [responseData.investigateNum, responseData.verificationNum, responseData.reviewNum, responseData.rectificationNum, responseData.overdueNotCloseNum, responseData.notCloseNum]
|
|
}]
|
|
};
|
|
that.radarOpts.extra.radar.max = +responseData.totalNum;
|
|
that.radarChartData = JSON.parse(JSON.stringify(chartObj));
|
|
}
|
|
})
|
|
},
|
|
// 风险统计
|
|
getRiskStatisticsFn() {
|
|
let that = this
|
|
let requestData = {
|
|
projectSn: uni.getStorageSync("dept")
|
|
}
|
|
this.sendRequest({
|
|
url: "xmgl/qualityInspectionRecord/selectQualityStatisticsNum",
|
|
data: requestData,
|
|
method: "post",
|
|
success(res) {
|
|
console.log(res, "获取风险统计")
|
|
let responseData = res.result;
|
|
that.riskDataObj = responseData;
|
|
if(res.result){
|
|
that.riskTypeList[0].value = responseData.greatFaultLevelNum
|
|
that.riskTypeList[1].value = responseData.largerRiskNum
|
|
that.riskTypeList[2].value = responseData.generalRiskNum
|
|
that.riskTypeList[3].value = responseData.lowRiskNum
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 分包单位质量隐患统计
|
|
getStatsByEnterpriseFn() {
|
|
let that = this
|
|
let requestData = {
|
|
projectSn: uni.getStorageSync("dept"),
|
|
pageSize: -1
|
|
}
|
|
if(this.timeCombo.timeRange2 && this.timeCombo.timeRange2){
|
|
requestData.inspectTime_begin = this.timeCombo.timeRange2[0]
|
|
requestData.inspectTime_end = this.timeCombo.timeRange2[1]
|
|
}
|
|
this.sendRequest({
|
|
url: "xmgl/qualityInspectionRecord/statsByEnterprise",
|
|
data: requestData,
|
|
method: "post",
|
|
success(res) {
|
|
console.log(res, "获取分包单位质量隐患统计")
|
|
let responseData = res.result.records;
|
|
let categoriesArr = [];
|
|
let dataArr = [];
|
|
responseData.map(item => {
|
|
if(item.enterpriseName.length == 4){
|
|
categoriesArr.push(item.enterpriseName)
|
|
} else {
|
|
categoriesArr.push(item.enterpriseName.substring(0,4) + '...')
|
|
}
|
|
dataArr.push(item.totalNum)
|
|
})
|
|
let chartObj = {
|
|
categories: categoriesArr,
|
|
series: [{
|
|
name: "总数",
|
|
data: dataArr
|
|
}]
|
|
};
|
|
that.chartData = JSON.parse(JSON.stringify(chartObj));
|
|
}
|
|
})
|
|
},
|
|
// 检查统计
|
|
getStatisticsNumFn() {
|
|
let that = this
|
|
let requestData = {
|
|
projectSn: uni.getStorageSync("dept")
|
|
}
|
|
if(this.timeCombo.timeRange1 && this.timeCombo.timeRange1){
|
|
requestData.inspectStartTime = this.timeCombo.timeRange1[0]
|
|
requestData.inspectEndTime = this.timeCombo.timeRange1[1]
|
|
}
|
|
// 获取检查统计
|
|
this.sendRequest({
|
|
url: "xmgl/qualityInspectionRecord/selectQualityStatisticsNum",
|
|
data: requestData,
|
|
method: "post",
|
|
success(res) {
|
|
console.log(res, "获取检查统计")
|
|
let responseData = res.result;
|
|
if(res.result){
|
|
console.log(that.typeList)
|
|
that.typeList[0].value = responseData.totalNum
|
|
that.typeList[1].value = responseData.dangerNum
|
|
that.typeList[2].value = responseData.greatFaultLevelNum
|
|
that.typeList[3].value = responseData.overdueNotCloseNum
|
|
}
|
|
}
|
|
})
|
|
},
|
|
optionClick(index) {
|
|
this.checkIndex = index;
|
|
this.getRecordRegionNumFn();
|
|
},
|
|
confirmTimeRange(e,index) {
|
|
console.log(e,index)
|
|
if(index == 1){
|
|
this.timeCombo.timeRange1 = e;
|
|
this.getStatisticsNumFn();
|
|
} else if(index == 2){
|
|
this.timeCombo.timeRange2 = e;
|
|
this.getStatsByEnterpriseFn();
|
|
} else if(index == 3){
|
|
this.timeCombo.timeRange3 = e;
|
|
this.getStatsByEnterpriseFn();
|
|
} else if(index == 4){
|
|
this.timeCombo.timeRange4 = e;
|
|
this.getNoChangeHiddenNumFn();
|
|
this.getNoDestroyNumFn();
|
|
}
|
|
// this.form.plannedMakeBeamBeginTime = e[0]
|
|
// this.form.plannedMakeBeamEndTime = e[1]
|
|
// console.log("制梁时间选择", e)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
height: auto;
|
|
padding: 30rpx 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #F4F5FD;
|
|
.fixedheader {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 2;
|
|
|
|
:deep(.headerBox ){
|
|
background: #2b8df3;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.count-statistics {
|
|
padding: 20rpx 22rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0px 8rpx 16rpx 0px rgba(219, 229, 255, 0.6);
|
|
border-radius: 10rpx;
|
|
.noData {
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
margin-top: 60rpx;
|
|
color: #bed0fb;
|
|
.noDataImg{
|
|
width: 200rpx;
|
|
height: 160rpx;
|
|
}
|
|
}
|
|
.top-title {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.line {
|
|
width: 6rpx;
|
|
height: 44rpx;
|
|
background: #268DFF;
|
|
border-radius: 0rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
>text {
|
|
font-family: Inter, Inter;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #272D45;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.subTitle {
|
|
font-family: Inter, Inter;
|
|
font-weight: 500;
|
|
font-size: 18rpx;
|
|
color: #76777F;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.right-date {
|
|
margin-top: 8rpx;
|
|
|
|
:deep(.uni-date-range ){
|
|
height: 40rpx;
|
|
}
|
|
|
|
:deep(.uni-icons ){
|
|
font-size: 36rpx !important;
|
|
margin-bottom: 3rpx;
|
|
}
|
|
|
|
:deep(.uni-date__x-input ){
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
:deep(.range-separator ){
|
|
font-size: 22rpx;
|
|
}
|
|
}
|
|
|
|
.right-option {
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 4rpx;
|
|
border: 1px solid #D9D9D9;
|
|
|
|
.option-item {
|
|
width: 60rpx;
|
|
height: 36rpx;
|
|
line-height: 36rpx;
|
|
color: #D9D9D9;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 20rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.option-item:not(:last-child) {
|
|
border-right: 1px solid #D9D9D9;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom-content {
|
|
display: grid;
|
|
grid-gap: 20rpx;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
margin-top: 90rpx;
|
|
margin-bottom: 80rpx;
|
|
|
|
.count-type-list {
|
|
height: 195rpx;
|
|
background: #ECF8F7;
|
|
border-radius: 5rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
text:nth-child(2) {
|
|
font-family: Inter, Inter;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #000000;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.count-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 40rpx;
|
|
margin-bottom: 44rpx;
|
|
|
|
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
|
|
.chart-content {
|
|
width: 100%;
|
|
// height: 300px;
|
|
}
|
|
}
|
|
|
|
.risk-content {
|
|
margin-top: 42rpx;
|
|
margin-bottom: 40rpx;
|
|
|
|
.risk-count {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
|
|
.count-title,
|
|
.risk-all-title {
|
|
width: 100%;
|
|
text-align: center;
|
|
font-family: Inter, Inter;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #000000;
|
|
}
|
|
}
|
|
|
|
.risk-type {
|
|
display: grid;
|
|
grid-gap: 20rpx;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
margin-top: 44rpx;
|
|
|
|
&-item {
|
|
// width: 364rpx;
|
|
height: 190rpx;
|
|
border-radius: 10rpx;
|
|
font-family: Inter, Inter;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
|
|
text {
|
|
font-size: 24rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
view {
|
|
font-size: 40rpx;
|
|
margin-top: 32rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.hidden-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
|
|
.chart-hidden-content {
|
|
width: 100%;
|
|
margin-top: 6rpx;
|
|
position: relative;
|
|
|
|
// height: 300px;
|
|
.chart-tip-legend {
|
|
position: absolute;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.color-zfx {
|
|
width: 42rpx;
|
|
height: 20rpx;
|
|
background: #5470C6;
|
|
}
|
|
|
|
text {
|
|
font-family: Inter, Inter;
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
color: #000000;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.trend-content {
|
|
margin-top: 28rpx;
|
|
margin-bottom: 52rpx;
|
|
|
|
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
|
|
.chart-trend-content {
|
|
width: 100%;
|
|
// height: 600rpx;
|
|
}
|
|
}
|
|
|
|
.hidden-sum-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 20rpx;
|
|
|
|
.title-one {
|
|
font-family: Inter, Inter;
|
|
font-weight: normal;
|
|
font-size: 30rpx;
|
|
color: #666363;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.title-two {
|
|
font-family: Inter, Inter;
|
|
font-weight: normal;
|
|
font-size: 24rpx;
|
|
color: #666363;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.hidden-chart-content {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.hidden-chart-left {
|
|
width: 30%;
|
|
margin-right: 56rpx;
|
|
|
|
.left-legend-diy {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.diy-item {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.zfx {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
margin-right: 6rpx;
|
|
}
|
|
|
|
text {
|
|
font-family: Inter, Inter;
|
|
font-weight: normal;
|
|
font-size: 20rpx;
|
|
color: #AAABAE;
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
|
|
.diy-item:not(:last-child) {
|
|
margin-bottom: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.hidden-chart-right {
|
|
width: 60%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.divider-line {
|
|
width: 500rpx;
|
|
height: 0;
|
|
border: 1px dashed #D1D2D8;
|
|
margin-bottom: 62rpx;
|
|
}
|
|
}
|
|
|
|
.question-content {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.count-statistics:not(:last-child) {
|
|
margin-bottom: 25rpx;
|
|
}
|
|
|
|
.svgImage {
|
|
position: absolute;
|
|
left: -3rpx;
|
|
top: -3rpx;
|
|
}
|
|
|
|
.big-progressr {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
position: relative;
|
|
transform: rotate(130deg);
|
|
$offset: 30rpx;
|
|
|
|
.u-progress-content {
|
|
transform: rotate(-130deg);
|
|
position: absolute;
|
|
left: $offset;
|
|
right: $offset;
|
|
top: $offset;
|
|
bottom: $offset;
|
|
border-radius: 50%;
|
|
padding: 70rpx;
|
|
box-shadow: 0 0 50rpx 0rpx rgba(114, 231, 209, .5);
|
|
|
|
|
|
.u-progress-box {
|
|
border-radius: 50%;
|
|
background-color: #fff;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-shadow: 0 0 15rpx 0rpx #eee;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
color: #3570FF;
|
|
|
|
.value {
|
|
font-size: 60rpx;
|
|
}
|
|
|
|
.title {
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.boxs {
|
|
position: relative;
|
|
margin-top: 30rpx;
|
|
z-index: 10;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
image {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
}
|
|
|
|
.box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 20rpx;
|
|
width: calc(50% - 15rpx);
|
|
box-shadow: 0 0 20rpx 1rpx rgba(99, 225, 214, .5);
|
|
border-radius: 12rpx;
|
|
align-items: center;
|
|
|
|
.box-content {
|
|
font-size: 25rpx;
|
|
text-align: right;
|
|
|
|
.box-title {}
|
|
|
|
.box-value {
|
|
font-size: 50rpx;
|
|
|
|
&.v1 {
|
|
color: #e15057;
|
|
}
|
|
|
|
&.v2 {
|
|
color: #e38a38;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |