java_project
/
hy-vue
4
0
Fork 0
Code Issues Pull Requests Activity
Browse Source

修改统计

dev
caoyizhong 2 years ago
parent
5fb103cced
commit
f31cff91be
9 changed files with 735 additions and 130 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      src/components/layouts/index.js
  2. 4
      src/components/menu/Contextmenu.vue
  3. 7
      src/config/router.config.js
  4. 10
      src/views/statisticanalysis/CostStatistic.vue
  5. 315
      src/views/statisticanalysis/costecharts/CaseCost.vue
  6. 21
      src/views/statisticanalysis/costecharts/Cost.vue
  7. 477
      src/views/statisticanalysis/costecharts/CostAnalysis.vue
  8. 10
      src/views/statisticanalysis/costecharts/ItemCost.vue
  9. 18
      src/views/statisticanalysis/costecharts/OnDayCost.vue

3
src/components/layouts/index.js
Unescape View File

@ -4,5 +4,6 @@ import BasicLayout from '@/components/layouts/BasicLayout'
import RouteView from '@/components/layouts/RouteView'
import PageView from '@/components/layouts/PageView'
import TabLayout from '@/components/layouts/TabLayout'
import CostStatistic from '@/views/statisticanalysis/CostStatistic'
export { UserLayout, BasicLayout, BlankLayout, RouteView, PageView, TabLayout }
export { UserLayout, BasicLayout, BlankLayout, RouteView, PageView, TabLayout ,CostStatistic}

4
src/components/menu/Contextmenu.vue
Unescape View File

@ -43,6 +43,10 @@ export default {
},
methods: {
closeMenu (e) {
if(e.target.href && e.target.href.indexOf("cellList") > 0){
console.log("执行l");
window.open(e.target.href,"_blank");
}
if (this.visible === true && ['menuitemicon', 'menuitem'].indexOf(e.target.getAttribute('role')) < 0) {
this.$emit('update:visible', false)
}

7
src/config/router.config.js
Unescape View File

@ -1,4 +1,5 @@
import { UserLayout, TabLayout, RouteView, BlankLayout, PageView } from '@/components/layouts'
import { UserLayout, TabLayout, RouteView, BlankLayout, PageView ,CostStatistic} from '@/components/layouts'
/**
* 走菜单，走权限控制
@ -322,6 +323,10 @@ export const constantRouterMap = [
},
]
},
{
path: '/cellList',
component: () => import(/* webpackChunkName: "user" */ '@/views/statisticanalysis/CostStatistic')
},
// {
// path: '/',

10
src/views/statisticanalysis/CostStatistic.vue
Unescape View File

@ -1,23 +1,23 @@
<template>
<!-- <div>成本统计</div>-->
<div style="height: 950px;display: flex;align-items: center;justify-content: flex-start;background-color: #ececec">
<div style="height: 840px;display: flex;align-items: center;justify-content: flex-start;background-color: #ececec">
<div style="height: 100%;width:35%;">
<div style="height: 20%;">
<OnDayCost/>
</div>
<div style="height: 35%;">
<div style="height: 39%;">
<ItemCost/>
</div>
<div style="height: 35%;">
<div style="height: 38%;">
<!-- 成本-->
<Cost/>
</div>
</div>
<div style="height: 100%;width:65%;">
<div style="height: 60%;padding-top: 2%;padding-right: 2%;padding-bottom: 2%;">
<div style="height: 45%;background-color: #ffffff;border-radius: 10px">
<CostAnalysis/>
</div>
<div style="height: 40%;">
<div style="height: 54%;margin-top: 1%">
<CaseCost/>
</div>
</div>

315
src/views/statisticanalysis/costecharts/CaseCost.vue
Unescape View File

@ -1,88 +1,40 @@
<template>
<!-- <div>项目成本情况</div>-->
<div style="width: 100%;height:100% ">
<div style="height: 20%;margin-left: 4%">
<div style="font-size: 19px;margin-bottom: 5px">项目部成本情况</div>
<!-- <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 style="width: 100%;height:100%;background-color: #ffffff;border-radius:15px;z-index: 999 ">
<div style="height: 10%;margin-left: 2%;padding-top: 1%">
<div style="font-size: 25px;margin-bottom: 5px">项目部成本情况
<j-dict-select-tag type="list" v-model="materialType" style="width: 20%;float: right;margin-right: 2%"
:trigger-change="true" dictCode="material_type"
placeholder="请选择物资类型" @change="handleChange"/>
</div>
<!-- <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 style="width: 100%;height: 300px">
<div id="myOneCost" style="width: 100%; height: 70%"></div>
<div style="width: 100%;height: 50%;padding-left: 5%">
<a-table
style="padding-right: 3%;height: 10px"
ref="table"
size="middle"
:scroll="{y:150}"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination=false
:loading="loading"
>
</a-table>
</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>
@ -92,22 +44,181 @@
<script>
import * as echarts from 'echarts';
import { FormTypes } from '@/utils/JEditableTableUtil'
export default {
name: 'CaseCost',
data(){
return{
materialType:null,
/* table加载状态 */
loading:false,
dataSource: [
// {id:'1234',materialClassify: 'qwe',materialsNumber: "sdf",materialsUnit: 'sdfsd',materialQuantity: 'sdfgv',merchandiseName:'sdfg'},
// {id:'34563',materialClassify: 'qwe',materialsNumber: "sdf",materialsUnit: 'sdfsd',materialQuantity: 'sdfgv',merchandiseName:'sdfg'},
// {id:'456745',materialClassify: 'qwe',materialsNumber: "sdf",materialsUnit: 'sdfsd',materialQuantity: 'sdfgv',merchandiseName:'sdfg'}
],
columns: [
{
title: '序号',
dataIndex: '',
key:'rowIndex',
width:50,
align:"center",
customRender:function (t,r,index) {
return parseInt(index)+1;
}
},
{
title:'编号',
align:"center",
dataIndex: 'materialClassify'
},
{
title:'生产类物资',
align:"center",
dataIndex: 'materialsNumber'
},
{
title:'非生产类物资',
align:"center",
dataIndex: 'merchandiseName'
},
{
title:'无形资产',
align:"center",
dataIndex: 'materialsUnit'
},
{
title:'人员工资',
align:"center",
dataIndex: 'materialQuantity',
},
// {
// title:'项目部数量',
// align:"center",
// dataIndex: 'itemQuantity',
// // customRender:function (t,r,index) {
// // console.log(r)
// // if(r.itemQuantity === undefined){
// //
// // }
// // return 0;
// // }
// },
// {
// title:'项目部消耗数量',
// align:"center",
// dataIndex: 'usageQuantity',
// customRender:function (t,r,index) {
// // console.log("ergsdfgsd",r,r.usageQuantity)
// if(!!r.usageQuantity && !!r.residueNumber){
// return parseInt(r.usageQuantity) - parseInt(r.residueNumber);
// }
// return 0;
// }
// },
// {
// title:'科室消耗数量',
// align:"center",
// dataIndex: 'residueNumber',
// customRender:function (t,r,index) {
// // console.log(r)
// if(r.residueNumber === undefined){
// return 0;
// }else{
// return r.residueNumber;
// }
//
// }
// },
// {
// title:'核算属性',
// align:"center",
// dataIndex: 'accountingAttributes_dictText'
// },
// {
// title: '明细',
// dataIndex: 'action',
// align:"center",
// width:147,
// scopedSlots: { customRender: 'action' }
// }
],
}
},
mounted() {
this.echartsInitOne();
this.echartsInitTwo();
this.echartsInitThree();
// this.echartsInitTwo();
// this.echartsInitThree();
},
methods:{
handleChange(value) {
console.log(`selected ${value}`);
},
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: '#000000', //x轴的颜色
// // width: 8, //轴线的宽度
// },
//
// }
// },
// yAxis: {
// type: 'value',
// axisLine: {
// lineStyle: {
// color: '#000000', //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' //改变折线颜色
// }
// }
// },
// }
// ]
// };
let option ={
// title: {
// text: '项目部成本',
@ -124,11 +235,12 @@ export default {
},
xAxis: {
type: 'category',
data: ["1","2","3","4","5","6","7","8","9","10","11","12"],
data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
// show: false,
axisLine: {
show: false,
lineStyle: {
color: '#000000', //x轴的颜色
color: '#878686', //x轴的颜色
// width: 8, //轴线的宽度
},
@ -137,8 +249,9 @@ export default {
yAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: '#000000', //x轴的颜色
color: '#8d8b8b', //x轴的颜色
// width: 8, //轴线的宽度
},
},
@ -154,15 +267,34 @@ export default {
{
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' //改变折线颜色
// }
// }
// },
areaStyle: {},
showSymbol: false,
// color:'#bfbcbc',
itemStyle: {
normal: {
color: '#7b7777', //改变折线点的颜色
// color: '#7b7777', //改变折线点的颜色
color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(210,223,255)'
}, {
offset: 1,
color: 'rgb(253,253,255)'
}]),
lineStyle: {
color: '#1ad933' //改变折线颜色
color: 'rgb(52,112,255)' //改变折线颜色
}
}
},
smooth: true
}
]
};
@ -298,6 +430,15 @@ export default {
</script>
<style scoped>
/*给.ant-table设置最低高度*/
/deep/.ant-empty-normal {
margin: 1% 0 !important;
}
/*当表格数据为空时，修改.ant-empty-normal样式，会撑高空白样式*/
/deep/.ant-table {
min-height: 500% !important;
}
.xian{
color: #ffffff;
border: 1px solid #00ff80;

21
src/views/statisticanalysis/costecharts/Cost.vue
Unescape View File

@ -1,12 +1,19 @@
<template>
<div style="width: 95%;height:100% ;background-color: #ffffff;margin-top: 2%;border-radius: 10px">
<div style="height: 25%;margin-left: 6%">
<div style="font-size: 25px;margin-bottom: 5px;padding-top: 5%">公司成本
<span style="margin: 0% 6%"> <a-month-picker :disabled-date="disabledDate" placeholder="选择日期" /> </span>
<j-dict-select-tag type="list" v-model="materialType" style="width: 30%"
<div style="height: 20%;margin-left: 6%;padding-top: 2%">
<div style="font-size: 25px;margin-bottom: 5px;margin-bottom: 2%">公司成本
<span style="margin-left: 9%;margin-right: 2%"> <a-month-picker :disabled-date="disabledDate" placeholder="选择日期" /> </span>
<j-dict-select-tag type="list" v-model="materialType" style="width: 30%;margin-left: 2%"
:trigger-change="true" dictCode="material_type"
placeholder="请选择物资类型" @change="handleChange"/>
</div>
<!-- <div style="height: 25%;margin-left: 6%;padding-top: 2%">-->
<!-- <div style="font-size: 25px;">公司成本-->
<!-- <span style=""> <a-month-picker :disabled-date="disabledDate" placeholder="选择日期" /> </span>-->
<!-- <j-dict-select-tag type="list" v-model="materialType" style="width: 30%"-->
<!-- :trigger-change="true" dictCode="material_type"-->
<!-- placeholder="请选择物资类型" @change="handleChange"/>-->
<!-- </div>-->
<!-- <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>-->
@ -21,7 +28,7 @@
<!-- <div class="zi">无形类资产</div>-->
<!-- </div>-->
</div>
<div ref="myChartCon" style="width: 95%; height: 75%"></div>
<div ref="myChartCon" style="width: 95%; height: 80%"></div>
</div>
</template>
@ -49,6 +56,10 @@ name: "Cost",
this.drawLine()
},
methods: {
disabledDate(current) {
// Can not select days before today and today
return current && current < moment().endOf('day');
},
handleChange(value) {
console.log(`selected ${value}`);
},

477
src/views/statisticanalysis/costecharts/CostAnalysis.vue
Unescape View File

@ -1,30 +1,18 @@
<template>
<!-- <div>成本分析</div>-->
<div style="width: 100%;height: 100%;padding-top: 2%;border-radius:15px;background-color: #9c9a9a;">
<div style="height: 30%;margin-left: 1%;width: 100%">
<div style="color: #ffffff;font-size: 19px;margin-bottom: 5px">分析成本</div>
<!-- <div style="display: flex;align-items: center;justify-content: space-between;margin-left: 5%;width: 90%">-->
<!-- <div style="display: flex;align-items: center;justify-content: flex-start;width: 42%" >-->
<!-- <div class="xian">新疆分公司</div>-->
<!-- <div class="xian">计划经营科</div>-->
<!-- <div class="xian">第一项目部</div>-->
<!-- <div class="xian">第二项目部</div>-->
<!-- </div>-->
<!-- <div style="float: right;;display: flex;align-items: center;justify-content: flex-end;width: 42%">-->
<!-- <div class="xian">年度</div>-->
<!-- <div class="xian">半年度</div>-->
<!-- <div class="xian">季度</div>-->
<!-- <div class="xian">月</div>-->
<!-- </div>-->
<div style="width: 100%;height: 100%;padding-top: 1%;border-radius:15px;">
<!-- <div style="height: 9%;margin-left: 2%;width: 100%">-->
<div style="font-size: 25px;padding-left: 2%">分析成本
<div style="float: right;width: 38%;height: 35px;padding-top: 0px">
<span style="margin-right: 8%;padding-top: 0px"> <a-month-picker :disabled-date="disabledDate" placeholder="选择日期" /> </span>
<j-dict-select-tag type="list" v-model="materialType" style="width: 45%;;padding-right: 4%"
:trigger-change="true" dictCode="material_type"
placeholder="请选择物资类型" @change="handleChange"/>
</div>
<!-- </div>-->
<!-- <div style="display: flex;align-items: center;justify-content: flex-start;margin-left: 5%">-->
<!-- <div class="zi">扇形图</div>-->
<!-- <div class="zi">折线图</div>-->
<!-- <div class="zi">条形图</div>-->
<!-- </div>-->
</div>
<div id="myCostAnalysis" style="width: 100%; height: 70%;padding-top: 10px"></div>
</div>
<!-- </div>-->
<div id="myCostAnalysis" style="width: 100%; height: 95%;"></div>
</div>
</template>
@ -36,21 +24,455 @@ export default {
name: "CostAnalysis",
data(){
return{
materialType:null,
options: { },
list:[],
}
},
mounted() {
this.echartsInit()
// this.echartsInitTiao()
// this.echartsInitZhe()
// this.echartsInit()
this.getList();
},
methods:{
echartsInit() {
disabledDate(current) {
// Can not select days before today and today
return current && current < moment().endOf('day');
},
handleChange(value) {
console.log(`selected ${value}`);
},
getList(){
this.list = [
{ value: 1048, name: '生产类物资' },
{ value: 735, name: '非生产类物资' },
{ value: 580, name: '科研类物资' },
{ value: 484, name: '无形类资产' },
{ value: 300, name: '人员工资' },
{ value: 300, name: '税务' },
];
this.$nextTick(function () {
this.barData()
this.initChart();
})
},
//渲染图表
initChart() {
let charter = echarts.init(document.getElementById("myCostAnalysis"))
charter.resize()
charter.clear()
charter.setOption(this.options, true)
},
//折线
lineData() {
let that = this
let xAxisData = that.list.map((item) => item.name)
let seriesData = that.list.map((item) => item.value)
this.options = {
title: {
// ...dOptions.title,
// text: this.title
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
toolbox: {
show: true,
feature: {
// dataView: { readOnly: false },
myPie: {
show: true,
title: '切换为饼状图',
icon: 'path://M512 98.304C282.624 98.304 98.304 282.624 98.304 512s184.32 413.696 413.696 413.696c229.376 0 413.696-184.32 413.696-413.696S741.376 98.304 512 98.304zM888.832 491.52l-331.776 0 233.472-233.472C847.872 323.584 884.736 401.408 888.832 491.52zM512 888.832c-208.896 0-376.832-167.936-376.832-376.832 0-208.896 167.936-376.832 376.832-376.832 98.304 0 184.32 36.864 253.952 98.304l-266.24 266.24c-4.096 4.096-4.096 8.192-4.096 12.288 0 12.288 8.192 20.48 20.48 20.48l376.832 0C876.544 729.088 712.704 888.832 512 888.832z',
onclick: function () {
that.pieData()
that.initChart()
}
},
magicType: { show: true, type: ['bar', 'line'] },
// restore: {},
// saveAsImage: {}
}
},
xAxis: {
type: 'category',
data: xAxisData,
axisLine: {
show: false,
lineStyle: {
color: '#878686', //x轴的颜色
// width: 8, //轴线的宽度
},
}
},
yAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: '#8d8b8b', //x轴的颜色
// width: 8, //轴线的宽度
},
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color:'#c2cfd9'
}
},
},
series: [
{
data: seriesData,
type: 'line',
smooth: true,
showBackground: true,
backgroundStyle: {
color: 'rgba(111, 162, 135, 0.2)'
},
itemStyle: {
normal: {
//这里是颜色
color: '#00A3E0'
// function(params) {
// //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
// var colorList = ['#00A3E0','#FFA100', '#ffc0cb', '#CCCCCC', '#BBFFAA','#749f83', '#ca8622'];
// return colorList[params.dataIndex]
// }
}
}
}
]
}
},
echartsInitZhe() {
let myEcharts = echarts.init(document.getElementById("myCostAnalysis"))
let option = {
toolbox: {
show: true,
feature: {
myTool: {
show: true,
title: '切换为饼状图',
icon: 'path://M512 98.304C282.624 98.304 98.304 282.624 98.304 512s184.32 413.696 413.696 413.696c229.376 0 413.696-184.32 413.696-413.696S741.376 98.304 512 98.304zM888.832 491.52l-331.776 0 233.472-233.472C847.872 323.584 884.736 401.408 888.832 491.52zM512 888.832c-208.896 0-376.832-167.936-376.832-376.832 0-208.896 167.936-376.832 376.832-376.832 98.304 0 184.32 36.864 253.952 98.304l-266.24 266.24c-4.096 4.096-4.096 8.192-4.096 12.288 0 12.288 8.192 20.48 20.48 20.48l376.832 0C876.544 729.088 712.704 888.832 512 888.832z',
onclick: function () {
let myChartline = document.getElementById("myCostAnalysis");
let myChartpie2 = document.getElementById("myCostAnalysisYuan");
myChartline.style.display = "none";
myChartpie2.style.display = "block";
}
},
magicType: { type: ['bar', 'line'] },
}
},
xAxis: {
type: 'category',
data: ['生产类物资', '非生产类物资', '科研类物资', '无形类资产', '人员工资', '税务']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110],
type: 'bar'
}
]
};
myEcharts.setOption(option)// 给生成的echarts实例进行传递配置项option
},
//柱型
barData() {
let that = this
let xAxisData = that.list.map((item) => item.name)
let seriesData = that.list.map((item) => item.value)
this.options = {
title: {
// ...dOptions.title,
// text: this.title
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
toolbox: {
show: true,
feature: {
// dataView: { readOnly: false },
myPie: {
show: true,
title: '切换为饼状图',
icon: 'path://M512 98.304C282.624 98.304 98.304 282.624 98.304 512s184.32 413.696 413.696 413.696c229.376 0 413.696-184.32 413.696-413.696S741.376 98.304 512 98.304zM888.832 491.52l-331.776 0 233.472-233.472C847.872 323.584 884.736 401.408 888.832 491.52zM512 888.832c-208.896 0-376.832-167.936-376.832-376.832 0-208.896 167.936-376.832 376.832-376.832 98.304 0 184.32 36.864 253.952 98.304l-266.24 266.24c-4.096 4.096-4.096 8.192-4.096 12.288 0 12.288 8.192 20.48 20.48 20.48l376.832 0C876.544 729.088 712.704 888.832 512 888.832z',
onclick: function () {
that.pieData()
that.initChart()
}
},
magicType: { show: true, type: ['bar', 'line'] },
// restore: {},
// saveAsImage: {}
}
},
xAxis: {
type: 'category',
data: xAxisData,
axisLine: {
show: false,
lineStyle: {
color: '#878686', //x轴的颜色
// width: 8, //轴线的宽度
},
}
},
yAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: '#8d8b8b', //x轴的颜色
// width: 8, //轴线的宽度
},
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color:'#c2cfd9'
}
},
},
series: [
{
data: seriesData,
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
},
// showBackground: true,
// backgroundStyle: {
// color: 'rgba(111, 162, 135, 0.2)'
// },
itemStyle: {
normal: {
//这里是颜色
color: '#00A3E0'
// function(params) {
// //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
// // var colorList = ['#0b58f5','#FFA100', '#ffc0cb', '#CCCCCC', '#BBFFAA','#749f83', '#ca8622'];
// var colorList = ['#0b58f5'];
// return colorList[params.dataIndex]
// }
}
}
}
]
}
},
echartsInitTiao() {
let myEcharts = echarts.init(document.getElementById("myCostAnalysis"))
let option = {
// title: {
// text: '分析成本',
// // subtext: '',
// // left: 'center'
// },
toolbox: {
show: true,
feature: {
myTool: {
show: true,
title: '切换为饼状图',
icon: 'path://M512 98.304C282.624 98.304 98.304 282.624 98.304 512s184.32 413.696 413.696 413.696c229.376 0 413.696-184.32 413.696-413.696S741.376 98.304 512 98.304zM888.832 491.52l-331.776 0 233.472-233.472C847.872 323.584 884.736 401.408 888.832 491.52zM512 888.832c-208.896 0-376.832-167.936-376.832-376.832 0-208.896 167.936-376.832 376.832-376.832 98.304 0 184.32 36.864 253.952 98.304l-266.24 266.24c-4.096 4.096-4.096 8.192-4.096 12.288 0 12.288 8.192 20.48 20.48 20.48l376.832 0C876.544 729.088 712.704 888.832 512 888.832z',
onclick: function () {
let myChartline = document.getElementById("myCostAnalysis");
let myChartpie2 = document.getElementById("myCostAnalysisYuan");
myChartline.style.display = "none";
myChartpie2.style.display = "block";
}
},
magicType: { type: ['bar', 'line'] },
}
},
xAxis: {
type: 'category',
data: ['生产类物资', '非生产类物资', '科研类物资', '无形类资产', '人员工资', '税务']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110],
type: 'bar'
}
]
};
myEcharts.setOption(option)// 给生成的echarts实例进行传递配置项option
},
//饼
pieData() {
let that = this
this.options = {
title: {
// ...dOptions.title,
// text: this.title
},
toolbox: {
show: true,
feature: {
// dataView: { readOnly: false },
myPie: {
show: true,
title: '切换为饼状图',
icon: 'path://M512 98.304C282.624 98.304 98.304 282.624 98.304 512s184.32 413.696 413.696 413.696c229.376 0 413.696-184.32 413.696-413.696S741.376 98.304 512 98.304zM888.832 491.52l-331.776 0 233.472-233.472C847.872 323.584 884.736 401.408 888.832 491.52zM512 888.832c-208.896 0-376.832-167.936-376.832-376.832 0-208.896 167.936-376.832 376.832-376.832 98.304 0 184.32 36.864 253.952 98.304l-266.24 266.24c-4.096 4.096-4.096 8.192-4.096 12.288 0 12.288 8.192 20.48 20.48 20.48l376.832 0C876.544 729.088 712.704 888.832 512 888.832z',
onclick: function () {
that.pieData()
that.initChart()
}
},
myBar: {
show: true,
title: '切换为柱状图',
icon: 'path://M6.7,22.9h10V48h-10V22.9zM24.9,13h10v35h-10V13zM43.2,2h10v46h-10V2zM3.1,58h53.7',
onclick: function () {
that.barData()
that.initChart()
}
},
myLine: {
show: true,
title: '切换为折线图',
icon: 'path://M4.1,28.9h7.1l9.3-22l7.4,38l9.7-19.7l3,12.8h14.9M4.1,58h51.4',
onclick: function () {
that.lineData()
that.initChart()
}
},
// restore: {},
// saveAsImage: {}
}
},
color: ['#00A3E0','#FFA100', '#ffc0cb', '#CCCCCC', '#BBFFAA','#749f83', '#ca8622'],
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}%)'
},
legend: {
icon: 'circle',
right: 6,
top: '10%',
width: '40%',
itemWidth: 18,
itemHeight: 18,
textStyle: {
padding: 4,
rich: {
a: {
color: '#969AA8',
lineHeight: 30,
fontSize: 14,
width: 90
},
b: {
fontSize: 14,
fontWeight: 'bolder',
color: '#000'
}
}
},
data: that.list,
formatter: function (name) {
var total = 0
var target
for (var i = 0, l = that.list.length; i < l; i++) {
total += that.list[i].value
if (that.list[i].name == name) {
target = that.list[i].value
}
}
let nameResult = name.length > 6 ? name.slice(0, 6) + '...' : name
return '{b|' + ((target / total) * 100).toFixed(2) + '%}\n{a|' + nameResult + '}'
}
},
series: [
{
type: 'pie',
label: {
show: false
},
radius: [75, 105],
center: ['35%', '55%'],
data: that.list,
animationEasing: 'cubicInOut',
animationDuration: 2600
}
]
}
},
echartsInit() {
let myChartline = document.getElementById("myCostAnalysisYuan");
let myEcharts = echarts.init(document.getElementById("myCostAnalysisYuan"))
let option = {
// title: {
// text: '分析成本',
// // subtext: '',
// // left: 'center'
// },
toolbox: {
show: true,
feature: {
myTool: {
show: true,
title: '切换为饼状图',
icon: 'path://M512 98.304C282.624 98.304 98.304 282.624 98.304 512s184.32 413.696 413.696 413.696c229.376 0 413.696-184.32 413.696-413.696S741.376 98.304 512 98.304zM888.832 491.52l-331.776 0 233.472-233.472C847.872 323.584 884.736 401.408 888.832 491.52zM512 888.832c-208.896 0-376.832-167.936-376.832-376.832 0-208.896 167.936-376.832 376.832-376.832 98.304 0 184.32 36.864 253.952 98.304l-266.24 266.24c-4.096 4.096-4.096 8.192-4.096 12.288 0 12.288 8.192 20.48 20.48 20.48l376.832 0C876.544 729.088 712.704 888.832 512 888.832z',
onclick: function () {
let myChartline = document.getElementById("myCostAnalysis");
let myChartpie2 = document.getElementById("myCostAnalysisYuan");
myChartline.style.display = "none";
myChartpie2.style.display = "block";
}
},
myTool1: {
show: true,
title: '切换为柱状图',
icon: 'path://M163.84 880.64h122.88v-737.28h-122.88v737.28z m-40.96-778.24h204.8v819.2h-204.8v-819.2z m286.72 204.8h204.8v614.4h-204.8v-614.4z m40.96 573.44h122.88v-532.48h-122.88v532.48z m245.76-368.64h204.8v409.6h-204.8v-409.6z m40.96 368.64h122.88v-327.68h-122.88v327.68z',
onclick: function () {
let myChartline = document.getElementById("myCostAnalysis");
let myChartpie2 = document.getElementById("myCostAnalysisYuan");
myChartline.style.display = "block";
myChartpie2.style.display = "none";
}
},
myLine: {
show: true,
title: '切换为折线图',
icon: 'path://M4.1,28.9h7.1l9.3-22l7.4,38l9.7-19.7l3,12.8h14.9M4.1,58h51.4',
onclick: function () {
let myChartline = document.getElementById("myCostAnalysis");
let myChartpie2 = document.getElementById("myCostAnalysisYuan");
myChartline.style.display = "block";
myChartpie2.style.display = "none";
}
},
// magicType: { type: ['line',] },
// restore: {},
}
},
tooltip: {
trigger: 'item'
},
@ -148,6 +570,7 @@ name: "CostAnalysis",
// ]
// };
myEcharts.setOption(option)// 给生成的echarts实例进行传递配置项option
myChartline.style.display = "none";
}
},
}

