|
|
@@ -0,0 +1,430 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="gutter-example">
|
|
|
+ <a-row :gutter="30">
|
|
|
+ <a-col class="gutter-row" :span="8">
|
|
|
+ <div class="gutter-box">
|
|
|
+ <a-row type="flex" justify="space-between" style="flex:1; font-size:22px;font-weight: 500;color: #373737;">
|
|
|
+ <a-col>待入库数量</a-col>
|
|
|
+ <a-col>200</a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
|
|
|
+ <a-col >
|
|
|
+ <a-badge color="#E4007F"/>
|
|
|
+ <span style="color:#E4007F;">采购入库 77</span>
|
|
|
+ </a-col>
|
|
|
+ <a-col >
|
|
|
+ <a-badge color="#5864FF"/>
|
|
|
+ <span style="color:#5864FF;">退库入库 77</span>
|
|
|
+
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
|
|
|
+ <a-col >
|
|
|
+ <a-badge color="#F19149"/>
|
|
|
+ <span style="color:#F19149;">调拨入库 77</span>
|
|
|
+
|
|
|
+ </a-col>
|
|
|
+ <a-col>
|
|
|
+ <a-badge color="#009944"/>
|
|
|
+ <span style="color:#009944;">XXX出库 77</span>
|
|
|
+
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col class="gutter-row" :span="8">
|
|
|
+ <div class="gutter-box">
|
|
|
+ <a-row type="flex" justify="space-between" style="flex:1; font-size:22px;font-weight: 500;color: #373737;">
|
|
|
+ <a-col>待出库数量</a-col>
|
|
|
+ <a-col>200</a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
|
|
|
+ <a-col >
|
|
|
+ <a-badge color="#E4007F"/>
|
|
|
+ <span style="color:#E4007F;">领用出库 77</span>
|
|
|
+ </a-col>
|
|
|
+ <a-col >
|
|
|
+ <a-badge color="#5864FF"/>
|
|
|
+ <span style="color:#5864FF;">退库入库 77</span>
|
|
|
+
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
|
|
|
+ <a-col >
|
|
|
+ <a-badge color="#F19149"/>
|
|
|
+ <span style="color:#F19149;">调拨出库 77</span>
|
|
|
+
|
|
|
+ </a-col>
|
|
|
+ <a-col>
|
|
|
+ <a-badge color="#009944"/>
|
|
|
+ <span style="color:#009944;">XXX出库 77</span>
|
|
|
+
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col class="gutter-row" :span="8">
|
|
|
+ <div style="display:flex;text-align:center;background:#fff;height: 170px;">
|
|
|
+ <div style="width:48%;margin:auto;font-size:30px; line-height: 60px;">
|
|
|
+ <div>备件总数</div>
|
|
|
+ <div style="font-size:24px;">333333</div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 1px;height: 70px;background: #999999;margin:auto;"></div>
|
|
|
+ <div style="width:48%;margin:auto; font-size:30px;line-height: 60px;">
|
|
|
+ <div>备件总数</div>
|
|
|
+ <div style="font-size:24px;">333333</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ <div class="gutter-example">
|
|
|
+ <a-row :gutter="[30,40]">
|
|
|
+ <a-col class="gutter-row" :span="6">
|
|
|
+ <div style="height: 471px;background: #FFFFFF;">
|
|
|
+ <div id="pie"></div>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col class="gutter-row" :span="12">
|
|
|
+ <div style="height: 471px;background: #FFFFFF;">
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col class="gutter-row" :span="6">
|
|
|
+ <div style="height: 471px;display:flex;flex-direction:column;justify-content: space-between">
|
|
|
+ <div class="btn" style="background:linear-gradient(to right,#36B5FA,#26ECF5);">
|
|
|
+ <my-icon type="icon-chukuguanli" style="font-size:58px;"/>
|
|
|
+ <span>出库</span>
|
|
|
+ </div>
|
|
|
+ <div class="btn" style="background:linear-gradient(to right,#FF416D,#FF847F);">
|
|
|
+ <my-icon type="icon-rukuguanli" style="font-size:58px;"/>
|
|
|
+ <span>入库</span>
|
|
|
+ </div>
|
|
|
+ <div class="btn" style="background:linear-gradient(to right,#FB47D1,#F96EFE);">
|
|
|
+ <my-icon type="icon-zichanguanli-zichantiaobo" style="font-size:58px;"/>
|
|
|
+ <span>调拨</span>
|
|
|
+ </div>
|
|
|
+ <div class="btn" style="background:linear-gradient(to right,#941FFF,#BC72FB);">
|
|
|
+ <my-icon type="icon-xinzengyugengxinhuopindangan-copy" style="font-size:58px;"/>
|
|
|
+ <span>新增</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ <div class="gutter-example">
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <a-col class="gutter-row" :span="6">
|
|
|
+ <div class="information">
|
|
|
+ <div style="display:flex;justify-content: space-between;align-items: center; padding-bottom:20px;">
|
|
|
+ <div style="display:flex; width:65px;height:17px;justify-content: space-between;align-items: center;">
|
|
|
+ <div style=" width: 17px;height: 17px;background: #3462FD;border-radius: 50%;"></div>
|
|
|
+ <div style="font-size: 18px;font-weight: 800;color: #333333;">资料</div>
|
|
|
+ </div>
|
|
|
+ <div >
|
|
|
+ 查看全部
|
|
|
+ <my-icon type="icon-xiangyou-copy" style="font-size:13px;"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="demo-infinite-container"
|
|
|
+ >
|
|
|
+ <a-list size="small" bordered :data-source="information">
|
|
|
+ <a-list-item slot="renderItem" slot-scope="item,index" :class="{discolor: index%2}">
|
|
|
+ <a-list-item-meta>
|
|
|
+ <div slot="title" :href="item.href">{{ item.name }}</div>
|
|
|
+ </a-list-item-meta>
|
|
|
+ <div>{{ item.time }}</div>
|
|
|
+ </a-list-item>
|
|
|
+ </a-list>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col class="gutter-row" :span="18">
|
|
|
+ <div class="information">
|
|
|
+ <s-table
|
|
|
+ ref="table"
|
|
|
+ size="small"
|
|
|
+ bordered
|
|
|
+ rowKey="id"
|
|
|
+ :columns="columns"
|
|
|
+ :data="loadData"
|
|
|
+ :pageSize="10"
|
|
|
+ :scroll="{ y: 190 }"
|
|
|
+ >
|
|
|
+ <span slot="action" slot-scope="record">
|
|
|
+ <template>
|
|
|
+ <a @click="handle(record)">详情</a>
|
|
|
+ <a-divider v-if="record.status === 1" type="vertical" />
|
|
|
+ <a v-if="record.status === 1" @click="dealJumpDetail(record)">跳转</a>
|
|
|
+ </template>
|
|
|
+ </span>
|
|
|
+ <span slot="content" slot-scope="text" v-html="text">
|
|
|
+ </span>
|
|
|
+ </s-table>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { STable } from '@/components'
|
|
|
+import { getWorkplaceBacklogUserPage } from '@/api/workplace/backlog'
|
|
|
+import { Chart } from '@antv/g2'
|
|
|
+export default {
|
|
|
+ name: 'NewWorkplaceBacklog',
|
|
|
+ components: {
|
|
|
+ STable,
|
|
|
+ Chart
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ equipmentData: [
|
|
|
+ { item: '事例一', count: 40, percent: 0.4 },
|
|
|
+ { item: '事例二', count: 21, percent: 0.21 },
|
|
|
+ { item: '事例三', count: 17, percent: 0.17 },
|
|
|
+ { item: '事例四', count: 13, percent: 0.13 },
|
|
|
+ { item: '事例五', count: 9, percent: 0.09 }
|
|
|
+ ],
|
|
|
+ allCount: 100,
|
|
|
+ chart: {},
|
|
|
+ queryParam: {
|
|
|
+ status: 1
|
|
|
+ },
|
|
|
+ information: [
|
|
|
+ {
|
|
|
+ name: '项目管理通知',
|
|
|
+ time: '2022-4-7'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '项目管理通知',
|
|
|
+ time: '2022-4-7'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '项目管理通知',
|
|
|
+ time: '2022-4-7'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '项目管理通知',
|
|
|
+ time: '2022-4-7'
|
|
|
+ }, {
|
|
|
+ name: '项目管理通知',
|
|
|
+ time: '2022-4-7'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '项目管理通知',
|
|
|
+ time: '2022-4-7'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '项目管理通知',
|
|
|
+ time: '2022-4-7'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ title: '序号',
|
|
|
+ dataIndex: 'index',
|
|
|
+ align: 'center',
|
|
|
+ width: 50,
|
|
|
+ customRender: (text, record, index) => {
|
|
|
+ return `${(this.$refs.table.localPagination.current - 1) * this.$refs.table.localPagination.pageSize + index + 1}`
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '类型',
|
|
|
+ dataIndex: 'type',
|
|
|
+ align: 'center',
|
|
|
+ width: 100,
|
|
|
+ customRender: (text, record, index) => {
|
|
|
+ return this.typeDict[text]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '详细类型',
|
|
|
+ dataIndex: 'detailType',
|
|
|
+ align: 'center',
|
|
|
+ width: 140,
|
|
|
+ customRender: (text, record, index) => {
|
|
|
+ return this.typeDetailDict[text]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '内容',
|
|
|
+ dataIndex: 'content',
|
|
|
+ align: 'center',
|
|
|
+ width: 460,
|
|
|
+ ellipsis: true,
|
|
|
+ scopedSlots: { customRender: 'content' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '时间',
|
|
|
+ align: 'center',
|
|
|
+ width: 160,
|
|
|
+ dataIndex: 'createdTime'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ align: 'center',
|
|
|
+ dataIndex: 'status',
|
|
|
+ width: 100,
|
|
|
+ customRender: (text, record, index) => {
|
|
|
+ return (text === 1 ? '未读' : '已读')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ key: 'action',
|
|
|
+ width: 150,
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'action' }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 加载数据方法 必须为 Promise 对象
|
|
|
+ loadData: parameter => {
|
|
|
+ parameter = {
|
|
|
+ ...parameter,
|
|
|
+ ...this.queryParam
|
|
|
+ }
|
|
|
+ return getWorkplaceBacklogUserPage(parameter)
|
|
|
+ .then(res => {
|
|
|
+ return res.data
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.getDict()
|
|
|
+ this.getInfo()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getDict () {
|
|
|
+ this.typeDict = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.WORKPLACE_BACKLOG_TYPE)
|
|
|
+ this.typeDetailDict = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.WORKPLACE_BACKLOG_DETAIL_TYPE)
|
|
|
+ },
|
|
|
+ getInfo () {
|
|
|
+ this.getCharts('pie', this.equipmentData)
|
|
|
+ },
|
|
|
+ getCharts (id, data) {
|
|
|
+ this.chart = new Chart({
|
|
|
+ container: id,
|
|
|
+ autoFit: true,
|
|
|
+ height: 300
|
|
|
+ })
|
|
|
+ this.chart.data(data)
|
|
|
+ this.chart.scale('percent', {
|
|
|
+ formatter: (val) => {
|
|
|
+ val = val * 100 + '%'
|
|
|
+ return val
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.chart.coordinate('theta', {
|
|
|
+ radius: 0.75,
|
|
|
+ innerRadius: 0.6
|
|
|
+ })
|
|
|
+ this.chart.tooltip({
|
|
|
+ showTitle: false,
|
|
|
+ showMarkers: false,
|
|
|
+ itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
|
|
|
+ })
|
|
|
+ this.chart
|
|
|
+ .annotation()
|
|
|
+ .text({
|
|
|
+ position: ['50%', '50%'],
|
|
|
+ content: '主机',
|
|
|
+ style: {
|
|
|
+ fontSize: 14,
|
|
|
+ fill: '#8c8c8c',
|
|
|
+ textAlign: 'center'
|
|
|
+ },
|
|
|
+ offsetY: -20
|
|
|
+ })
|
|
|
+ .text({
|
|
|
+ position: ['50%', '50%'],
|
|
|
+ content: '100',
|
|
|
+ style: {
|
|
|
+ fontSize: 20,
|
|
|
+ fill: '#8c8c8c',
|
|
|
+ textAlign: 'center'
|
|
|
+ },
|
|
|
+ offsetX: -10,
|
|
|
+ offsetY: 20
|
|
|
+ })
|
|
|
+ .text({
|
|
|
+ position: ['50%', '50%'],
|
|
|
+ content: '台',
|
|
|
+ style: {
|
|
|
+ fontSize: 14,
|
|
|
+ fill: '#8c8c8c',
|
|
|
+ textAlign: 'center'
|
|
|
+ },
|
|
|
+ offsetY: 20,
|
|
|
+ offsetX: 20
|
|
|
+ })
|
|
|
+ this.chart
|
|
|
+ .interval()
|
|
|
+ .adjust('stack')
|
|
|
+ .position('count')
|
|
|
+ .color('item')
|
|
|
+ .label('percent', (percent) => {
|
|
|
+ return {
|
|
|
+ content: (data) => {
|
|
|
+ return `${data.item}: ${percent * 100}%`
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .tooltip('item*percent', (item, percent) => {
|
|
|
+ percent = percent * 100 + '%'
|
|
|
+ return {
|
|
|
+ name: item,
|
|
|
+ value: percent
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ this.chart.interaction('element-active')
|
|
|
+ this.chart.render()
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.gutter-example >>> .ant-row > div {
|
|
|
+ background: transparent;
|
|
|
+ border: 0;
|
|
|
+ font-family: PingFang SC;
|
|
|
+}
|
|
|
+.gutter-box {
|
|
|
+ display:flex;
|
|
|
+ flex-direction:column;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: #fff;
|
|
|
+ padding: 18px 41px;
|
|
|
+ height: 170px;
|
|
|
+}
|
|
|
+.btn{
|
|
|
+height: 113px;
|
|
|
+width: 100%;
|
|
|
+color: #fff!important;
|
|
|
+font-size:28px;
|
|
|
+border-radius: 20px;
|
|
|
+display:flex;
|
|
|
+align-items: center;
|
|
|
+justify-content: space-around;
|
|
|
+}
|
|
|
+.information{
|
|
|
+ background: #fff;
|
|
|
+ padding: 30px 12px;
|
|
|
+ height: 260px;
|
|
|
+ color:#666;
|
|
|
+}
|
|
|
+.discolor{
|
|
|
+ background: #EFEFFB;
|
|
|
+}
|
|
|
+.demo-infinite-container {
|
|
|
+ overflow: auto;
|
|
|
+ height: 190px;
|
|
|
+}
|
|
|
+::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
|
|
|
+</style>
|
