yunxi
/
GWEip
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首页UI/UX

Browse Source
main
siontion 7 months ago
parent 018bc26eee
commit 7ae741bc1d
5 changed files with 7702 additions and 96 deletions
Show Stats Download Patch File Download Diff File

4
.env
Unescape View File

@ -4,8 +4,8 @@ VITE_PORT=8090
# open 运行 npm run dev 时自动打开浏览
VITE_OPEN=true
# 内部测试
VITE_BASE_URL='http://222.71.165.188:8102'
# VITE_BASE_URL='http://localhost:8102'
# VITE_BASE_URL='http://222.71.165.188:8102'
VITE_BASE_URL='http://localhost:8102'
# VITE_BASE_URL='http://192.168.30.3:8102'
# 外网测试
# VITE_BASE_URL='http://60.190.91.78:8102'

BIN
gw-web-24031319.zip
View File

Binary file not shown.

BIN
gw-web-24032215.zip
View File

Binary file not shown.

7593
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

189
src/views/Gw/Home.vue
Unescape View File

@ -13,8 +13,8 @@
<a-col>
<a-row :gutter="[10, 10]" justify="start">
<a-col :span="24"><span>采购订单数</span></a-col>
<a-col
:span="24"><span>{{ dashboardData.purchaseNum }}</span><span>条</span></a-col>
<a-col :span="24"><span>{{ dashboardData.purchaseNum
}}</span><span>条</span></a-col>
</a-row>
</a-col>
</a-row>
@ -42,7 +42,8 @@
<a-col>
<a-row :gutter="[10, 10]" justify="start">
<a-col :span="24"><span>生产订单数</span></a-col>
<a-col :span="24"><span>{{ dashboardData.orderNum }}</span><span>条</span></a-col>
<a-col :span="24"><span>{{ dashboardData.orderNum
}}</span><span>条</span></a-col>
</a-row>
</a-col>
</a-row>
@ -64,33 +65,31 @@
</a-card>
</a-card>
</a-col>
<!-- <a-col :span="8">
<a-card title="订单跟踪统计">
<a-row :gutter="[10, 25]">
<a-col :span="24">
<a-row :gutter="[10, 10]">
<a-col flex="0 0 60px" style="text-align: center;">
<i class="iconfont icon-xiaoshoudingdan"
style="font-size: 64px;color: #005780;line-height: 54px;"></i>
<a-row>
<a-col :span="8">
<a-card :title="aTitle">
<vxe-grid ref="xGrid" :stripe="true" v-bind="gridOptionsA" :height="300">
</vxe-grid>
</a-card>
</a-col>
<a-col flex="1 1 auto">
<a-row :gutter="[10, 10]">
<a-col :span="24"><span>订单总数：</span><span>385</span><span>单</span></a-col>
<a-col :span="12"><span>未完成订单：</span><span>385</span><span>单</span></a-col>
<a-col :span="12"><span>已完成订单：</span><span>385</span><span>单</span></a-col>
</a-row>
<a-col :span="8">
<a-card :title="bTitle">
<vxe-grid ref="xGrid" :stripe="true" v-bind="gridOptionsB" :height="300">
</vxe-grid>
</a-card>
</a-col>
</a-row>
<a-col :span="8">
<a-card :title="cTitle">
<vxe-grid ref="xGrid" :stripe="true" v-bind="gridOptionsC" :height="300">
</vxe-grid>
</a-card>
</a-col>
<a-col :span="24">
<a-row :gutter="[10, 10]">
<a-col :span="12"><span>本月新增：</span><span>104</span><span>单</span></a-col>
<a-col :span="12"><span>本月累计：</span><span>211</span><span>单</span></a-col>
</a-row>
</a-col>
</a-row>
</a-card>
</a-col> -->
<a-col :span="24">
<a-card title="近30天上传数据趋势图（单位：条）">
<div style="height: 300px;overflow: hidden;">
@ -98,68 +97,6 @@
</div>
</a-card>
</a-col>
<!-- <a-col :span="8">
<a-card title="数据上报情况">
<div style="height: 200px;overflow: hidden;">
<a-tabs type="card">
<a-tab-pane key="1" tab="配电箱">
<a-row :gutter="[10, 10]">
<a-col :span="8">
穿柜接管
</a-col>
<a-col :span="8">
待上传：12条
</a-col>
<a-col :span="8">
已上传：1条
</a-col>
<a-col :span="8">
穿柜接管
</a-col>
<a-col :span="8">
待上传：12条
</a-col>
<a-col :span="8">
已上传：1条
</a-col>
<a-col :span="8">
穿柜接管
</a-col>
<a-col :span="8">
待上传：12条
</a-col>
<a-col :span="8">
已上传：1条
</a-col>
<a-col :span="8">
穿柜接管
</a-col>
<a-col :span="8">
待上传：12条
</a-col>
<a-col :span="8">
已上传：1条
</a-col>
</a-row>
</a-tab-pane>
</a-tabs>
</div>
</a-card>
</a-col> -->
<!-- <a-col :span="12">
<a-card title="订单状态">
<div style="height: 200px;overflow: hidden;">
<XyG2IntervalA1 />
</div>
</a-card>
</a-col>
<a-col :span="12">
<a-card title="订单数据趋势">
<div style="height: 200px;overflow: hidden;">
<XyzG2IntervalA />
</div>
</a-card>
</a-col> -->
<a-col :span="24" style="height: 20px;"></a-col>
</a-row>
</div>
@ -169,11 +106,12 @@
import { onMounted, ref, reactive, h } from 'vue';
import { UserOutlined } from '@ant-design/icons-vue';
import LineBasicA from '../../components/g2/LineBasicA.vue'
import XyzG2IntervalA from '../../components/XyzG2/XyzG2IntervalA.vue'
import XyG2IntervalA1 from '../../components/XyG2/XyG2IntervalA1.vue'
import * as dashboradApi from '@/api/gw/dashborad'
const aTitle= ref("")
const bTitle= ref("")
const cTitle= ref("")
// 表单数据
const dashboardData: any = ref(
{
@ -189,10 +127,85 @@ const dashboardChart: any = ref(
"saleNum": undefined,
"workNum": undefined
})
const gridOptionsA: any = reactive({
columns: [
{ field: 'BuyName', title: '采购方公司名称' },
{ field: 'BuyNo', title: '采购订单编号' },
{ field: 'Amount', title: '采购数量' },
{ field: 'DlvTime', title: '计划完成日期' },
{ field: 'Span', title: '距离到期/天' },
],
proxyConfig: {
seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化
sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
form: true, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
// 只接收Promise，具体实现自由发挥
ajax: {
// 当点击工具栏查询按钮或者手动提交指令 query或reload 时会被触发
query: async () => {
const data = await MuPaiApi.getMuPaiPaging(queryParamsA)
return data
},
}
}
})
const gridOptionsB: any = reactive({
columns: [
{ field: 'BuyName', title: '采购方公司名称' },
{ field: 'PoNo', title: '生产订单编号' },
{ field: 'Amount', title: '生产数量' },
{ field: 'DlvTime', title: '计划完成日期' },
{ field: 'Span', title: '距离到期/天' },
],
proxyConfig: {
seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化
sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
form: true, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
// 只接收Promise，具体实现自由发挥
ajax: {
// 当点击工具栏查询按钮或者手动提交指令 query或reload 时会被触发
query: async () => {
const data = await MuPaiApi.getMuPaiPaging(queryParamsA)
return data
},
}
}
})
const gridOptionsC: any = reactive({
columns: [
{ field: 'BuyName', title: '采购方公司名称' },
{ field: 'WoNo', title: '生产工单编号' },
{ field: 'DlvTime', title: '计划完成日期' },
{ field: 'Span', title: '距离到期/天' },
],
proxyConfig: {
seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化
sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
form: true, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
// 只接收Promise，具体实现自由发挥
ajax: {
// 当点击工具栏查询按钮或者手动提交指令 query或reload 时会被触发
query: async () => {
const data = await MuPaiApi.getMuPaiPaging(queryParamsA)
return data
},
}
}
})
// 挂载
onMounted(() => {
fnGetDashboardData()
fnGetDashboardChart()
aTitle.value = "临期采购订单：99条"
bTitle.value = "临期生产订单：99条"
cTitle.value = "临期生产工单：99条"
})
// 获取Dashboard数据
const fnGetDashboardData = async () => {

Write Preview
Loading…
Cancel
Save