湖里大屏(数字工地):新增AI分析 echart 图配置
This commit is contained in:
parent
c62c5d1afc
commit
9df3b6f36a
@ -3,7 +3,7 @@
|
|||||||
<!-- <JNestedRingChart :title="{ text: 652, subTitle: '本周总任务' }" :series="series" /> -->
|
<!-- <JNestedRingChart :title="{ text: 652, subTitle: '本周总任务' }" :series="series" /> -->
|
||||||
|
|
||||||
<div class="air">
|
<div class="air">
|
||||||
<div class="pieAnalyse2" ref="pieAnalyse" style="width: 100%; height: 60%"></div>
|
<div class="pieAnalyse" ref="pieAnalyse"></div>
|
||||||
<img class="image" src="~@/assets/images/longguang/cutimage/AI_empty.png" v-if="!aiWarning.total" />
|
<img class="image" src="~@/assets/images/longguang/cutimage/AI_empty.png" v-if="!aiWarning.total" />
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
@ -13,6 +13,7 @@
|
|||||||
import { getAITypeStatistics } from '@/assets/js/api/companyBigScreen.js'
|
import { getAITypeStatistics } from '@/assets/js/api/companyBigScreen.js'
|
||||||
import Card from '../components/Card.vue'
|
import Card from '../components/Card.vue'
|
||||||
import JNestedRingChart from '../jChart/pie/JNestedRingChart.vue'
|
import JNestedRingChart from '../jChart/pie/JNestedRingChart.vue'
|
||||||
|
import echarts from 'echarts4'
|
||||||
export default {
|
export default {
|
||||||
components: { Card, JNestedRingChart },
|
components: { Card, JNestedRingChart },
|
||||||
props: {
|
props: {
|
||||||
@ -60,21 +61,15 @@ export default {
|
|||||||
|
|
||||||
this.$set(this.aiWarning, 'total', totalAlarmNum)
|
this.$set(this.aiWarning, 'total', totalAlarmNum)
|
||||||
this.$set(this.aiWarning, 'list', alarmList)
|
this.$set(this.aiWarning, 'list', alarmList)
|
||||||
|
this.pieAnalyse()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// AI分析
|
// AI分析
|
||||||
pieAnalyse() {
|
pieAnalyse() {
|
||||||
console.log(this.$refs.pieAnalyse)
|
|
||||||
let pieAnalyse = echarts.init(this.$refs.pieAnalyse, 'dark')
|
let pieAnalyse = echarts.init(this.$refs.pieAnalyse, 'dark')
|
||||||
let total = this.totalDangerAlarmType
|
let dataArray = this.aiWarning.list.map(x => ({ value: x.alarmNum, name: x.alarmTypeName }))
|
||||||
let dataArray = this.dangerAlarmTypeList.map(x => {
|
|
||||||
return {
|
|
||||||
value: x.alarmNum,
|
|
||||||
name: x.alarmTypeName
|
|
||||||
}
|
|
||||||
})
|
|
||||||
console.log(dataArray)
|
|
||||||
pieAnalyse.setOption({
|
pieAnalyse.setOption({
|
||||||
color: ['#49B6A0', '#C16C28', '#F4A968', '#4378D8', '#D94916', '#9FD6F4', '#24A79A', '#786FF0'],
|
color: ['#49B6A0', '#C16C28', '#F4A968', '#4378D8', '#D94916', '#9FD6F4', '#24A79A', '#786FF0'],
|
||||||
animation: false,
|
animation: false,
|
||||||
@ -102,7 +97,6 @@ export default {
|
|||||||
backgroundColor: 'rgba(3,6,9,0)',
|
backgroundColor: 'rgba(3,6,9,0)',
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
// name: '总数',
|
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
center: ['25%', '50%'],
|
center: ['25%', '50%'],
|
||||||
radius: ['70%', '95%'],
|
radius: ['70%', '95%'],
|
||||||
@ -111,7 +105,7 @@ export default {
|
|||||||
show: true,
|
show: true,
|
||||||
position: 'center',
|
position: 'center',
|
||||||
color: 'white',
|
color: 'white',
|
||||||
formatter: '{total|' + total + '}' + '\n\n' + '{active|预警总数}',
|
formatter: '{total|' + this.aiWarning.total + '}' + '\n\n' + '{active|预警总数}',
|
||||||
rich: {
|
rich: {
|
||||||
total: {
|
total: {
|
||||||
fontSize: 17
|
fontSize: 17
|
||||||
@ -139,10 +133,9 @@ export default {
|
|||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
.pieAnalyse2 {
|
.pieAnalyse {
|
||||||
position: absolute;
|
width: 100%;
|
||||||
top: 20%;
|
height: 100%;
|
||||||
left: 4%;
|
|
||||||
}
|
}
|
||||||
.image {
|
.image {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user