feat:汽车覆盖件工业视觉检测平台项目 登录页 重庆市工程管理有限公司数字化提升项目 首页
This commit is contained in:
parent
3197a7b11a
commit
f1954ce830
BIN
god-ui/public/images/qiche.png
Normal file
BIN
god-ui/public/images/qiche.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 717 KiB |
@ -128,6 +128,11 @@ export default {
|
|||||||
this.title = '扎线设备智慧运维平台项目'
|
this.title = '扎线设备智慧运维平台项目'
|
||||||
document.title = '扎线设备智慧运维平台项目'
|
document.title = '扎线设备智慧运维平台项目'
|
||||||
break;
|
break;
|
||||||
|
case '9401':
|
||||||
|
// 汽车覆盖件工业视觉检测平台项目
|
||||||
|
this.title = '汽车覆盖件工业视觉检测平台'
|
||||||
|
document.title = '汽车覆盖件工业视觉检测平台'
|
||||||
|
break;
|
||||||
default:
|
default:
|
||||||
|
|
||||||
this.title = ' '
|
this.title = ' '
|
||||||
|
|||||||
@ -18,6 +18,7 @@
|
|||||||
<cqycsj-manage v-else-if="port === '9370'" />
|
<cqycsj-manage v-else-if="port === '9370'" />
|
||||||
<agricultural v-else-if="port === '9380'" />
|
<agricultural v-else-if="port === '9380'" />
|
||||||
<integration v-else-if="port === '9390'" />
|
<integration v-else-if="port === '9390'" />
|
||||||
|
<information v-else-if="port === '9401'" />
|
||||||
<operate-home v-else-if="port === '80' || port === ''"></operate-home>
|
<operate-home v-else-if="port === '80' || port === ''"></operate-home>
|
||||||
<home-page v-else></home-page>
|
<home-page v-else></home-page>
|
||||||
</div>
|
</div>
|
||||||
@ -42,6 +43,7 @@ import wisdom from './zhgdExternalInterface/home/index'
|
|||||||
import cqycsjManage from './cqycsjManage/home/index.vue'
|
import cqycsjManage from './cqycsjManage/home/index.vue'
|
||||||
import agricultural from './machinery/home2/index.vue'
|
import agricultural from './machinery/home2/index.vue'
|
||||||
import integration from './integration/index.vue'
|
import integration from './integration/index.vue'
|
||||||
|
import information from './informationManagement/home/index'
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
HomePage,
|
HomePage,
|
||||||
@ -62,7 +64,8 @@ export default {
|
|||||||
wisdom,
|
wisdom,
|
||||||
cqycsjManage,
|
cqycsjManage,
|
||||||
agricultural,
|
agricultural,
|
||||||
integration
|
integration,
|
||||||
|
information
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|||||||
426
god-ui/src/views/informationManagement/home/index.vue
Normal file
426
god-ui/src/views/informationManagement/home/index.vue
Normal file
@ -0,0 +1,426 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<!-- 顶部 -->
|
||||||
|
<div class="top">
|
||||||
|
<div v-for="(item, index) in topList" class="top-item" :key="index">
|
||||||
|
<div>{{ item.title }}</div>
|
||||||
|
<div style="font-family: TITLEFONT">{{ item.val }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 合同类型占比类型 -->
|
||||||
|
<div class="contract">
|
||||||
|
<div class="left">
|
||||||
|
<div class="box-title">合同类型占比类型</div>
|
||||||
|
<div id="chart1"></div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="box-title">合同执行情况分布</div>
|
||||||
|
<div id="chart2"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 月度应收统计 -->
|
||||||
|
<div class="statistics">
|
||||||
|
<div class="left">
|
||||||
|
<div class="box-title">阅读应收统计</div>
|
||||||
|
<div id="chart3"></div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="box-title">月度付款统计</div>
|
||||||
|
<div id="chart4"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
generateBaseOptions,
|
||||||
|
generatePieOptions,
|
||||||
|
initChartStatic,
|
||||||
|
} from "@/utils/bigscreenTool/index.js";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
topList: [
|
||||||
|
{
|
||||||
|
title: "设备总数",
|
||||||
|
val: "100",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "收入合同金额",
|
||||||
|
val: "100",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "支出合同金额",
|
||||||
|
val: "100",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "收款金额",
|
||||||
|
val: "100",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "付款金额",
|
||||||
|
val: "100",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initChart1()
|
||||||
|
this.initChart2()
|
||||||
|
this.initChart3()
|
||||||
|
this.initChart4()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initChart1() {
|
||||||
|
initChartStatic(
|
||||||
|
"chart1",
|
||||||
|
generatePieOptions({
|
||||||
|
legend: {
|
||||||
|
// 图例配置
|
||||||
|
show:true,
|
||||||
|
left:'right',
|
||||||
|
textStyle: {
|
||||||
|
color: "#252525",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
color: ["#00b1cb", "#fbaf40", "#bed446", "#2e647f", "#fe7b00","#bd1d2c","#5aadf2"],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "合同类型占比",
|
||||||
|
type: "pie",
|
||||||
|
radius:'70%',
|
||||||
|
center:'center',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: "项目管理",
|
||||||
|
value: 26,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "BIM",
|
||||||
|
value: 10,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "全过程",
|
||||||
|
value: 4,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "设计",
|
||||||
|
value: 4,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "造价",
|
||||||
|
value: 17,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "监理",
|
||||||
|
value: 15,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "咨询",
|
||||||
|
value: 24,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
label: {
|
||||||
|
formatter: "{b|{b}},{c|{c}%} ",
|
||||||
|
rich: {
|
||||||
|
c: {
|
||||||
|
color: "#252525",
|
||||||
|
fontSize: 12,
|
||||||
|
lineHeight: 33,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
);
|
||||||
|
},
|
||||||
|
initChart2() {
|
||||||
|
initChartStatic(
|
||||||
|
"chart2",
|
||||||
|
generatePieOptions({
|
||||||
|
legend: {
|
||||||
|
// 图例配置
|
||||||
|
show:true,
|
||||||
|
left:'right',
|
||||||
|
textStyle: {
|
||||||
|
color: "#252525",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
color: ["#14b6ce", "#fbaf40", "#bed446", "#346882", ],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "合同类型占比",
|
||||||
|
type: "pie",
|
||||||
|
radius:'70%',
|
||||||
|
center:'center',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: "合同履行",
|
||||||
|
value: 78,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "合同暂停",
|
||||||
|
value: 11,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "合同解除",
|
||||||
|
value: 4,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "合同中止",
|
||||||
|
value: 7,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
label: {
|
||||||
|
formatter: "{c|{c}%} ",
|
||||||
|
rich: {
|
||||||
|
c: {
|
||||||
|
color: "#252525",
|
||||||
|
fontSize: 12,
|
||||||
|
lineHeight: 33,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
);
|
||||||
|
},
|
||||||
|
initChart3() {
|
||||||
|
initChartStatic('chart3',
|
||||||
|
generateBaseOptions({
|
||||||
|
xAxis: {
|
||||||
|
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
|
||||||
|
axisLine:{
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
axisTick:{
|
||||||
|
alignWithLabel:true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
// 图例配置
|
||||||
|
show: false,
|
||||||
|
top:'top',
|
||||||
|
left:'center',
|
||||||
|
textStyle:{
|
||||||
|
color:'#000'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
min:0,
|
||||||
|
max:800,
|
||||||
|
interval:100,
|
||||||
|
nameTextStyle: {
|
||||||
|
// 坐标轴名称的样式
|
||||||
|
color: "#9b9ba4",
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
// 刻度标签的样式
|
||||||
|
hideOverlap: true, // 隐藏重叠的标签
|
||||||
|
color: "#252525D0",
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#25252550'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
minorTick: {
|
||||||
|
// 坐标轴刻度线相关配置
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
// 坐标轴在grid区域中的分割线
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed',
|
||||||
|
color: '#25252520'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '月度已收金额',
|
||||||
|
data: [400,370,300,510,490,540,470,600,660,730,700,590],
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 20,
|
||||||
|
yAxisIndex: 0,
|
||||||
|
itemStyle: {
|
||||||
|
color:'#1cc5f7',
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
textStyle: {
|
||||||
|
color: '#252525'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '月度应收金额',
|
||||||
|
data: [450,400,390,560,600,650,550,690,710,750,730,650],
|
||||||
|
type: 'line',
|
||||||
|
barWidth: 20,
|
||||||
|
yAxisIndex: 0,
|
||||||
|
lineStyle:{
|
||||||
|
color:'#656cfd'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
],
|
||||||
|
grid: {
|
||||||
|
top:'5%',
|
||||||
|
left: '10%',
|
||||||
|
right: '10%',
|
||||||
|
bottom: '10%'
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
initChart4() {
|
||||||
|
initChartStatic('chart4',
|
||||||
|
generateBaseOptions({
|
||||||
|
xAxis: {
|
||||||
|
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
|
||||||
|
axisLine:{
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
axisTick:{
|
||||||
|
alignWithLabel:true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
// 图例配置
|
||||||
|
show: true,
|
||||||
|
top:'top',
|
||||||
|
left:'center',
|
||||||
|
textStyle:{
|
||||||
|
color:'#000'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
min:0,
|
||||||
|
max:300,
|
||||||
|
interval:50,
|
||||||
|
nameTextStyle: {
|
||||||
|
// 坐标轴名称的样式
|
||||||
|
color: "#9b9ba4",
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
// 刻度标签的样式
|
||||||
|
hideOverlap: true, // 隐藏重叠的标签
|
||||||
|
color: "#252525D0",
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#25252550'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
minorTick: {
|
||||||
|
// 坐标轴刻度线相关配置
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
// 坐标轴在grid区域中的分割线
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed',
|
||||||
|
color: '#25252520'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '月度付款统计',
|
||||||
|
data: [100,160,150,180,210,170,220,240,260,200,210,250],
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 20,
|
||||||
|
yAxisIndex: 0,
|
||||||
|
itemStyle: {
|
||||||
|
color:'#5aadf2',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
grid: {
|
||||||
|
top:'5%',
|
||||||
|
left: '10%',
|
||||||
|
right: '10%',
|
||||||
|
bottom: '10%'
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@font-face {
|
||||||
|
font-family: "TITLEFONT";
|
||||||
|
src: url(../../../assets/biaoti.ttf);
|
||||||
|
}
|
||||||
|
.box {
|
||||||
|
padding: 10px 15px;
|
||||||
|
width: 100%;
|
||||||
|
background: #f1f1f1;
|
||||||
|
}
|
||||||
|
.box-title {
|
||||||
|
font-family: "TITLEFONT";
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
// 顶部
|
||||||
|
.top {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(5, 1fr);
|
||||||
|
gap: 25px;
|
||||||
|
.top-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
height: 70px;
|
||||||
|
justify-content: space-around;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//合同类型占比类型
|
||||||
|
.contract {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 15px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 20px;
|
||||||
|
.left,
|
||||||
|
.right {
|
||||||
|
padding: 15px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
#chart1,#chart2{
|
||||||
|
width:100%;
|
||||||
|
height: calc(350px - 2rem );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//阅读应收统计
|
||||||
|
.statistics{
|
||||||
|
margin-top: 15px;
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap:20px;
|
||||||
|
.left,.right{
|
||||||
|
padding: 15px;
|
||||||
|
background: #ffF;
|
||||||
|
}
|
||||||
|
#chart3,#chart4{
|
||||||
|
width: 100%;
|
||||||
|
height: calc(350px - 2rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -247,6 +247,11 @@ export default {
|
|||||||
loginDom.style.backgroundImage = 'url(/images/zhaxian.png)'
|
loginDom.style.backgroundImage = 'url(/images/zhaxian.png)'
|
||||||
this.redirect = '/index'
|
this.redirect = '/index'
|
||||||
break;
|
break;
|
||||||
|
case '9401':
|
||||||
|
document.title = '汽车覆盖件工业视觉检测平台项目'
|
||||||
|
loginDom.style.backgroundImage = 'url(/images/qiche.png)'
|
||||||
|
this.redirect = '/index'
|
||||||
|
break;
|
||||||
default:
|
default:
|
||||||
|
|
||||||
document.title = ''
|
document.title = ''
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user