8 changed files with 728 additions and 67 deletions
@ -0,0 +1,52 @@
|
||||
<template> |
||||
<div style="width: 1680px;height: 780px"> |
||||
<div style="width: 70%;;height: 100%"> |
||||
<div style="display: flex;align-items: center;justify-content: stretch;width: 100%;height: 50%"> |
||||
<div style="width: 50%;padding-left: 10%;height: 100%"> |
||||
<a-card title="公司制度" style="width: 100%;height: 100%"> |
||||
<template #extra><a href="#">more</a></template> |
||||
<p>card content</p> |
||||
<p>card content</p> |
||||
<p>card content</p> |
||||
</a-card> |
||||
</div> |
||||
|
||||
<div style="width: 50%;padding-left: 10%;height: 100%"> |
||||
<a-card title="站内消息" style="width: 100%;height: 100%"> |
||||
<template #extra><a href="#">more</a></template> |
||||
<p>card content</p> |
||||
<p>card content</p> |
||||
<p>card content</p> |
||||
</a-card> |
||||
</div> |
||||
</div> |
||||
<div style="width: 100%;margin-top: 5%;margin-left: 5%;height: 50%"> |
||||
<a-card title="Default size card" style="width: 100%;height: 90%"> |
||||
<template #extra><a href="#">more</a></template> |
||||
<p>card content</p> |
||||
<p>card content</p> |
||||
<p>card content</p> |
||||
</a-card> |
||||
</div> |
||||
</div> |
||||
<div> |
||||
|
||||
|
||||
|
||||
</div> |
||||
|
||||
|
||||
|
||||
</div> |
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "NewHomePage" |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -1,13 +1,326 @@
|
||||
<template> |
||||
<div>项目成本情况</div> |
||||
<!-- <div>项目成本情况</div>--> |
||||
<div style="width: 100%;height:100% "> |
||||
<div style="height: 20%;margin-left: 4%"> |
||||
<div style="color: #ffffff;font-size: 19px;margin-bottom: 5px">项目部成本情况</div> |
||||
<div style="display: flex;align-items: center;justify-content: flex-start"> |
||||
<div class="xian">第一项目部</div> |
||||
<div class="xian">第二项目部</div> |
||||
<div class="xian">第三项目部</div> |
||||
<div class="xian">第四项目部</div> |
||||
</div> |
||||
</div> |
||||
<div style="display: flex;align-items: center;justify-content: center"> |
||||
<div style="width: 33%;height: 300px"> |
||||
<div id="myOneCost" style="width: 85%; height: 70%"></div> |
||||
<div style="width: 100%;height: 29%;padding-left: 5%"> |
||||
<div class="mu" style=""> |
||||
<div class="dui" style="text-align: center;padding-top: 10%">第一小队</div> |
||||
<div class="dui"> |
||||
<div class="yi" style="">生产类物资</div> |
||||
<div class="yi" style=" ">非生产类</div> |
||||
<div style="padding-left: 3%;"> |
||||
<span>无形资产</span><br> |
||||
<span>人员工资</span> |
||||
</div> |
||||
</div> |
||||
<div class="dui"> |
||||
<div class="yi">34</div> |
||||
<div class="yi">533</div> |
||||
<div style="padding-left: 3%;"> |
||||
<span>234</span><br> |
||||
<span>34</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
<div style="width: 33%;height: 300px"> |
||||
<div id="myTwoCost" style="width: 85%; height: 70%"></div> |
||||
<div style="width: 100%;height: 29%;padding-left: 5%"> |
||||
<div class="mu" style=""> |
||||
<div class="dui" style="text-align: center;padding-top: 10%">第二小队</div> |
||||
<div class="dui"> |
||||
<div class="yi">生产类物资</div> |
||||
<div class="yi">非生产类</div> |
||||
<div style="padding-left: 3%;"> |
||||
<span>无形资产</span><br> |
||||
<span>人员工资</span> |
||||
</div> |
||||
</div> |
||||
<div class="dui"> |
||||
<div class="yi">34</div> |
||||
<div class="yi">2134</div> |
||||
<div style="padding-left: 3%;"> |
||||
<span>234</span><br> |
||||
<span>34</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div style="width: 33%;height: 300px"> |
||||
<div id="myThreeCost" style="width: 85%; height: 70%"></div> |
||||
<div style="width: 100%;height: 29%;padding-left: 5%"> |
||||
<div class="mu" style=""> |
||||
<div class="dui" style="text-align: center;padding-top: 10%">第三小队</div> |
||||
<div class="dui"> |
||||
<div class="yi">生产类物资</div> |
||||
<div class="yi">非生产类</div> |
||||
<div style="padding-left: 3%;"> |
||||
<span>无形资产</span><br> |
||||
<span>人员工资</span> |
||||
</div> |
||||
</div> |
||||
<div class="dui"> |
||||
<div class="yi">34</div> |
||||
<div class="yi">345345</div> |
||||
<div style="padding-left: 3%;"> |
||||
<span>234</span><br> |
||||
<span>34</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as echarts from 'echarts'; |
||||
|
||||
export default { |
||||
name: 'CaseCost' |
||||
name: 'CaseCost', |
||||
data(){ |
||||
return{ |
||||
|
||||
} |
||||
}, |
||||
mounted() { |
||||
this.echartsInitOne(); |
||||
this.echartsInitTwo(); |
||||
this.echartsInitThree(); |
||||
}, |
||||
methods:{ |
||||
echartsInitOne() { |
||||
let myEcharts = echarts.init(document.getElementById("myOneCost")) |
||||
let option ={ |
||||
// title: { |
||||
// text: '项目部成本', |
||||
// subtext: 'Living Expenses in Shenzhen' |
||||
// }, |
||||
tooltip: {}, |
||||
// 图表距边框的距离,可选值：'百分比'¦ {number}(单位px) |
||||
grid: { |
||||
top: '10%', // 等价于 y: '16%' |
||||
left: '6%', |
||||
right: '5%', |
||||
bottom: '3%', |
||||
containLabel: true |
||||
}, |
||||
xAxis: { |
||||
type: 'category', |
||||
data: ["1","2","3","4","5","6","7","8","9","10","11","12"], |
||||
// show: false, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: '#f5f5f6', //x轴的颜色 |
||||
// width: 8, //轴线的宽度 |
||||
}, |
||||
|
||||
} |
||||
}, |
||||
yAxis: { |
||||
type: 'value', |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: '#f5f5f6', //x轴的颜色 |
||||
// width: 8, //轴线的宽度 |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
type: 'dashed', |
||||
color:'#c2cfd9' |
||||
} |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
data: [10, 20, 40, 40, 50, 60,60,70,25,56,23,23], //对应每一个X坐标的值 |
||||
type: 'line', |
||||
smooth: true, |
||||
itemStyle: { |
||||
normal: { |
||||
color: '#7b7777', //改变折线点的颜色 |
||||
lineStyle: { |
||||
color: '#1ad933' //改变折线颜色 |
||||
} |
||||
} |
||||
}, |
||||
} |
||||
] |
||||
}; |
||||
myEcharts.setOption(option)// 给生成的echarts实例进行传递配置项option |
||||
}, |
||||
echartsInitTwo() { |
||||
let myEcharts = echarts.init(document.getElementById("myTwoCost")) |
||||
let option ={ |
||||
// title: { |
||||
// text: '项目部成本', |
||||
// subtext: 'Living Expenses in Shenzhen' |
||||
// }, |
||||
tooltip: {}, |
||||
// 图表距边框的距离,可选值：'百分比'¦ {number}(单位px) |
||||
grid: { |
||||
top: '10%', // 等价于 y: '16%' |
||||
left: '6%', |
||||
right: '5%', |
||||
bottom: '3%', |
||||
containLabel: true |
||||
}, |
||||
xAxis: { |
||||
type: 'category', |
||||
data: ["1","2","3","4","5","6","7","8","9","10","11","12"], |
||||
// show: false, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: '#f5f5f6', //x轴的颜色 |
||||
// width: 8, //轴线的宽度 |
||||
}, |
||||
|
||||
} |
||||
}, |
||||
yAxis: { |
||||
type: 'value', |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: '#f5f5f6', //x轴的颜色 |
||||
// width: 8, //轴线的宽度 |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
type: 'dashed', |
||||
color:'#c2cfd9' |
||||
} |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
data: [100, 200, 400, 400, 500, 600,600,700,250,560,230,230], //对应每一个X坐标的值 |
||||
type: 'line', |
||||
smooth: true, |
||||
itemStyle: { |
||||
normal: { |
||||
color: '#7b7777', //改变折线点的颜色 |
||||
lineStyle: { |
||||
color: '#1ad933' //改变折线颜色 |
||||
} |
||||
} |
||||
}, |
||||
} |
||||
] |
||||
}; |
||||
myEcharts.setOption(option)// 给生成的echarts实例进行传递配置项option |
||||
}, |
||||
echartsInitThree() { |
||||
let myEcharts = echarts.init(document.getElementById("myThreeCost")) |
||||
let option ={ |
||||
// title: { |
||||
// text: '项目部成本', |
||||
// subtext: 'Living Expenses in Shenzhen' |
||||
// }, |
||||
tooltip: {}, |
||||
// 图表距边框的距离,可选值：'百分比'¦ {number}(单位px) |
||||
grid: { |
||||
top: '10%', // 等价于 y: '16%' |
||||
left: '6%', |
||||
right: '5%', |
||||
bottom: '3%', |
||||
containLabel: true |
||||
}, |
||||
xAxis: { |
||||
type: 'category', |
||||
data: ["1","2","3","4","5","6","7","8","9","10","11","12"], |
||||
// show: false, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: '#f5f5f6', //x轴的颜色 |
||||
// width: 8, //轴线的宽度 |
||||
}, |
||||
|
||||
} |
||||
}, |
||||
yAxis: { |
||||
type: 'value', |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: '#f5f5f6', //x轴的颜色 |
||||
// width: 8, //轴线的宽度 |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
type: 'dashed', |
||||
color:'#c2cfd9' |
||||
} |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
data: [100, 200, 400, 400, 500, 600,600,700,250,560,230,230], //对应每一个X坐标的值 |
||||
type: 'line', |
||||
smooth: true, |
||||
itemStyle: { |
||||
normal: { |
||||
color: '#7b7777', //改变折线点的颜色 |
||||
lineStyle: { |
||||
color: '#1ad933' //改变折线颜色 |
||||
} |
||||
} |
||||
}, |
||||
} |
||||
] |
||||
}; |
||||
myEcharts.setOption(option)// 给生成的echarts实例进行传递配置项option |
||||
} |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
.xian{ |
||||
color: #ffffff; |
||||
border: 1px solid #00ff80; |
||||
background-color: #0a8d4b; |
||||
width: 10%; |
||||
height: 30px; |
||||
text-align: center; |
||||
} |
||||
.mu{ |
||||
color:beige; |
||||
width: 92%; |
||||
/*border: 1px solid #ff00ff;*/ |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
.dui{ |
||||
width: 33%; |
||||
height: 100%; |
||||
border: 1px solid #d1e9ff; |
||||
} |
||||
.yi{ |
||||
border-bottom:1px solid #ffffff; |
||||
padding-left: 3%; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue