Commit 1f680f42 authored by 张锡奇's avatar 张锡奇

commit

parent 51ebea79
......@@ -2,6 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=yes"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3,minimum-scale=0.1,user-scalable=yes">
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
......
......@@ -30,7 +30,7 @@
"vux-loader": "^1.2.9"
},
"devDependencies": {
"@antv/f2": "^3.4.4",
"@antv/f2": "3.4.3",
"@babel/preset-env": "^7.4.5",
"@babel/runtime": "^7.7.6",
"autoprefixer": "^7.1.2",
......
......@@ -57,5 +57,12 @@ const methodMap = {
getTiipFabric:{url:apiURL('default')+'/mmFabric/',method:'post'}, //验布
/**
* cip小程序
*/
getCipTotalamount:{url:apiURL('sales')+'/bianalysis/totalamount/',method:'get'},
getCipSalesinfo:{url:apiURL('sales')+'/bianalysis/salesinfo/',method:'get'},
getCipLiabilities:{url:apiURL('sales')+'/bianalysis/liabilities/',method:'get'},
};
export default methodMap;
......@@ -64,6 +64,9 @@ FastClick.attach(document.body)
Vue.config.productionTip = false;
router.beforeEach((to, from, next) => {
if(to.path.indexOf('shopVersion') != -1 && to.params.hasOwnProperty('iProjectId')){
store.dispatch('setIproject',to.params.iProjectId);
}
if(to.name != 'tiipOperateDetail'){
store.dispatch("CAHNGE_META_INFO", {title:to.meta.title})
}
......
......@@ -3,7 +3,7 @@ import Router from 'vue-router'
Vue.use(Router)
let routes = [
let tipRoutes = [
{
path:'/me',
name:'me',
......@@ -280,4 +280,62 @@ let routes = [
}
];
export default routes;
\ No newline at end of file
let shopVersionRoutes = [
{
name:'main',
component: () => import('@/view/main.vue'),
path:'/main',
children:[
{
path:'/shopVersion',
name:'shopVersion',
component:()=> import('@/view/shopVersion/index.vue'),
meta:{
title: '布一样'
}
}
]
},
{
name:'shopVersion',
component: () => import('@/view/shopVersion/index.vue'),
path:'/shopVersion',
children:[
{
path:'form/index/:iProjectId',
name:'shopVersionFormIndex',
component:()=> import('@/view/shopVersion/form/index.vue'),
meta:{
title: '智能报表'
}
},
{
path:'form/empAna',
name:'shopVersionFormEmpAna',
component:()=> import('@/view/shopVersion/form/empAna/index.vue'),
meta:{
title: '员工排行'
}
},
{
path:'form/liabilities',
name:'Liabilities',
component:()=> import('@/view/shopVersion/form/liabilities/index.vue'),
meta:{
title: '负债分析'
}
},
{
path:'form/liabilitiesDetail/:iCustomerId',
name:'LiabilitiesDetail',
component:()=> import('@/view/shopVersion/form/liabilities/detail.vue'),
meta:{
title: '负债明细'
}
}
]
}
]
export default [...tipRoutes,...shopVersionRoutes];
\ No newline at end of file
<style lang="less" scoped>
#chartCustom{
font-size:12px;
height:100%;
display: flex;
flex-direction: column;
.Content{
height:100%;
// height:1px;
// flex-grow: 1;
// overflow: auto;
// -webkit-overflow-scrolling: touch;
}
h2{
text-align: center;
}
......@@ -37,14 +46,20 @@
<template>
<div id="chartCustom">
<searchComponent :search="search" />
<div class="Content">
<div>
<h2>客户</h2>
<div ref="myChart1" :style="{width: '100vw', height: '300%',display:pbcustomer.length > 0 ? 'block' : 'none'}"></div>
<img v-if="pbcustomer.length <= 0" src="@/assets/noData.jpg" class="_img" alt="">
</div>
<div>
<h2>销售员</h2>
<div ref="myChart2" :style="{width: '100vw', height: '300%',display:pbsales.length > 0 ? 'block' : 'none'}"></div>
<img v-if="pbsales.length <= 0" src="@/assets/noData.jpg" class="_img" alt="">
</div>
</div>
</div>
</template>
<script>
......
<style lang="less" scoped>
#chartIncome{
font-size:12px;
height:100%;
display: flex;
flex-direction: column;
.Content{
height:100%;
// height:1px;
// flex-grow: 1;
// overflow: auto;
// -webkit-overflow-scrolling: touch;
}
h2{
text-align: center;
}
......@@ -37,14 +46,18 @@
<template>
<div id="chartIncome">
<searchComponent :search="search" />
<div class="Content">
<div>
<h2 style="margin-top:0.2rem;">应收-应付</h2>
<div id="myChart1" :style="{width: '100vw', height: '300%',display:payable.length > 0 ? 'block' : 'none'}"></div>
<img v-if="payable.length <= 0" src="@/assets/noData.jpg" class="_img" alt="">
</div>
<div>
<h2>实收-实付</h2>
<div id="myChart2" :style="{width: '100vw', height: '300%',display:receivepay.length > 0 ? 'block' : 'none'}"></div>
<img v-if="receivepay.length <= 0" src="@/assets/noData.jpg" class="_img" alt="">
</div>
</div>
</div>
</template>
......
<style lang="less" scoped>
#statistics{
background:#f2f2f2;
>.double{
height:100%;
display: flex;
flex-direction: column;
.Content{
height:100%;
// height:1px;
// flex-grow: 1;
// overflow: auto;
// -webkit-overflow-scrolling: touch;
}
.Content>.double{
display:flex;
>.card{
flex-grow:1;
......@@ -25,7 +35,7 @@
transform: translate(-50%,0);
}
>.head{
background:#009BDE;
background: linear-gradient(90deg,#708bf6, #2d8cf0, #00B2EE);
padding:5px 0;
color:#fff;
text-align: center;
......@@ -52,6 +62,7 @@
<template>
<div id="statistics">
<searchComponent :search='search' />
<div class="Content">
<div class='double'>
<div class="card">
<div class="head">月总订单金额同比率</div>
......@@ -89,6 +100,8 @@
<img v-if="chartData.set6.length==0" src="@/assets/noData.jpg" class="imgBC" />
</div>
</div>
</div>
</template>
<script>
import Util from '@/libs/util.js'
......
<style lang="less">
@import url('../../../../styles/common.less');
#shopVersionFormEmpAna{
min-height:100%;
display:flex;
flex-direction: column;
background: #DCE9FE;
.HEADER{
}
.CONTENT{
height:100%;
// height:1px;
// flex-grow: 1;
// overflow-y: scroll;
// -webkit-overflow-scrolling: touch;
.iCard{
height:260px;
>p{
margin:0;
height:30px;
line-height: 30px;
background: linear-gradient(90deg,#708bf6, #2d8cf0, #00B2EE);
color: #fff;
text-align: center;
}
}
.iCard:last-child{
margin-bottom:8px;
}
}
.noData{
height: calc(100% - 30px);
width:100%;
img{
width: 100%;
height: 100%;
}
}
}
</style>
<template>
<div id="shopVersionFormEmpAna">
<div class="HEADER">
<searchComponent placeholder="请输入单号/客户进行搜索" :search="search" :typeList="typeList"/>
</div>
<div class="CONTENT">
<div class="iCard" ref="chart1">
<p>前十名员工(联动)</p>
<canvas id="chart1" v-if="chartData1.length > 0" width="400" height="260" style="width:100%;height:240px; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></canvas>
<div class="noData" v-if="chartData1.length <= 0">
<img src="../../../../assets/noData.jpg" class="_img" alt="">
</div>
</div>
<div class="iCard" ref="chart2">
<p>{{title}}每月回款率</p>
<canvas id="chart2" v-if="chartData2.length > 0" width="400" height="260" style="width:100%;height:240px;"></canvas>
<div class="noData" v-if="chartData2.length <= 0">
<img src="../../../../assets/noData.jpg" class="_img" alt="">
</div>
</div>
<div class="iCard" ref="chart3">
<p>{{title}}按月统计订单金额</p>
<canvas id="chart3" v-if="chartData3.length > 0" width="400" height="260" style="width:100%;height:240px;"></canvas>
<div class="noData" v-if="chartData3.length <= 0">
<img src="../../../../assets/noData.jpg" class="_img" alt="">
</div>
</div>
</div>
</div>
</template>
<script>
import Util from '@/libs/util.js'
import { mapState } from 'vuex'
import searchComponent from '@/components/search'
import { employees } from './mixins/employees'
import { receivable } from './mixins/receivable'
import { orderAmount } from './mixins/orderAmount'
export default {
name: 'shopVersionFormEmpAna',
mixins: [employees,receivable,orderAmount],
data () {
return {
search:{
dBeginDate:Util.dateFormat(new Date(),'yyyy-01-01'),
dEndDate:Util.dateFormat(new Date(),'yyyy-MM-dd')
},
typeList:{time:true},
direction:'vertical',
tempChartData2:[],
tempChartData3:[],
title:''
}
},
computed:{
...mapState({
iProjectId:state => state.app.iProjectId,
})
},
async mounted(){
window.d = this;
this.$store.dispatch('saveUserId',this.$route.params.userId);
window.addEventListener("resize",()=>{
setTimeout(async ()=>{
this.renderResize();
if(this.chartData1.length > 0){
this.chart1.changeSize(this.$refs['chart1'].offsetWidth); // 清除
this.chart1.destroy();
}
if(this.chartData2.length > 0){
this.chart2.changeSize(this.$refs['chart2'].offsetWidth); // 清除
this.chart2.destroy();
}
if(this.chartData3.length > 0){
this.chart3.changeSize(this.$refs['chart3'].offsetWidth); // 清除
this.chart3.destroy();
}
if(this.chartData1.length > 0){
await this.renderChart1();
}
if(this.chartData2.length > 0){
await this.renderChart2();
}
if(this.chartData3.length > 0){
await this.renderChart3();
}
})
});
this.$nextTick(async ()=>{
this.renderResize();
await this.getData();
if(this.chartData1.length > 0){
await this.renderChart1();
}
if(this.chartData2.length > 0){
await this.renderChart2();
}
if(this.chartData3.length > 0){
await this.renderChart3();
}
})
},
async activated(){
window.d = this;
this.global.$off('searchData');
//查询条件触发加载
this.global.$on('searchData',async ()=>{
this.chartData1 = [];
this.chartData2 = [];
this.chartData3 = [];
if(this.chartData1.length > 0){
await this.chart1.destroy();
}
if(this.chartData2.length > 0){
await this.chart2.destroy();
}
if(this.chartData3.length > 0){
await this.chart3.destroy();
}
await this.getData();
// this.chart1.changeData(this.chartData1)
if(this.chartData1.length > 0){
await this.renderChart1();
}
if(this.chartData2.length > 0){
await this.renderChart2();
}
if(this.chartData3.length > 0){
await this.renderChart3();
}
});
},
methods:{
renderResize() {
// 判断横竖屏
let width = document.documentElement.clientWidth;
let height = document.documentElement.clientHeight;
if(width > height) {
this.direction = 'cross';
}else{
this.direction = 'vertical';
}
},
async getData(){
let data = Util.deepClone(this.search);
let res = await this.request('getCipSalesinfo',{
data:{
dStartDate:data.dBeginDate,
dEndDate:data.dEndDate
},
params:{},
},'加载中',{iProjectId:this.iProjectId})
this.chartData1 = res.set1;
if(this.chartData1.length > 0){
this.title = res.set1[0].sSalesName;
this.tempChartData2 = Util.deepClone(res.set2);
this.tempChartData3 = Util.deepClone(res.set3);
this.chartData2 = res.set2.filter(x=>x.iSalesId == this.chartData1[0].iSalesId);
this.chartData3 = res.set3.filter(x=>x.iSalesId == this.chartData1[0].iSalesId);
}
},
},
components:{
searchComponent
},
}
</script>
const F2 = require('@antv/f2/lib/index');
require('@antv/f2/lib/interaction/interval-select');
const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar');
const Gesture = require('@antv/f2/lib/plugin/gesture');
// 1.全局注册,也可以给 chart 的实例注册
F2.Chart.plugins.register(Gesture);
export const employees = {
data(){
return {
chartData1:[],
chart1:null
}
},
methods:{
async renderChart1(){
const that = this;
let originSalesName = [],originAmount = [];
this.chartData1.forEach((x,y)=> {
if(y<=5){
originSalesName.push(x.sSalesName);
originAmount.push(x.nAmount);
}
});
this.chart1 = new F2.Chart({
id: 'chart1',
pixelRatio: window.devicePixelRatio,
plugins: [ScrollBar,Gesture],
});
this.chart1.source(this.chartData1, {
sSalesName: {
type:'cat',
tickCount: 6,
values:originSalesName
},
nAmount: {
tickCount: 10
}
});
this.chart1.axis('sSalesName', {
tickLine: {
length: 4,
stroke: '#cacaca'
},
label: {
fill: '#cacaca'
},
line: {
top: true
}
});
this.chart1.axis('nAmount', {
position: 'left',
label: function label(text) {
return {
text: text,
fill: '#cacaca'
};
},
grid: {
stroke: '#d1d1d1'
}
});
this.chart1.tooltip({
showItemMarker: false,
background: {
radius: 2,
padding: [ 3, 5 ]
},
onShow: function onShow(ev) {
const items = ev.items;
items[0].name = '';
items[0].value = items[0].value + ' 元';
}
});
this.chart1.interval().position('sSalesName*nAmount').style({
radius: [ 2, 2, 0, 0 ]
});
// 定义进度条
this.chart1.scrollBar({
mode: 'x',
xStyle: {
backgroundColor: '#e8e8e8',
fillerColor: '#808080',
offsetY: -2
}
});
this.chart1.pluginGesture({
gesture: {
press(data, event) {
that.title = data[0]._origin.sSalesName;
that.chartData2 = that.tempChartData2.filter(x=>x.iSalesId == data[0]._origin.iSalesId);
that.chartData3 = that.tempChartData3.filter(x=>x.iSalesId == data[0]._origin.iSalesId);
if(that.chartData2.length >= 0){
that.chart2.destroy();
}
if(that.chartData3.length >= 0){
that.chart3.destroy();
}
if(that.chartData2.length >= 0){
that.renderChart2();
}
if(that.chartData3.length >= 0){
that.renderChart3();
}
}
},
hammerOptions: {},
options: {},
});
this.chart1.interaction('pan');
this.chart1.render();
}
}
}
\ No newline at end of file
const F2 = require('@antv/f2/lib/index');
require('@antv/f2/lib/interaction/pan');
const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar');
export const orderAmount = {
data(){
return {
chartData3:[],
chart3:null
}
},
methods:{
async renderChart3(){
this.chart3 = new F2.Chart({
id: 'chart3',
pixelRatio: window.devicePixelRatio,
plugins: ScrollBar,
});
let originX = [],originY = [];
this.chartData3.forEach((x,y)=> {
if(y<=5){
originX.push(x.sMonth);
originY.push(x.nAmount);
}
});
this.chart3.source(this.chartData3, {
sMonth: {
type:'cat',
values:originX
}
});
this.chart3.tooltip({
showCrosshairs: true,
showItemMarker: false,
background: {
radius: 2,
fill: '#1890FF',
padding: [ 3, 5 ]
},
nameStyle: {
fill: '#fff'
},
onShow: function onShow(ev) {
const items = ev.items;
items[0].name = items[0].title;
}
});
this.chart3.line().position('sMonth*nAmount');
this.chart3.point().position('sMonth*nAmount').style({
lineWidth: 1,
stroke: '#fff'
});
this.chart3.interaction('pan');
// 定义进度条
this.chart3.scrollBar({
mode: 'x',
xStyle: {
backgroundColor: '#e8e8e8',
fillerColor: '#808080',
offsetY: -2
}
});
this.chart3.render();
}
}
}
\ No newline at end of file
const F2 = require('@antv/f2/lib/index');
require('@antv/f2/lib/interaction/pan');
const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar');
export const receivable = {
data(){
return {
chartData2:[],
chart2:null
}
},
methods:{
async renderChart2(){
this.chart2 = new F2.Chart({
id: 'chart2',
pixelRatio: window.devicePixelRatio,
plugins: ScrollBar,
});
let originX = [],originY = [];
this.chartData2.forEach((x,y)=> {
if(y<=5){
originX.push(x.sMonth);
originY.push(x.nPaydAmount);
}
});
this.chart2.source(this.chartData2, {
sMonth: {
type:'cat',
values:originX
}
});
this.chart2.tooltip({
showCrosshairs: true,
showItemMarker: false,
background: {
radius: 2,
fill: '#1890FF',
padding: [ 3, 5 ]
},
nameStyle: {
fill: '#fff'
},
onShow: function onShow(ev) {
const items = ev.items;
items[0].name = items[0].title;
}
});
this.chart2.line().position('sMonth*nPaydAmount');
this.chart2.point().position('sMonth*nPaydAmount').style({
lineWidth: 1,
stroke: '#fff'
});
this.chart2.interaction('pan');
// 定义进度条
this.chart2.scrollBar({
mode: 'x',
xStyle: {
backgroundColor: '#e8e8e8',
fillerColor: '#808080',
offsetY: -2
}
});
this.chart2.render();
}
}
}
\ No newline at end of file
<style lang="less" >
@import url('../../../styles/common.less');
#shopVersionFormIndex{
background: #f6f5f9;
height:100%;
display: flex;
flex-direction: column;
.HEADER{
padding:10px 10px 0 10px;
.items{
display: flex;
align-items: center;
.item{
flex:1;
display: flex;
flex-wrap: wrap;
overflow: hidden;
>span{
width:100%;
color:#aaa;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
}
.odd{
color: #708bf6;
font-size:26px;
}
.even{
color: #8470FF;
font-size:26px;
}
.contain{
display: flex;
flex-wrap: wrap;
margin-top:5px;
width:100%;
.TITLE{
color:#aaa;
}
>div{
width:100%;
display: flex;
>span{
flex:1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
}
}
}
.TAB{
padding:10px;
.buttonTab {
> a{
color:#708bf6;
}
> a.vux-button-tab-item-first{
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
> a.vux-button-tab-item-last{
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
> a.vux-button-tab-item-first:after{
border:1px solid #708bf6;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
color:#708bf6;
}
> a.vux-button-tab-item-middle:after{
border:1px solid #708bf6;
color:#708bf6;
}
> a.vux-button-tab-item-last:after{
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border:1px solid #708bf6;
}
> a.vux-button-group-current{
background: #708bf6;
color:white;
}
}
}
.CONTENT{
height:1px;
flex-grow: 1;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
}
</style>
<template>
<div id="shopVersionFormIndex">
<div class="HEADER iCard">
<swiper height="130px" dots-position="center" dots-class="custom-bottom">
<swiper-item v-for="(v1,i1) in list" :key='i1'>
<div class="items">
<div class="item" v-for="(v2,i2) in v1.child" :key='i2'>
<span>{{v2.title}}</span>
<span :class="[i2 % 2 == 0 ? 'odd' : 'even']">{{v2.price}}</span>
<div class="contain">
<div class="TITLE">
<span>单位</span>
<span>同比率</span>
</div>
<div>
<span></span>
<span>{{v2.rate}}%</span>
</div>
</div>
</div>
</div>
</swiper-item>
</swiper>
</div>
<div class="TAB">
<button-tab class="buttonTab" :value="activeBtn" >
<button-tab-item @on-item-click="situation='salesStatistics'">销售统计</button-tab-item>
<button-tab-item @on-item-click="situation='empAna'">员工排行</button-tab-item>
<button-tab-item @on-item-click="situation='liabilities'">负债分析</button-tab-item>
<button-tab-item @on-item-click="situation='custom'">账单分析</button-tab-item>
<button-tab-item @on-item-click="situation='income'">收支分析</button-tab-item>
</button-tab>
</div>
<div class="CONTENT">
<component :is="situation"/>
</div>
</div>
</template>
<script>
import Util from '@/libs/util.js';
import {Swiper,SwiperItem,ButtonTab, ButtonTabItem } from 'vux';
import {mapState} from 'vuex';
import salesStatistics from '@/view/chart/sales/statistics.vue'
import custom from '@/view/chart/custom/index.vue'
import income from '@/view/chart/income/index.vue'
import empAna from './empAna/index.vue'
import liabilities from './liabilities/index.vue'
export default {
name: 'shopVersionFormIndex',
data () {
return {
list:[],
activeBtn:0,
situation:'salesStatistics'
}
},
components:{
Swiper,SwiperItem,ButtonTab,ButtonTabItem,custom,income,salesStatistics,empAna,liabilities
},
computed:{
...mapState({
iProjectId:state => state.app.iProjectId,
})
},
async mounted(){
},
async activated(){
window.d = this;
await this.getData();
},
methods:{
async getData(){
let res = await this.request('getCipTotalamount',{
data:{}
},'加载中',{iProjectId:this.iProjectId});
this.list = [
{
child:[
{
title:'本日销售额',
rate:res.set1[0].nTodaySellAmountRate,
price:res.set1[0].nTodaySellAmount
},
{
title:'本日实收',
rate:res.set1[0].nTodaySellProfitRate,
price:res.set1[0].nTodaySellProfit
}
]
},
{
child:[
{
title:'本周销售额',
rate:res.set1[0].nWeekSellAmountRate,
price:res.set1[0].nWeekSellAmount
},
{
title:'本周实收',
rate:res.set1[0].nWeekSellProfitRate,
price:res.set1[0].nWeekSellProfit
}
]
},
{
child:[
{
title:'本月销售额',
rate:res.set1[0].nMonthSellAmountRate,
price:res.set1[0].nMonthSellAmount
},
{
title:'本月实收',
rate:res.set1[0].nMonthSellProfitRate,
price:res.set1[0].nMonthSellProfit
}
]
},
{
child:[
{
title:'本年销售额',
rate:res.set1[0].nYearSellAmountRate,
price:res.set1[0].nYearSellAmount
},
{
title:'本年实收',
rate:res.set1[0].nYearSellProfitRate,
price:res.set1[0].nYearSellProfit
}
]
}
]
}
}
}
</script>
\ No newline at end of file
<style lang="less" >
@import url('../../../../styles/common.less');
#LiabilitiesDetail{
background: #f6f5f9;
height:100%;
display: flex;
flex-direction: column;
.Table{
flex-grow: 1;
height:1px;
overflow: auto;
}
}
</style>
<template>
<div id="LiabilitiesDetail">
<div class="Table">
<customerTable :columns="columns" :list="list" :tableStyle="tableStyle"></customerTable>
</div>
</div>
</template>
<script>
import Util from '@/libs/util.js';
import {mapState} from 'vuex';
import customerTable from '@/components/Table'
export default {
name: 'LiabilitiesDetail',
data () {
return {
list:[],
columns:[
{
width:'50%',
name:'日期',
align:'center',
field:'dBillDate',
},
{
width:'50%',
name:'金额',
align:'center',
field:'应收',
}
],
tableStyle:{
theadBgColor:'rgba(223,238,253,1)',
complexTrBgColor:'white',
singleTrBgColor:'#eef4fe',
theadTdBorder:false,
tbodyTdBorder:false,
tbodyHeight:'calc(100vh)',
tbodyTrBorderBottom:'1px solid #dbe9f8',
width:'100%'
},
}
},
components:{
customerTable
},
computed:{
...mapState({
iProjectId:state => state.app.iProjectId,
})
},
async mounted(){
},
async activated(){
this.list = [];
window.d = this;
await this.getDetail();
},
methods:{
async getDetail(){
let result = await this.request('getCipLiabilities',{
data:{},
params:{
iCustomerId:this.$route.params.iCustomerId,
sType:'Details'
}
},'加载中',{iProjectId:this.iProjectId});
this.list = result;
}
}
}
</script>
\ No newline at end of file
<style lang="less" >
@import url('../../../../styles/common.less');
#Liabilities{
background: #f6f5f9;
// height:100%;
// display: flex;
// flex-direction: column;
.HEADER{
display:flex;
padding:10px;
>span{
flex-shrink: 0;
&.number{
color:#3BA5EF;
margin-left:5px;
flex-grow:1;
text-align: right;
}
}
>div{
margin: 0 10px;
background:#3BA5EF;
border-radius: 5px;
}
}
.Content{
height:100%;
// height:1px;
// flex-grow: 1;
// overflow: auto;
// -webkit-overflow-scrolling: touch;
margin-bottom:8px;
>div{
display:flex;
align-items: center;
&:not(:last-child){
>div{
border-bottom:1px solid #ddd;
}
}
>div{
flex-grow:1;
padding:15px 0;
}
>span{
flex-shrink: 0;
padding: 0 13px;
&.num{
font-weight: bold;
color: #555;
font-size: 16px;
align-self: center;
}
}
>a{
flex-shrink: 0;
padding: 18px 13px;
&.iconfont{border-bottom: 1px solid #ddd;
display: flex;
align-items: center;
color: #FF7601;
font-size: 20px;
}
}
}
}
}
</style>
<template>
<div id="Liabilities">
<div class="HEADER iCard">
<span style="color:#777;margin-right:10rpx;">总负债额</span>
<div :style="{'width':rate+'%','background':color}"></div>
<span class="number">{{total}}</span>
</div>
<div class="Content iCard">
<div v-for="(item,index) in list" :key="index">
<span class="num">{{index+1}}</span>
<div @click="routerToDetail(item)">
<div style="margin-bottom:10rpx;">{{item.sCustomerName}}</div>
<div style="font-size:28rpx;color:#777;">欠款: {{item.nAmount}}</div>
</div>
<a class="iconfont icon-dianhua" :href="'tel:' + item.sTelephone01"></a>
</div>
</div>
</div>
</template>
<script>
import Util from '@/libs/util.js';
import {mapState} from 'vuex';
import { XProgress } from 'vux'
export default {
name: 'Liabilities',
data () {
return {
list:[],
total:0,
rate:1110,
color:'',
}
},
components:{
XProgress
},
computed:{
...mapState({
iProjectId:state => state.app.iProjectId,
})
},
async mounted(){
window.d = this;
await this.getData();
},
async activated(){
},
methods:{
async getData(){
let value = await this.request('getCipLiabilities',{
data:{}
},'加载中',{iProjectId:this.iProjectId});
this.list = value;
this.total=0;
this.rate=0
if(value&&value.length>0){
this.value=value.map(v=>{
this.total+=v.nAmount||0
this.rate+=v.nPercent||0
v.nAmount=(parseFloat(v.nAmount)||0).toLocaleString()
return v
})
this.total=Math.round(this.total/100)/100
this.rate=Math.round(this.rate*10000)/100
this.rate>=30&&this.rate<60&&(this.color="yellow")
this.rate>=90&&(this.color="red")
}
},
routerToDetail(item){
this.$router.push({name:'shopVersionFormLiabilitiesDetail',params:{iCustomerId:item.iIden}})
}
}
}
</script>
\ No newline at end of file
<template>
<div class="shopVersion">
<v-app>
<keep-alive>
<router-view></router-view>
</keep-alive>
</v-app>
</div>
</template>
<script>
export default {
name: 'shopVersion',
data () {
return {
}
}
}
</script>
<style lang="less">
</style>
......@@ -290,7 +290,7 @@ export default {
this.myChart.legend({
clickable:true,
position: 'right',
position: 'left',
itemFormatter: function itemFormatter(val) {
return val + '(' + map[val] + ')';
},
......
......@@ -38,7 +38,6 @@
justify-content:center;
&:not(:first-child):before{
content:" ";
border-left:1px solid #777;
height:20px;
width:0;
position: absolute;
......@@ -322,6 +321,32 @@ export default {
methods:{
changeTab(key){
this.activeTab = key;
if(this.hdr.sType == '加工'){
this.columns1 = this.columns;
}else{
this.columns1 = [
{
width:'40%',
name:'产品',
align:'center',
field:'sMaterial',
color:'#2d8cf0',
underline:true,
},
{
width:'30%',
name:'数量',
align:'center',
field:'nQtyHTML',
},
{
width:'30%',
name:'金额',
align:'center',
field:'nAmountHTML',
}
]
}
this.getData();
},
async getData(){
......
......@@ -148,7 +148,7 @@
<div>
<div>
<div>
<span>数量:</span>{{hdr.nDyeQty}}
<span>数量:</span>{{hdr.nDyeQty}}
</div>
<div>
<span>染费:</span>{{hdr.nDyeAmount}}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment