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 = '扎线设备智慧运维平台项目'
|
||||
document.title = '扎线设备智慧运维平台项目'
|
||||
break;
|
||||
case '9401':
|
||||
// 汽车覆盖件工业视觉检测平台项目
|
||||
this.title = '汽车覆盖件工业视觉检测平台'
|
||||
document.title = '汽车覆盖件工业视觉检测平台'
|
||||
break;
|
||||
default:
|
||||
|
||||
this.title = ' '
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
<cqycsj-manage v-else-if="port === '9370'" />
|
||||
<agricultural v-else-if="port === '9380'" />
|
||||
<integration v-else-if="port === '9390'" />
|
||||
<information v-else-if="port === '9401'" />
|
||||
<operate-home v-else-if="port === '80' || port === ''"></operate-home>
|
||||
<home-page v-else></home-page>
|
||||
</div>
|
||||
@ -42,6 +43,7 @@ import wisdom from './zhgdExternalInterface/home/index'
|
||||
import cqycsjManage from './cqycsjManage/home/index.vue'
|
||||
import agricultural from './machinery/home2/index.vue'
|
||||
import integration from './integration/index.vue'
|
||||
import information from './informationManagement/home/index'
|
||||
export default {
|
||||
components: {
|
||||
HomePage,
|
||||
@ -62,7 +64,8 @@ export default {
|
||||
wisdom,
|
||||
cqycsjManage,
|
||||
agricultural,
|
||||
integration
|
||||
integration,
|
||||
information
|
||||
},
|
||||
data() {
|
||||
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)'
|
||||
this.redirect = '/index'
|
||||
break;
|
||||
case '9401':
|
||||
document.title = '汽车覆盖件工业视觉检测平台项目'
|
||||
loginDom.style.backgroundImage = 'url(/images/qiche.png)'
|
||||
this.redirect = '/index'
|
||||
break;
|
||||
default:
|
||||
|
||||
document.title = ''
|
||||
|
||||
Loading…
Reference in New Issue
Block a user