164 lines
4.6 KiB
Vue
164 lines
4.6 KiB
Vue
<template>
|
|
<view>
|
|
<view class="charts-box">
|
|
<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
|
|
</view>
|
|
<!-- 评定项 -->
|
|
<view v-if="index.index === '1'">
|
|
<uni-card title="扣分详情">
|
|
<view style="color: #000;font-weight: bold;">
|
|
{{chartsLIst.bonus1Detail}}
|
|
{{chartsLIst.bonus2Detail}}
|
|
{{chartsLIst.bonus3Detail}}
|
|
{{chartsLIst.bonus4Detail}}
|
|
{{chartsLIst.bonus5Detail}}
|
|
{{chartsLIst.emcDrillDetail}}
|
|
{{chartsLIst.emcPlanDetail}}
|
|
{{chartsLIst.inResponsibilityDetail}}
|
|
{{chartsLIst.inSecuritySchemeDetail}}
|
|
{{chartsLIst.inTeamBuildDetail}}
|
|
{{chartsLIst.inDevicesSetupDetail}}
|
|
{{chartsLIst.inFireManageDetail}}
|
|
{{chartsLIst.inDangerousManageDetail}}
|
|
{{chartsLIst.inSmartSecurityDetail}}
|
|
{{chartsLIst.lawEducationDetail}}
|
|
{{chartsLIst.lawFirstClassDetail}}
|
|
{{chartsLIst.outCaseManageDetail}}
|
|
{{chartsLIst.outPeakGuardDetail}}
|
|
{{chartsLIst.outRiskPreventDetail}}
|
|
{{chartsLIst.outTrafficDetail}}
|
|
{{chartsLIst.riskConflictManageDetail}}
|
|
{{chartsLIst.riskDangerManageDetail}}
|
|
{{chartsLIst.riskProcessDetail}}
|
|
</view>
|
|
</uni-card>
|
|
|
|
</view>
|
|
|
|
<view v-else>
|
|
<uni-card title="扣分详情">
|
|
<view style="color: #000;font-weight: bold;">
|
|
{{chartsColor.alarmSystemDetail}}
|
|
{{chartsColor.buildingSchemeDetail}}
|
|
{{chartsColor.collisionDetail}}
|
|
{{chartsColor.conflictDetail}}
|
|
{{chartsColor.conflictSchemeDetail}}
|
|
{{chartsColor.criminalCaseDetail}}
|
|
{{chartsColor.dangerousSchemeDetail}}
|
|
{{chartsColor.equipCountDetail}}
|
|
{{chartsColor.fireSchemeDetail}}
|
|
{{chartsColor.guarderCertDetail}}
|
|
{{chartsColor.guarderCountDetail}}
|
|
{{chartsColor.guarderOverAgeDetail}}
|
|
{{chartsColor.guarderPMISchemeDetail}}
|
|
{{chartsColor.guarderSchemeDetail}}
|
|
{{chartsColor.ipcCoverDetail}}
|
|
{{chartsColor.ipcGateDetail}}
|
|
{{chartsColor.ipcRecordDetail}}
|
|
{{chartsColor.lawEducationDetail}}
|
|
{{chartsColor.peakGuarderArmedDetail}}
|
|
{{chartsColor.peakProtectSchemeDetail}}
|
|
{{chartsColor.peakStaffDetail}}
|
|
{{chartsColor.securityServiceSchemeDetail}}
|
|
{{chartsColor.zoneClosedDetail}}
|
|
</view>
|
|
</uni-card>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getschoolLIst
|
|
} from '@/api/login.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
chartData: {},
|
|
title: '扣分详情',
|
|
//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
|
|
opts: {
|
|
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
|
"#ea7ccc"
|
|
],
|
|
padding: [15, 15, 0, 5],
|
|
enableScroll: false,
|
|
legend: {},
|
|
xAxis: {
|
|
disableGrid: true
|
|
},
|
|
yAxis: {
|
|
data: [{
|
|
min: 0
|
|
}]
|
|
},
|
|
extra: {
|
|
column: {
|
|
type: "group",
|
|
width: 30,
|
|
activeBgColor: "#000000",
|
|
activeBgOpacity: 0.08
|
|
}
|
|
}
|
|
},
|
|
chartsLIst: undefined,
|
|
chartsColor:undefined,
|
|
index:''
|
|
};
|
|
},
|
|
onReady() {
|
|
this.getServerData();
|
|
},
|
|
onLoad(val) {
|
|
this.index = val
|
|
this.chartsLIst = uni.getStorageSync('charts') //星级
|
|
this.chartsColor = uni.getStorageSync('chartsColor') //三色
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
beforeDestroy(){
|
|
// uni.removeStorage({key:'chartsColor'})
|
|
},
|
|
computed:{},
|
|
methods: {
|
|
getServerData() {
|
|
|
|
console.log(this.chartsColor);
|
|
//模拟从服务器获取数据时的延时
|
|
setTimeout(() => {
|
|
let datalist = undefined
|
|
let number = undefined
|
|
let time = undefined
|
|
if(this.index.index === '1'){
|
|
datalist = this.chartsLIst.station
|
|
number = this.chartsLIst.scoreTotal / 10
|
|
time = this.chartsLIst.schoolTime
|
|
}else{
|
|
datalist = this.chartsColor.station
|
|
number = this.chartsColor.scoreTotal / 10
|
|
time = this.chartsColor.schoolTime
|
|
}
|
|
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
|
|
let res = {
|
|
categories: [datalist],
|
|
series: [{
|
|
name: time,
|
|
data: [number]
|
|
}]
|
|
};
|
|
this.chartData = JSON.parse(JSON.stringify(res));
|
|
}, 500);
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
|
|
.charts-box {
|
|
width: 100%;
|
|
height: 400rpx;
|
|
}
|
|
</style> |