Commit 2df74d8c authored by godwithdh's avatar godwithdh

boss

parent 1913572c
...@@ -4527,6 +4527,12 @@ ...@@ -4527,6 +4527,12 @@
"integrity": "sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=", "integrity": "sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=",
"dev": true "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": { "de-indent": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz", "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
...@@ -14993,6 +14999,15 @@ ...@@ -14993,6 +14999,15 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz", "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
"integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==" "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": { "vue-hot-reload-api": {
"version": "2.3.3", "version": "2.3.3",
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz", "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz",
...@@ -15093,6 +15108,16 @@ ...@@ -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": { "vue-router": {
"version": "3.0.6", "version": "3.0.6",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.6.tgz", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.6.tgz",
......
...@@ -72,9 +72,11 @@ ...@@ -72,9 +72,11 @@
"shelljs": "^0.7.6", "shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1", "uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8", "url-loader": "^0.5.8",
"vue-hash-calendar": "^1.1.16",
"vue-imageview": "^1.0.5", "vue-imageview": "^1.0.5",
"vue-jest": "^1.0.2", "vue-jest": "^1.0.2",
"vue-loader": "^13.3.0", "vue-loader": "^13.3.0",
"vue-mobile-calendar": "^3.3.0",
"vue-style-loader": "^3.0.1", "vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2", "vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0", "webpack": "^3.6.0",
......
...@@ -35,5 +35,10 @@ const methodMap = { ...@@ -35,5 +35,10 @@ const methodMap = {
getSpeciminHdr:{url:url+'/mmmaterial/getlist/',method:'post'}, getSpeciminHdr:{url:url+'/mmmaterial/getlist/',method:'post'},
getSpeciminDtl:{url:url+'/mmmaterial/getdetail/',method:'post'}, getSpeciminDtl:{url:url+'/mmmaterial/getdetail/',method:'post'},
/**
* 老板看板
*/
getBoss:{url:url+'/boss/',method:"post"},
}; };
export default methodMap; export default methodMap;
...@@ -18,7 +18,9 @@ import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader ...@@ -18,7 +18,9 @@ import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader
import 'babel-polyfill' import 'babel-polyfill'
import echarts from 'echarts' import echarts from 'echarts'
import { ConfirmPlugin } from 'vux' import { ConfirmPlugin } from 'vux'
import Calendar from 'vue-mobile-calendar/lib/install.js'
Vue.use(Calendar)
Vue.use(Vuetify) Vue.use(Vuetify)
Vue.use(VueWechatTitle); Vue.use(VueWechatTitle);
Vue.use(VueRouter); Vue.use(VueRouter);
......
...@@ -100,6 +100,21 @@ let routes = [ ...@@ -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 @@ ...@@ -9,6 +9,7 @@
</template> </template>
<script> <script>
export default { export default {
name: 'main', name: 'main',
data () { data () {
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
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