suzhou-jichuang-lanhai
/
jin_ji_hu
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

生产环境工作台样式+1

Browse Source
lijinlong
吕天方 5 months ago
parent 8586c7b41d
commit dad0034760
6 changed files with 233 additions and 37 deletions
Show Stats Download Patch File Download Diff File

2
package.json
Unescape View File

@ -1,6 +1,6 @@
{ {
"name": "ruoyi", "name": "ruoyi",
"version": "1.0.202408291841", "version": "1.0.202408300856",
"description": "金鸡湖现代服务业品牌管理系统", "description": "金鸡湖现代服务业品牌管理系统",
"author": "若依", "author": "若依",
"license": "MIT", "license": "MIT",

137
src/assets/styles/publicPro.scss
Unescape View File

@ -263,6 +263,8 @@
.service-left { .service-left {
padding: 10px; padding: 10px;
display: flex;
flex-direction: column;
.home-mainPro-top, .home-mainPro-top,
.home-mainPro-middle, .home-mainPro-middle,
@ -289,7 +291,8 @@
.home-mainPro-top { .home-mainPro-top {
height: 35%; // height: 32%;
height: 250px;
.home-mainPro-top-box { .home-mainPro-top-box {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -304,14 +307,14 @@
height: 100%; height: 100%;
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-gap: 15px; grid-gap: 10px;
padding-top: 10px; padding-top: 10px;
.AFuwufazhanzonglan-listbox { .AFuwufazhanzonglan-listbox {
width: 100%; width: 100%;
background: #FFFFFF; background: #FFFFFF;
border-radius: 10px; border-radius: 10px;
// margin: 2% 0; // margin: 2% 0;
padding: 5px 5px; // padding: 5px 5px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -409,14 +412,120 @@
} }
} }
//近三年 //近三年资金拨付情况
.BJinsannianzijin-box { .BJinsannianzijin-box {
width: 100%; width: 100%;
height: calc(100% - 25px);
.BJinsannianzijin { .BJinsannianzijin {
width: 100%; width: 100%;
.BJinsannianzijinchart-left{ height: 100%;
padding-top: 10px;
display: flex;
.echart_boxs {
width: 50%; width: 50%;
height: 25vh; height: 100%;
// display: grid;
// grid-template-columns: 1fr;
// grid-gap: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
.echart_boxs_top {
.echart_boxs_title {
text-align: center;
font-family: PingFang-SC;
font-weight: bold;
font-size: 14px;
color: #666666;
margin-bottom: 5px;
}
.echart_boxs_btn {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 25px;
span {
padding: 3px 10px;
border: 1px solid #ccc;
background-color: #fff;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
font-family: ArialB;
font-weight: normal;
font-size: 14px;
color: #999999;
cursor: pointer;
}
.changeFuwuyeYear_span {
background: #0086FF;
color: #FEFEFE;
border: 1px solid #0086FF;
}
}
}
.echart_boxs_middle {
width: 100%;
height: calc(100% - 94px);
// flex: 1;
margin: 10px 0;
display: flex;
.BJinsannianzijinchart-left, .zongbuzhuanxing-box{
width: 75%;
height: 100%;
}
.BJinsannianzijinchart-right {
padding: 5px 0;
display: flex;
flex-direction: column;
justify-content: center;
.yushuan {
span {
font-family: PingFang-SC;
font-weight: bold;
font-size: 12px;
color: #666666;
}
.number-box {
font-family: DINCondensed;
font-weight: bold;
font-size: 28px;
color: #00AEFF;
line-height: 25px;
.number-unit-box {
font-family: PingFang-SC;
font-weight: bold;
font-size: 12px;
color: #666666;
line-height: 25px;
}
}
.bottom_number {
color: #FFA42B ;
}
}
}
}
.echart_boxs_bottom {
text-align: center;
font-family: PingFang-SC;
font-weight: bold;
font-size: 14px;
color: #666666;
// margin-top: 10px;
span {
font-family: DINCondensed;
font-size: 20px;
color: #333;
}
}
}
.echart_boxs_right {
margin-right: 0px;
} }
} }
} }
@ -424,7 +533,8 @@
.home-mainPro-middle { .home-mainPro-middle {
margin: 10px 0; margin: 10px 0;
height: 40%; // height: 45%;
flex: 2;
// 企业获得资金拨付排名TOP5 // 企业获得资金拨付排名TOP5
.capitalConditionTOP5-box,.wancheng-project { .capitalConditionTOP5-box,.wancheng-project {
flex: 1; flex: 1;
@ -494,7 +604,8 @@
} }
.home-mainPro-bottom { .home-mainPro-bottom {
height: 22.5%; // height: 25.5%;
flex: 1.3;
.wancheng-project { .wancheng-project {
flex: 1; flex: 1;
section { section {
@ -509,6 +620,16 @@
cursor: pointer; cursor: pointer;
} }
.orange {
color: #ff8929;
}
.green {
color: #5cbc69;
}
.red {
color: #ff6349;
}
.project-trace-table { .project-trace-table {
width: 11em; width: 11em;
overflow: hidden; overflow: hidden;

108
src/views/workbenchPro/components/BJinsannianzijin/index.vue
Unescape View File

@ -1,17 +1,60 @@
<template> <template>
<div class="BJinsannianzijin"> <div class="BJinsannianzijin">
<div class="BJinsannianzijinchart-left" id="BJinsannianzijinchart-left"></div> <div class="echart_boxs">
<div class="echart_boxs_top">
<div class="echart_boxs_title">【服务业专项资金】</div>
<div class="echart_boxs_btn">
<span v-for="item,index in fuwuyeYear" :class="changeFuwuyeYear == index ? 'changeFuwuyeYear_span': ''" @click="changeFuwuyeYear = index">{{ item.year }}</span>
</div>
</div>
<div class="echart_boxs_middle">
<div class="BJinsannianzijinchart-left" id="BJinsannianzijinchart-left"></div>
<div class="BJinsannianzijinchart-right">
<div class="yushuan">
<span>资金预算</span>
<div class="number-box">60 <span class="number-unit-box">万元</span></div>
</div>
<div class="yushuan">
<span>追加预算</span>
<div class="bottom_number number-box">40 <span class="number-unit-box">万元</span></div>
</div>
</div>
</div>
<div class="echart_boxs_bottom">拨付资金 <span>80</span>万元 (执行率 <span>80</span>% )</div>
</div>
<div class="echart_boxs echart_boxs_right">
<div class="echart_boxs_top">
<div class="echart_boxs_title">【总部专项资金】</div>
<div class="echart_boxs_btn">
<span v-for="item,index in fuwuyeYear" :class="changeFuwuyeYear == index ? 'changeFuwuyeYear_span': ''" @click="changeFuwuyeYear = index">{{ item.year }}</span>
</div>
</div>
<div class="echart_boxs_middle">
<div class="zongbuzhuanxing-box" id="zongbuzhuanxing-box"></div>
<div class="BJinsannianzijinchart-right">
<div class="yushuan">
<span>资金预算</span>
<div class="number-box">60 <span class="number-unit-box">万元</span></div>
</div>
<div class="yushuan">
<span>追加预算</span>
<div class="bottom_number number-box">40 <span class="number-unit-box">万元</span></div>
</div>
</div>
</div>
<div class="echart_boxs_bottom">拨付资金 <span>80</span>万元 (执行率 <span>80</span>% )</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import * as echarts from 'echarts' import * as echarts from 'echarts'
import resize from './mixins/resize' // import resize from './mixins/resize'
const animationDuration = 6000 const animationDuration = 6000
export default { export default {
mixins: [resize], // mixins: [resize],
props: { props: {
className: { className: {
type: String, type: String,
@ -27,25 +70,46 @@ export default {
} }
}, },
data() { data() {
let date = new Date();
const currentYear = date.getFullYear();
return { return {
chart: null chart: null,
chartTwo:null,
changeFuwuyeYear: 0,
fuwuyeYear:[
{
year: currentYear - 1,
},{
year: currentYear - 2,
},{
year: currentYear - 3,
},
]
} }
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.initChart() this.initChart()
window.addEventListener('resize', this.cancalDebounce);
}) })
}, },
beforeDestroy() { beforeDestroy() {
if (!this.chart) { // if (!this.chart) {
return // return
} // }
this.chart.dispose() // this.chart.dispose()
this.chart = null // this.chart = null
window.removeEventListener('resize', this.cancalDebounce);
}, },
methods: { methods: {
cancalDebounce(){
console.log("11111");
window.onresize = this.chart.resize();
window.onresize = this.chartTwo.resize();
},
initChart() { initChart() {
this.chart = echarts.init(document.getElementById('BJinsannianzijinchart-left')) this.chart = echarts.init(document.getElementById('BJinsannianzijinchart-left'))
this.chartTwo = echarts.init(document.getElementById('zongbuzhuanxing-box'))
var value1 = Math.random() * 100; // 生成第一个随机值 var value1 = Math.random() * 100; // 生成第一个随机值
var value2 = 300 - value1; // 第二个随机值，保证总和为100 var value2 = 300 - value1; // 第二个随机值，保证总和为100
@ -58,32 +122,31 @@ export default {
{ {
type: 'gauge', type: 'gauge',
splitNumber: 3, splitNumber: 3,
radius: '93%', radius: 70,
center: ["50%", "70%"], center: ["45%", "95%"],
startAngle: 180, startAngle: 180,
endAngle: 0, endAngle: 0,
min: 0, min: 0,
max: 100, max: 100,
pointer: { pointer: {
show: true, show: true,
width: 7, icon:"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAVpJREFUWEftlr1KxEAURu9NsBLRDGJh7bqbpBJx3yCJ4KJgp4WFINjaCFZaCoIvIdrZKZhEn8AtFiFZ/AHBwkbMaiGuRXIlnUqWTMbVFZkp5975vsOpBuGb58Uqj/b7l/eiMSj6MH0XWcYqAlQ1P1wWzREGeJgtDyht9QYBRlQFpwdPAlcEQhigZeu7BLiWliJQXfOaU78G8GRXJhNQ6p8LaZ15zZ2iEEIGIsc8AqKZj2UI8EYJjLPT8K4IRGGAyDEXgWg/s4Rwj/nB0s8C2MY1AIx1LEGqMbd5zAtRyMCjbWwhwGZOeIN54UTXAZ4tvRQjXnEGbzAv3ObZ5TYQOfoBEC7whAJQrEBfaci7uM3b5wKI7EoNUZ3LCNPSOyJsI9Lr17nmBitdAegUEtkGpbMkxurwWXCeV5Y15zLwZwFajnlIRPM9MyABpAFpQBqQBqQBaaDnBv7Fj+gdzkcMMPGkRt0AAAAASUVORK5CYII=",
length: "60%", width: 20,
borderColor: '#000', length: "80%",
borderWidth: '10',
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
width: 35, width: 10,
color: [ color: [
[0.5, '#7BB2FF'], // 第一个颜色 [0.6, '#00AEFF'], // 第一个颜色
[0.6, '#000'], [0.63, '#F5F8FA'],
[1, '#4186FF'] // 第二个颜色 [1, '#FFA42B '] // 第二个颜色
], ],
}, },
}, },
axisLabel: { axisLabel: {
show: true, show: false,
color: "#666", color: "#666",
fontSize: 16, fontSize: 16,
formatter: function (value) { formatter: function (value) {
@ -109,7 +172,7 @@ export default {
}, },
data: [ data: [
{ {
value: value1, value: 61.5,
name: '决策层国际化导向' name: '决策层国际化导向'
} }
], ],
@ -121,6 +184,9 @@ export default {
this.chart.setOption( this.chart.setOption(
option option
) )
this.chartTwo.setOption(
option
)
} }
} }
} }

3
src/views/workbenchPro/components/BJinsannianzijin/mixins/resize.js
Unescape View File

@ -49,8 +49,9 @@ export default {
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler) this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
}, },
resize() { resize() {
const { chart } = this const { chart, chartTwo } = this
chart && chart.resize() chart && chart.resize()
chartTwo && chartTwo.resize()
} }
} }
} }

2
src/views/workbenchPro/components/capitalConditionTOP5/index.vue
Unescape View File

@ -43,7 +43,7 @@ export default {
props:{ props:{
typeValue:{ typeValue:{
type:Number, type:Number,
default:1, default:2,
}, },
yearsValue:{ yearsValue:{
type:Number, type:Number,

18
src/views/workbenchPro/index.vue
Unescape View File

@ -52,7 +52,7 @@
<span class="garden"></span> <span class="garden"></span>
<span class="box-header-title">企业获得资金拨付排名TOP5</span> <span class="box-header-title">企业获得资金拨付排名TOP5</span>
<div class="left-box-select"> <div class="left-box-select">
<el-select v-model="yearsChange" class="years-select" placeholder="请选择"> <!-- <el-select v-model="yearsChange" class="years-select" placeholder="请选择">
<el-option <el-option
label="当年" label="当年"
:value="1"> :value="1">
@ -61,8 +61,16 @@
label="近三年" label="近三年"
:value="2"> :value="2">
</el-option> </el-option>
</el-select> </el-select> -->
<el-select v-model="typeValue" placeholder="请选择"> <el-radio-group v-model="yearsChange" class="years-select" size="small" fill="#1890FF">
<el-radio-button :label="1">当年</el-radio-button>
<el-radio-button :label="2">近三年</el-radio-button>
</el-radio-group>
<el-radio-group v-model="typeValue" size="small" fill="#1890FF">
<el-radio-button :label="2">服务业专项</el-radio-button>
<el-radio-button :label="1">总部专项</el-radio-button>
</el-radio-group>
<!-- <el-select v-model="typeValue" placeholder="请选择">
<el-option <el-option
label="总部专项" label="总部专项"
:value="1"> :value="1">
@ -71,7 +79,7 @@
label="服务业专项" label="服务业专项"
:value="2"> :value="2">
</el-option> </el-option>
</el-select> </el-select> -->
</div> </div>
</div> </div>
<div class="capitalConditionTOP5-box"> <div class="capitalConditionTOP5-box">
@ -338,7 +346,7 @@ export default {
info:{}, info:{},
time:"", time:"",
yearsChange: 1, yearsChange: 1,
typeValue: 1, typeValue: 2,
tableData:[], tableData:[],
tabHeader:null, tabHeader:null,
tableDataTWo:[], tableDataTWo:[],

Write Preview
Loading…
Cancel
Save