<template>
|
<div class='page-header-index-wide' ref='imageTofile'>
|
<a-row :gutter='12' :style="{ marginBottom: '12px' }" style='text-align: center' class='s0card'>
|
<a-col :sm='24' :md='24' :xl='24'>
|
<div style='position: relative'>
|
|
<div >
|
<a-tabs default-active-key='1' style='background-color: white' @change='tabChange'>
|
<a-tab-pane key='1' tab='所有项目'>
|
</a-tab-pane>
|
<a-tab-pane key='2' tab='重点项目' force-render>
|
</a-tab-pane>
|
|
</a-tabs>
|
</div>
|
<div style='position: absolute;height: 100%;top: 0;right: 20px;display: flex;align-items: center'>
|
<a-button type="link" size="small" @click='toImage'>
|
导出
|
</a-button>
|
</div>
|
</div>
|
|
</a-col>
|
</a-row>
|
|
<a-row :gutter='12' :style="{ marginBottom: '12px' }" class='s1card'>
|
<a-col :sm='24' :md='12' :xl='6'>
|
<!-- <chart-card :loading='loading' title='项目总数' total='99'>
|
<a-tooltip title='指标说明' slot='action'>
|
<a-icon type='info-circle-o' />
|
</a-tooltip>
|
<div>
|
<span slot='term' style='margin-right: 16px;'>进行中 80</span>
|
<span slot='term'>未开始 19</span>
|
</div>
|
<template slot='footer'>
|
<trend flag='up' style='margin-right: 16px;'>
|
<span slot='term'>本月</span>
|
2
|
</trend>
|
|
<trend flag='up'>
|
<span slot='term'>较去年</span>
|
12%
|
</trend>
|
</template>
|
|
</chart-card>-->
|
|
<a-card :title="'本年项目总数（'+xmzs +'）'" :loading='loading'>
|
<div id='s1Chart1' style='background-color: white;padding: 5px'></div>
|
</a-card>
|
</a-col>
|
<a-col :sm='24' :md='12' :xl='6'>
|
<!-- <chart-card :loading='loading' title='项目人员' :total='108 | NumberFormat'>
|
<a-tooltip title='指标说明' slot='action'>
|
<a-icon type='info-circle-o' />
|
</a-tooltip>
|
<div>
|
<mini-area />
|
</div>
|
<template slot='footer'>
|
<trend flag='down' style='margin-right: 16px;'>
|
<span slot='term'>较上月</span>
|
3
|
</trend>
|
</template>
|
</chart-card>-->
|
|
<a-card :title="'本年完成项目数（'+bnwcxm +'）'" :loading='loading'>
|
<div id='s1Chart2' style='background-color: white;padding: 5px'></div>
|
</a-card>
|
</a-col>
|
<a-col :sm='24' :md='12' :xl='6'>
|
<!-- <chart-card :loading='loading' title='超期项目' :total='9 | NumberFormat'>
|
<a-tooltip title='指标说明' slot='action'>
|
<a-icon type='info-circle-o' />
|
</a-tooltip>
|
<div>
|
<mini-bar :height='40' :dataSource='ycList' />
|
</div>
|
<template slot='footer'>
|
<div style='display: flex;flex-direction: row;justify-content: space-between'>
|
<span>研发一部 7</span>
|
<span>研发二部 2</span>
|
<span>研发三部 0</span>
|
</div>
|
</template>
|
</chart-card>-->
|
<a-card title='项目工时、负荷统计' :loading='loading'>
|
<div id='s1Chart3' style='background-color: white;padding: 5px'></div>
|
</a-card>
|
</a-col>
|
<a-col :sm='24' :md='12' :xl='6'>
|
<!-- <chart-card :loading='loading' title='项目达成率' total='78%'>
|
<a-tooltip title='指标说明' slot='action'>
|
<a-icon type='info-circle-o' />
|
</a-tooltip>
|
<div>
|
<mini-progress color='rgb(19, 194, 194)' :target='80' :percentage='78' :height='8' />
|
<mini-progress color='rgb(19, 194, 194)' :target='80' :percentage='78' :height='8' />
|
<mini-progress color='rgb(19, 194, 194)' :target='80' :percentage='78' :height='8' />
|
</div>
|
<template slot='footer'>
|
<trend flag='up'>
|
<span slot='term'>较上月</span>
|
10%
|
</trend>
|
</template>
|
</chart-card>-->
|
<a-card :title="'本年项目达成率（'+bndcl +'%）'" :loading='loading'>
|
<div id='s1Chart4' style='background-color: white;padding: 5px'></div>
|
</a-card>
|
</a-col>
|
</a-row>
|
|
|
<a-card :loading='loading' :bordered='false' :body-style="{padding: '0'}"
|
style='margin-bottom: 12px;padding-bottom: 10px'>
|
<div class='salesCard'>
|
<a-tabs default-active-key='1' size='large' :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
|
<div class='extra-wrapper' slot='tabBarExtraContent'>
|
<div class='extra-item'>
|
<!-- <a>本月</a>
|
<a>本季</a>-->
|
<a>本年</a>
|
</div>
|
<!-- <a-range-picker :style="{width: '256px'}" />-->
|
</div>
|
<a-tab-pane loading='true' tab='项目概览' key='1'>
|
<a-row>
|
|
<a-col :xl='6' :lg='6' :md='6' :sm='6' :xs='6'>
|
<div style='text-align: center;' class='chart-box'>
|
<div style='height: 40px;font-size: 20px'>{{ titles[0].title }}</div>
|
<div id='s2Chart1' />
|
</div>
|
</a-col>
|
|
<a-col :xl='6' :lg='6' :md='6' :sm='6' :xs='6'>
|
<div style='text-align: center;' class='chart-box'>
|
<div style='height: 40px;font-size: 20px'>{{ titles[1].title }}</div>
|
<div id='s2Chart2' />
|
</div>
|
</a-col>
|
|
<a-col :xl='6' :lg='6' :md='6' :sm='6' :xs='6'>
|
<div style='text-align: center;' class='chart-box'>
|
<div style='height: 40px;font-size: 20px'>{{ titles[2].title }}</div>
|
<div id='s2Chart3' />
|
</div>
|
</a-col>
|
|
<a-col :xl='6' :lg='6' :md='6' :sm='6' :xs='6'>
|
<div style='text-align: center;'>
|
<div style='height: 40px;font-size: 20px'>{{ titles[3].title }}</div>
|
<div id='s2Chart4' />
|
</div>
|
</a-col>
|
</a-row>
|
<div style='background-color: #F0F2F5;height: 12px'></div>
|
<a-row style='padding-top: 20px'>
|
|
<a-col :xl='6' :lg='6' :md='6' :sm='6' :xs='6'>
|
<div style='text-align: center;' class='chart-box'>
|
<div style='height: 40px;font-size: 20px'>{{ titles[4].title }}</div>
|
<div id='s2Chart5' />
|
</div>
|
</a-col>
|
|
<a-col :xl='6' :lg='6' :md='6' :sm='6' :xs='6'>
|
<div style='text-align: center;' class='chart-box'>
|
<div style='height: 40px;font-size: 20px'>{{ titles[5].title }}</div>
|
<div id='s2Chart6' />
|
</div>
|
</a-col>
|
|
<a-col :xl='6' :lg='6' :md='6' :sm='6' :xs='6'>
|
<div style='text-align: center;' class='chart-box'>
|
<div style='height: 40px;font-size: 20px'>{{ titles[6].title }}</div>
|
<div id='s2Chart7' />
|
</div>
|
</a-col>
|
<a-col :xl='6' :lg='6' :md='6' :sm='6' :xs='6'>
|
<div style='text-align: center;' class='chart-box'>
|
<div style='height: 40px;font-size: 20px'>{{ titles[7].title }}</div>
|
<div id='s2Chart8' />
|
</div>
|
</a-col>
|
|
</a-row>
|
</a-tab-pane>
|
<a-tab-pane tab='项目信息' key='2'>
|
<a-row>
|
<a-col class='custom-card' :xl='24' :lg='24' :md='24' :sm='24' :xs='24'>
|
<PMO :inner='true'></PMO>
|
</a-col>
|
|
</a-row>
|
</a-tab-pane>
|
|
<a-tab-pane tab='甘特图' key='3'>
|
<index-gantt class='gantt-box' :tasks='tasks'>
|
|
</index-gantt>
|
|
</a-tab-pane>
|
</a-tabs>
|
</div>
|
</a-card>
|
|
<a-card title='里程碑' :loading='loading' :bordered='false' :body-style="{padding: '0'}" style='margin-bottom: 12px; '>
|
<a-row>
|
<a-col :xl='24' :lg='24' :md='24' :sm='24' :xs='24'>
|
<div style='height: 50px;background-color: white;border-radius: 5px'><span
|
style='line-height: 50px;font-size: 16px;margin-left: 20px'>里程碑</span></div>
|
</a-col>
|
<!--
|
<a-col :key='index' v-for='(item,index) in lcbTitles' :xl='3' :lg='3' :md='3' :sm='3' :xs='3' :class="index < 7 ? 'lcb-item-title' : 'lcb-item-title-last'">
|
|
<div style='height: 34px;display: flex;flex-direction: row; align-items: center;background-color: white; padding: 3px;border-radius: 5px;'>
|
<a-badge color="#108ee9" style='font-weight: bold' :text="item.title+'(3)'"/><span style='color: #1890ff'></span>
|
</div>
|
|
<div style='position: relative;height: 300px;background-color: white;margin-top:5px;border-radius: 5px'>
|
<div style='width:100%;height: 100%;box-sizing: border-box;position: absolute;overflow-y: scroll' class='hide-scroll'>
|
<div style='height: 120px;background-color: white;padding: 5px;border-radius: 5px;display: flex;flex-wrap: wrap;overflow: hidden'>
|
<span style='font-weight: bold;padding: 2px 4px'>{{ item.title }}一号项目</span>
|
<a-tag color="#EEF3FB" style='margin-top: 5px;color: #5F6E8D'>
|
负责人:张三
|
</a-tag>
|
<a-tag color="#f50" style='margin-top: 5px;' v-if='index%3==0'>
|
重点
|
</a-tag>
|
<a-tag color="#EEF3FB" style='margin-top: 5px;color: #5F6E8D'>
|
开始时间:10月1日
|
</a-tag>
|
<a-tag color="#EEF3FB" style='margin-top: 5px;color: #5F6E8D'>
|
截止时间:12月1日
|
</a-tag>
|
</div>
|
<div style='height: 4px;background-color: #f0f2f5'></div>
|
|
<div style='height: 120px;background-color: white;padding: 5px;border-radius: 5px'>
|
<span style='font-weight: bold;padding: 2px 4px'>{{ item.title }}二号项目</span>
|
<a-tag color="#EEF3FB" style='margin-top: 5px;color: #5F6E8D'>
|
负责人:张三
|
</a-tag>
|
<a-tag color="#f50" style='margin-top: 5px;' v-if='index%4==0'>
|
重点
|
</a-tag>
|
<a-tag color="#EEF3FB" style='margin-top: 5px;color: #5F6E8D'>
|
开始时间:08月01日
|
</a-tag>
|
<a-tag color="red" style='margin-top: 5px;color: #5F6E8D'>
|
截止时间:10月01日
|
</a-tag>
|
</div>
|
<div style='height: 4px;background-color: #f0f2f5'></div>
|
|
<div style='height: 120px;background-color: white;padding: 5px;border-radius: 5px'>
|
<span style='font-weight: bold;padding: 2px 4px'>{{ item.title }}三号项目</span>
|
<a-tag color="#EEF3FB" style='margin-top: 5px;color: #5F6E8D'>
|
负责人:张三
|
</a-tag>
|
<a-tag color="#f50" style='margin-top: 5px;' v-if='index%6==0'>
|
重点
|
</a-tag>
|
<a-tag color="#EEF3FB" style='margin-top: 5px;color: #5F6E8D'>
|
开始时间:08月01日
|
</a-tag>
|
<a-tag color="red" style='margin-top: 5px;color: #5F6E8D'>
|
截止时间:10月01日
|
</a-tag>
|
</div>
|
|
|
</div>
|
|
|
</div>
|
</a-col>
|
-->
|
<index-lcb :dataType='dataType'></index-lcb>
|
</a-row>
|
|
|
</a-card>
|
|
<a-card :loading='loading' :bordered='false' :body-style="{padding: '0'}" style='padding: 0 10px'>
|
<div class='salesCard'>
|
<a-tabs default-active-key='1' size='large' :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
|
<div class='extra-wrapper' slot='tabBarExtraContent'>
|
<div class='extra-item'>
|
<!-- <a>本月</a>
|
<a>本季</a>-->
|
<a>本年</a>
|
</div>
|
<!-- <a-range-picker :style="{width: '256px'}" />-->
|
</div>
|
<a-tab-pane loading='true' tab='项目任务' key='1'>
|
<a-row>
|
<a-col :span='6'>
|
<head-info title='项目总数' :content="s4c1Xm"></head-info>
|
</a-col>
|
<a-col :span='2'>
|
<a-spin class='circle-cust'>
|
<a-icon slot='indicator' type='alert' style='font-size: 24px' />
|
</a-spin>
|
</a-col>
|
<a-col :span='6'>
|
<head-info title='任务总数' :content='s4c1Link'></head-info>
|
</a-col>
|
<a-col :span='2'>
|
<a-spin class='circle-cust'>
|
<a-icon slot='indicator' type='link' style='font-size: 24px' />
|
</a-spin>
|
</a-col>
|
<a-col :span='6'>
|
<head-info title='未完成' :content='s4c1Ulink'></head-info>
|
</a-col>
|
<a-col :span='2'>
|
<a-spin class='circle-cust'>
|
<a-icon slot='indicator' type='rise' style='font-size: 24px' />
|
</a-spin>
|
</a-col>
|
</a-row>
|
<div style='margin-top: 10px' id='main'></div>
|
</a-tab-pane>
|
<a-tab-pane tab='任务完成分析' key='2' forceRender>
|
<div id='s3Chart2'></div>
|
</a-tab-pane>
|
|
<a-tab-pane tab='任务延误分析' key='3' forceRender>
|
<div id='s3Chart3'></div>
|
</a-tab-pane>
|
|
|
</a-tabs>
|
</div>
|
</a-card>
|
</div>
|
</template>
|
|
<script>
|
import html2canvas from "html2canvas";
|
import get from 'lodash.get'
|
import ChartCard from '@/components/ChartCard'
|
import ACol from 'ant-design-vue/es/grid/Col'
|
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
|
import MiniArea from '@/components/chart/MiniArea'
|
import MiniBar from '@/components/chart/MiniBar'
|
import MiniProgress from '@/components/chart/MiniProgress'
|
import Bar from '@/components/chart/Bar'
|
import LineChartMultid from '@/components/chart/LineChartMultid'
|
import HeadInfo from '@/components/tools/HeadInfo.vue'
|
import Pie from '@/components/chart/Pie'
|
|
import PMO from '@/views/kb/PMO'
|
|
import Trend from '@/components/Trend'
|
import Gantt from '@/views/dashboard/module/Gantt'
|
|
import { Chart, getTheme, registerTheme, registerShape } from '@antv/g2'
|
import DataSet from '@antv/data-set'
|
import { getLoginfo, getVisitInfo } from '@/api/api'
|
import IndexLcb from '@views/kb/IndexLcb'
|
import { getAction } from '@api/manage'
|
import IndexGantt from '@views/kb/modules/indexGantt'
|
|
|
|
export default {
|
name: 'IndexChart',
|
components: {
|
IndexGantt,
|
IndexLcb,
|
ATooltip,
|
ACol,
|
ChartCard,
|
MiniArea,
|
MiniBar,
|
MiniProgress,
|
Bar,
|
Trend,
|
LineChartMultid,
|
HeadInfo,
|
Pie,
|
PMO,
|
Gantt
|
},
|
watch: {
|
dataSource(newVal) {
|
}
|
},
|
data() {
|
return {
|
loading: true,
|
center: null,
|
url: {
|
list: 'pro/project/main'
|
},
|
dataSource: {
|
s1c1: {
|
data: []
|
},
|
s3: {
|
data: []
|
}
|
|
},
|
s1Chart1: null,
|
s1Chart2: null,
|
s1Chart3: null,
|
s1Chart4: null,
|
s2Chart1: null,
|
s2Chart2: null,
|
s2Chart3: null,
|
s2Chart4: null,
|
s2Chart5: null,
|
s2Chart6: null,
|
s2Chart7: null,
|
s2Chart8: null,
|
s4Chart1: null,
|
dataType:0,// 0-所有项目 1-重点项目
|
titles: [{
|
id: 1,
|
title: '项目分类'
|
}, {
|
id: 2,
|
title: '项目规划'
|
}, {
|
id: 3,
|
title: '项目状态'
|
}, {
|
id: 4,
|
title: '项目预测'
|
}, {
|
id: 5,
|
title: '负责项目'
|
}, {
|
id: 6,
|
title: '产品类别'
|
}, {
|
id: 7,
|
title: '产品规格'
|
}, {
|
id: 8,
|
title: '里程碑'
|
}],
|
lcbTitles: [{
|
id: 1,
|
title: '已完成预研'
|
}, {
|
id: 1,
|
title: '已完成立项'
|
}, {
|
id: 1,
|
title: '已完成启动'
|
}, {
|
id: 1,
|
title: '已完成设计'
|
}, {
|
id: 1,
|
title: '已完成开发'
|
}, {
|
id: 1,
|
title: '已完成验收'
|
}, {
|
id: 1,
|
title: '已完成'
|
}, {
|
id: 1,
|
title: '应用'
|
}],
|
tasks: {
|
data: [
|
{ id: 1, text: '研发项目1', start_date: '2022-10-10', end_date: '2032-10-10', progress: 0.6 },
|
{ id: 2, text: '研发项目2', start_date: '2022-10-12', duration: 20, progress: 0.4 },
|
{ id: 3, text: '研发项目3', start_date: '2024-10-12', duration: 20, progress: 0.4 },
|
{ id: 4, text: '研发项目4', start_date: '2022-10-12', duration: 20, progress: 0.4 },
|
{ id: 5, text: '研发项目5', start_date: '2022-10-12', duration: 20, progress: 0.4 }
|
],
|
links: []
|
},
|
ycList: [
|
{
|
x: 1,
|
y: 55
|
}, {
|
x: 2,
|
y: 3
|
}, {
|
x: 3,
|
y: 2
|
}
|
],
|
loginfo: {},
|
visitFields: ['ip', 'visit'],
|
visitInfo: [],
|
indicator: <a-icon type='loading' style='font-size: 24px' spin />
|
|
}
|
},
|
created() {
|
setTimeout(() => {
|
this.loading = !this.loading
|
}, 1000)
|
this.initLogInfo()
|
|
},
|
mounted() {
|
|
|
let that = this
|
setTimeout(() => {
|
that.initBarChart()
|
that.initS1Chart1()
|
that.initS1Chart2()
|
that.initS1Chart3()
|
that.initS1Chart4()
|
that.initS2Chart1()
|
that.initS2Chart2()
|
that.initS2Chart3()
|
that.initS2Chart4()
|
that.initS2Chart5()
|
that.initS2Chart6()
|
that.initS2Chart7()
|
that.initS2Chart8()
|
that.initS3Chart2()
|
that.initS3Chart3()
|
that.queryData()
|
}, 1000)
|
},
|
methods: {
|
// 页面元素转图片
|
toImage () {
|
// 手动创建一个 canvas 标签
|
const canvas = document.createElement("canvas")
|
// 获取父标签，意思是这个标签内的 DOM 元素生成图片
|
// imageTofile是给截图范围内的父级元素自定义的ref名称
|
let canvasBox = this.$refs.imageTofile
|
// 获取父级的宽高
|
const width = parseInt(window.getComputedStyle(canvasBox).width)
|
const height = parseInt(window.getComputedStyle(canvasBox).height)
|
// 宽高 * 2 并放大 2 倍 是为了防止图片模糊
|
canvas.width = width * 2
|
canvas.height = height * 2
|
canvas.style.width = width + 'px'
|
canvas.style.height = height + 'px'
|
const context = canvas.getContext("2d");
|
context.scale(2, 2);
|
const options = {
|
backgroundColor: null,
|
canvas: canvas,
|
useCORS: true
|
}
|
html2canvas(canvasBox, options).then((canvas) => {
|
// toDataURL 图片格式转成 base64
|
let dataURL = canvas.toDataURL("image/png")
|
console.log(dataURL)
|
this.downloadImage(dataURL)
|
})
|
},
|
//下载图片
|
downloadImage(url) {
|
// 如果是在网页中可以直接创建一个 a 标签直接下载
|
let a = document.createElement('a')
|
a.href = url
|
a.download = '首页截图'
|
a.click()
|
},
|
|
initLogInfo() {
|
getLoginfo(null).then((res) => {
|
if (res.success) {
|
Object.keys(res.result).forEach(key => {
|
res.result[key] = res.result[key] + ''
|
})
|
this.loginfo = res.result
|
}
|
})
|
getVisitInfo().then(res => {
|
if (res.success) {
|
this.visitInfo = res.result
|
}
|
})
|
},
|
initBarChart() {
|
const data = [
|
{ type: '未完成', name: '研发项目9', count: 30 },
|
{ type: '已完成', name: '研发项目9', count: 40 }
|
|
]
|
|
const chart = new Chart({
|
container: 'main',
|
autoFit: true,
|
height: 300
|
})
|
this.s4Chart1 = chart
|
|
if (get(this.dataSource, 's4c1.data')) {
|
chart.data(this.dataSource.s4c1.data)
|
} else {
|
chart.data(data)
|
}
|
|
// 开启滚动条组件
|
chart.option('scrollbar', {
|
type: 'horizontal',
|
categorySize: 120,
|
animate: false
|
})
|
|
chart.scale('count', {
|
nice: true
|
})
|
chart.tooltip({
|
shared: true,
|
showMarkers: false
|
})
|
|
chart
|
.interval()
|
.position('name*count')
|
.color('type')
|
.adjust('stack')
|
|
chart.interaction('active-region')
|
|
chart.render()
|
|
},
|
|
initS1Chart1() {
|
const data = [
|
{ xmlx: '示例1', year: '2020年', total: 10 },
|
{ xmlx: '示例2', year: '2020年', total: 10 },
|
{ xmlx: '示例3', year: '2020年', total: 10 },
|
{ xmlx: '示例1', year: '2021年', total: 10 },
|
{ xmlx: '示例2', year: '2021年', total: 10 },
|
{ xmlx: '示例3', year: '2021年', total: 10 },
|
{ xmlx: '示例1', year: '2022年', total: 10 },
|
{ xmlx: '示例2', year: '2022年', total: 10 },
|
{ xmlx: '示例3', year: '2022年', total: 10 }
|
]
|
|
const chart = new Chart({
|
container: 's1Chart1',
|
autoFit: true,
|
height: 120
|
})
|
this.s1Chart1 = chart
|
|
// if (get(this.dataSource, 's1c1.data')) {
|
// chart.data(this.dataSource.s1c1.data)
|
// } else {
|
// chart.data(data)
|
//
|
// }
|
chart.data(data)
|
|
|
chart.scale('year', { nice: true })
|
//chart.scale('line', { nice: true })
|
|
|
chart.axis('total', {
|
grid: null
|
})
|
|
|
chart.legend({
|
position: 'top'
|
})
|
|
chart
|
.interval()
|
.position('year*total')
|
.color('xmlx')
|
.label('total', {
|
offset: 10,
|
style: {
|
fill: '#595959',
|
fontSize: 10
|
}
|
})
|
.adjust([{
|
type: 'dodge',
|
marginRatio: 0
|
}])
|
|
|
chart.interaction('active-region')
|
chart.render()
|
|
|
},
|
initS1Chart2() {
|
const data = [
|
{ depart: '示例1', type: '启动项目数', value: 10 },
|
{ depart: '示例2', type: '启动项目数', value: 10 },
|
{ depart: '示例3', type: '启动项目数', value: 10 },
|
{ depart: '示例1', type: '一季度', value: 10 },
|
{ depart: '示例2', type: '一季度', value: 10 },
|
{ depart: '示例3', type: '一季度', value: 10 },
|
{ depart: '示例1', type: '二季度', value: 10 },
|
{ depart: '示例2', type: '二季度', value: 10 },
|
{ depart: '示例3', type: '二季度', value: 10 },
|
{ depart: '示例1', type: '三季度', value: 10 },
|
{ depart: '示例2', type: '三季度', value: 10 },
|
{ depart: '示例3', type: '三季度', value: 10 },
|
{ depart: '示例1', type: '四季度', value: 10 },
|
{ depart: '示例2', type: '四季度', value: 10 },
|
{ depart: '示例3', type: '四季度', value: 10 }
|
|
]
|
|
const chart = new Chart({
|
container: 's1Chart2',
|
autoFit: true,
|
height: 120
|
})
|
this.s1Chart2 = chart
|
|
if (get(this.dataSource, 's1c2.data')) {
|
chart.data(this.dataSource.s1c2.data)
|
} else {
|
chart.data(data)
|
|
}
|
|
chart.scale('value', { nice: true })
|
chart.axis('value', {
|
grid: null
|
})
|
|
chart.legend({
|
position: 'top'
|
})
|
|
chart
|
.interval()
|
.position('type*value').color('depart')
|
.adjust([{
|
type: 'dodge',
|
marginRatio: 0
|
}])
|
|
chart.interaction('legend-highlight')
|
|
chart.render()
|
},
|
initS1Chart3() {
|
let that = this
|
var data
|
var fields
|
const demo = [
|
{ group: 'a', year: '示例1', total: 664, '研发一部': 10, '研发二部': 10, '产品开发部': 10, '负荷': 60 },
|
{ group: 'b', year: '示例2', total: 652, '研发一部': 10, '研发二部': 10, '产品开发部': 10, '负荷': 60 },
|
{ group: 'c', year: '示例3', total: 847, '研发一部': 10, '研发二部': 10, '产品开发部': 10, '负荷': 60 }
|
]
|
if (!get(this.dataSource, 's1c3.data')) {
|
data = demo
|
fields = ['负荷', '研发一部', '研发二部', '产品开发部']
|
} else {
|
data = get(this.dataSource, 's1c3.data')
|
fields = get(this.dataSource, 's1c3.fields')
|
}
|
|
|
const dv = new DataSet.DataView()
|
dv.source(data)
|
.transform({
|
type: 'map',
|
callback(row) {
|
row['负荷'] *= -1
|
return row
|
}
|
})
|
.transform({
|
type: 'fold',
|
fields: fields,
|
key: 'opinion',
|
value: 'value',
|
retains: ['group', 'year']
|
})
|
|
const colorMap = {
|
'产品开发部': '#3561A7',
|
'研发二部': '#80B2D3',
|
'研发一部': '#D9F0F6',
|
'负荷': '#CB2920'
|
}
|
|
const chart = new Chart({
|
container: 's1Chart3',
|
autoFit: true,
|
height: 120
|
})
|
this.s1Chart3 = chart
|
|
chart.coordinate('rect').transpose()
|
|
chart.data(dv.rows)
|
chart.scale('value', {
|
nice: true
|
})
|
chart.axis({
|
grid: null
|
})
|
|
chart.axis('year', {
|
title: null,
|
labelOffset: 10
|
})
|
chart.axis('value', {
|
position: 'right',
|
title: null,
|
tickLine: null,
|
formatter(val) {
|
return val + '%'
|
}
|
})
|
|
chart.tooltip({
|
shared: true,
|
showMarkers: false
|
})
|
|
chart.legend({
|
position: 'bottom'
|
})
|
|
chart
|
.interval()
|
.adjust('stack')
|
.position('year*value')
|
.color('opinion', (opinion) => {
|
if (get(this.dataSource, 's1c3.colors')) {
|
return get(this.dataSource, 's1c3.colors')[opinion]
|
}
|
return colorMap[opinion]
|
|
})
|
|
chart.interaction('active-region')
|
|
chart.render()
|
|
|
},
|
initS1Chart4() {
|
// Step 1: 注册主题
|
registerTheme('newTheme', {
|
maxColumnWidth: 10
|
})
|
|
|
const data = [
|
|
{ year: '示例1', value: 33.33 },
|
{ year: '示例2', value: 63.33 },
|
{ year: '示例3', value: 93.33 }
|
|
|
]
|
const chart = new Chart({
|
container: 's1Chart4',
|
autoFit: true,
|
height: 120
|
})
|
this.s1Chart4 = chart
|
|
if (get(this.dataSource, 's1c4.data')) {
|
chart.clear()
|
chart.data(this.dataSource.s1c4.data)
|
} else {
|
chart.data(data)
|
}
|
|
// Step 2: 使用
|
chart.theme('newTheme')
|
chart.scale('value', { nice: true })
|
chart.coordinate().transpose()
|
chart.tooltip({
|
showMarkers: false
|
})
|
chart.interaction('active-region')
|
chart.interval().position('year*value')
|
chart.render()
|
|
|
},
|
|
initS2Chart1() {
|
const data = [
|
{ type: '示例1', value: 10, percent: 0.2 },
|
{ type: '示例2', value: 10, percent: 0.2 },
|
{ type: '示例3', value: 10, percent: 0.2 },
|
{ type: '示例4', value: 10, percent: 0.2 },
|
{ type: '示例5', value: 10, percent: 0.2 }
|
]
|
|
|
const chart = new Chart({
|
container: 's2Chart1',
|
autoFit: true,
|
height: 200
|
})
|
this.s2Chart1 = chart
|
chart.coordinate('theta', {
|
radius: 0.75
|
})
|
|
|
if (get(this.dataSource, 's2c1.data')) {
|
chart.data(this.dataSource.s2c1.data)
|
} else {
|
chart.data(data)
|
}
|
chart.scale('percent', {
|
formatter: (val) => {
|
if(!val) return val
|
val = val * 100
|
val = val.toFixed(2)
|
val = val + '%'
|
return val
|
}
|
})
|
|
chart.tooltip({
|
showTitle: false,
|
showMarkers: false
|
})
|
|
chart
|
.interval()
|
.position('percent')
|
.color('type')
|
.label('percent', {
|
layout: [{ type: 'limit-in-plot', cfg: { action: 'ellipsis'/** 或 translate */ } }],
|
content: (data) => {
|
/* var percent = data.percent * 100
|
console.info(percent)
|
percent = percent.toFixed(2)
|
percent = percent + '%'*/
|
return `${data.type}: ${data.value} `
|
}
|
})
|
.adjust('stack')
|
|
chart.interaction('element-active')
|
|
chart.render()
|
},
|
initS2Chart2() {
|
const data = [
|
{ type: '示例1', count: 60, percent: 0.6 },
|
{ type: '示例2', count: 40, percent: 0.4 }
|
|
]
|
|
const chart = new Chart({
|
container: 's2Chart2',
|
autoFit: true,
|
height: 200
|
})
|
this.s2Chart2 = chart
|
chart.legend({
|
itemSpacing: 3
|
})
|
|
chart.coordinate('theta', {
|
radius: 0.75
|
})
|
|
if (get(this.dataSource, 's2c2.data')) {
|
chart.data(this.dataSource.s2c2.data)
|
} else {
|
chart.data(data)
|
}
|
|
|
chart.scale('percent', {
|
formatter: (val) => {
|
val = val * 100
|
val = val.toFixed(2)
|
val = val + '%'
|
return val
|
}
|
})
|
|
chart.tooltip({
|
showTitle: false,
|
showMarkers: false
|
})
|
|
chart
|
.interval()
|
.position('percent')
|
.color('type')
|
.label('percent', {
|
layout: [{ type: 'limit-in-plot', cfg: { action: 'ellipsis'/** 或 translate */ } }],
|
content: (data) => {
|
return `${data.type}: ${data.count}`
|
}
|
})
|
.adjust('stack')
|
|
chart.interaction('element-active')
|
|
chart.render()
|
},
|
initS2Chart3() {
|
const data = [
|
{ type: '示例1', count: 10, percent: 0.25 },
|
{ type: '示例2', count: 10, percent: 0.25 },
|
{ type: '示例3', count: 10, percent: 0.25 },
|
{ type: '示例4', count: 10, percent: 0.25 }
|
]
|
const chart = new Chart({
|
container: 's2Chart3',
|
autoFit: true,
|
height: 200
|
})
|
this.s2Chart3 = chart
|
chart.legend({
|
itemSpacing: 3
|
})
|
if (get(this.dataSource, 's2c3.data')) {
|
chart.data(this.dataSource.s2c3.data)
|
} else {
|
chart.data(data)
|
}
|
chart.scale('percent', {
|
formatter: (val) => {
|
val = val * 100
|
val = val.toFixed(2)
|
val = val + '%'
|
return val
|
}
|
})
|
chart.coordinate('theta', {
|
radius: 0.75,
|
innerRadius: 0.6
|
})
|
chart.tooltip({
|
showTitle: false,
|
showMarkers: false,
|
itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
|
})
|
// 辅助文本
|
chart
|
.annotation()
|
.text({
|
position: ['50%', '50%'],
|
content: '项目',
|
style: {
|
fontSize: 14,
|
fill: '#8c8c8c',
|
textAlign: 'center'
|
},
|
offsetY: -20
|
})
|
.text({
|
position: ['50%', '50%'],
|
content: this.s2c3Text,
|
style: {
|
fontSize: 20,
|
fill: '#8c8c8c',
|
textAlign: 'center'
|
},
|
offsetX: -10,
|
offsetY: 20
|
})
|
.text({
|
position: ['50%', '50%'],
|
content: '个',
|
style: {
|
fontSize: 14,
|
fill: '#8c8c8c',
|
textAlign: 'center'
|
},
|
offsetY: 20,
|
offsetX: 20
|
})
|
chart
|
.interval()
|
.adjust('stack')
|
.position('percent')
|
.color('type')
|
.label('percent', (percent) => {
|
return {
|
content: (data) => {
|
return `${data.type}: ${data.count} `
|
}
|
}
|
})
|
.tooltip('type*percent', (type, percent) => {
|
percent = percent * 100
|
percent = percent.toFixed(2)
|
percent = percent + '%'
|
return {
|
name: type,
|
value: percent
|
}
|
})
|
|
chart.interaction('element-active')
|
|
chart.render()
|
|
},
|
initS2Chart4() {
|
const data = [
|
{ type: '示例1', count: 10, percent: 0.25 },
|
{ type: '示例2', count: 10, percent: 0.25 },
|
{ type: '示例3', count: 10, percent: 0.25 },
|
{ type: '示例4', count: 10, percent: 0.25 }
|
]
|
const chart = new Chart({
|
container: 's2Chart4',
|
autoFit: true,
|
height: 200
|
})
|
this.s2Chart4 = chart
|
chart.legend({
|
itemSpacing: 3
|
})
|
if (get(this.dataSource, 's2c4.data')) {
|
chart.data(this.dataSource.s2c4.data)
|
} else {
|
chart.data(data)
|
}
|
chart.scale('percent', {
|
formatter: (val) => {
|
val = val * 100
|
val = val.toFixed(2)
|
val = val + '%'
|
return val
|
}
|
})
|
chart.coordinate('theta', {
|
radius: 0.75,
|
innerRadius: 0.6
|
})
|
chart.tooltip({
|
showTitle: false,
|
showMarkers: false,
|
itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
|
})
|
// 辅助文本
|
chart
|
.annotation()
|
.text({
|
position: ['50%', '50%'],
|
content: '项目',
|
style: {
|
fontSize: 14,
|
fill: '#8c8c8c',
|
textAlign: 'center'
|
},
|
offsetY: -20
|
})
|
.text({
|
position: ['50%', '50%'],
|
content: this.s2c4Text,
|
style: {
|
fontSize: 20,
|
fill: '#8c8c8c',
|
textAlign: 'center'
|
},
|
offsetX: -10,
|
offsetY: 20
|
})
|
.text({
|
position: ['50%', '50%'],
|
content: '个',
|
style: {
|
fontSize: 14,
|
fill: '#8c8c8c',
|
textAlign: 'center'
|
},
|
offsetY: 20,
|
offsetX: 20
|
})
|
chart
|
.interval()
|
.adjust('stack')
|
.position('percent')
|
.color('type')
|
.label('percent', (percent) => {
|
return {
|
content: (data) => {
|
return `${data.type}: ${data.count} `
|
}
|
}
|
})
|
.tooltip('type*percent', (type, percent) => {
|
percent = percent * 100
|
percent = percent.toFixed(2)
|
percent = percent + '%'
|
return {
|
name: type,
|
value: percent
|
}
|
})
|
|
chart.interaction('element-active')
|
|
chart.render()
|
|
},
|
initS2Chart5() {
|
const data = [
|
{ name: '示例1', count: 40, percent: 0.4 },
|
{ name: '示例2', count: 30, percent: 0.3 },
|
{ name: '示例3', count: 30, percent: 0.3 }
|
|
]
|
|
const chart = new Chart({
|
container: 's2Chart5',
|
autoFit: true,
|
height: 200
|
})
|
this.s2Chart5 = chart
|
chart.legend({
|
itemSpacing: 3
|
})
|
|
chart.coordinate('theta', {
|
radius: 0.75
|
})
|
|
if (get(this.dataSource, 's2c5.data')) {
|
chart.data(this.dataSource.s2c5.data)
|
} else {
|
chart.data(data)
|
}
|
|
chart.scale('percent', {
|
formatter: (val) => {
|
val = val * 100
|
val = val.toFixed(2)
|
val = val + '%'
|
return val
|
}
|
})
|
|
chart.tooltip({
|
showTitle: false,
|
showMarkers: false
|
})
|
|
chart
|
.interval()
|
.position('percent')
|
.color('name')
|
.label('percent', {
|
layout: [{ type: 'limit-in-plot', cfg: { action: 'ellipsis'/** 或 translate */ } }],
|
content: (data) => {
|
return `${data.name}: ${data.count}`
|
}
|
})
|
.adjust('stack')
|
|
chart.interaction('element-active')
|
|
chart.render()
|
},
|
initS2Chart6() {
|
const data = [
|
{ name: '示例1', count: 200, percent: 0.2 },
|
{ name: '示例2', count: 200, percent: 0.2 },
|
{ name: '示例3', count: 600, percent: 0.6 }
|
|
|
]
|
|
const chart = new Chart({
|
container: 's2Chart6',
|
autoFit: true,
|
height: 200
|
})
|
this.s2Chart6 = chart
|
chart.legend({
|
itemSpacing: 3
|
})
|
|
chart.coordinate('theta', {
|
radius: 0.75
|
})
|
|
if (get(this.dataSource, 's2c6.data')) {
|
chart.clear()
|
chart.data(this.dataSource.s2c6.data)
|
} else {
|
chart.data(data)
|
}
|
|
chart.scale('percent', {
|
formatter: (val) => {
|
val = val * 100
|
val = val.toFixed(2)
|
val = val + '%'
|
return val
|
}
|
})
|
|
chart.tooltip({
|
showTitle: false,
|
showMarkers: false
|
})
|
|
chart
|
.interval()
|
.position('percent')
|
.color('name')
|
.label('percent', {
|
layout: [{ type: 'limit-in-plot', cfg: { action: 'ellipsis'/** 或 translate */ } }],
|
content: (data) => {
|
return `${data.name}: ${data.count}`
|
}
|
})
|
.adjust('stack')
|
|
chart.interaction('element-active')
|
|
chart.render()
|
},
|
initS2Chart7() {
|
const data = [
|
{ name: '已完成', count: 800, percent: 0.8 },
|
{ name: '未完成', count: 200, percent: 0.2 }
|
]
|
|
const chart = new Chart({
|
container: 's2Chart7',
|
autoFit: true,
|
height: 200
|
})
|
this.s2Chart7 = chart
|
chart.legend({
|
itemSpacing: 3
|
})
|
|
chart.coordinate('theta', {
|
radius: 0.75
|
})
|
|
if (get(this.dataSource, 's2c7.data')) {
|
chart.clear()
|
chart.data(this.dataSource.s2c7.data)
|
} else {
|
chart.data(data)
|
}
|
|
chart.scale('percent', {
|
formatter: (val) => {
|
val = val * 100
|
val = val.toFixed(2)
|
val = val + '%'
|
return val
|
}
|
})
|
|
chart.tooltip({
|
showTitle: false,
|
showMarkers: false
|
})
|
|
chart
|
.interval()
|
.position('percent')
|
.color('name')
|
.label('percent', {
|
layout: [{ type: 'limit-in-plot', cfg: { action: 'ellipsis'/** 或 translate */ } }],
|
content: (data) => {
|
return `${data.name}: ${data.count}`
|
}
|
})
|
.adjust('stack')
|
|
chart.interaction('element-active')
|
|
chart.render()
|
},
|
initS2Chart8() {
|
const data = [
|
{ name: '示例1', count: 100, percent: 0.25 },
|
{ name: '示例2', count: 100, percent: 0.25 },
|
{ name: '示例3', count: 200, percent: 0.5 }
|
|
|
]
|
|
const chart = new Chart({
|
container: 's2Chart8',
|
autoFit: true,
|
height: 200
|
})
|
this.s2Chart8 = chart
|
chart.legend({
|
itemSpacing: 3
|
})
|
|
chart.coordinate('theta', {
|
radius: 0.75
|
})
|
|
if (get(this.dataSource, 's2c8.data')) {
|
chart.clear()
|
chart.data(this.dataSource.s2c8.data)
|
} else {
|
chart.data(data)
|
}
|
|
chart.scale('percent', {
|
formatter: (val) => {
|
val = val * 100
|
val = val.toFixed(2)
|
val = val + '%'
|
return val
|
}
|
})
|
|
chart.tooltip({
|
showTitle: false,
|
showMarkers: false
|
})
|
|
chart
|
.interval()
|
.position('percent')
|
.color('name')
|
.label('percent', {
|
layout: [{ type: 'limit-in-plot', cfg: { action: 'ellipsis'/** 或 translate */ } }],
|
content: (data) => {
|
return `${data.name}: ${data.count}`
|
}
|
})
|
.adjust('stack')
|
|
chart.interaction('element-active')
|
|
chart.render()
|
},
|
initS3Chart2() {
|
const data = [
|
{ month: '1', value: 100 },
|
{ month: '2', value: 120 },
|
{ month: '3', value: 110 },
|
{ month: '4', value: 80 },
|
{ month: '5', value: 60 },
|
{ month: '6', value: 50 },
|
{ month: '7', value: 30 },
|
{ month: '8', value: 20 },
|
{ month: '9', value: 10 },
|
{ month: '10', value: 130 },
|
{ month: '11', value: 120 },
|
{ month: '12', value: 100 }
|
]
|
|
const chart = new Chart({
|
container: 's3Chart2',
|
autoFit: true,
|
height: 300
|
})
|
chart.data(data)
|
chart.scale({
|
value: {
|
max: 150,
|
min: 0
|
},
|
month: {
|
formatter: val => `${val} 月`
|
}
|
})
|
|
|
chart.area().position('month*value').color('white').style({
|
fillOpacity: 0.3
|
})
|
chart.line().position('month*value').color('white')
|
// 分段颜色
|
chart.annotation().regionFilter({
|
top: true,
|
start: ['min', 'max'],
|
end: ['max', 0],
|
color: '#6395F9'
|
})
|
|
chart.annotation().regionFilter({
|
top: true,
|
start: ['min', 0],
|
end: ['max', 'min'],
|
color: '#2fc25b'
|
})
|
// 数据标注
|
chart.annotation().dataMarker({
|
position: ['2', 120],
|
text: {
|
content: '2月份因销售需求旺盛，\n需求大增',
|
style: {
|
textAlign: 'left'
|
}
|
},
|
line: {
|
length: 20
|
},
|
point: {
|
style: {
|
fill: '#f5222d',
|
stroke: '#f5222d'
|
}
|
},
|
autoAdjust: false
|
})
|
|
chart.annotation().dataMarker({
|
position: ['10', 130],
|
text: {
|
content: '年前冲刺',
|
style: {
|
textAlign: 'right'
|
}
|
},
|
line: {
|
length: 20
|
},
|
point: {
|
style: {
|
fill: '#f5222d',
|
stroke: '#f5222d'
|
}
|
},
|
autoAdjust: false,
|
direction: 'downward'
|
})
|
|
chart.annotation().dataMarker({
|
position: ['9', 10],
|
text: {
|
content: '因无新进货源，项目推进暂缓',
|
style: {
|
textAlign: 'right',
|
lineWidth: 2
|
}
|
},
|
line: {
|
length: 20
|
},
|
point: {
|
style: {
|
fill: '#2fc25b',
|
stroke: '#2fc25b'
|
}
|
},
|
autoAdjust: false,
|
direction: 'downward'
|
})
|
// 辅助区间
|
chart.annotation().region({
|
start: ['7', 'min'],
|
end: ['9', 'max']
|
})
|
|
chart.render()
|
|
},
|
initS3Chart3() {
|
const otherRatio = 6.67 / 100 // Other 的占比
|
const otherOffsetAngle = otherRatio * Math.PI // other 占的角度的一半
|
const data = [
|
{ type: '变更', value: 93.33 },
|
{ type: '其他', value: 6.67 }
|
]
|
const other = [
|
{ type: 'xx不足', value: 1.77 },
|
{ type: 'yy不足', value: 1.44 },
|
{ type: 'zz不足', value: 1.12 },
|
{ type: '事项1', value: 1.05 },
|
{ type: '事项2', value: 0.81 },
|
{ type: '事项3', value: 0.39 },
|
{ type: '事项4', value: 0.37 },
|
{ type: '事项5', value: 0.17 }
|
]
|
const chart = new Chart({
|
container: 's3Chart3',
|
autoFit: true,
|
height: 300
|
})
|
chart.legend(false)
|
chart.tooltip({
|
showMarkers: false
|
})
|
|
const view1 = chart.createView({
|
region: {
|
start: {
|
x: 0,
|
y: 0
|
},
|
end: {
|
x: 0.5,
|
y: 1
|
}
|
}
|
})
|
view1.coordinate('theta', {
|
radius: 0.7,
|
startAngle: 0 + otherOffsetAngle,
|
endAngle: Math.PI * 2 + otherOffsetAngle
|
})
|
view1.data(data)
|
view1.interaction('element-highlight')
|
view1
|
.interval()
|
.adjust('stack')
|
.position('value')
|
.color('type', ['#38c060', '#2593fc'])
|
.label('value', function() {
|
return {
|
offset: -10,
|
content: (obj) => {
|
return obj.type + '\n' + obj.value + '%'
|
}
|
}
|
})
|
|
const view2 = chart.createView({
|
region: {
|
start: {
|
x: 0.5,
|
y: 0.1
|
},
|
end: {
|
x: 1,
|
y: 0.9
|
}
|
}
|
})
|
view2.axis(false)
|
view2.data(other)
|
view2.interaction('element-highlight')
|
view2
|
.interval()
|
.adjust('stack')
|
.position('value')
|
.color('type', ['#063d8a', '#0b53b0', '#1770d6', '#2593fc', '#47abfc', '#6dc1fc', '#94d6fd', '#bbe7fe'])
|
.label('value', {
|
position: 'right',
|
offsetX: 5,
|
offsetY: 10,
|
content: (obj) => {
|
return obj.type + ' ' + obj.value + '%'
|
}
|
})
|
chart.render()
|
drawLinkArea()
|
chart.on('afterpaint', function() {
|
drawLinkArea()
|
})
|
|
/* ---------绘制连接区间-----------*/
|
function drawLinkArea() {
|
const canvas = chart.getCanvas()
|
const container = chart.backgroundGroup
|
const view1_coord = view1.getCoordinate()
|
const center = view1_coord.getCenter()
|
const radius = view1_coord.getRadius()
|
const interval_geom = view2.geometries[0]
|
const interval_container = interval_geom.container
|
const interval_bbox = interval_container.getBBox()
|
const view2_coord = view2.getCoordinate()
|
// area points
|
const pie_start1 = {
|
x: center.x + Math.cos(Math.PI * 2 - otherOffsetAngle) * radius,
|
y: center.y + Math.sin(Math.PI * 2 - otherOffsetAngle) * radius
|
}
|
const pie_start2 = {
|
x: center.x + Math.cos(otherOffsetAngle) * radius,
|
y: center.y + Math.sin(otherOffsetAngle) * radius
|
}
|
const interval_end1 = {
|
x: interval_bbox.minX,
|
y: view2_coord.end.y
|
}
|
const interval_end2 = {
|
x: interval_bbox.minX,
|
y: view2_coord.start.y
|
}
|
const path = [
|
['M', pie_start1.x, pie_start1.y],
|
['L', pie_start2.x, pie_start2.y],
|
['L', interval_end2.x, interval_end2.y],
|
['L', interval_end1.x, interval_end1.y],
|
['Z']
|
]
|
container.addShape('path', {
|
attrs: {
|
path,
|
fill: '#e9f4fe'
|
}
|
})
|
canvas.draw()
|
}
|
|
},
|
|
logTaskUpdate(id, mode, task) {
|
let text = (task && task.text ? ` (${task.text})` : '')
|
let message = `Task ${mode}: ${id} ${text}`
|
console.info(task)
|
|
},
|
|
logLinkUpdate(id, mode, link) {
|
console.info(this.tasks)
|
let message = `Link ${mode}: ${id}`
|
if (link) {
|
message += ` ( source: ${link.source}, target: ${link.target} )`
|
}
|
|
},
|
selectTask(task) {
|
|
},
|
|
queryData(params) {
|
getAction(this.url.list, params).then((res) => {
|
if (res.success) {
|
this.dataSource = res.result
|
if(get(this.dataSource, 's2c31.data') ){
|
//this.$set(this.tasks,'data', this.dataSource.s2c31.data);
|
this.tasks = this.dataSource.s2c31
|
}
|
this.updateData()
|
this.$forceUpdate()
|
|
|
}
|
})
|
},
|
updateData() {
|
if (this.s1Chart1 && get(this.dataSource, 's1c1.data')) {
|
if(this.dataSource.s1c1.data.length<2){
|
return
|
}
|
this.s1Chart1.changeData(this.dataSource.s1c1.data)
|
this.s1Chart1.render()
|
}
|
|
if (this.s1Chart2 && get(this.dataSource, 's1c2.data')) {
|
this.s1Chart2.changeData(this.dataSource.s1c2.data)
|
this.s1Chart2.render()
|
}
|
this.updateS1Chart3()
|
|
|
if (this.s1Chart4 && get(this.dataSource, 's1c4.data')) {
|
this.s1Chart4.changeData(this.dataSource.s1c4.data)
|
this.s1Chart4.render()
|
}
|
|
if (this.s2Chart1 && get(this.dataSource, 's2c1.data')) {
|
this.s2Chart1.changeData(this.dataSource.s2c1.data)
|
this.s2Chart1.render()
|
}
|
|
if (this.s2Chart2 && get(this.dataSource, 's2c2.data')) {
|
this.s2Chart2.changeData(this.dataSource.s2c2.data)
|
this.s2Chart2.render()
|
}
|
|
if (this.s2Chart3 && get(this.dataSource, 's2c3.data')) {
|
this.s2Chart3.destroy()
|
this.initS2Chart3()
|
}
|
|
if (this.s2Chart4 && get(this.dataSource, 's2c4.data')) {
|
this.s2Chart4.destroy()
|
this.initS2Chart4()
|
}
|
|
if (this.s2Chart5 && get(this.dataSource, 's2c5.data')) {
|
this.s2Chart5.changeData(this.dataSource.s2c5.data)
|
this.s2Chart5.render()
|
}
|
|
if (this.s2Chart6 && get(this.dataSource, 's2c6.data')) {
|
this.s2Chart6.changeData(this.dataSource.s2c6.data)
|
this.s2Chart6.render()
|
}
|
|
if (this.s2Chart7 && get(this.dataSource, 's2c7.data')) {
|
this.s2Chart7.changeData(this.dataSource.s2c7.data)
|
this.s2Chart7.render()
|
}
|
|
if (this.s2Chart8 && get(this.dataSource, 's2c8.data')) {
|
this.s2Chart8.changeData(this.dataSource.s2c8.data)
|
this.s2Chart8.render()
|
}
|
|
|
if (this.s4Chart1 && get(this.dataSource, 's4c1.data')) {
|
this.s4Chart1.changeData(this.dataSource.s4c1.data)
|
this.s4Chart1.render()
|
}
|
|
|
|
|
|
|
|
|
},
|
updateS1Chart3() {
|
if (get(this.dataSource, 's1c3.data')) {
|
|
let data = get(this.dataSource, 's1c3.data')
|
let fields = get(this.dataSource, 's1c3.fields')
|
const dv = new DataSet.DataView()
|
dv.source(data)
|
.transform({
|
type: 'map',
|
callback(row) {
|
row['负荷'] *= -1
|
return row
|
}
|
})
|
.transform({
|
type: 'fold',
|
fields: fields,
|
key: 'opinion',
|
value: 'value',
|
retains: ['group', 'year']
|
})
|
if(this.s1Chart3&&dv&&dv.rows){
|
this.s1Chart3.changeData(dv.rows)
|
this.s1Chart3.render()
|
}
|
|
}
|
|
},
|
|
tabChange(tab) {
|
//所有项目
|
if (tab == 1) {
|
this.dataType = 0
|
this.queryData()
|
|
//重点项目
|
} else if (tab == 2) {
|
this.dataType = 1
|
let params = {}
|
params.zdxm = 1
|
this.queryData(params)
|
|
}
|
|
}
|
},
|
computed: {
|
//项目总数
|
xmzs() {
|
return get(this.dataSource, 's1c1.total') || ''
|
},
|
//本年已完成项目数
|
bnwcxm() {
|
return get(this.dataSource, 's1c2.finish') || ''
|
},
|
//本年项目达成率
|
bndcl() {
|
return get(this.dataSource, 's1c4.dcl') || ''
|
},
|
//项目状态 饼图辅助文本
|
s2c3Text(){
|
return get(this.dataSource, 's2c3.total') || ''
|
},
|
//项目风险等级 饼图辅助文本
|
s2c4Text(){
|
return get(this.dataSource, 's2c4.total') || ''
|
},
|
//项目总数
|
s4c1Xm(){
|
return get(this.dataSource, 's4c1.xm')+'' || ''
|
},
|
//任务总数
|
s4c1Link(){
|
return get(this.dataSource, 's4c1.link')+'' || ''
|
},
|
//任务总数
|
s4c1Ulink(){
|
return get(this.dataSource, 's4c1.ulink')+'' || ''
|
},
|
s2c31(){
|
return get(this.dataSource, 's2c31') || { data:[]}
|
}
|
|
}
|
}
|
</script>
|
|
<style lang='less' scoped>
|
.circle-cust {
|
position: relative;
|
top: 28px;
|
left: -100%;
|
}
|
|
.extra-wrapper {
|
line-height: 55px;
|
padding-right: 24px;
|
|
.extra-item {
|
display: inline-block;
|
margin-right: 24px;
|
|
a {
|
margin-left: 24px;
|
}
|
}
|
}
|
|
/* 首页访问量统计 */
|
.head-info {
|
position: relative;
|
text-align: left;
|
padding: 0 32px 0 0;
|
min-width: 125px;
|
|
&.center {
|
text-align: center;
|
padding: 0 32px;
|
}
|
|
span {
|
color: rgba(0, 0, 0, .45);
|
display: inline-block;
|
font-size: .95rem;
|
line-height: 42px;
|
margin-bottom: 4px;
|
}
|
|
p {
|
line-height: 42px;
|
margin: 0;
|
|
a {
|
font-weight: 600;
|
font-size: 1rem;
|
}
|
}
|
}
|
|
.chart-box:before {
|
content: "";
|
position: absolute;
|
top: 40px;
|
right: 0;
|
width: 1px;
|
height: 60%;
|
background-color: #e5e5e5
|
}
|
|
.gantt-box {
|
width: 100%;
|
overflow: hidden;
|
position: relative;
|
height: 90vh;
|
}
|
|
.lcb-item-title {
|
margin-top: 5px;
|
border-right: 8px solid #f0f2f5
|
}
|
|
.lcb-item-title-last {
|
margin-top: 5px;
|
}
|
|
.hide-scroll {
|
-ms-overflow-style: none; /* IE 10+ */
|
scrollbar-width: none;
|
}
|
|
.hide-scroll::-webkit-scrollbar {
|
display: none;
|
}
|
|
|
/deep/ .custom-card .ant-card-body {
|
padding: 0 20px;
|
}
|
|
/deep/ .s1card .ant-card-body {
|
padding: 0 20px;
|
}
|
|
/deep/ .s0card .ant-tabs-bar {
|
border-bottom: 0;
|
margin: 0;
|
}
|
|
/deep/ .s0card .ant-tabs-ink-bar {
|
bottom: 0;
|
background-color: white;
|
}
|
</style>
|
