diff --git a/src/assets/screenNew/calendar_left_icon.png b/src/assets/screenNew/calendar_left_icon.png new file mode 100644 index 0000000..61fde47 Binary files /dev/null and b/src/assets/screenNew/calendar_left_icon.png differ diff --git a/src/assets/screenNew/calendar_right_icon.png b/src/assets/screenNew/calendar_right_icon.png new file mode 100644 index 0000000..eb48562 Binary files /dev/null and b/src/assets/screenNew/calendar_right_icon.png differ diff --git a/src/assets/screenNew/icon_expert.png b/src/assets/screenNew/icon_expert.png new file mode 100644 index 0000000..8fc0276 Binary files /dev/null and b/src/assets/screenNew/icon_expert.png differ diff --git a/src/assets/screenNew/icon_foreign.png b/src/assets/screenNew/icon_foreign.png new file mode 100644 index 0000000..f3ba9e6 Binary files /dev/null and b/src/assets/screenNew/icon_foreign.png differ diff --git a/src/assets/screenNew/icon_location.png b/src/assets/screenNew/icon_location.png new file mode 100644 index 0000000..ad9554b Binary files /dev/null and b/src/assets/screenNew/icon_location.png differ diff --git a/src/assets/screenNew/icon_meeting.png b/src/assets/screenNew/icon_meeting.png new file mode 100644 index 0000000..8f23234 Binary files /dev/null and b/src/assets/screenNew/icon_meeting.png differ diff --git a/src/assets/screenNew/icon_meetingWp.png b/src/assets/screenNew/icon_meetingWp.png new file mode 100644 index 0000000..081ec97 Binary files /dev/null and b/src/assets/screenNew/icon_meetingWp.png differ diff --git a/src/assets/screenNew/icon_public.png b/src/assets/screenNew/icon_public.png new file mode 100644 index 0000000..58036a8 Binary files /dev/null and b/src/assets/screenNew/icon_public.png differ diff --git a/src/assets/screenNew/icon_regulation.png b/src/assets/screenNew/icon_regulation.png new file mode 100644 index 0000000..576ab6f Binary files /dev/null and b/src/assets/screenNew/icon_regulation.png differ diff --git a/src/assets/screenNew/icon_release.png b/src/assets/screenNew/icon_release.png new file mode 100644 index 0000000..f88242c Binary files /dev/null and b/src/assets/screenNew/icon_release.png differ diff --git a/src/assets/screenNew/icon_research.png b/src/assets/screenNew/icon_research.png new file mode 100644 index 0000000..d0287c1 Binary files /dev/null and b/src/assets/screenNew/icon_research.png differ diff --git a/src/assets/screenNew/icon_title.png b/src/assets/screenNew/icon_title.png new file mode 100644 index 0000000..096a4a0 Binary files /dev/null and b/src/assets/screenNew/icon_title.png differ diff --git a/src/views/dashboard/Analysis.vue b/src/views/dashboard/Analysis.vue index 7fdc9fd..550c156 100644 --- a/src/views/dashboard/Analysis.vue +++ b/src/views/dashboard/Analysis.vue @@ -1,9 +1,27 @@ @@ -63,6 +106,11 @@ import AllMoneyTenEcharts from '@views/dashboard/AllMoneyTenEcharts' import ThreeYearEcharts from '@views/dashboard/ThreeYearEcharts' import NotReceivedEcharts from '@views/dashboard/NotReceivedEcharts' + +import PreparationRevisionScreen from './screen/preparationRevision/index' +import WPScreen from './screen/wp29/index' +import ISOScreen from './screen/iso/index' + export default { name: 'Analysis', components: { @@ -73,7 +121,11 @@ export default { IncomeSortEcharts, AllMoneyTenEcharts, ThreeYearEcharts, - NotReceivedEcharts + NotReceivedEcharts, + // 大屏模块的组件 + PreparationRevisionScreen, + WPScreen, + ISOScreen }, computed: { // 所领导 部门负责人 还是其他角色 @@ -82,7 +134,14 @@ export default { } }, data() { - return {} + return { + menuData: [ + {name: '汽车标准化工作平台', value: '1', href: 'income'}, + {name: '汽车标准制修订管理系统', value: '2', href: 'preparationRevisionScreen'}, + {name: '中国汽车国际标准工作平台-ISO', value: '3', href: 'ISO'}, + {name: '中国汽车国际法规工作平台-WP.29', value: '4', href: 'WP'} + ] + } }, created() { console.log() @@ -178,4 +237,78 @@ export default { display: flex; justify-content: flex-end; } + +// 大屏模块的样式增加 +/* 右侧定位的按钮*/ +.location-icon{ + position: fixed; + z-index: 200; + top: 165px; + right: 10px; + cursor: pointer; + //background-color: rgba(6, 159, 153, 0.2); + //border-radius: 50%; + img{ + cursor: pointer; + width: 40px; + height: 40px; + border-radius: 50%; + } +} +// 大标题 +.first-title { + height: 60px; + line-height: 60px; + background: #FFFFFF; + border-radius: 1px; + margin: 10px 0 0; + padding: 0 20px; + &::before { + content: ""; + display: inline-block; + width: 10px; + height: 10px; + border-radius: 50%; + background: #069F99; + vertical-align: middle; + margin-right: 8px; + } +} + +// 面板的标题 +/deep/.panel-box { + background: #FFFFFF; + border-radius: 4px; + margin-top: 10px; + .panel-title { + height: 58px; + box-shadow: 0 2px 9px 0 rgba(5,5,37,0.04); + border-radius: 2px 2px 0 0; + padding: 0 32px; + line-height: 58px; + font-size: 0px; + font-family: PingFang SC; + font-weight: 500; + color: #050525; + position: relative; + img { + width: 18px; + height: 18px; + margin-right: 11px; + vertical-align: middle; + } + & > span { + font-size: 18px; + display: inline-block; + vertical-align: middle; + } + } + .panel-content { + padding: 32px; + } +} +/deep/.full-box{ + width: 100%; +} + diff --git a/src/views/dashboard/screen/iso/ExpertChart.vue b/src/views/dashboard/screen/iso/ExpertChart.vue new file mode 100644 index 0000000..65bb626 --- /dev/null +++ b/src/views/dashboard/screen/iso/ExpertChart.vue @@ -0,0 +1,177 @@ + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/iso/LeadingStandardChart.vue b/src/views/dashboard/screen/iso/LeadingStandardChart.vue new file mode 100644 index 0000000..a4bd8d9 --- /dev/null +++ b/src/views/dashboard/screen/iso/LeadingStandardChart.vue @@ -0,0 +1,262 @@ + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/iso/MeetingCalendar.vue b/src/views/dashboard/screen/iso/MeetingCalendar.vue new file mode 100644 index 0000000..aaf81cc --- /dev/null +++ b/src/views/dashboard/screen/iso/MeetingCalendar.vue @@ -0,0 +1,361 @@ + + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/iso/index.vue b/src/views/dashboard/screen/iso/index.vue new file mode 100644 index 0000000..ca2602f --- /dev/null +++ b/src/views/dashboard/screen/iso/index.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/src/views/dashboard/screen/preparationRevision/CentralizedChart.vue b/src/views/dashboard/screen/preparationRevision/CentralizedChart.vue new file mode 100644 index 0000000..a99fe58 --- /dev/null +++ b/src/views/dashboard/screen/preparationRevision/CentralizedChart.vue @@ -0,0 +1,112 @@ + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/preparationRevision/CompletionProjectChart.vue b/src/views/dashboard/screen/preparationRevision/CompletionProjectChart.vue new file mode 100644 index 0000000..f57c1ae --- /dev/null +++ b/src/views/dashboard/screen/preparationRevision/CompletionProjectChart.vue @@ -0,0 +1,132 @@ + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/preparationRevision/EnterpriseContributionChart.vue b/src/views/dashboard/screen/preparationRevision/EnterpriseContributionChart.vue new file mode 100644 index 0000000..8d084b4 --- /dev/null +++ b/src/views/dashboard/screen/preparationRevision/EnterpriseContributionChart.vue @@ -0,0 +1,94 @@ + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/preparationRevision/GeneralSituationChart.vue b/src/views/dashboard/screen/preparationRevision/GeneralSituationChart.vue new file mode 100644 index 0000000..726cee7 --- /dev/null +++ b/src/views/dashboard/screen/preparationRevision/GeneralSituationChart.vue @@ -0,0 +1,158 @@ + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/preparationRevision/OverdueChart.vue b/src/views/dashboard/screen/preparationRevision/OverdueChart.vue new file mode 100644 index 0000000..7a966d4 --- /dev/null +++ b/src/views/dashboard/screen/preparationRevision/OverdueChart.vue @@ -0,0 +1,121 @@ + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/preparationRevision/PreparationRevisionChart.vue b/src/views/dashboard/screen/preparationRevision/PreparationRevisionChart.vue new file mode 100644 index 0000000..d82782c --- /dev/null +++ b/src/views/dashboard/screen/preparationRevision/PreparationRevisionChart.vue @@ -0,0 +1,186 @@ + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/preparationRevision/ReleasePlanChart.vue b/src/views/dashboard/screen/preparationRevision/ReleasePlanChart.vue new file mode 100644 index 0000000..706f974 --- /dev/null +++ b/src/views/dashboard/screen/preparationRevision/ReleasePlanChart.vue @@ -0,0 +1,214 @@ + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/preparationRevision/ReleaseStandardChart.vue b/src/views/dashboard/screen/preparationRevision/ReleaseStandardChart.vue new file mode 100644 index 0000000..d8c1627 --- /dev/null +++ b/src/views/dashboard/screen/preparationRevision/ReleaseStandardChart.vue @@ -0,0 +1,209 @@ + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/preparationRevision/ShouldBeCompletedProjectChart.vue b/src/views/dashboard/screen/preparationRevision/ShouldBeCompletedProjectChart.vue new file mode 100644 index 0000000..346839e --- /dev/null +++ b/src/views/dashboard/screen/preparationRevision/ShouldBeCompletedProjectChart.vue @@ -0,0 +1,111 @@ + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/preparationRevision/index.vue b/src/views/dashboard/screen/preparationRevision/index.vue new file mode 100644 index 0000000..d5b8512 --- /dev/null +++ b/src/views/dashboard/screen/preparationRevision/index.vue @@ -0,0 +1,184 @@ + + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/util/BarAndLineOptions.js b/src/views/dashboard/screen/util/BarAndLineOptions.js new file mode 100644 index 0000000..2633936 --- /dev/null +++ b/src/views/dashboard/screen/util/BarAndLineOptions.js @@ -0,0 +1,214 @@ +import * as echarts from 'echarts' + +import { deepMerge } from '@/utils/util' + + +export const BarAndLineOptions = { + color: ['#069F99', '#FFA17A', '#16CC9C'], + tooltip: { + trigger: 'axis', + formatter: params => { + // 获取xAxis data中的数据 + let dataStr = '' + params.forEach(item => { + let color = '' + if(typeof item.color === 'string') { + color = item.color + } else { + color = item.color.colorStops[0].color + } + if(item.seriesType === 'bar') { + dataStr += `
+
+ + ${item.seriesName} + ${item.value} +
+
` + } else { + let valueText = item.value + // 求比例的时候特殊处理 + if(item.seriesName.indexOf('比例') > -1) { + valueText = item.value === undefined ? '-' : `${item.value}%` + } + dataStr += `
+
+ + ${item.seriesName} + ${valueText} +
+
` + } + }) + return dataStr + }, + borderWidth: 0, + //提示框浮层的背景颜色 + // backgroundColor: '#233062', + //额外附加到浮层的 css 样式。如下为浮层添加阴影的示例: + // extraCssText: 'box-shadow: 0 0 4px #7599E8 inset;' + }, + + legend: { + //图例的公用文本样式。 + textStyle: { + color: '#050525' + }, + lineStyle: { + opacity: 0 + }, + itemWidth: 14, + // itemHeight: 14, + right: '0', + // top: '1%' + }, + grid: { + left: '0', + right: '0', + bottom: '0', + containLabel: true + }, + toolbox: {}, + xAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#F2F2F2' + } + }, + axisLabel: { + show: true, + color: '#8E8E95', + interval: 0, + formatter: function(params) { + let newParamsName = '' // 最终拼接成的字符串 + let paramsNameNumber = params.length // 实际标签的个数 + let provideNumber = 8 // 每行能显示的字的个数 + let rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话,需要显示几行,向上取整 + /** + * 判断标签的个数是否大于规定的个数, 如果大于,则进行换行处理 如果不大于,即等于或小于,就返回原标签 + */ + // 条件等同于rowNumber>1 + if (paramsNameNumber > provideNumber) { + /** 循环每一行,p表示行 */ + for (let p = 0; p < rowNumber; p++) { + let tempStr = ''// 表示每一次截取的字符串 + let start = p * provideNumber // 开始截取的位置 + let end = start + provideNumber // 结束截取的位置 + // 此处特殊处理最后一行的索引值 + if (p === rowNumber - 1) { + // 最后一次不换行 + tempStr = params.substring(start, paramsNameNumber) + } else { + // 每一次拼接字符串并换行 + tempStr = params.substring(start, end) + '\n' + } + newParamsName += tempStr // 最终拼成的字符串 + } + } else { + // 将旧标签的值赋给新标签 + newParamsName = params + } + return newParamsName + } + }, + type: 'category', + boundaryGap: ['30%', '20%'], + // 刻度线设置 + axisTick: { + show: false + }, + // TODO 需要自己扩展的 + data: [] + }, + yAxis: [ + { + axisLine: { + show: true, + lineStyle: { + color: '#F2F2F2' + } + }, + axisLabel: { + show: true, + color: '#8E8E95' + }, + splitLine: { + lineStyle: { + color: '#F2F2F2', + type: 'solid' + } + }, + type: 'value', + nameTextStyle: { + color: '#20203D' + } + }, + { + type: 'value', + // min: 0, + // max: 100, + axisLabel: { + show: false, + formatter: '{value} %', + }, + splitLine: { + show: false + } + } + ], + series: [ + { + name:'应完成项目数', + // data: this.yData[0], + type: 'bar', + barMaxWidth:20, + itemStyle:{ + borderRadius:[4,4,0,0] + } + }, + { + name:'实际完成项目数', + // data: this.yData[1], + type: 'bar', + barMaxWidth:20, + itemStyle:{ + borderRadius:[4,4,0,0] + } + }, + { + name:'实际完成比例', + // data: this.yData[2], + type: 'line', + yAxisIndex: 1, + showSymbol: false, + symbol: 'path://M 30 10 A 20 20 0 1 0 30 50 A 20 20 0 1 0 30 10 Z M 30 15 A 15 15 0 1 1 30 45 A 15 15 0 1 1 30 15 Z', + areaStyle: { + opacity: 0.8, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: 'rgba(22, 204, 156, 1)' + }, + { + offset: 1, + color: 'rgba(22, 204, 156, 0.1)' + } + ]) + }, + }, + ] +} + +// 生成柱折状图---制修订、各项目完成情况专用 +export function createBarAndLineChart(idName, option) { + const chartDom = document.getElementById(idName) + echarts.dispose(chartDom) + // debugger + let chartOption = deepMerge({}, BarAndLineOptions, option) + let myChart = echarts.init(chartDom) + chartOption && myChart.setOption(chartOption) + window.addEventListener('resize', () => { + myChart.resize() + }) +} diff --git a/src/views/dashboard/screen/util/BarOptions.js b/src/views/dashboard/screen/util/BarOptions.js new file mode 100644 index 0000000..c74000d --- /dev/null +++ b/src/views/dashboard/screen/util/BarOptions.js @@ -0,0 +1,263 @@ +import * as echarts from 'echarts' +import { formatMoney } from '@/utils/formatMoney' +import { deepMerge } from '@/utils/util' + +// 正常的柱状图配置 +export const BarOptions = { + // color: ['#4471EF', '#00D8F1', '#6CFBCE'], + color: ['#069F99', '#FFA17A','#6CFBCE'], + tooltip: { + trigger: 'axis', + formatter: params => { + // 获取xAxis data中的数据 + let dataStr = '' + params.forEach(item => { + let color = '' + if(typeof item.color === 'string') { + color = item.color + } else { + color = item.color.colorStops[0].color + } + dataStr += `
+
+
+ + ${item.seriesName} +
+
${formatMoney(item.value)}
+
+
` + }) + // return dataStr + `
完成比例:${percent}
` + return dataStr + }, + borderWidth: 0, + //提示框浮层的背景颜色 + // backgroundColor: '#233062', + //额外附加到浮层的 css 样式。如下为浮层添加阴影的示例: + // extraCssText: 'box-shadow: 0 0 4px #7599E8 inset;' + }, + + legend: { + //图例的公用文本样式。 + textStyle: { + color: '#050525' + }, + itemWidth: 14, + // itemHeight: 14, + right: '0' + }, + grid: { + left: '0', + right: '0', + bottom: '0', + // top: '40px', + containLabel: true + }, + toolbox: {}, + xAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#F2F2F2' + } + }, + axisLabel: { + show: true, + color: '#8E8E95', + interval: 0, + formatter: function(params) { + let newParamsName = '' // 最终拼接成的字符串 + let paramsNameNumber = params.length // 实际标签的个数 + let provideNumber = 8 // 每行能显示的字的个数 + let rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话,需要显示几行,向上取整 + /** + * 判断标签的个数是否大于规定的个数, 如果大于,则进行换行处理 如果不大于,即等于或小于,就返回原标签 + */ + // 条件等同于rowNumber>1 + if (paramsNameNumber > provideNumber) { + /** 循环每一行,p表示行 */ + for (let p = 0; p < rowNumber; p++) { + let tempStr = ''// 表示每一次截取的字符串 + let start = p * provideNumber // 开始截取的位置 + let end = start + provideNumber // 结束截取的位置 + // 此处特殊处理最后一行的索引值 + if (p === rowNumber - 1) { + // 最后一次不换行 + tempStr = params.substring(start, paramsNameNumber) + } else { + // 每一次拼接字符串并换行 + tempStr = params.substring(start, end) + '\n' + } + newParamsName += tempStr // 最终拼成的字符串 + } + } else { + // 将旧标签的值赋给新标签 + newParamsName = params + } + return newParamsName + } + }, + type: 'category', + boundaryGap: ['30%', '20%'], + // 刻度线设置 + axisTick: { + show: false + }, + // TODO 需要自己扩展的 + data: [] + }, + yAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#F2F2F2' + } + }, + axisLabel: { + show: true, + color: '#8E8E95' + }, + splitLine: { + lineStyle: { + color: '#F2F2F2', + type: 'solid' + } + }, + type: 'value', + nameTextStyle: { + color: '#20203D' + } + } +} + +// X轴是value的配置 +export const BarAxisTransformOptions = { + color: ['#069F99', '#FFA17A','#6CFBCE'], + tooltip: { + trigger: 'axis', + formatter: params => { + // 获取xAxis data中的数据 + let dataStr = `
${params[0].name}
` + params.forEach(item => { + let color = '' + if(typeof item.color === 'string') { + color = item.color + } else { + color = item.color.colorStops[0].color + } + dataStr += `
+
+ + ${item.seriesName} + ${item.value} +
+
` + }) + return dataStr + }, + borderWidth: 0, + //提示框浮层的背景颜色 + // backgroundColor: '#233062', + //额外附加到浮层的 css 样式。如下为浮层添加阴影的示例: + // extraCssText: 'box-shadow: 0 0 4px #7599E8 inset;' + }, + + legend: { + //图例的公用文本样式。 + textStyle: { + color: '#050525' + }, + itemWidth: 14, + right: '2%' + }, + grid: { + left: '0', + right: '3%', + bottom: '0', + containLabel: true + }, + toolbox: {}, + yAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#F2F2F2' + } + }, + axisLabel: { + show: true, + color: '#8E8E95', + interval: 0, + formatter: function(params) { + let newParamsName = '' // 最终拼接成的字符串 + let paramsNameNumber = params.length // 实际标签的个数 + let provideNumber = 10 // 每行能显示的字的个数 + // let rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话,需要显示几行,向上取整 + /** + * 判断标签的个数是否大于规定的个数, 如果大于,则进行换行处理 如果不大于,即等于或小于,就返回原标签 + */ + // 条件等同于rowNumber>1 + if (paramsNameNumber > provideNumber) { + let tempStr = params.substring(0, provideNumber) + '...' + newParamsName += tempStr + } else { + // 将旧标签的值赋给新标签 + newParamsName = params + } + return newParamsName + } + }, + type: 'category', + boundaryGap: ['30%', '20%'], + // 刻度线设置 + axisTick: { + show: false + }, + // TODO 需要自己扩展的 + data: [] + }, + xAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#F2F2F2' + } + }, + axisLabel: { + show: true, + color: '#8E8E95' + }, + splitLine: { + lineStyle: { + color: '#F2F2F2', + type: 'solid' + } + }, + type: 'value', + nameTextStyle: { + color: '#20203D' + } + } +} + +/** + * 生成柱状图 + * @param idName --- 当前dom的id + * @param option --- 配置项 + * @param xValue --- 横坐标是否是value,默认不传 + */ +export function createBarChart(idName, option, xValue) { + const chartDom = document.getElementById(idName) + echarts.dispose(chartDom) + // debugger + let chartOption = deepMerge({}, BarOptions, option) + if(xValue) { + chartOption = deepMerge({},BarAxisTransformOptions, option) + } + let myChart = echarts.init(chartDom) + chartOption && myChart.setOption(chartOption) + window.addEventListener('resize', () => { + myChart.resize() + }) +} diff --git a/src/views/dashboard/screen/util/LineOptions.js b/src/views/dashboard/screen/util/LineOptions.js new file mode 100644 index 0000000..a7ce094 --- /dev/null +++ b/src/views/dashboard/screen/util/LineOptions.js @@ -0,0 +1,236 @@ +import * as echarts from 'echarts' +import { formatMoney } from '@/utils/formatMoney' +import { deepMerge } from '@/utils/util' + + +export const LineOptions = { + color: ['#069F99', '#FFA17A','#6CFBCE'], + tooltip: { + trigger: 'axis', + formatter: params => { + // 获取xAxis data中的数据 + let dataStr = '' + params.forEach(item => { + dataStr += `
+
+ + ${item.seriesName} + ${formatMoney(item.data)} +
+
` + }) + return dataStr + }, + // alwaysShowContent: true, + // borderColor: 'rgba(255,255,50,1)', + borderWidth: 0, + //提示框浮层的背景颜色 + // backgroundColor: '#233062', + //额外附加到浮层的 css 样式。如下为浮层添加阴影的示例: + // extraCssText: 'box-shadow: 0 0 4px #7599E8 inset;' + }, + + legend: { + data: [ '确认收入金额', '开票金额', '到账金额'], + icon: 'path://M 30 10 A 20 20 0 1 0 30 50 A 20 20 0 1 0 30 10 Z M 30 15 A 15 15 0 1 1 30 45 A 15 15 0 1 1 30 15 Z', + //图例的公用文本样式。 + textStyle: { + color: '#050525' + }, + // itemWidth: 14, + // itemHeight: 14, + right: '0', + }, + grid: { + left: '2.4%', + right: '3%', + bottom: '0', + containLabel: true + }, + toolbox: {}, + xAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#F2F2F2' + } + }, + axisLabel: { + show: true, + color: '#8E8E95' + }, + type: 'category', + boundaryGap: ['30%','20%'], + // 刻度线设置 + axisTick: { + show: false + }, + // TODO 需要自己扩展的 + data: [] + }, + yAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#F2F2F2' + } + }, + axisLabel: { + show: true, + color: '#8E8E95' + }, + splitLine: { + lineStyle: { + color: '#F2F2F2', + type: 'solid' + } + }, + type: 'value', + nameTextStyle: { + color: '#20203D' + }, + }, +} + + +export const ISOLineOptions = { + color: ['#069F99', '#FFA17A','#6CFBCE'], + tooltip: { + trigger: 'axis', + formatter: params => { + // 获取xAxis data中的数据 + let dataStr = '' + params.forEach(item => { + dataStr += `
+
+ + ${item.seriesName} + ${item.data} +
+
` + }) + return dataStr + }, + borderWidth: 0, + //提示框浮层的背景颜色 + // backgroundColor: '#233062', + //额外附加到浮层的 css 样式。如下为浮层添加阴影的示例: + // extraCssText: 'box-shadow: 0 0 4px #7599E8 inset;' + }, + + legend: { + data: [ '国际注册专家', '国内支撑专家'], + icon: 'path://M 30 10 A 20 20 0 1 0 30 50 A 20 20 0 1 0 30 10 Z M 30 15 A 15 15 0 1 1 30 45 A 15 15 0 1 1 30 15 Z', + //图例的公用文本样式。 + textStyle: { + color: '#050525' + }, + right: '0', + }, + grid: { + left: '0', + right: '0', + bottom: '0%', + containLabel: true + }, + toolbox: {}, + xAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#F2F2F2' + } + }, + axisLabel: { + show: true, + color: '#8E8E95' + }, + type: 'category', + boundaryGap: ['30%','20%'], + // 刻度线设置 + axisTick: { + show: false + }, + data: [] + }, + yAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#F2F2F2' + } + }, + axisLabel: { + show: true, + color: '#8E8E95' + }, + splitLine: { + lineStyle: { + color: '#F2F2F2', + type: 'solid' + } + }, + type: 'value', + nameTextStyle: { + color: '#20203D' + } + }, + series: [ + { + name: '国际注册专家', + type: 'line', + showSymbol: false, + symbolSize: 8, + data: [], + areaStyle: { + opacity: 0.2, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: 'rgba(6, 159, 153, 1)' + }, + { + offset: 1, + color: 'rgba(6, 159, 153, 0.2)' + } + ]) + }, + }, + { + name: '国内支撑专家', + type: 'line', + showSymbol: false, + symbolSize: 8, + data: [], + areaStyle: { + opacity: 0.2, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#EBAB91' + }, + { + offset: 1, + color: '#ffffff' + } + ]) + }, + } + ] +} + +// 生成折线图 +export function createLineChart(idName, option, isISO) { + const chartDom = document.getElementById(idName) + echarts.dispose(chartDom) + // debugger + let chartOption = deepMerge({}, LineOptions, option) + if(isISO) { + chartOption = deepMerge({}, ISOLineOptions, option) + } + let myChart = echarts.init(chartDom) + chartOption && myChart.setOption(chartOption) + window.addEventListener('resize', () => { + myChart.resize() + }) +} diff --git a/src/views/dashboard/screen/util/PieOptions.js b/src/views/dashboard/screen/util/PieOptions.js new file mode 100644 index 0000000..fd70ea7 --- /dev/null +++ b/src/views/dashboard/screen/util/PieOptions.js @@ -0,0 +1,126 @@ +import * as echarts from 'echarts' +import { formatMoney } from '@/utils/formatMoney' +import { deepMerge } from '@/utils/util' +const color = ['#069F99', '#6D7FD0', '#8ACA9D', '#F58952', '#FAB152', '#6A956A', '#519FD1', '#55433B', '#9ABECA'] +export const PieOptions = { + title: { + show: false, + text: '', + textStyle: { + color: '#333', + fontWeight: 500, + fontSize: 14 + }, + left: 'center', + top: '10%' + }, + color, + tooltip: { + show: true, + trigger: 'item', + formatter: (param) => { + let color = '' + if(typeof param.color === 'string') { + color = param.color + } else { + color = param.color.colorStops[0].color + } + return `
+ +${param.name} +${formatMoney(param.data.money)} +
` + }, + // borderWidth: 0, + //提示框浮层的背景颜色 + // backgroundColor: '#233062', + //额外附加到浮层的 css 样式。如下为浮层添加阴影的示例: + // extraCssText: 'box-shadow: 0 0 4px #7599E8 inset;' + }, + + legend: { + show: false, + //图例的公用文本样式。 + textStyle: { + color: '#050525' + }, + bottom: '0', + right: '0', + padding: [0,70, 0, 70], + itemGap: 40 // 图例之间的间距 + }, + + toolbox: {}, + labelLine: { + lineStyle: { + color: '#999999' + } + }, + series: [ + { + type: 'pie', + radius: ['20%', '60%'], + center: ['50%', '50%'], + // roseType: 'area', // 南丁格尔图,所有扇区圆心角相同,仅通过半径展现数据大小。 + roseType: 'radius', // 南丁格尔图,扇区圆心角展现数据的百分比,半径展现数据的大小。 + itemStyle: { + borderRadius: [0, 0, 5, 5] + }, + label: { + show: true, + color: '#333333', + formatter: '{b}: {d}%' + } + } + ] +} + +// 处理label中圆点 +function initPoint(data, color) { + // 这步主要是为了让小圆点的颜色和饼状图的块对应 + let setLabel = (data) => { + let opts = [] + for (let i = 0; i < data.length; i++) { + let item = {} + item.name = data[i].name + item.value = data[i].value + item.label = { + normal: { + //控制引导线上文字颜色和位置,此处a是显示文字区域,b做一个小圆圈在引导线尾部显示 + show: true, + formatter: '{point|}{a|}{c}', + rich: { + a: { + padding: [0, 0, 0, 4] + }, + point: { + height: 7, + width: 7, + lineHeight: 7, + borderRadius: 50, + backgroundColor: color[i], // 圆点颜色和饼图块状颜色一致 + }, + } + }, + } + + opts.push(item) + } + return opts + } + return setLabel(data) +} + +// 生成柱状图 +export function createPieChart(idName, option) { + const chartDom = document.getElementById(idName) + echarts.dispose(chartDom) + // debugger + let chartOption = deepMerge({}, PieOptions, option) + chartOption.series[0].data = initPoint(chartOption.series[0].data, color) + let myChart = echarts.init(chartDom) + chartOption && myChart.setOption(chartOption) + window.addEventListener('resize', () => { + myChart.resize() + }) +} diff --git a/src/views/dashboard/screen/wp29/ExpertQuantityChart.vue b/src/views/dashboard/screen/wp29/ExpertQuantityChart.vue new file mode 100644 index 0000000..8ce23cf --- /dev/null +++ b/src/views/dashboard/screen/wp29/ExpertQuantityChart.vue @@ -0,0 +1,115 @@ + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/wp29/MeetingCalendar.vue b/src/views/dashboard/screen/wp29/MeetingCalendar.vue new file mode 100644 index 0000000..00134fa --- /dev/null +++ b/src/views/dashboard/screen/wp29/MeetingCalendar.vue @@ -0,0 +1,368 @@ + + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/wp29/MeetingInformationChart.vue b/src/views/dashboard/screen/wp29/MeetingInformationChart.vue new file mode 100644 index 0000000..8f86679 --- /dev/null +++ b/src/views/dashboard/screen/wp29/MeetingInformationChart.vue @@ -0,0 +1,338 @@ + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/wp29/RegulationQuantityChart.vue b/src/views/dashboard/screen/wp29/RegulationQuantityChart.vue new file mode 100644 index 0000000..0258aa8 --- /dev/null +++ b/src/views/dashboard/screen/wp29/RegulationQuantityChart.vue @@ -0,0 +1,145 @@ + + + + + + \ No newline at end of file diff --git a/src/views/dashboard/screen/wp29/index.vue b/src/views/dashboard/screen/wp29/index.vue new file mode 100644 index 0000000..adca404 --- /dev/null +++ b/src/views/dashboard/screen/wp29/index.vue @@ -0,0 +1,151 @@ + + + + + + \ No newline at end of file