10
src/views/statisticanalysis/costecharts/ItemCost.vue
Unescape View File

@ -1,8 +1,8 @@
<template>
<!-- <div>项目成本</div>-->
<div style="width: 95%;height:100% ;background-color: #ffffff;margin-top: 2%;border-radius: 10px">
<div style="height: 20%;margin-left: 6%;padding-top: 5%">
<div style="font-size: 25px;margin-bottom: 5px">项目部成本
<div style="height: 20%;margin-left: 6%;padding-top: 2%">
<div style="font-size: 25px;margin-bottom: 5px;margin-bottom: 2%">项目部成本
<span style="margin: 0% 4%"> <a-month-picker :disabled-date="disabledDate" placeholder="选择日期" /> </span>
<j-dict-select-tag type="list" v-model="materialType" style="width: 30%"
:trigger-change="true" dictCode="material_type"
@ -23,7 +23,7 @@
<!-- <div class="zi">人员工资</div>-->
<!-- </div>-->
</div>
<div id="myItemCost" style="width: 95%; height: 75%"></div>
<div id="myItemCost" style="width: 95%; height: 80%"></div>
</div>
</template>
@ -51,6 +51,10 @@ export default {
this.echartsInit()
},
methods:{
disabledDate(current) {
// Can not select days before today and today
return current && current < moment().endOf('day');
},
handleChange(value) {
console.log(`selected ${value}`);
},

18
src/views/statisticanalysis/costecharts/OnDayCost.vue
Unescape View File

@ -11,7 +11,7 @@
<!-- <span style="color: #ffffff">元</span>-->
</div>
<div style="height: 80px;margin-top: 5%;">
<div class="wen" >￥ 12312.45 </div>
<div class="wen" >￥ {{cost}} </div>
<!-- <div class="wen">2</div>-->
</div>
@ -35,6 +35,7 @@
import * as echarts from 'echarts';
import ChartCard from '@/components/ChartCard'
import '@/assets/less/TableExpand.less'
import { getAction } from '@api/manage'
export default {
name: "OnDayCost",
@ -43,13 +44,28 @@ name: "OnDayCost",
},
data(){
return{
cost: 0,
url: {
getConsume: "/hy/processStatistics/getConsume",
},
}
},
created(){
this.getList();
},
mounted() {
// this.echartsInit()
},
methods:{
getList(){
getAction(this.url.getConsume).then(res=>{
this.cost = res.result;
console.log("===",res.result);
})
},
echartsInit() {
let myEcharts = echarts.init(document.getElementById("myOnDayCost"))
// this.chartSize(document.getElementById('myOnDayCost'), myEcharts);

Write Preview
Loading…
Cancel
Save