【update】-细节的调整2

This commit is contained in:
fengchenchen
2022-12-07 23:47:55 +08:00
parent b864408237
commit af169d5e98
12 changed files with 167 additions and 69 deletions
+4 -4
View File
@@ -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>
+18 -9
View File
@@ -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) // 行业标准
+21 -18
View File
@@ -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
+54 -2
View File
@@ -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]
},
+33 -22
View File
@@ -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>