【update】-细节的调整2
This commit is contained in:
@@ -217,14 +217,14 @@ export default {
|
||||
}
|
||||
|
||||
::v-deep ::-webkit-scrollbar-track{
|
||||
background: yellow;
|
||||
//border-color: transparent;
|
||||
//background: yellow;
|
||||
////border-color: transparent;
|
||||
}
|
||||
::v-deep ::-webkit-scrollbar-thumb{
|
||||
background: red;
|
||||
//background: red;
|
||||
}
|
||||
::v-deep ::-webkit-scrollbar-corner {
|
||||
background: black;
|
||||
//background: black;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -153,6 +153,7 @@ export default {
|
||||
font-weight: bold;
|
||||
background: transparent;
|
||||
border: none;
|
||||
text-shadow: 0 0 5px #88D8FB;
|
||||
}
|
||||
|
||||
/deep/ .ant-table-tbody tr > td {
|
||||
@@ -164,6 +165,7 @@ export default {
|
||||
/deep/ .ant-table-tbody tr > td:first-child {
|
||||
color: #FFFFFF;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 5px #88D8FB;
|
||||
}
|
||||
|
||||
/deep/ .ant-table-tbody tr:nth-of-type(2n + 1) {
|
||||
|
||||
@@ -294,5 +294,8 @@ export default {
|
||||
overflow-x: auto!important;
|
||||
overflow-y: auto!important;
|
||||
}
|
||||
/deep/ .ant-table-header{
|
||||
overflow: auto!important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -229,6 +229,7 @@ div.calendar-box{
|
||||
color: @white;
|
||||
margin-left: 26px;
|
||||
margin-right: 26px;
|
||||
text-shadow: 0 0 5px #88D8FB;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
@@ -274,10 +275,25 @@ div.calendar-box{
|
||||
}
|
||||
/*日历组件的修改 */
|
||||
::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-theme-standard th{
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: rgba(86, 113, 231, 0.3);
|
||||
}
|
||||
|
||||
::v-deep .fc-theme-standard .fc-scrollgrid {
|
||||
border-top-color: transparent;
|
||||
border-left: none;
|
||||
}
|
||||
::v-deep .fc .fc-scrollgrid table.fc-scrollgrid-sync-table {
|
||||
border-left: 1px solid rgba(86, 113, 231, 0.3);
|
||||
}
|
||||
|
||||
::v-deep .fc-daygrid-day .fc-daygrid-day-number {
|
||||
font-weight: bold;
|
||||
color: @white;
|
||||
@@ -297,21 +313,14 @@ div.calendar-box{
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
color: @white;
|
||||
text-shadow: 0 0 5px #88D8FB;
|
||||
}
|
||||
|
||||
::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;
|
||||
|
||||
@@ -6,11 +6,12 @@
|
||||
<a-select
|
||||
class="active"
|
||||
v-model="selectValue"
|
||||
style="width: 70px"
|
||||
style="width: 90px"
|
||||
placeholder="各SC"
|
||||
:bordered="false"
|
||||
show-search
|
||||
:show-arrow="false"
|
||||
:show-arrow="true"
|
||||
allow-clear
|
||||
@change="selectChange"
|
||||
dropdown-class-name="ant-select-screen"
|
||||
>
|
||||
@@ -60,7 +61,7 @@ export default {
|
||||
let {result, success} = await GetShouldBeCompletedProjectData({year})
|
||||
if(success) {
|
||||
this.initSCData(result || [])
|
||||
this.selectValue = this.SCOptionData[0]
|
||||
this.selectValue = undefined
|
||||
}
|
||||
},
|
||||
getData() {
|
||||
@@ -87,11 +88,19 @@ export default {
|
||||
* */
|
||||
initData(arr) {
|
||||
this.yData = [[], [], []]
|
||||
arr.map(item => {
|
||||
this.yData[0].push(item['应报批总数'])
|
||||
this.yData[1].push(item['完成数'])
|
||||
this.yData[2].push(item['完成率数值'] === -1 ? undefined : item['完成率数值'])
|
||||
this.yearData.map(year => {
|
||||
let item = arr.find(a => (a.year + '') === (year.value + ''))
|
||||
if(item) {
|
||||
this.yData[0].push(item['应报批总数'])
|
||||
this.yData[1].push(item['完成数'])
|
||||
this.yData[2].push(item['完成率数值'] === -1 ? undefined : item['完成率数值'])
|
||||
}
|
||||
})
|
||||
// arr.map(item => {
|
||||
// this.yData[0].push(item['应报批总数'])
|
||||
// this.yData[1].push(item['完成数'])
|
||||
// this.yData[2].push(item['完成率数值'] === -1 ? undefined : item['完成率数值'])
|
||||
// })
|
||||
},
|
||||
// 初始化图表
|
||||
initChart() {
|
||||
|
||||
@@ -9,9 +9,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetEnterpriseContributionData } from "../../../screenApi/api";
|
||||
import { createBarChart } from "../util/BarOptions";
|
||||
import * as echarts from "echarts";
|
||||
import { GetEnterpriseContributionData } from '../../../screenApi/api'
|
||||
import { createBarChart } from '../util/BarOptions'
|
||||
|
||||
export default {
|
||||
name: 'EnterpriseContributionChart',
|
||||
|
||||
@@ -25,8 +25,16 @@ let commonOption = {
|
||||
color: ['#5671E7', '#73BBF4'],
|
||||
title: {
|
||||
show: true,
|
||||
color: '#FEFEFE',
|
||||
top: '20%'
|
||||
top: '20%',
|
||||
textStyle:{
|
||||
color: '#FEFEFE',
|
||||
fontSize: 16,
|
||||
fontFamily: 'PingFang SC',
|
||||
textShadowColor: '#88D8FB',
|
||||
textShadowBlur: 5,
|
||||
textShadowOffsetX: 0,
|
||||
textShadowOffsetY: 0
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
formatter: (param) => {
|
||||
@@ -142,6 +150,7 @@ export default {
|
||||
}
|
||||
]
|
||||
}
|
||||
console.log('-------deepMerge(commonOption, releaseChart0ption)-------', deepMerge(commonOption, releaseChart0ption))
|
||||
createPieChart('releaseChart', deepMerge(commonOption, releaseChart0ption))
|
||||
|
||||
let researchChart0ption = {
|
||||
|
||||
@@ -67,7 +67,8 @@ export default {
|
||||
global: false // 缺省为 false
|
||||
},
|
||||
'#69C4F3',
|
||||
'#6CFBCE'
|
||||
// '#6CFBCE'
|
||||
'rgba(108, 251, 206, 0.9)'
|
||||
],
|
||||
//
|
||||
xAxis: {
|
||||
|
||||
@@ -113,7 +113,7 @@ export default {
|
||||
this.yData = [[], []]
|
||||
this.yearData.map(year => {
|
||||
let item = arr.find(a => (a.year + '') === (year.value + ''))
|
||||
console.log(item, '11111111111')
|
||||
// console.log(item, '11111111111')
|
||||
if(item) {
|
||||
this.yData[0].push(item.gbNum) // 国家标准
|
||||
this.yData[1].push(item.hbNum) // 行业标准
|
||||
|
||||
@@ -191,7 +191,8 @@ export const BarAxisTransformOptions = {
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
},
|
||||
'#69C4F3'
|
||||
'rgba(105, 196, 243, 0.9)'
|
||||
// '#69C4F3'
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
@@ -228,11 +229,11 @@ export const BarAxisTransformOptions = {
|
||||
color: '#7599E8'
|
||||
},
|
||||
itemWidth: 14,
|
||||
right: '3%'
|
||||
right: '6%'
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
right: '6%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
@@ -252,27 +253,29 @@ export const BarAxisTransformOptions = {
|
||||
let newParamsName = '' // 最终拼接成的字符串
|
||||
let paramsNameNumber = params.length // 实际标签的个数
|
||||
let provideNumber = 10 // 每行能显示的字的个数
|
||||
let rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话,需要显示几行,向上取整
|
||||
// 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 // 最终拼成的字符串
|
||||
}
|
||||
// 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 // 最终拼成的字符串
|
||||
// }
|
||||
let tempStr = params.substring(0, provideNumber) + '...'
|
||||
newParamsName += tempStr
|
||||
} else {
|
||||
// 将旧标签的值赋给新标签
|
||||
newParamsName = params
|
||||
|
||||
@@ -13,7 +13,58 @@ export const PieOptions = {
|
||||
left: 'center',
|
||||
top: '10%'
|
||||
},
|
||||
color: ['#3E79ED', '#3A9EF2 ', '#2162C5', '#196CEB', '#234C9F'],
|
||||
color: [
|
||||
//径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变
|
||||
{
|
||||
type: 'radial',
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 2,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(62, 121, 237, 1)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: 'rgba(52, 121, 234, 1)' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
},
|
||||
{
|
||||
type: 'radial',
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 2,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(58, 158, 242, 1)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: 'rgba(108, 210, 254, 1)' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
},
|
||||
{
|
||||
type: 'radial',
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(33, 98, 197, 1)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: 'rgba(51, 168, 247, 1)' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
},
|
||||
{
|
||||
type: 'radial',
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 2,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(25, 108, 235, 1)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: 'rgba(6, 131, 247, 1)' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
},
|
||||
'rgba(35, 76, 159, 1)',
|
||||
],
|
||||
// let color = ['#3479EA', '#6CD2FE ', '#33A8F7', '#0683F7', '#234C9F']
|
||||
tooltip: {
|
||||
show: true,
|
||||
@@ -56,7 +107,8 @@ export const PieOptions = {
|
||||
type: 'pie',
|
||||
radius: ['20%', '60%'],
|
||||
center: ['50%', '50%'],
|
||||
roseType: 'area',
|
||||
roseType: 'area', // 南丁格尔图,所有扇区圆心角相同,仅通过半径展现数据大小。
|
||||
// roseType: 'radius', // 南丁格尔图,扇区圆心角展现数据的百分比,半径展现数据的大小。
|
||||
itemStyle: {
|
||||
borderRadius: [0, 0, 5, 5]
|
||||
},
|
||||
|
||||
@@ -237,6 +237,7 @@ div.calendar-box{
|
||||
color: @white;
|
||||
margin-left: 26px;
|
||||
margin-right: 26px;
|
||||
text-shadow: 0 0 5px #88D8FB;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
@@ -282,10 +283,25 @@ div.calendar-box{
|
||||
}
|
||||
/*日历组件的修改 */
|
||||
::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-theme-standard th{
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: rgba(86, 113, 231, 0.3);
|
||||
}
|
||||
|
||||
::v-deep .fc-theme-standard .fc-scrollgrid {
|
||||
border-top-color: transparent;
|
||||
border-left: none;
|
||||
}
|
||||
::v-deep .fc .fc-scrollgrid table.fc-scrollgrid-sync-table {
|
||||
border-left: 1px solid rgba(86, 113, 231, 0.3);
|
||||
}
|
||||
|
||||
::v-deep .fc-daygrid-day .fc-daygrid-day-number {
|
||||
font-weight: bold;
|
||||
color: @white;
|
||||
@@ -305,21 +321,14 @@ div.calendar-box{
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
color: @white;
|
||||
text-shadow: 0 0 5px #88D8FB;
|
||||
}
|
||||
|
||||
::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;
|
||||
@@ -328,9 +337,11 @@ div.calendar-box{
|
||||
::v-deep .fc-toolbar-chunk .fc-button-primary {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::v-deep .fc .fc-daygrid-day.fc-day-today{
|
||||
background-color: #7599E8;
|
||||
}
|
||||
|
||||
::v-deep .fc-event-title{
|
||||
font-weight: 800!important;
|
||||
}
|
||||
@@ -344,20 +355,20 @@ div.calendar-box{
|
||||
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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.tippy-content {
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user