Commit 2df74d8c authored by godwithdh's avatar godwithdh

boss

parent 1913572c
......@@ -4527,6 +4527,12 @@
"integrity": "sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=",
"dev": true
},
"dayjs": {
"version": "1.8.17",
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.8.17.tgz",
"integrity": "sha512-47VY/htqYqr9GHd7HW/h56PpQzRBSJcxIQFwqL3P20bMF/3az5c3PWdVY3LmPXFl6cQCYHL7c79b9ov+2bOBbw==",
"dev": true
},
"de-indent": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
......@@ -14993,6 +14999,15 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
"integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
},
"vue-hash-calendar": {
"version": "1.1.16",
"resolved": "https://registry.npmjs.org/vue-hash-calendar/-/vue-hash-calendar-1.1.16.tgz",
"integrity": "sha512-gesFylrlb+5uQSKCIO5Vmc8gZ57GadNy70xJOZObf/5DSW1rdiQ7xxIw9MVQK9bUqOjq0Yk253U0k7cSrhBiVw==",
"dev": true,
"requires": {
"vue": "^2.5.17"
}
},
"vue-hot-reload-api": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz",
......@@ -15093,6 +15108,16 @@
}
}
},
"vue-mobile-calendar": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/vue-mobile-calendar/-/vue-mobile-calendar-3.3.0.tgz",
"integrity": "sha512-sxtAP8MFYHLX1RIrPiQ6enBu89/4ztCJbBCUfwN8zVP9Wm7Ls6vV5HBE/UF0ztRGd/By6SeinpBUUzMq14w6IQ==",
"dev": true,
"requires": {
"dayjs": "^1.8.10",
"vue": "^2.5.22"
}
},
"vue-router": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.6.tgz",
......
......@@ -72,9 +72,11 @@
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-hash-calendar": "^1.1.16",
"vue-imageview": "^1.0.5",
"vue-jest": "^1.0.2",
"vue-loader": "^13.3.0",
"vue-mobile-calendar": "^3.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
......
......@@ -34,6 +34,11 @@ const methodMap = {
*/
getSpeciminHdr:{url:url+'/mmmaterial/getlist/',method:'post'},
getSpeciminDtl:{url:url+'/mmmaterial/getdetail/',method:'post'},
/**
* 老板看板
*/
getBoss:{url:url+'/boss/',method:"post"},
};
export default methodMap;
......@@ -18,7 +18,9 @@ import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader
import 'babel-polyfill'
import echarts from 'echarts'
import { ConfirmPlugin } from 'vux'
import Calendar from 'vue-mobile-calendar/lib/install.js'
Vue.use(Calendar)
Vue.use(Vuetify)
Vue.use(VueWechatTitle);
Vue.use(VueRouter);
......
......@@ -100,6 +100,21 @@ let routes = [
}
}
]
},
{
name:"main",
component:()=>import("@/view/main.vue"),
path:"/main",
children:[
{
path:"/kanban",
name:"kanban",
component:()=>import("@/view/kanban/index.vue"),
meta:{
title:"老板看板"
}
}
]
}
];
......
<style lang="less">
.Finance{
padding:10px;
display:flex;
>div{
width:50%;
background:rgb(94,154,254);
box-shadow: 2px 2px 3px rgba(94,154,254,0.4);
color:#fff;
padding:10px;
box-sizing: border-box;
border-radius: 6px;
>.number{
min-height: 35px;
padding: 5px 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
}
}
}
</style>
<template>
<div class="Finance">
<div>
<div style="font-size:15px;">应收数量</div>
<div class="number">324,523.45</div>
</div>
</div>
</template>
<script>
export default {
name:"Finance"
}
</script>
<style lang="less">
.abnormal{
>table{
width: calc(100% - 20px);
text-align: center;
margin: 10px;
background: #E6F0FE;
border-radius: 5px;
tr{
>td{
padding:10px 0;
>div{
background:#fff;
padding:5px 0;
}
&:first-child>div{
border-left:2px solid #8D90FF;
}
&:nth-child(2n-1)>div{
color:#68A0FE;
}
&:nth-child(2n){
text-align: left;
}
}
}
}
}
</style>
<template>
<div class="abnormal">
<table cellspacing="0">
<tr>
<td>
<div>销售退货</div>
</td>
<td>
<div>1000</div>
</td>
<td>
<div>采购退货</div>
</td>
<td>
<div>346</div>
</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name:"abnormal",
data(){
return{
}
}
}
</script>
<style lang="less">
.capital{
>div.card{
margin: 15px;
background: rgb(94,154,254);
padding:15px;
border-radius: 5px;
box-shadow: 2px 2px 3px rgba(94,154,254,0.5);
color:#fff;
display:flex;
min-height:130px;
>div:first-child{
flex-grow:1;
}
}
}
</style>
<template>
<div class="capital">
<div class="card">
<div>
<div style="font-size:13px;margin-bottom:14px;">银行收入 (单位:万元)</div>
<div style="font-size: 28px;font-weight: 600;">234,452.42</div>
</div>
<div style="align-self: flex-end;">
<div>↑89.30%</div>
<div>比昨日下降</div>
</div>
</div>
</div>
</template>
<script>
export default{
name:"capital",
data(){
return{
}
}
}
</script>
<style lang="less">
#kanban{
background:#DCE9FE;
display: flex;
flex-direction: column;
height: 100%;
>.tap{
flex-shrink: 0;
background:#E6EFFE;
display:flex;
>span{
width:calc(100%/5);
text-align: center;
padding: 10px 0;
position:relative;
&:after{
content:" ";
left:50%;
position:absolute;
bottom:0;
width:0;
border-top:3px solid #5E9AFE;
border-radius: 20px;
transition: all 0.3s;
}
&.active:after{
width:100%;
left:0;
}
}
}
>.date{
flex-shrink: 0;
display: flex;
padding:7px 0;
>div{
flex-grow:1;
display:flex;
justify-content: space-around;
align-items: center;
font-size: 10px;
>.line{
width: 20px;
background: #43B884;
height: 3px;
border-radius: 50px;
margin: 0 -20px;
}
}
>span{
flex-shrink: 0;
padding: 0 10px;
}
}
>.list{
flex-shrink: 0;
display:flex;
background: #f2f2f2;
>span{
width: calc(100%/5);
text-align: center;
padding: 10px;
box-sizing: border-box;
transition: all 0.3s;
&.active{
background: rgb(93, 148, 245);
color: #fff;
box-shadow: 2px 2px 3px rgba(94,154,254,0.4);
}
}
}
>.content{
flex-grow:1;
overflow:auto;
height:1px;
}
}
</style>
<template>
<div id="kanban">
<div class="tap">
<span :class="{active:dateMode==1}" @click="dateSelect(1)">日</span>
<span :class="{active:dateMode==2}" @click="dateSelect(2)">周</span>
<span :class="{active:dateMode==3}" @click="dateSelect(3)">月</span>
<span :class="{active:dateMode==4}" @click="dateSelect(4)">年</span>
<span :class="{active:dateMode==5}" @click="dateSelect(5)">自定义</span>
</div>
<div class="date">
<span v-if="dateMode<5" @click="preDate">前一{{dateMode==1&&'天'||dateMode==2&&'周'||dateMode==3&&'月'||dateMode==4&&'年'}}</span>
<div>
<span>{{startDate}}</span>
<span v-show="dateMode>1" class="line" />
<span v-show="dateMode>1">{{endDate}}</span>
</div>
<span v-if="dateMode<5" @click="nextDate">后一{{dateMode==1&&'天'||dateMode==2&&'周'||dateMode==3&&'月'||dateMode==4&&'年'}}</span>
</div>
<div class="list">
<span :class="{active:situation=='operate'}" @click="situation='operate'">运营概况</span>
<span :class="{active:situation=='capital'}" @click="situation='capital'">资金概况</span>
<span :class="{active:situation=='Finance'}" @click="situation='Finance'">财务概况</span>
<span :class="{active:situation=='abnormal'}" @click="situation='abnormal'">异常预警</span>
<span :class="{active:situation==4}" @click="situation=4">库存情况</span>
</div>
<div class="content">
<component :is="situation" :start="DateValue[0]" :end="DateValue[1]"/>
</div>
<calendar
:show.sync="calendarShow"
mode="during"
:defaultDate="calendarValue"
@change="Change"/>
</div>
</template>
<script>
import util from "@/libs/util.js"
import operate from "./operate"
import capital from "./capital"
import Finance from "./Finance"
import abnormal from "./abnormal"
export default {
name:"kanban",
components:{operate,capital,Finance,abnormal},
data(){
return{
calendarShow:false,
DateValue:[new Date],
calendarValue:[],
dateMode:1,
situation:"operate",
}
},
mounted(){
window.kanban=this
},
methods:{
preDate(){
switch(this.dateMode){
case 1:this.DateValue=[new Date(this.DateValue[0].setDate(this.DateValue[0].getDate()-1))]; break;
case 2:this.DateValue=[this.setWeek(this.DateValue[0],-1,"start"),
this.setWeek(this.DateValue[1],-1,'end')];break;
case 3:this.DateValue=[this.setMonth(this.DateValue[0],-1,"start"),
this.setMonth(this.DateValue[1],-1,'end')];break;
case 4:this.DateValue=[this.setYear(this.DateValue[0],-1,"start"),
this.setYear(this.DateValue[1],-1,'end')];break;
}
},
nextDate(){
switch(this.dateMode){
case 1:this.DateValue=[new Date(this.DateValue[0].setDate(this.DateValue[0].getDate()+1))]; break;
case 2:this.DateValue=[this.setWeek(this.DateValue[0],+1,"start"),
this.setWeek(this.DateValue[1],+1,'end')];break;
case 3:this.DateValue=[this.setMonth(this.DateValue[0],+1,"start"),
this.setMonth(this.DateValue[1],+1,'end')];break;
case 4:this.DateValue=[this.setYear(this.DateValue[0],+1,"start"),
this.setYear(this.DateValue[1],+1,'end')];break;
}
},
dateSelect(index){//选择日期方式
if(index==5){
this.calendarShow=true
}else{
this.calendarValue=[]
this.dateMode=index
}
},
Change(e){
console.log(e)
if(e.length==2){
this.DateValue=this.calendarValue=[e[0].$d,e[1].$d]
this.dateMode=5
this.calendarShow=false
}
},
setWeek(date,val,mode){
if(mode=="start"){
date.setDate(date.getDate()+1-(date.getDay()||7)+val*7)
}else{
date.setDate(date.getDate()+7-(date.getDay()||7)+val*7)
}
return date;
},
setMonth(date,val,mode){
date.setMonth(date.getMonth()+val)
if(mode=='start'){
date.setDate(1)
}else{
date.setMonth(date.getMonth()+1)
date.setDate(0)
}
return date;
},
setYear(date,val,mode){
date.setFullYear(date.getFullYear()+val)
date.setMonth(0)
if(mode=="start"){
date.setDate(1)
}else{
date.setFullYear(date.getFullYear()+1)
date.setDate(0);
}
return date;
},
},
computed:{
startDate(val){
return util.dateFormat(this.DateValue[0],"yyyy-MM-dd")
},
endDate(val){
return util.dateFormat(this.DateValue[1],"yyyy-MM-dd");
}
},
watch:{
dateMode(n){
var date=new Date
switch(n){
case 1:this.DateValue=[date];break;
case 2:this.DateValue=[
this.setWeek(new Date(),0,'start'),
this.setWeek(new Date(),0,'end')
];break;
case 3:this.DateValue=[
this.setMonth(new Date(),0,"start"),
this.setMonth(new Date(),0,"end"),
];break;
case 4:this.DateValue=[
this.setYear(new Date(),0,"start"),
this.setYear(new Date(),0,"end")
];break;
}
}
},
}
</script>
<style lang="less">
.operate{
>table{
background:#E6F0FE;
width:calc(100% - 20px);
margin:10px;
border-radius: 7px;
text-align: center;
tr:first-child{
font-size: 13px;
font-weight: bold;
}
tr:not(:first-child){
>td{
padding:5px 0;
>div{
background:#fff;
padding:6px 0;
}
&:first-child{
>div{
border-left: 3px solid #8D90FF;
color:#5E9AFE;
}
}
&:last-child{
>div{
color:#42A071;
}
}
}
}
}
}
</style>
<template>
<div class="operate">
<table cellspacing="0">
<tr>
<td></td>
<td>米数</td>
<td>重量</td>
<td>金额</td>
</tr>
<tr>
<td>
<div>接单</div>
</td>
<td>
<div>1</div>
</td>
<td>
<div>2</div>
</td>
<td>
<div>3</div>
</td>
</tr>
<tr>
<td>
<div>接单</div>
</td>
<td>
<div>13</div>
</td>
<td>
<div>14</div>
</td>
<td>
<div>52</div>
</td>
</tr>
</table>
</div>
</template>
<script>
import util from "@/libs/util.js"
export default {
name:"operate",
props:{
start:Date,
end:Date,
},
data(){
return{
}
},
watch:{
start(n){
this.search()
},
end(n){
this.search()
},
},
created(){
this.$nextTick(()=>{
this.search()
})
},
methods:{
async search(){
var value= await this.request('getBoss',{
data:[{key:"url",value:"Operation gai"}],
params:{
begin_date:util.dateFormat(this.start,"yyyy-MM-dd"),
end_date:this.end?util.dateFormat(this.end,"yyyy-MM-dd"):util.dateFormat(new Date,"yyyy-MM-dd"),
},
},true,{})
},
},
}
</script>
......@@ -9,6 +9,7 @@
</template>
<script>
export default {
name: 'main',
data () {
......
This diff is collapsed.
This diff is collapsed.
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