提交
This commit is contained in:
磷叶
parent
88b3a77770
commit
b0cef59523
9
src/api/bst/dashboard.js
Normal file
9
src/api/bst/dashboard.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 获取首页数据
|
||||
export function getBrief() {
|
||||
return request({
|
||||
url: '/dashboard/brief',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
149
src/views/bst/order/components/OrderFlowList.vue
Normal file
149
src/views/bst/order/components/OrderFlowList.vue
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
<template>
|
||||
<div class="order-flow" v-loading="loading">
|
||||
<el-row :gutter="20" v-if="!isEmpty(list)">
|
||||
<el-col :span="6" v-for="order in list" :key="order.id">
|
||||
<el-card class="order-card" shadow="hover">
|
||||
<!-- 主图区域 -->
|
||||
<div class="order-main-image">
|
||||
<image-preview :src="order.picture" :width="200" :height="200" />
|
||||
</div>
|
||||
|
||||
<!-- 订单信息区域 -->
|
||||
<div class="order-info">
|
||||
<div class="info-row">
|
||||
<span class="label">订单号:</span>
|
||||
<span class="value">{{ order.orderNo }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">客户名称:</span>
|
||||
<span class="value">{{ order.customer }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">数量:</span>
|
||||
<span class="value">{{ order.num }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">装量:</span>
|
||||
<span class="value">{{ order.reportNum }}/{{ order.num }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">特殊要求:</span>
|
||||
<span class="value">{{ order.remark }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 子产品列表 -->
|
||||
<div class="sub-products">
|
||||
<div
|
||||
class="sub-product"
|
||||
v-for="(prod, index) in order.orderProdList"
|
||||
:key="index"
|
||||
>
|
||||
<el-checkbox :value="prod.source === 1" disabled
|
||||
>子产品{{ index + 1 }}</el-checkbox
|
||||
>
|
||||
<div class="prod-progress">
|
||||
<el-progress
|
||||
:percentage="prod.progress || 0"
|
||||
:color="ProgressColors"
|
||||
:format="ProgressFormat"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-empty v-else description="暂无进行中的订单" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ProgressColors, ProgressFormat } from '@/utils/constants'
|
||||
import { listOrder } from '@/api/bst/order'
|
||||
import { OrderStatus } from '@/utils/enums'
|
||||
import { isEmpty } from '@/utils/index'
|
||||
|
||||
export default {
|
||||
name: 'OrderFlowList',
|
||||
props: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ProgressColors,
|
||||
list: [],
|
||||
queryParams: {
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
status: OrderStatus.RELEASED,
|
||||
},
|
||||
loading: false,
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
ProgressFormat,
|
||||
isEmpty,
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listOrder(this.queryParams).then(res => {
|
||||
this.list = res.rows;
|
||||
this.total = res.total;
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.order-flow {
|
||||
.order-card {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.order-main-image {
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.order-info {
|
||||
.info-row {
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
|
||||
.label {
|
||||
color: #606266;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 1;
|
||||
color: #303133;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-products {
|
||||
margin-top: 15px;
|
||||
|
||||
.sub-product {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.prod-progress {
|
||||
flex: 1;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,44 +6,14 @@
|
|||
:with-header="false"
|
||||
>
|
||||
<div class="process-detail" v-loading="loading">
|
||||
<!-- 顶部信息区 -->
|
||||
<div class="section header-section">
|
||||
<div class="order-info">
|
||||
<div class="order-title">
|
||||
<order-link :id="detail.orderId" :name="detail.orderNo" />
|
||||
<dict-tag
|
||||
:value="detail.orderStatus"
|
||||
:options="dict.type.order_status"
|
||||
/>
|
||||
</div>
|
||||
<div class="product-name">{{ detail.orderProdName }}</div>
|
||||
</div>
|
||||
<div class="images-area">
|
||||
<div class="image-wrapper">
|
||||
<image-preview
|
||||
:src="detail.orderPicture"
|
||||
:width="70"
|
||||
:height="70"
|
||||
class="image-item"
|
||||
/>
|
||||
<div class="image-label">订单图片</div>
|
||||
</div>
|
||||
<div class="image-wrapper">
|
||||
<image-preview
|
||||
:src="detail.orderProdPicture"
|
||||
:width="70"
|
||||
:height="70"
|
||||
class="image-item"
|
||||
/>
|
||||
<div class="image-label">产品图片</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 操作按钮区 -->
|
||||
<div class="action-area">
|
||||
<el-button type="primary" @click="handleStore">上报库存</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 工序进度区 -->
|
||||
<div class="section process-section">
|
||||
<div class="progress-title">
|
||||
<span class="dept-name">{{ detail.deptName }}</span>
|
||||
<span class="dept-name">{{ detail.deptName | dv}}</span>
|
||||
<el-tag type="success" v-if="detail.isEnd">最终工序</el-tag>
|
||||
</div>
|
||||
<el-progress
|
||||
|
|
@ -68,35 +38,41 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 工艺参数区 -->
|
||||
<div class="section params-section">
|
||||
<div class="param-item" v-if="detail.handleWay">
|
||||
<div class="param-label">处理方式</div>
|
||||
<div class="param-value">{{detail.handleWay}}</div>
|
||||
</div>
|
||||
<div class="param-item" v-if="detail.effect">
|
||||
<div class="param-label">效果</div>
|
||||
<div class="param-value">{{detail.effect}}</div>
|
||||
</div>
|
||||
<div class="param-item" v-if="detail.color">
|
||||
<div class="param-label">颜色</div>
|
||||
<div class="param-value">{{detail.color}}</div>
|
||||
</div>
|
||||
<div class="param-item" v-if="detail.coverColor">
|
||||
<div class="param-label">盖子颜色</div>
|
||||
<div class="param-value">{{detail.coverColor}}</div>
|
||||
</div>
|
||||
<div class="param-item" v-if="detail.remark">
|
||||
<div class="param-label">备注</div>
|
||||
<div class="param-value">{{detail.remark}}</div>
|
||||
</div>
|
||||
<div class="group-title">订单信息</div>
|
||||
<div class="header-box">
|
||||
<image-preview :src="detail.orderPicture" :width="100" :height="100" style="margin-right: 16px"/>
|
||||
<el-descriptions style="flex: 1" :column="1">
|
||||
<el-descriptions-item label="订单编号">{{ detail.orderNo | dv}}</el-descriptions-item>
|
||||
<el-descriptions-item label="订单状态">
|
||||
<dict-tag :value="detail.orderStatus" :options="dict.type.order_status" size="mini"/>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="客户">{{ detail.orderCustomer | dv}}</el-descriptions-item>
|
||||
<el-descriptions-item label="订单日期">{{ detail.orderDate | dv}}</el-descriptions-item>
|
||||
<el-descriptions-item label="交货日期">{{ detail.orderDeliveryDate | dv}}</el-descriptions-item>
|
||||
<el-descriptions-item label="用料">{{ detail.orderMaterial | dv}}</el-descriptions-item>
|
||||
<el-descriptions-item label="特殊要求">{{ detail.orderRemark | dv}}</el-descriptions-item>
|
||||
<el-descriptions-item label="创建人">{{ detail.orderCreateBy | dv}}</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间">{{ detail.orderCreateTime | dv}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮区 -->
|
||||
<div class="action-area">
|
||||
<el-button type="primary">上报库存</el-button>
|
||||
<div class="group-title">产品信息</div>
|
||||
<div class="header-box">
|
||||
<image-preview :src="detail.orderProdPicture" :width="100" :height="100" style="margin-right: 16px"/>
|
||||
<el-descriptions style="flex: 1" :column="1">
|
||||
<el-descriptions-item label="产品名称">{{ detail.orderProdName | dv}}</el-descriptions-item>
|
||||
<el-descriptions-item label="产品规格">{{ detail.orderProdSpec | dv}}</el-descriptions-item>
|
||||
<el-descriptions-item label="物料编码">{{ detail.orderProdMaterialNo | dv}}</el-descriptions-item>
|
||||
<el-descriptions-item label="处理方式">{{ detail.handleWay | dv}}</el-descriptions-item>
|
||||
<el-descriptions-item label="效果">{{ detail.effect | dv}}</el-descriptions-item>
|
||||
<el-descriptions-item label="颜色">{{ detail.color | dv}}</el-descriptions-item>
|
||||
<el-descriptions-item label="盖子颜色">{{ detail.coverColor | dv}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<store-edit-dialog :show.sync="showStoreEdit" :process-id="detail.id" @success="getDetail"/>
|
||||
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
|
|
@ -105,12 +81,14 @@ import { ProgressColors, ProgressFormat } from '@/utils/constants'
|
|||
import OrderLink from '@/components/Business/Order/OrderLink'
|
||||
import BooleanTag from '@/components/BooleanTag'
|
||||
import { getProdProcess } from '@/api/bst/prodProcess'
|
||||
import StoreEditDialog from '@/views/bst/store/components/StoreEditDialog.vue'
|
||||
|
||||
export default {
|
||||
name: 'ProdProcessDetail',
|
||||
components: {
|
||||
OrderLink,
|
||||
BooleanTag
|
||||
BooleanTag,
|
||||
StoreEditDialog
|
||||
},
|
||||
dicts: ['order_status'],
|
||||
props: {
|
||||
|
|
@ -125,6 +103,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
showStoreEdit: false,
|
||||
ProgressColors,
|
||||
detail: {},
|
||||
loading: false,
|
||||
|
|
@ -142,6 +121,9 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
ProgressFormat,
|
||||
handleStore() {
|
||||
this.showStoreEdit = true;
|
||||
},
|
||||
onOpen() {
|
||||
this.getDetail();
|
||||
},
|
||||
|
|
@ -161,6 +143,18 @@ export default {
|
|||
.process-detail {
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
.group-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
margin-bottom: 16px;
|
||||
border-left: 4px solid #409eff;
|
||||
padding-left: 8px;
|
||||
}
|
||||
.header-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.section {
|
||||
background: #fff;
|
||||
|
|
@ -279,28 +273,9 @@ export default {
|
|||
}
|
||||
|
||||
.action-area {
|
||||
padding: 16px 0;
|
||||
border-top: 1px solid #ebeef5;
|
||||
padding: 8px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端适配
|
||||
@media screen and (max-width: 768px) {
|
||||
.process-detail {
|
||||
padding: 12px;
|
||||
|
||||
.section {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.header-section {
|
||||
.images-area {
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -154,14 +154,14 @@
|
|||
</template>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" v-if="!isCustomData">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
<!-- <el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-plus"
|
||||
@click="handleStore(scope.row)"
|
||||
v-has-permi="['bst:store:add']"
|
||||
v-show="OrderStatus.canAddStore().includes(scope.row.orderStatus)"
|
||||
>上报入库</el-button>
|
||||
>上报入库</el-button> -->
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
|
|
@ -181,8 +181,6 @@
|
|||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<store-edit-dialog :show.sync="showStoreEdit" :process-id="row.id" @success="getList"/>
|
||||
|
||||
<prod-process-detail :id="row.id" :show.sync="showDetail" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -198,7 +196,6 @@ import {
|
|||
import { $showColumns } from '@/utils/mixins'
|
||||
import FormCol from '@/components/FormCol/index.vue'
|
||||
import BooleanTag from '@/components/BooleanTag/index.vue'
|
||||
import StoreEditDialog from '@/views/bst/store/components/StoreEditDialog.vue'
|
||||
import DeptTreeSelect from '@/components/Business/Dept/DeptTreeSelect.vue'
|
||||
import { ProgressColors, ProgressFormat } from '@/utils/constants'
|
||||
import OrderLink from '@/components/Business/Order/OrderLink.vue'
|
||||
|
|
@ -215,7 +212,7 @@ export default {
|
|||
name: "ProdProcess",
|
||||
dicts: ['order_status'],
|
||||
mixins: [$showColumns],
|
||||
components: { OrderLink, DeptTreeSelect, StoreEditDialog, BooleanTag, FormCol, ProdProcessDetail},
|
||||
components: { OrderLink, DeptTreeSelect, BooleanTag, FormCol, ProdProcessDetail},
|
||||
props: {
|
||||
// 自定义数据
|
||||
customData: {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<el-dialog :visible.sync="visible" width="500px" :title="title" @open="onOpen">
|
||||
<el-dialog :visible.sync="visible" width="500px" :title="title" @open="onOpen" append-to-body>
|
||||
<el-form :model="form" :rules="rules" ref="form" label-width="80px">
|
||||
<el-row>
|
||||
<form-col :span="span" label="工序" prop="processId">
|
||||
|
|
|
|||
|
|
@ -1,54 +1,41 @@
|
|||
<template>
|
||||
<el-row :gutter="40" class="panel-group">
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('newVisitis')">
|
||||
<div class="card-panel-icon-wrapper icon-people">
|
||||
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
|
||||
<el-row :gutter="40" class="panel-group" v-loading="loading">
|
||||
<el-col :xs="8" :sm="8" :lg="8" class="card-panel-col">
|
||||
<div class="card-panel panel-orange">
|
||||
<div class="card-panel-icon-wrapper icon-orange">
|
||||
<svg-icon icon-class="chart" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
访客
|
||||
本月订单
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
|
||||
<count-to :start-val="0" :end-val="data.monthOrderCount" :duration="2600" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('messages')">
|
||||
<el-col :xs="8" :sm="8" :lg="8" class="card-panel-col">
|
||||
<div class="card-panel panel-green">
|
||||
<div class="card-panel-icon-wrapper icon-message">
|
||||
<svg-icon icon-class="message" class-name="card-panel-icon" />
|
||||
<svg-icon icon-class="form" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
消息
|
||||
订单总数
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
|
||||
<count-to :start-val="0" :end-val="data.totalOrderCount" :duration="3000" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('purchases')">
|
||||
<div class="card-panel-icon-wrapper icon-money">
|
||||
<svg-icon icon-class="money" class-name="card-panel-icon" />
|
||||
<el-col :xs="8" :sm="8" :lg="8" class="card-panel-col">
|
||||
<div class="card-panel panel-blue">
|
||||
<div class="card-panel-icon-wrapper icon-blue">
|
||||
<svg-icon icon-class="time" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
金额
|
||||
待完成订单
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('shoppings')">
|
||||
<div class="card-panel-icon-wrapper icon-shopping">
|
||||
<svg-icon icon-class="shopping" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
订单
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
|
||||
<count-to :start-val="0" :end-val="data.releasedOrderCount" :duration="3200" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -57,14 +44,29 @@
|
|||
|
||||
<script>
|
||||
import CountTo from 'vue-count-to'
|
||||
import {getBrief} from "@/api/bst/dashboard";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
data: {}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
CountTo
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
handleSetLineChartData(type) {
|
||||
this.$emit('handleSetLineChartData', type)
|
||||
getData() {
|
||||
this.loading = true;
|
||||
getBrief().then(res => {
|
||||
this.data = res.data;
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -75,7 +77,7 @@ export default {
|
|||
margin-top: 18px;
|
||||
|
||||
.card-panel-col {
|
||||
margin-bottom: 32px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card-panel {
|
||||
|
|
@ -85,8 +87,6 @@ export default {
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #666;
|
||||
background: #fff;
|
||||
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
|
||||
border-color: rgba(0, 0, 0, .05);
|
||||
|
||||
&:hover {
|
||||
|
|
@ -94,37 +94,37 @@ export default {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
.icon-people {
|
||||
background: #40c9c6;
|
||||
.icon-orange {
|
||||
background: #ffd234;
|
||||
}
|
||||
|
||||
.icon-message {
|
||||
background: #36a3f7;
|
||||
background: #86DF6C;
|
||||
}
|
||||
|
||||
.icon-money {
|
||||
background: #f4516c;
|
||||
.icon-blue {
|
||||
background: #84b3ef;
|
||||
}
|
||||
|
||||
.icon-shopping {
|
||||
background: #34bfa3
|
||||
.icon-red {
|
||||
background: #ef8484
|
||||
}
|
||||
}
|
||||
|
||||
.icon-people {
|
||||
color: #40c9c6;
|
||||
.icon-orange {
|
||||
color: #ffd234;
|
||||
}
|
||||
|
||||
.icon-message {
|
||||
color: #36a3f7;
|
||||
color: #86DF6C;
|
||||
}
|
||||
|
||||
.icon-money {
|
||||
color: #f4516c;
|
||||
.icon-blue {
|
||||
color: #84b3ef;
|
||||
}
|
||||
|
||||
.icon-shopping {
|
||||
color: #34bfa3
|
||||
.icon-red {
|
||||
color: #ef8484
|
||||
}
|
||||
|
||||
.card-panel-icon-wrapper {
|
||||
|
|
@ -141,10 +141,10 @@ export default {
|
|||
}
|
||||
|
||||
.card-panel-description {
|
||||
float: right;
|
||||
float: left;
|
||||
font-weight: bold;
|
||||
margin: 26px;
|
||||
margin-left: 0px;
|
||||
margin-right: 0;
|
||||
|
||||
.card-panel-text {
|
||||
line-height: 18px;
|
||||
|
|
@ -161,21 +161,25 @@ export default {
|
|||
}
|
||||
|
||||
@media (max-width:550px) {
|
||||
.card-panel-description {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-panel-icon-wrapper {
|
||||
float: none !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 !important;
|
||||
|
||||
.svg-icon {
|
||||
display: block;
|
||||
margin: 14px auto !important;
|
||||
float: none !important;
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-blue {
|
||||
background: linear-gradient( 180deg, #F2F9FE 0%, #E6F4FE 100%);
|
||||
}
|
||||
.panel-orange {
|
||||
background: linear-gradient( 180deg, #fefaf2 0%, #fef2e6 100%);
|
||||
}
|
||||
.panel-green {
|
||||
background: linear-gradient( 180deg, #F5FEF2 0%, #E6FEEE 100%);
|
||||
}
|
||||
.panel-purple {
|
||||
background: linear-gradient( 180deg, #F6F7FF 0%, #ECECFF 100%);
|
||||
}
|
||||
.panel-red {
|
||||
background: linear-gradient( 180deg, #fff6f6 0%, #ffecec 100%);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,87 +1,33 @@
|
|||
<template>
|
||||
<div class="app-container home">
|
||||
<h3>欢迎使用伟旺生产管理系统!</h3>
|
||||
<div class="dashboard-editor-container">
|
||||
|
||||
<panel-group />
|
||||
|
||||
<div class="order-flow-title">进行中的订单</div>
|
||||
<order-flow-list />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PanelGroup from './dashboard/PanelGroup'
|
||||
import OrderFlowList from './bst/order/components/OrderFlowList'
|
||||
|
||||
export default {
|
||||
name: "Index",
|
||||
name: 'Index',
|
||||
components: {
|
||||
PanelGroup,
|
||||
OrderFlowList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 版本号
|
||||
version: "3.8.8"
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
goTarget(href) {
|
||||
window.open(href, "_blank");
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.home {
|
||||
blockquote {
|
||||
padding: 10px 20px;
|
||||
margin: 0 0 20px;
|
||||
font-size: 17.5px;
|
||||
border-left: 5px solid #eee;
|
||||
}
|
||||
hr {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
border: 0;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
.col-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
color: #676a6c;
|
||||
overflow-x: hidden;
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 10px;
|
||||
font-size: 26px;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 10px;
|
||||
|
||||
b {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.update-log {
|
||||
ol {
|
||||
display: block;
|
||||
list-style-type: decimal;
|
||||
margin-block-start: 1em;
|
||||
margin-block-end: 1em;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
padding-inline-start: 40px;
|
||||
}
|
||||
}
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,98 +0,0 @@
|
|||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
|
||||
<panel-group @handleSetLineChartData="handleSetLineChartData" />
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<line-chart :chart-data="lineChartData" />
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<raddar-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<pie-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<bar-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PanelGroup from './dashboard/PanelGroup'
|
||||
import LineChart from './dashboard/LineChart'
|
||||
import RaddarChart from './dashboard/RaddarChart'
|
||||
import PieChart from './dashboard/PieChart'
|
||||
import BarChart from './dashboard/BarChart'
|
||||
|
||||
const lineChartData = {
|
||||
newVisitis: {
|
||||
expectedData: [100, 120, 161, 134, 105, 160, 165],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 145]
|
||||
},
|
||||
messages: {
|
||||
expectedData: [200, 192, 120, 144, 160, 130, 140],
|
||||
actualData: [180, 160, 151, 106, 145, 150, 130]
|
||||
},
|
||||
purchases: {
|
||||
expectedData: [80, 100, 121, 104, 105, 90, 100],
|
||||
actualData: [120, 90, 100, 138, 142, 130, 130]
|
||||
},
|
||||
shoppings: {
|
||||
expectedData: [130, 140, 141, 142, 145, 150, 160],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 130]
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: {
|
||||
PanelGroup,
|
||||
LineChart,
|
||||
RaddarChart,
|
||||
PieChart,
|
||||
BarChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lineChartData: lineChartData.newVisitis
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSetLineChartData(type) {
|
||||
this.lineChartData = lineChartData[type]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user