【ADD】-WP29 和ISO页面的增加
This commit is contained in:
fengchenchen
@@ -20,13 +20,13 @@
|
||||
<!-- 中国汽车国际法规工作平台-ISO-->
|
||||
<template>
|
||||
<div class="sub-title"><span>中国汽车国际标准工作平台-ISO</span></div>
|
||||
<!-- <preparation-revision-screen></preparation-revision-screen>-->
|
||||
<i-s-o-screen></i-s-o-screen>
|
||||
</template>
|
||||
|
||||
<!-- 中国汽车国际法规工作平台-WP.29 -->
|
||||
<template>
|
||||
<div class="sub-title"><span>中国汽车国际法规工作平台-WP.29</span></div>
|
||||
<!-- <w-p-screen></w-p-screen>-->
|
||||
<w-p-screen></w-p-screen>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
@@ -36,17 +36,15 @@
|
||||
import IncomePaymentScreen from './incomePayments/index'
|
||||
import PreparationRevisionScreen from './preparationRevision/index'
|
||||
import WPScreen from './wp29/index'
|
||||
import ISOScreen from './iso/index'
|
||||
|
||||
export default {
|
||||
name: 'HomePage',
|
||||
components: {
|
||||
IncomePaymentScreen,
|
||||
PreparationRevisionScreen
|
||||
},
|
||||
created() {
|
||||
// StanderProjectGeneralSituation().then(res => {
|
||||
// console.log(res)
|
||||
// })
|
||||
PreparationRevisionScreen,
|
||||
WPScreen,
|
||||
ISOScreen
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,169 @@
|
||||
<!--国际专家统计-->
|
||||
<template>
|
||||
<div class="iso-full-box">
|
||||
<div class="box-title">国际专家统计</div>
|
||||
<div class="box-content">
|
||||
<div class="select-info-box">
|
||||
<div class="left-select">
|
||||
<!-- <span class="label">技术领域：</span>-->
|
||||
<a-select
|
||||
class="right-select active"
|
||||
style='width: 200px'
|
||||
v-model="searchParams.field"
|
||||
mode="multiple"
|
||||
placeholder="技术领域"
|
||||
:bordered="false"
|
||||
:maxTagCount="1"
|
||||
show-search
|
||||
:filter-option="filterOption"
|
||||
@change="fieldSelectChange"
|
||||
dropdown-class-name="ant-select-screen"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(item, index) in fieldOptionData"
|
||||
:key="index + item.orgCode"
|
||||
:value="item.orgCode"
|
||||
>
|
||||
{{item.departName}}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="title-right-sub">
|
||||
<span>专家总数：</span>
|
||||
<span class="num">{{totalAll}}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="echarts-box " id="isoExpertChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetExpertChartData, GetTechnicalFieldData } from '../../../screenApi/api'
|
||||
import { createLineChart } from '../util/LineOptions'
|
||||
|
||||
export default {
|
||||
name: 'ExpertChart',
|
||||
data() {
|
||||
return {
|
||||
searchParams: {},
|
||||
totalAll: '',
|
||||
fieldOptionData: [], // 技术领域的下拉框数据
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
// 技术领域的参数值： orgCode： 后面是逗号分隔
|
||||
let params = {}
|
||||
if(this.searchParams.field && this.searchParams.field.length > 0) {
|
||||
params.orgCode = this.searchParams.field.join()
|
||||
}
|
||||
GetExpertChartData(params).then(res => {
|
||||
if(res.success) {
|
||||
let data = res.result || {}
|
||||
this.$nextTick(() => {
|
||||
this.initChart(data)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
/**
|
||||
* count: 112
|
||||
leftDate: ["第一季度", "第二季度", "第三季度", "第四季度"]
|
||||
resultMapList: []
|
||||
0: {orgName: "国际注册专家", count: ["89", "102", "108", "111"]}
|
||||
1: {orgName: "国内支撑专家", count: ["0", "1", "1", "1"]}
|
||||
* @param data
|
||||
*/
|
||||
initChart(data) {
|
||||
let xData = data.leftDate
|
||||
let echartsData = data.resultMapList || []
|
||||
let totalAll = echartsData.reduce((pre, val) => {
|
||||
// 取最后一个季度的数据算出总数
|
||||
let innerNum = val.count[val.count.length - 1]
|
||||
return Number(pre) + Number(innerNum)
|
||||
}, 0)
|
||||
this.totalAll = totalAll
|
||||
let option = {
|
||||
xAxis: {
|
||||
data: xData,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: echartsData[0].count
|
||||
},
|
||||
{
|
||||
data: echartsData[1].count
|
||||
}
|
||||
]
|
||||
}
|
||||
createLineChart('isoExpertChart', option, true)
|
||||
|
||||
},
|
||||
getOptionData() {
|
||||
/*{departName: "SAG", orgCode: "A01A01"}*/
|
||||
GetTechnicalFieldData().then(res => {
|
||||
if(res.success) {
|
||||
this.fieldOptionData = res.result.departList || []
|
||||
console.log('-------fieldOptionData----', this.fieldOptionData)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 下拉框发生改变
|
||||
fieldSelectChange() {
|
||||
console.log('-------searchParams.field---------', this.searchParams.field)
|
||||
this.getData()
|
||||
},
|
||||
// 下拉框的搜索
|
||||
filterOption(input, option) {
|
||||
return (
|
||||
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
)
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
this.getOptionData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@white: #fff;
|
||||
.title-right-sub {
|
||||
text-align: right;
|
||||
margin-top: 5px;
|
||||
span {
|
||||
font-size: 16px;
|
||||
color: @white;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
span.num {
|
||||
font-size: 20px;
|
||||
color: #6CFBCE;
|
||||
}
|
||||
}
|
||||
|
||||
.select-info-box{
|
||||
width: 75%;
|
||||
margin-left: 25%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.left-select > span:not(.label) {
|
||||
margin-right: 15px;
|
||||
color: @white;
|
||||
}
|
||||
.label{
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,274 @@
|
||||
<!--中国牵头标准信息统计-->
|
||||
<template>
|
||||
<div class="iso-full-box iso-full-table">
|
||||
<div class="box-title">中国牵头标准信息统计</div>
|
||||
<div class="box-content">
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="projectId"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:scroll="{x: 1200}"
|
||||
@change="handleTableChange"
|
||||
class="j-table-force-nowrap main-table iso-table">
|
||||
|
||||
<template slot="text" slot-scope="text">
|
||||
<a-tooltip>
|
||||
<template slot="title">{{ text }}</template>
|
||||
<div class="table-text">{{ text }}</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
|
||||
<span v-for="item in columns" :slot="item.dataIndex" :key="item.dataIndex">
|
||||
<j-ellipsis :length="7" :value=" item[item.dataIndex] "></j-ellipsis>
|
||||
</span>
|
||||
<template slot="standard-name" slot-scope="text, record">
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
<div>{{ record.standardNameChinese }}</div>
|
||||
<div>{{ record.standardNameEnglish }}</div>
|
||||
</template>
|
||||
<div >
|
||||
<div class="table-text">{{ record.standardNameChinese }}</div>
|
||||
<div class="table-text">{{ record.standardNameEnglish }}</div>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetLeadingStandardData } from '../../../screenApi/api'
|
||||
|
||||
const defaultSorter = {
|
||||
column: 'createTime',
|
||||
order: 'desc'
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'LeadingStandardChart',
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'rowIndex',
|
||||
width: 70,
|
||||
align: 'center',
|
||||
customRender: function(t, r, index) {
|
||||
return parseInt(index) + 1
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '标准号',
|
||||
align: 'center',
|
||||
dataIndex: 'standardNumber',
|
||||
width: '200px',
|
||||
scopedSlots: {customRender: 'text'},
|
||||
},
|
||||
{
|
||||
title: '标准名称',
|
||||
align: 'center',
|
||||
width: '444px',
|
||||
dataIndex: 'standardName',
|
||||
scopedSlots: { customRender: 'standard-name' }
|
||||
},
|
||||
{
|
||||
title: '技术领域',
|
||||
align: 'center',
|
||||
dataIndex: 'technosphereSc_dictText',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
title: '牵头单位',
|
||||
align: 'center',
|
||||
dataIndex: 'unit',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
title: '目前状态',
|
||||
align: 'center',
|
||||
dataIndex: 'stageDescribe',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
}
|
||||
],
|
||||
dataSource: [],
|
||||
/* 分页参数 */
|
||||
ipagination: {
|
||||
current: 1,
|
||||
pageSize: 5,
|
||||
pageSizeOptions: ['5', '10'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: false,
|
||||
total: 0
|
||||
},
|
||||
/* 排序参数 */
|
||||
isorter: {
|
||||
column: 'createTime',
|
||||
order: 'desc'
|
||||
},
|
||||
/* table加载状态 */
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getData(arg) {
|
||||
if (arg === 1) {
|
||||
this.ipagination.current = 1
|
||||
}
|
||||
let param = Object.assign({}, this.isorter)
|
||||
param.pageNo = this.ipagination.current
|
||||
param.pageSize = this.ipagination.pageSize
|
||||
this.loading = true
|
||||
GetLeadingStandardData(param).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result.records || res.result
|
||||
if (res.result.total) {
|
||||
this.ipagination.total = res.result.total
|
||||
} else {
|
||||
this.ipagination.total = 0
|
||||
}
|
||||
// this.operateData(this.dataSource)
|
||||
}
|
||||
if (res.code === 510) {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
this.loading = false
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 操作表格中的数据
|
||||
operateData(data) {
|
||||
// data.map(tt => {
|
||||
// tt.standardNumber = '0000000000000000000099999999999999999999999999999999999999000000000000000000'
|
||||
// tt.standardNameChinese = '标准名称中文名标准名称中文名标准名称中文名标准名称中文名标准名称中文名标准名称中文名标准名称中文名'
|
||||
// tt.technosphereSc_dictText = '技术领域技技术领域技术领域技术领域技术领域技术领域技术领域技术领域技术领域技术领域技术领域术领域'
|
||||
// })
|
||||
},
|
||||
handleTableChange(pagination, filters, sorter) {
|
||||
//分页、排序、筛选变化时触发
|
||||
if (Object.keys(sorter).length > 0) {
|
||||
this.isorter.column = sorter.field
|
||||
if (sorter.order) {
|
||||
// 如果当前有列选中筛选条件
|
||||
this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
|
||||
} else {
|
||||
// 没有筛选值则 isorter 重置为初始值
|
||||
this.isorter.column = defaultSorter.column
|
||||
this.isorter.order = defaultSorter.order
|
||||
}
|
||||
|
||||
} else {
|
||||
this.isorter.column = defaultSorter.column
|
||||
this.isorter.order = defaultSorter.order
|
||||
}
|
||||
this.ipagination = pagination
|
||||
this.getData()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
/deep/ .ant-table-body > table{
|
||||
border-color: transparent;
|
||||
}
|
||||
// 表格样式的修改
|
||||
/deep/ .ant-table-thead tr > th {
|
||||
color: #FFFFFF;
|
||||
font-weight: bold;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/deep/ .ant-table-tbody tr > td {
|
||||
color: #A1E1FD;
|
||||
border: none;
|
||||
//border-bottom: 1px solid rgb(245,245,246);
|
||||
}
|
||||
|
||||
/deep/ .ant-table-tbody tr > td:first-child {
|
||||
color: #FFFFFF;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/deep/ .ant-table-tbody tr:nth-of-type(2n + 1) {
|
||||
background: #233062;
|
||||
}
|
||||
/deep/ .ant-table-tbody tr:nth-of-type(2n){
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/deep/ .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
|
||||
background: #233062;
|
||||
}
|
||||
|
||||
/deep/ .ant-table-content .ant-table-placeholder {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
/deep/.ant-empty-description{
|
||||
color: white;
|
||||
}
|
||||
|
||||
// 高度必须固定否则没有办法出滚动条
|
||||
.iso-full-table.iso-full-box{
|
||||
height: 581px;
|
||||
padding-top: 0;
|
||||
background-color: transparent;
|
||||
/deep/* {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
}
|
||||
.iso-table{
|
||||
margin-top: 60px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
//overflow: auto;
|
||||
}
|
||||
|
||||
// 分页器样式
|
||||
::v-deep .ant-pagination,
|
||||
::v-deep .ant-table-pagination li,
|
||||
::v-deep .ant-table-pagination li a,
|
||||
::v-deep .ant-table-pagination li input
|
||||
{
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .ant-pagination .ant-pagination-item-active{
|
||||
border-color: rgba(86, 113, 231, 0.3);
|
||||
}
|
||||
|
||||
::v-deep .ant-table-pagination li input{
|
||||
border-color: rgba(86, 113, 231, 0.3);
|
||||
box-shadow: 0 0 0 2px rgba(86, 113, 231, 0.1);
|
||||
}
|
||||
|
||||
|
||||
.table-text {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
/*表格滚动条*/
|
||||
/deep/.ant-table-body {
|
||||
overflow-x: auto!important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,349 @@
|
||||
<!--iso-国际会议统计-->
|
||||
<template>
|
||||
<div class="iso-full-box calendar-box">
|
||||
<div class="box-title">国际会议统计</div>
|
||||
<div class="box-content">
|
||||
<div class="content-header">
|
||||
<img class="header-img" @click="prev" src="../../../assets/screen/calendar_left_icon.png" alt="">
|
||||
<span class="header-text">{{ time }}主要会议安排</span>
|
||||
<img class="header-img" @click="next" src="../../../assets/screen/calendar_right_icon.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<div class='header-num'>
|
||||
<span>会议总数：</span>
|
||||
<span class='num'>{{this.scheduleList.length}}</span>
|
||||
</div>
|
||||
<div class="header-right-text">
|
||||
<span class="radius" style="background:#5671E7"></span>
|
||||
<span class="text">TC 22</span>
|
||||
</div>
|
||||
<div class="header-right-text">
|
||||
<span class="radius" style="background:#6CFBCE"></span>
|
||||
<span class="text">SC</span>
|
||||
</div>
|
||||
<div class="header-right-text">
|
||||
<span class="radius" style="background:#69C4F3"></span>
|
||||
<span class="text">WG</span>
|
||||
</div>
|
||||
</div>
|
||||
<full-calendar ref="fullCalendar" style="height: 100%" :options="calendarOptions"></full-calendar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetISOMeetingCalendarData } from "../../../screenApi/api";
|
||||
// 引入日历组件
|
||||
import FullCalendar from '@fullcalendar/vue'
|
||||
import dayGridPlugin from '@fullcalendar/daygrid'
|
||||
import interactionPlugin from '@fullcalendar/interaction'
|
||||
import tippy from 'tippy.js'
|
||||
|
||||
export default {
|
||||
name: 'MeetingCalendar',
|
||||
components: {
|
||||
FullCalendar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
calendarOptions: {
|
||||
// timeGridPlugin 可显示每日时间段
|
||||
height: 700,
|
||||
plugins: [dayGridPlugin, interactionPlugin],
|
||||
headerToolbar: null,
|
||||
firstDay: 0,
|
||||
editable: false,
|
||||
selectable: false,
|
||||
navLinks: false,
|
||||
// displayEventEnd: true,//所有视图显示结束时间
|
||||
initialView: 'dayGridMonth', // 设置默认显示月，可选周、日
|
||||
// dateClick: this.handleDateClick,
|
||||
// eventClick: this.handleEventClick,
|
||||
eventMouseEnter: this.eventMouseoverOne,
|
||||
eventMouseLeave: this.eventMouseoutOne,
|
||||
// timezone
|
||||
// 设置日程
|
||||
events: [],
|
||||
eventColor: '#f08f00', // 修改日程背景色
|
||||
weekNumberCalculation: 'ISO', // 周数
|
||||
customButtons: {}
|
||||
},
|
||||
scheduleList: [],
|
||||
time: '',
|
||||
calendarApi: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
let query = {
|
||||
// orgCode: this.orgCode,
|
||||
// cutTime: ''
|
||||
}
|
||||
GetISOMeetingCalendarData(query).then((res) => {
|
||||
if (res.success) {
|
||||
this.scheduleList = res.result || []
|
||||
this.getReservationList(res.result)
|
||||
} else {
|
||||
this.scheduleList = []
|
||||
}
|
||||
})
|
||||
},
|
||||
prev() {
|
||||
this.calendarApi.prev()
|
||||
let currentDate = new Date(this.calendarApi.currentData.currentDate)
|
||||
this.time = currentDate.getFullYear() + '年' + (currentDate.getMonth() + 1) + '月'
|
||||
},
|
||||
// 切换下一个按钮事件
|
||||
next() {
|
||||
this.calendarApi.next()
|
||||
let currentDate = new Date(this.calendarApi.currentData.currentDate)
|
||||
this.time = currentDate.getFullYear() + '年' + (currentDate.getMonth() + 1) + '月'
|
||||
},
|
||||
// 点击今天按钮
|
||||
today() {
|
||||
this.calendarApi.today()
|
||||
},
|
||||
handleDateClick: function(arg) {
|
||||
this.$forceUpdate()
|
||||
console.log(arg, '事件1')
|
||||
},
|
||||
getReservationList(arrayData) {
|
||||
let newArr = []
|
||||
arrayData.forEach((item) => {
|
||||
if (item.orgType === 'TC22') {
|
||||
item.status = '#5671E7'
|
||||
} else if (item.orgType === 'SC') {
|
||||
item.status = '#6CFBCE'
|
||||
} else {
|
||||
item.status = '#69C4F3'
|
||||
}
|
||||
newArr.push({
|
||||
start: this.dealWithTime(item.time),
|
||||
end: this.addDate(this.dealWithTime(item.endTime), 1),
|
||||
color: item.status,
|
||||
id: item.meetingId,
|
||||
title: `${item.name}`
|
||||
})
|
||||
})
|
||||
this.calendarOptions.events = newArr
|
||||
},
|
||||
getShowTime(beginDate, endDate) {
|
||||
this.form.startDate = this.dealWithTime(beginDate)
|
||||
this.form.startTime = this.getHoursMin(beginDate)
|
||||
this.form.endDate = this.dealWithTime(endDate)
|
||||
this.form.endTime = this.getHoursMin(endDate)
|
||||
},
|
||||
// 获取时分时间
|
||||
getHoursMin(value) {
|
||||
return value.substring(11, 16)
|
||||
},
|
||||
// 处理会议时间格式
|
||||
dealWithTime(date) {
|
||||
let newDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(date)[0]
|
||||
return newDate
|
||||
},
|
||||
|
||||
// 日期加1天
|
||||
addDate(date, days) {
|
||||
var d = new Date(date)
|
||||
d.setDate(d.getDate() + days)
|
||||
var mon = (d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1
|
||||
let endD = d.getDate() < 10 ? '0' + d.getDate() : d.getDate()
|
||||
return `${d.getFullYear()}-${mon}-${endD}`
|
||||
},
|
||||
eventMouseoverOne(data) {
|
||||
let content = this.scheduleList.filter(res => {
|
||||
return res.meetingId == data.event.id
|
||||
})
|
||||
//todo 缺一个type的字段
|
||||
tippy(data.el, {
|
||||
content:
|
||||
'<div class="tippy-content-box" style="">' +
|
||||
'<span style="margin-right: 10px;" class="text-index">' + content[0].orgType + '</span>' + '<span class="text-index">' + content[0].name + '</span>' +
|
||||
'<div class="tippy-content">技术领域: ' + content[0].type + '</div>' + '' +
|
||||
'<div class="tippy-content">时间: ' + content[0].timeAll + '</div>' + '' +
|
||||
'<div class="tippy-content">地点: ' + content[0].place + '</div>' +
|
||||
'<div class="tippy-content">参会人: ' + content[0].meetingPersons + '</div>' + '</div>',
|
||||
interactive: false,
|
||||
// placement: 'top',
|
||||
allowHTML: true
|
||||
})
|
||||
},
|
||||
eventMouseoutOne() {
|
||||
|
||||
},
|
||||
// 获取会议事件title
|
||||
getTitle(date1, date2) {
|
||||
let start = date1.substring(11, 16)
|
||||
let end = date2.substring(11, 16)
|
||||
return `${start}~${end}`
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 获取用户信息
|
||||
this.$nextTick(() => {
|
||||
this.calendarApi = this.$refs.fullCalendar.getApi()
|
||||
let currentDate = new Date(this.calendarApi.currentData.currentDate)
|
||||
this.time = currentDate.getFullYear() + '年' + (currentDate.getMonth() + 1) + '月'
|
||||
})
|
||||
// this.getReservationList(this.scheduleList)
|
||||
this.getData()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@white: #fff;
|
||||
@normal-color: rgba(256, 256, 256, 0.3);
|
||||
div.calendar-box{
|
||||
background-image: url("../../../assets/screen/calendar_bg.png");
|
||||
padding-top: 43.4%;
|
||||
.box-title{
|
||||
//34.5 / 高度 814
|
||||
top: 4.24%;
|
||||
}
|
||||
}
|
||||
.content-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.header-img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
font-size: 18px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 800;
|
||||
color: @white;
|
||||
margin-left: 26px;
|
||||
margin-right: 26px;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
transform: translateY(-35px);
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.header-right-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 28px;
|
||||
}
|
||||
|
||||
.radius {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: @white;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.header-num{
|
||||
span {
|
||||
font-size: 16px;
|
||||
color: @white;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
span.num {
|
||||
font-size: 20px;
|
||||
color: #6CFBCE;
|
||||
}
|
||||
}
|
||||
/*日历组件的修改 */
|
||||
::v-deep .fc-theme-standard td,
|
||||
::v-deep .fc-theme-standard th,
|
||||
::v-deep.fc-theme-standard .fc-scrollgrid{
|
||||
border-color: rgba(86, 113, 231, 0.3);
|
||||
}
|
||||
::v-deep .fc-daygrid-day .fc-daygrid-day-number {
|
||||
font-weight: bold;
|
||||
color: @white;
|
||||
font-size: 14px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
|
||||
::v-deep .fc-day-other .fc-daygrid-day-number {
|
||||
color: @normal-color;
|
||||
font-size: 14px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
::v-deep .fc-col-header-cell-cushion {
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
::v-deep .fc-col-header-cell {
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
//background: #FCFBFB;
|
||||
}
|
||||
|
||||
::v-deep .fc-day-sun .fc-col-header-cell-cushion {
|
||||
//color: #9E0000;
|
||||
}
|
||||
|
||||
::v-deep .fc-day-sat .fc-col-header-cell-cushion {
|
||||
//color: #9E0000;
|
||||
}
|
||||
|
||||
::v-deep .fc-event-main {
|
||||
padding: 2px 10px;
|
||||
}
|
||||
|
||||
::v-deep .fc-toolbar-chunk .fc-button-primary {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::v-deep .fc .fc-daygrid-day.fc-day-today{
|
||||
background-color: #7599E8;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style lang="less">
|
||||
.tippy-content-box {
|
||||
background: #233062;
|
||||
color: #fff;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 4px #7599E8 inset;
|
||||
.text-index {
|
||||
font-size: 16px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tippy-content {
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div class="screen-iso">
|
||||
<!-- 中国牵头标准信息统计 -->
|
||||
<leading-standard-chart></leading-standard-chart>
|
||||
<!-- 国际会议统计-->
|
||||
<meeting-calendar></meeting-calendar>
|
||||
<!-- 国际专家统计-->
|
||||
<expert-chart></expert-chart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//中国牵头标准信息统计
|
||||
import LeadingStandardChart from './LeadingStandardChart'
|
||||
|
||||
// //国际会议统计
|
||||
import MeetingCalendar from './MeetingCalendar'
|
||||
// //国际专家统计
|
||||
import ExpertChart from './ExpertChart'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'index',
|
||||
components: {
|
||||
// 中国牵头标准信息统计
|
||||
LeadingStandardChart,
|
||||
// 国际会议统计
|
||||
MeetingCalendar,
|
||||
// 国际专家统计
|
||||
ExpertChart
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.screen-iso{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
// 全屏box-有表格 1875 * 587
|
||||
.iso-full-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-top: 31.31%;
|
||||
background-image: url("../../../assets/screen/full_no_table_bg.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
/deep/ .box-title {
|
||||
font-size: 18px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #DDF0FF;
|
||||
position: absolute;
|
||||
// 34.5 / 高度 587
|
||||
top: 5.88%;
|
||||
left: 13.70%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/deep/ .box-content {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2.3% 4%;
|
||||
//padding: 4.61% 4%;
|
||||
.echarts-box {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 50%的box 536 * 931
|
||||
/deep/.iso-half-box{
|
||||
width: 50%;
|
||||
height: 0;
|
||||
padding-top: 28.79%;
|
||||
background-image: url("../../../assets/screen/half_bg.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.box-title {
|
||||
// (25 + 18 / 2) / 635
|
||||
top: 6.34%;
|
||||
// (171 + 149 / 2) / 931
|
||||
left: 26.37%;
|
||||
}
|
||||
.box-content {
|
||||
padding: 4.61% 6%;
|
||||
}
|
||||
}
|
||||
|
||||
@normal-color: rgba(256, 256, 256, 0.5);
|
||||
@white: #fff;
|
||||
// 半屏 标题右侧的样式
|
||||
/deep/.title-right{
|
||||
width: 50%;
|
||||
margin-left: 50%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
span {
|
||||
font-size: 16px;
|
||||
color: @white;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
span.num {
|
||||
font-size: 20px;
|
||||
color: #6CFBCE;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//下拉框样式的修改
|
||||
/deep/.ant-select-selection{
|
||||
border: none!important;
|
||||
background: transparent;
|
||||
color: @normal-color;
|
||||
}
|
||||
/deep/.ant-select.active .ant-select-selection{
|
||||
color: @white!important;
|
||||
}
|
||||
|
||||
/deep/.ant-select-focused .ant-select-selection, .ant-select-selection:focus, .ant-select-selection:active{
|
||||
border: none!important;
|
||||
box-shadow: none;
|
||||
}
|
||||
/deep/.ant-select-arrow{
|
||||
color: @white;
|
||||
}
|
||||
|
||||
// 时间选择器的样式
|
||||
/deep/.ant-calendar-picker,
|
||||
/deep/.ant-calendar-picker-input.ant-input,
|
||||
/deep/ .ant-calendar-picker-icon{
|
||||
border: none!important;
|
||||
background: transparent;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style lang="less">
|
||||
@normal-color: rgba(256, 256, 256, 0.2);
|
||||
.ant-calendar-dropdown-screen{
|
||||
.ant-calendar{
|
||||
border: none;
|
||||
box-shadow: 0 0 4px #7599E8 inset;
|
||||
}
|
||||
.ant-calendar-month-panel-body,
|
||||
.ant-calendar-month-panel-header,
|
||||
.ant-calendar-year-panel-body,
|
||||
.ant-calendar-year-panel-header
|
||||
{
|
||||
background-color: #181F55;
|
||||
border: none!important;
|
||||
color: #fff;
|
||||
}
|
||||
td a,
|
||||
.ant-calendar-month-panel-year-select-content,
|
||||
.ant-calendar-year-panel-decade-select
|
||||
{
|
||||
color: #fff;
|
||||
}
|
||||
.ant-calendar-month-panel-prev-year-btn::after,
|
||||
.ant-calendar-month-panel-prev-year-btn::before,
|
||||
.ant-calendar-month-panel-next-year-btn::before,
|
||||
.ant-calendar-month-panel-next-year-btn::after
|
||||
{
|
||||
border-color: #fff;
|
||||
}
|
||||
// 选中的效果
|
||||
.ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month,
|
||||
.ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year{
|
||||
background-color: #4364C2;
|
||||
}
|
||||
|
||||
.ant-calendar-header a:hover{
|
||||
color: #fff;
|
||||
background-color: #7599E8;
|
||||
//&::after,
|
||||
//&::before{
|
||||
// color: #fff;
|
||||
//}
|
||||
}
|
||||
|
||||
.ant-calendar-year-panel-last-decade-cell a,
|
||||
.ant-calendar-year-panel-next-decade-cell a
|
||||
{
|
||||
color: @normal-color;
|
||||
}
|
||||
// 年份选择器上面的输入框
|
||||
.ant-calendar-input-wrap{
|
||||
background-color: #181F55;
|
||||
border-color: @normal-color;
|
||||
input{
|
||||
background-color: #181F55;
|
||||
border: none!important;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -32,19 +32,7 @@ export const LineOptions = {
|
||||
|
||||
legend: {
|
||||
data: [ '确认收入金额', '开票金额', '到账金额'],
|
||||
// icon: 'path://M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0',
|
||||
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',
|
||||
// 去除图例中的线
|
||||
// lineStyle: {
|
||||
// // opacity: 0
|
||||
// join: 'miter',
|
||||
// color: '#ff0'
|
||||
// },
|
||||
// itemStyle: {
|
||||
// color: '#f0f',
|
||||
// borderJoin: 'round',
|
||||
// opacity: 0.5
|
||||
// },
|
||||
//图例的公用文本样式。
|
||||
textStyle: {
|
||||
color: '#7599E8'
|
||||
@@ -52,7 +40,6 @@ export const LineOptions = {
|
||||
// itemWidth: 14,
|
||||
// itemHeight: 14,
|
||||
right: '2%',
|
||||
|
||||
},
|
||||
grid: {
|
||||
left: '2.4%',
|
||||
@@ -105,12 +92,142 @@ export const LineOptions = {
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
export const ISOLineOptions = {
|
||||
color: ['#4471EF', '#00D8F1', '#6CFBCE'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: params => {
|
||||
// 获取xAxis data中的数据
|
||||
let dataStr = ''
|
||||
params.forEach(item => {
|
||||
dataStr += `<div>
|
||||
<div style="margin: 0 8px;">
|
||||
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:transparent;border: 2px solid ${item.color};border-radius: 50%"></span>
|
||||
<span style="color: #7599E8">${item.seriesName}</span>
|
||||
<span style="float:right;color:#7599E8;margin-left:20px;">${item.data}</span>
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
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: '#7599E8'
|
||||
},
|
||||
right: '0',
|
||||
},
|
||||
grid: {
|
||||
left: '0',
|
||||
right: '0',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {},
|
||||
xAxis: {
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#7599E8'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#7FA6FB'
|
||||
},
|
||||
type: 'category',
|
||||
boundaryGap: ['30%','20%'],
|
||||
// 刻度线设置
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
data: []
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#7599E8'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#7FA6FB'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#7599E8',
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
type: 'value',
|
||||
nameTextStyle: {
|
||||
color: '#7FA6FB'
|
||||
}
|
||||
},
|
||||
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: '#4471EF'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#ffffff'
|
||||
}
|
||||
])
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '国内支撑专家',
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
symbolSize: 8,
|
||||
data: [],
|
||||
areaStyle: {
|
||||
opacity: 0.2,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#00D8F1'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#ffffff'
|
||||
}
|
||||
])
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// 生成折线图
|
||||
export function createLineChart(idName, option) {
|
||||
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', () => {
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
<!--专家数量统计-->
|
||||
<template>
|
||||
<div class="wp-full-box wp-half-box">
|
||||
<div class="box-title">专家数量统计</div>
|
||||
<div class="box-content">
|
||||
<div class="title-right">
|
||||
<span>专家总数：</span>
|
||||
<span class="num">{{totalAll}}</span>
|
||||
</div>
|
||||
<div class="echarts-box" id="expertQuantityChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { createPieChart } from '../util/PieOptions'
|
||||
import { GetExpertQuantityData } from '../../../screenApi/api'
|
||||
|
||||
export default {
|
||||
name: 'ExpertQuantityChart',
|
||||
data() {
|
||||
return {
|
||||
totalAll: '' // 法规总数
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
GetExpertQuantityData().then(res => {
|
||||
if(res.success) {
|
||||
let data = res.result || []
|
||||
if(data.length > 0) {
|
||||
this.totalAll = data[0].total
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.initChart(data)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 初始化图表
|
||||
* @param data --{"technicalField":"GRSP","count":"23","total":"52"}
|
||||
*/
|
||||
initChart(data) {
|
||||
let echartsData = data.reduce((pre, val) => {
|
||||
return pre.concat({value: val.count, name: val.technicalField, total: val.total})
|
||||
}, [])
|
||||
let option = {
|
||||
legend: {
|
||||
show: true,
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
right: 0,
|
||||
top: 'center',
|
||||
itemGap: 10 // 图例之间的间距
|
||||
},
|
||||
grid: {
|
||||
left: '0',
|
||||
right: '0',
|
||||
},
|
||||
tooltip: {
|
||||
formatter: (param) => {
|
||||
return `<div>
|
||||
<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${param.color};"></span>
|
||||
<span style="color: #7599E8">${param.name}</span>
|
||||
<span style="color: #7599E8">${param.value}</span>
|
||||
</div>`
|
||||
},
|
||||
|
||||
},
|
||||
series: [
|
||||
{
|
||||
center: ['42%', '50%'],
|
||||
data: echartsData
|
||||
}
|
||||
]
|
||||
}
|
||||
createPieChart('expertQuantityChart', option)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,356 @@
|
||||
<!--会议信息日历-->
|
||||
<template>
|
||||
<div class="wp-full-box calendar-box">
|
||||
<div class="box-title">会议信息日历</div>
|
||||
<div class="box-content">
|
||||
<div class="content-header">
|
||||
<img class="header-img" @click="prev" src="../../../assets/screen/calendar_left_icon.png" alt="">
|
||||
<span class="header-text">{{ time }}主要会议安排</span>
|
||||
<img class="header-img" @click="next" src="../../../assets/screen/calendar_right_icon.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<div class='header-num'>
|
||||
<span>会议总数：</span>
|
||||
<span class='num'>{{this.scheduleList.length}}</span>
|
||||
</div>
|
||||
<div class="header-right-text">
|
||||
<span class="radius" style="background:#5671E7"></span>
|
||||
<span class="text">WP.29</span>
|
||||
</div>
|
||||
<div class="header-right-text">
|
||||
<span class="radius" style="background:#6CFBCE"></span>
|
||||
<span class="text">GR</span>
|
||||
</div>
|
||||
<div class="header-right-text">
|
||||
<span class="radius" style="background:#69C4F3"></span>
|
||||
<span class="text">IWG</span>
|
||||
</div>
|
||||
</div>
|
||||
<full-calendar ref="fullCalendar" style="height: 100%" :options="calendarOptions"></full-calendar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetMeetingCalendarData } from '../../../screenApi/api'
|
||||
// 引入日历组件
|
||||
import FullCalendar from '@fullcalendar/vue'
|
||||
import dayGridPlugin from '@fullcalendar/daygrid'
|
||||
import interactionPlugin from '@fullcalendar/interaction'
|
||||
import tippy from 'tippy.js'
|
||||
|
||||
export default {
|
||||
name: 'MeetingCalendar',
|
||||
components: {
|
||||
FullCalendar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
calendarOptions: {
|
||||
// timeGridPlugin 可显示每日时间段
|
||||
height: 700,
|
||||
plugins: [dayGridPlugin, interactionPlugin],
|
||||
headerToolbar: null,
|
||||
firstDay: 0,
|
||||
editable: false,
|
||||
selectable: false,
|
||||
navLinks: false,
|
||||
// displayEventEnd: true,//所有视图显示结束时间
|
||||
initialView: 'dayGridMonth', // 设置默认显示月，可选周、日
|
||||
// dateClick: this.handleDateClick,
|
||||
// eventClick: this.handleEventClick,
|
||||
eventMouseEnter: this.eventMouseoverOne,
|
||||
eventMouseLeave: this.eventMouseoutOne,
|
||||
// timezone
|
||||
// 设置日程
|
||||
events: [],
|
||||
eventColor: '#f08f00', // 修改日程背景色
|
||||
weekNumberCalculation: 'ISO', // 周数
|
||||
customButtons: {}
|
||||
},
|
||||
scheduleList: [],
|
||||
time: '',
|
||||
calendarApi: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 获取用户信息
|
||||
this.$nextTick(() => {
|
||||
this.calendarApi = this.$refs.fullCalendar.getApi()
|
||||
let currentDate = new Date(this.calendarApi.currentData.currentDate)
|
||||
this.time = currentDate.getFullYear() + '年' + (currentDate.getMonth() + 1) + '月'
|
||||
})
|
||||
// this.getReservationList(this.scheduleList)
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
let query = {
|
||||
// orgCode: this.orgCode,
|
||||
// cutTime: ''
|
||||
}
|
||||
GetMeetingCalendarData(query).then((res) => {
|
||||
if (res.success) {
|
||||
this.scheduleList = res.result || []
|
||||
this.getReservationList(res.result)
|
||||
} else {
|
||||
this.scheduleList = []
|
||||
}
|
||||
})
|
||||
},
|
||||
prev() {
|
||||
this.calendarApi.prev()
|
||||
let currentDate = new Date(this.calendarApi.currentData.currentDate)
|
||||
this.time = currentDate.getFullYear() + '年' + (currentDate.getMonth() + 1) + '月'
|
||||
},
|
||||
// 切换下一个按钮事件
|
||||
next() {
|
||||
this.calendarApi.next()
|
||||
let currentDate = new Date(this.calendarApi.currentData.currentDate)
|
||||
this.time = currentDate.getFullYear() + '年' + (currentDate.getMonth() + 1) + '月'
|
||||
},
|
||||
// 点击今天按钮
|
||||
today() {
|
||||
this.calendarApi.today()
|
||||
},
|
||||
handleDateClick: function(arg) {
|
||||
this.$forceUpdate()
|
||||
console.log(arg, '事件1')
|
||||
},
|
||||
handleEventClick(calEvent) {
|
||||
let params = { orgCode: calEvent.event.id, thisType: 2, type: 2 }
|
||||
this.$router.push({
|
||||
path: '/meetinginfo',
|
||||
query: params
|
||||
})
|
||||
},
|
||||
getReservationList(arrayData) {
|
||||
let newArr = []
|
||||
arrayData.forEach((item) => {
|
||||
if (item.orgType == 'GR') {
|
||||
item.status = '#5671E7'
|
||||
} else if (item.orgType == 'IWG') {
|
||||
item.status = '#6CFBCE'
|
||||
} else {
|
||||
item.status = '#69C4F3'
|
||||
}
|
||||
newArr.push({
|
||||
start: this.dealWithTime(item.time),
|
||||
end: this.addDate(this.dealWithTime(item.endTime), 1),
|
||||
color: item.status,
|
||||
id: item.meetingId,
|
||||
title: `${item.name}`
|
||||
})
|
||||
})
|
||||
this.calendarOptions.events = newArr
|
||||
},
|
||||
getShowTime(beginDate, endDate) {
|
||||
this.form.startDate = this.dealWithTime(beginDate)
|
||||
this.form.startTime = this.getHoursMin(beginDate)
|
||||
this.form.endDate = this.dealWithTime(endDate)
|
||||
this.form.endTime = this.getHoursMin(endDate)
|
||||
},
|
||||
// 获取时分时间
|
||||
getHoursMin(value) {
|
||||
return value.substring(11, 16)
|
||||
},
|
||||
// 处理会议时间格式
|
||||
dealWithTime(date) {
|
||||
let newDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(date)[0]
|
||||
return newDate
|
||||
},
|
||||
|
||||
// 日期加1天
|
||||
addDate(date, days) {
|
||||
var d = new Date(date)
|
||||
d.setDate(d.getDate() + days)
|
||||
var mon = (d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1
|
||||
let endD = d.getDate() < 10 ? '0' + d.getDate() : d.getDate()
|
||||
return `${d.getFullYear()}-${mon}-${endD}`
|
||||
},
|
||||
eventMouseoverOne(data) {
|
||||
let content = this.scheduleList.filter(res => {
|
||||
return res.meetingId == data.event.id
|
||||
})
|
||||
//todo 缺一个type的字段
|
||||
tippy(data.el, {
|
||||
content:
|
||||
'<div class="tippy-content-box" style="">' +
|
||||
'<span style="margin-right: 10px;" class="text-index">' + content[0].orgType + '</span>' + '<span class="text-index">' + content[0].name + '</span>' +
|
||||
'<div class="tippy-content">技术领域: ' + content[0].type + '</div>' + '' +
|
||||
'<div class="tippy-content">时间: ' + content[0].timeAll + '</div>' + '' +
|
||||
'<div class="tippy-content">地点: ' + content[0].place + '</div>' +
|
||||
'<div class="tippy-content">参会人: ' + content[0].meetingPersons + '</div>' + '</div>',
|
||||
interactive: false,
|
||||
// placement: 'top',
|
||||
allowHTML: true
|
||||
})
|
||||
},
|
||||
eventMouseoutOne(data) {
|
||||
|
||||
},
|
||||
// 获取会议事件title
|
||||
getTitle(date1, date2) {
|
||||
let start = date1.substring(11, 16)
|
||||
let end = date2.substring(11, 16)
|
||||
return `${start}~${end}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@white: #fff;
|
||||
@normal-color: rgba(256, 256, 256, 0.3);
|
||||
div.calendar-box{
|
||||
background-image: url("../../../assets/screen/calendar_bg.png");
|
||||
padding-top: 43.4%;
|
||||
.box-title{
|
||||
//34.5 / 高度 814
|
||||
top: 4.24%;
|
||||
}
|
||||
}
|
||||
.content-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.header-img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
font-size: 18px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 800;
|
||||
color: @white;
|
||||
margin-left: 26px;
|
||||
margin-right: 26px;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
transform: translateY(-35px);
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.header-right-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 28px;
|
||||
}
|
||||
|
||||
.radius {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: @white;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.header-num{
|
||||
span {
|
||||
font-size: 16px;
|
||||
color: @white;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
span.num {
|
||||
font-size: 20px;
|
||||
color: #6CFBCE;
|
||||
}
|
||||
}
|
||||
/*日历组件的修改 */
|
||||
::v-deep .fc-theme-standard td,
|
||||
::v-deep .fc-theme-standard th,
|
||||
::v-deep.fc-theme-standard .fc-scrollgrid{
|
||||
border-color: rgba(86, 113, 231, 0.3);
|
||||
}
|
||||
::v-deep .fc-daygrid-day .fc-daygrid-day-number {
|
||||
font-weight: bold;
|
||||
color: @white;
|
||||
font-size: 14px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
|
||||
::v-deep .fc-day-other .fc-daygrid-day-number {
|
||||
color: @normal-color;
|
||||
font-size: 14px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
::v-deep .fc-col-header-cell-cushion {
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
::v-deep .fc-col-header-cell {
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
//background: #FCFBFB;
|
||||
}
|
||||
|
||||
::v-deep .fc-day-sun .fc-col-header-cell-cushion {
|
||||
//color: #9E0000;
|
||||
}
|
||||
|
||||
::v-deep .fc-day-sat .fc-col-header-cell-cushion {
|
||||
//color: #9E0000;
|
||||
}
|
||||
|
||||
::v-deep .fc-event-main {
|
||||
padding: 2px 10px;
|
||||
}
|
||||
|
||||
::v-deep .fc-toolbar-chunk .fc-button-primary {
|
||||
display: none;
|
||||
}
|
||||
::v-deep .fc .fc-daygrid-day.fc-day-today{
|
||||
background-color: #7599E8;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<style lang="less">
|
||||
.tippy-content-box {
|
||||
background: #233062;
|
||||
color: #fff;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 4px #7599E8 inset;
|
||||
.text-index {
|
||||
font-size: 16px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tippy-content {
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,297 @@
|
||||
<!--会议信息统计-->
|
||||
<template>
|
||||
<div class="wp-full-box">
|
||||
<div class="box-title">会议信息统计</div>
|
||||
<div class="box-content">
|
||||
<div class="search-box">
|
||||
<div class="select-info-box">
|
||||
<div class="left-select">
|
||||
<span class="label">选择时间：</span>
|
||||
<j-year-date
|
||||
v-if="dimensionValue !== 'month'"
|
||||
format="YYYY"
|
||||
:allowClear="false"
|
||||
style="width:80px"
|
||||
placeholder="请选择年份"
|
||||
v-model="searchParams.year"
|
||||
@change="onYearChange"
|
||||
dropdown-class-name="ant-calendar-dropdown-screen"
|
||||
></j-year-date>
|
||||
|
||||
|
||||
<a-month-picker
|
||||
v-if="dimensionValue === 'month'"
|
||||
placeholder="请选择月份"
|
||||
format="YYYY-MM"
|
||||
value-format="YYYY-MM"
|
||||
style='width: 100px'
|
||||
:allowClear="false"
|
||||
dropdown-class-name="ant-calendar-dropdown-screen"
|
||||
v-model='searchParams.month'
|
||||
@change="onMonthChange" >
|
||||
</a-month-picker>
|
||||
<a-select
|
||||
v-if="dimensionValue === 'quarter'"
|
||||
class="right-select active"
|
||||
style='width: 120px'
|
||||
v-model="searchParams.quarter"
|
||||
placeholder="季度"
|
||||
:bordered="false"
|
||||
show-search
|
||||
@change="quarterSelectChange"
|
||||
dropdown-class-name="ant-select-screen"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(item, index) in quarterOptionData"
|
||||
:key="index"
|
||||
:value="item.text"
|
||||
>
|
||||
{{item.text}}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<!-- :bordered="false"-->
|
||||
<a-select
|
||||
class="right-select active"
|
||||
style='width: 80px'
|
||||
v-model="dimensionValue"
|
||||
placeholder="维度"
|
||||
|
||||
show-search
|
||||
@change="dimensionSelectChange"
|
||||
dropdown-class-name="ant-select-screen"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(item, index) in dimensionOptionData"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
>
|
||||
{{item.text}}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<div class="title-right-sub">
|
||||
<span>会议总数：</span>
|
||||
<span class="num">{{totalAll}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echarts-box " id="meetingInformationChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetMeetingInformationData } from '../../../screenApi/api'
|
||||
import { createBarChart } from '../util/BarOptions'
|
||||
import JYearDate from '../../../components/jero/JYearDate'
|
||||
|
||||
export default {
|
||||
name: 'MeetingInformationChart',
|
||||
components: {
|
||||
JYearDate
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
totalAll: '', // 会议总数
|
||||
dimensionValue: 'year', // 查询维度 默认是’year‘
|
||||
// 维度查询的下拉框数据
|
||||
dimensionOptionData: [
|
||||
{text: '年', value: 'year'},
|
||||
{text: '季度', value: 'quarter'},
|
||||
{text: '月', value: 'month'},
|
||||
],
|
||||
quarterOptionData: [
|
||||
{text: '第一季度', value: '1'},
|
||||
{text: '第二季度', value: '2'},
|
||||
{text: '第三季度', value: '3'},
|
||||
{text: '第四季度', value: '4'},
|
||||
],
|
||||
// 查询条件
|
||||
searchParams:{},
|
||||
currentDateObj: {
|
||||
year: '',
|
||||
month: '',
|
||||
quarter: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCurrentData() {
|
||||
// 获取当前年份、月份和季度
|
||||
let data = new Date()
|
||||
let year = data.getFullYear()
|
||||
let month = data.getMonth() + 1
|
||||
this.currentDateObj.year = year
|
||||
this.currentDateObj.month = month
|
||||
switch (true) {
|
||||
case (month < 4) :
|
||||
this.currentDateObj.quarter = '第一季度'
|
||||
break
|
||||
case (month < 7) :
|
||||
this.currentDateObj.quarter = '第二季度'
|
||||
break
|
||||
case (month < 10) :
|
||||
this.currentDateObj.quarter = '第三季度'
|
||||
break
|
||||
case (month <= 12) :
|
||||
this.currentDateObj.quarter = '第四季度'
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
dimensionSelectChange() {
|
||||
if(this.dimensionValue === 'year') {
|
||||
this.searchParams.year = this.currentDateObj.year + ''
|
||||
} else if(this.dimensionValue === 'month') {
|
||||
this.searchParams.month = `${this.currentDateObj.year}-${this.currentDateObj.month}`
|
||||
} else if(this.dimensionValue === 'quarter') {
|
||||
this.searchParams.year = this.currentDateObj.year + ''
|
||||
this.searchParams.quarter = this.currentDateObj.quarter
|
||||
}
|
||||
this.getData()
|
||||
},
|
||||
onYearChange() {
|
||||
this.getData()
|
||||
},
|
||||
onMonthChange() {
|
||||
this.getData()
|
||||
},
|
||||
quarterSelectChange() {
|
||||
this.getData()
|
||||
},
|
||||
// 获取查询参数
|
||||
getQueryParams() {
|
||||
let params = {
|
||||
flag: this.dimensionValue,
|
||||
}
|
||||
if(this.dimensionValue === 'year') {
|
||||
params.createTime = this.searchParams.year
|
||||
} else if(this.dimensionValue === 'month') {
|
||||
params.createTime = this.searchParams.month
|
||||
} else if(this.dimensionValue === 'quarter') {
|
||||
params.createTime = this.searchParams.quarter
|
||||
params.year = this.searchParams.year
|
||||
}
|
||||
return params
|
||||
},
|
||||
getData() {
|
||||
let params = this.getQueryParams()
|
||||
GetMeetingInformationData(params).then(res => {
|
||||
if(res.success) {
|
||||
let data = res.result || {}
|
||||
this.totalAll = data.total
|
||||
this.$nextTick(() => {
|
||||
this.initChart(data)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 初始化图表
|
||||
* @param data = {leftData: X轴数据 resultMapList：[] 柱状图数据}
|
||||
*/
|
||||
initChart(data) {
|
||||
let xData = data.leftData
|
||||
let echartsData = data.resultMapList[0].count
|
||||
let option = {
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
left: '0',
|
||||
right: '0',
|
||||
},
|
||||
tooltip: {
|
||||
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 += `<div>
|
||||
<div style="margin: 0 8px;">
|
||||
<span style="display:inline-block;margin-right:5px;width:15px;height:10px;background-color:${color};border-radius: 3px"></span>
|
||||
<span style="color:#7599E8">${item.name}</span>
|
||||
<span style="color:#7599E8;">${item.value}</span>
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
return dataStr
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
data: xData
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '数量',
|
||||
type: 'bar',
|
||||
barMaxWidth:20,
|
||||
itemStyle:{
|
||||
borderRadius:[4,4,0,0],
|
||||
},
|
||||
data: echartsData
|
||||
}
|
||||
]
|
||||
}
|
||||
createBarChart('meetingInformationChart', option)
|
||||
|
||||
},
|
||||
// 初始化查询条件的数据
|
||||
initData() {
|
||||
this.dimensionValue = 'year'
|
||||
this.searchParams = {
|
||||
year: this.currentDateObj.year + ''
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getCurrentData()
|
||||
//初始化数据
|
||||
this.initData()
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@white: #fff;
|
||||
|
||||
.search-box{
|
||||
width: 70%;
|
||||
margin-left: 30%;
|
||||
}
|
||||
.select-info-box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.left-select > span:not(.label) {
|
||||
margin-right: 15px;
|
||||
color: @white;
|
||||
}
|
||||
.label{
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
.title-right-sub {
|
||||
text-align: right;
|
||||
margin-top: 5px;
|
||||
span {
|
||||
font-size: 16px;
|
||||
color: @white;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
span.num {
|
||||
font-size: 20px;
|
||||
color: #6CFBCE;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,131 @@
|
||||
<!--法规数量统计-->
|
||||
<template>
|
||||
<div class="wp-full-box wp-half-box">
|
||||
<div class="box-title">法规数量统计</div>
|
||||
<div class="box-content">
|
||||
<div class="title-right">
|
||||
<span>法规总数：</span>
|
||||
<span class="num">{{totalAll}}</span>
|
||||
</div>
|
||||
<div class="echarts-box" id="regulationQuantityChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetRegulationQuantityData } from '../../../screenApi/api'
|
||||
import { createBarChart } from '../util/BarOptions'
|
||||
|
||||
export default {
|
||||
name: 'RegulationQuantityChart',
|
||||
data() {
|
||||
return {
|
||||
totalAll: '' // 法规总数
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
GetRegulationQuantityData().then(res => {
|
||||
if(res.success) {
|
||||
let data = res.result.data || []
|
||||
this.initData(data)
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param arr --data（数据）, name（类名）, totalAll(数据和), xaxis（x轴字段）
|
||||
*/
|
||||
initData(arr) {
|
||||
this.totalAll = arr[0].totalAll
|
||||
this.xAxisData = arr[0].xaxis
|
||||
this.yData = []
|
||||
this.legendData = []
|
||||
arr.map(tt => {
|
||||
this.yData.push(tt.data || [])
|
||||
this.legendData.push(tt.name)
|
||||
})
|
||||
},
|
||||
// 初始化图表
|
||||
initChart() {
|
||||
let option = {
|
||||
grid: {
|
||||
left: '0',
|
||||
right: '0',
|
||||
},
|
||||
legend: {
|
||||
right: 0
|
||||
},
|
||||
tooltip: {
|
||||
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 += `<div>
|
||||
<div style="margin: 0 8px;">
|
||||
<span style="display:inline-block;margin-right:5px;width:15px;height:10px;background-color:${color};border-radius: 3px"></span>
|
||||
<span style="color:#7599E8">${item.seriesName}</span>
|
||||
<span style="color:#7599E8;">${item.value}</span>
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
return dataStr
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
data: this.xAxisData
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: this.legendData[0],
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barMaxWidth:20,
|
||||
itemStyle:{
|
||||
borderRadius:[0,0,0,0],
|
||||
},
|
||||
data: this.yData[0]
|
||||
},
|
||||
{
|
||||
name: this.legendData[1],
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barMaxWidth:20,
|
||||
itemStyle:{
|
||||
borderRadius:[0,0,0,0],
|
||||
},
|
||||
data: this.yData[1]
|
||||
},
|
||||
{
|
||||
name: this.legendData[2],
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barMaxWidth:20,
|
||||
itemStyle:{
|
||||
borderRadius:[4,4,0,0],
|
||||
},
|
||||
data: this.yData[2]
|
||||
},
|
||||
]
|
||||
}
|
||||
createBarChart('regulationQuantityChart', option)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div class="screen-wp">
|
||||
<!-- 法规数量统计-->
|
||||
<regulation-quantity-chart></regulation-quantity-chart>
|
||||
<!-- 专家数量统计-->
|
||||
<expert-quantity-chart></expert-quantity-chart>
|
||||
<!-- 会议信息日历-->
|
||||
<meeting-calendar></meeting-calendar>
|
||||
<!-- 会议信息统计-->
|
||||
<meeting-information-chart></meeting-information-chart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//法规数量统计 RegulationQuantityChart
|
||||
import RegulationQuantityChart from './RegulationQuantityChart'
|
||||
//专家数量统计 ExpertQuantityChart
|
||||
import ExpertQuantityChart from './ExpertQuantityChart'
|
||||
//会议信息日历 MeetingCalendar
|
||||
import MeetingCalendar from './MeetingCalendar'
|
||||
//会议信息统计 MeetingInformationChart
|
||||
import MeetingInformationChart from './MeetingInformationChart'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'index',
|
||||
components: {
|
||||
// 法规数量统计
|
||||
RegulationQuantityChart,
|
||||
// 专家数量统计
|
||||
ExpertQuantityChart,
|
||||
// // 会议信息日历
|
||||
MeetingCalendar,
|
||||
// 会议信息统计
|
||||
MeetingInformationChart
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.screen-wp{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
// 全屏box-有表格 1875 * 587
|
||||
.wp-full-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-top: 31.31%;
|
||||
background-image: url("../../../assets/screen/full_no_table_bg.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
/deep/ .box-title {
|
||||
font-size: 18px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #DDF0FF;
|
||||
position: absolute;
|
||||
// 34.5 / 高度 587
|
||||
top: 5.88%;
|
||||
left: 13.70%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/deep/ .box-content {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2.3% 4%;
|
||||
//padding: 4.61% 4%;
|
||||
.echarts-box {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 50%的box 536 * 931
|
||||
/deep/.wp-half-box{
|
||||
width: 50%;
|
||||
height: 0;
|
||||
padding-top: 28.79%;
|
||||
background-image: url("../../../assets/screen/half_bg.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.box-title {
|
||||
// (25 + 18 / 2) / 635
|
||||
top: 6.34%;
|
||||
// (171 + 149 / 2) / 931
|
||||
left: 26.37%;
|
||||
}
|
||||
.box-content {
|
||||
padding: 4.61% 6%;
|
||||
}
|
||||
}
|
||||
|
||||
@normal-color: rgba(256, 256, 256, 0.5);
|
||||
@white: #fff;
|
||||
// 半屏 标题右侧的样式
|
||||
/deep/.title-right{
|
||||
width: 50%;
|
||||
margin-left: 50%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
span {
|
||||
font-size: 16px;
|
||||
color: @white;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
span.num {
|
||||
font-size: 20px;
|
||||
color: #6CFBCE;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//下拉框样式的修改
|
||||
/deep/.ant-select-selection{
|
||||
border: none!important;
|
||||
background: transparent;
|
||||
color: @normal-color;
|
||||
}
|
||||
/deep/.ant-select.active .ant-select-selection{
|
||||
color: @white!important;
|
||||
}
|
||||
|
||||
/deep/.ant-select-focused .ant-select-selection, .ant-select-selection:focus, .ant-select-selection:active{
|
||||
border: none!important;
|
||||
box-shadow: none;
|
||||
}
|
||||
/deep/.ant-select-arrow{
|
||||
color: @white;
|
||||
}
|
||||
|
||||
// 时间选择器的样式
|
||||
/deep/.ant-calendar-picker,
|
||||
/deep/.ant-calendar-picker-input.ant-input,
|
||||
/deep/ .ant-calendar-picker-icon{
|
||||
border: none!important;
|
||||
background: transparent;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<style lang="less">
|
||||
@normal-color: rgba(256, 256, 256, 0.2);
|
||||
.ant-calendar-dropdown-screen{
|
||||
.ant-calendar{
|
||||
border: none;
|
||||
box-shadow: 0 0 4px #7599E8 inset;
|
||||
}
|
||||
.ant-calendar-month-panel-body,
|
||||
.ant-calendar-month-panel-header,
|
||||
.ant-calendar-year-panel-body,
|
||||
.ant-calendar-year-panel-header
|
||||
{
|
||||
background-color: #181F55;
|
||||
border: none!important;
|
||||
color: #fff;
|
||||
}
|
||||
td a,
|
||||
.ant-calendar-month-panel-year-select-content,
|
||||
.ant-calendar-year-panel-decade-select
|
||||
{
|
||||
color: #fff;
|
||||
}
|
||||
.ant-calendar-month-panel-prev-year-btn::after,
|
||||
.ant-calendar-month-panel-prev-year-btn::before,
|
||||
.ant-calendar-month-panel-next-year-btn::before,
|
||||
.ant-calendar-month-panel-next-year-btn::after
|
||||
{
|
||||
border-color: #fff;
|
||||
}
|
||||
// 选中的效果
|
||||
.ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month,
|
||||
.ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year{
|
||||
background-color: #4364C2;
|
||||
}
|
||||
|
||||
.ant-calendar-header a:hover{
|
||||
color: #fff;
|
||||
background-color: #7599E8;
|
||||
//&::after,
|
||||
//&::before{
|
||||
// color: #fff;
|
||||
//}
|
||||
}
|
||||
|
||||
.ant-calendar-year-panel-last-decade-cell a,
|
||||
.ant-calendar-year-panel-next-decade-cell a
|
||||
{
|
||||
color: @normal-color;
|
||||
}
|
||||
// 年份选择器上面的输入框
|
||||
.ant-calendar-input-wrap{
|
||||
background-color: #181F55;
|
||||
border-color: @normal-color;
|
||||
input{
|
||||
background-color: #181F55;
|
||||
border: none!important;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user