From beca65f4d01ca07c358102a35b949c2a4f277afe Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期三, 24 五月 2023 10:36:27 +0800
Subject: [PATCH] 增加车间监控界面
---
src/views/demo/page/list/basic/index.vue | 282 ++++++++++++++++++++++++++++----------------------------
1 files changed, 141 insertions(+), 141 deletions(-)
diff --git a/src/views/demo/page/list/basic/index.vue b/src/views/demo/page/list/basic/index.vue
index 7232195..26fff5b 100644
--- a/src/views/demo/page/list/basic/index.vue
+++ b/src/views/demo/page/list/basic/index.vue
@@ -1,161 +1,161 @@
<template>
- <PageWrapper :class="prefixCls" title="鏍囧噯鍒楄〃">
- <div :class="`${prefixCls}__top`">
- <a-row :gutter="12">
- <a-col :span="8" :class="`${prefixCls}__top-col`">
- <div>鎴戠殑寰呭姙</div>
- <p>8涓换鍔�</p>
- </a-col>
- <a-col :span="8" :class="`${prefixCls}__top-col`">
- <div>鏈懆浠诲姟骞冲潎澶勭悊鏃堕棿</div>
- <p>32鍒嗛挓</p>
- </a-col>
- <a-col :span="8" :class="`${prefixCls}__top-col`">
- <div>鏈懆瀹屾垚浠诲姟鏁�</div>
- <p>24涓换鍔�</p>
- </a-col>
- </a-row>
- </div>
+ <PageWrapper :class="prefixCls" title="鏍囧噯鍒楄〃">
+ <div :class="`${prefixCls}__top`">
+ <a-row :gutter="12">
+ <a-col :span="8" :class="`${prefixCls}__top-col`">
+ <div>鎴戠殑寰呭姙</div>
+ <p>8涓换鍔�</p>
+ </a-col>
+ <a-col :span="8" :class="`${prefixCls}__top-col`">
+ <div>鏈懆浠诲姟骞冲潎澶勭悊鏃堕棿</div>
+ <p>32鍒嗛挓</p>
+ </a-col>
+ <a-col :span="8" :class="`${prefixCls}__top-col`">
+ <div>鏈懆瀹屾垚浠诲姟鏁�</div>
+ <p>24涓换鍔�</p>
+ </a-col>
+ </a-row>
+ </div>
- <div :class="`${prefixCls}__content`">
- <a-list :pagination="pagination">
- <template v-for="item in list" :key="item.id">
- <a-list-item class="list">
- <a-list-item-meta>
- <template #avatar>
- <Icon class="icon" v-if="item.icon" :icon="item.icon" :color="item.color" />
- </template>
- <template #title>
- <span>{{ item.title }}</span>
- <div class="extra" v-if="item.extra">
- {{ item.extra }}
- </div>
- </template>
- <template #description>
- <div class="description">
- {{ item.description }}
- </div>
- <div class="info">
- <div><span>Owner</span>{{ item.author }}</div>
- <div><span>寮�濮嬫椂闂�</span>{{ item.datetime }}</div>
- </div>
- <div class="progress">
- <Progress :percent="item.percent" status="active" />
- </div>
- </template>
- </a-list-item-meta>
- </a-list-item>
- </template>
- </a-list>
- </div>
- </PageWrapper>
+ <div :class="`${prefixCls}__content`">
+ <a-list :pagination="pagination">
+ <template v-for="item in list" :key="item.id">
+ <a-list-item class="list">
+ <a-list-item-meta>
+ <template #avatar>
+ <Icon class="icon" v-if="item.icon" :icon="item.icon" :color="item.color" />
+ </template>
+ <template #title>
+ <span>{{ item.title }}</span>
+ <div class="extra" v-if="item.extra">
+ {{ item.extra }}
+ </div>
+ </template>
+ <template #description>
+ <div class="description">
+ {{ item.description }}
+ </div>
+ <div class="info">
+ <div><span>Owner</span>{{ item.author }}</div>
+ <div><span>寮�濮嬫椂闂�</span>{{ item.datetime }}</div>
+ </div>
+ <div class="progress">
+ <Progress :percent="item.percent" status="active" />
+ </div>
+ </template>
+ </a-list-item-meta>
+ </a-list-item>
+ </template>
+ </a-list>
+ </div>
+ </PageWrapper>
</template>
<script lang="ts">
- import { Progress, Row, Col } from 'ant-design-vue';
- import { defineComponent } from 'vue';
- import Icon from '/@/components/Icon/index';
- import { cardList } from './data';
- import { PageWrapper } from '/@/components/Page';
- import { List } from 'ant-design-vue';
+ import { Progress, Row, Col } from 'ant-design-vue'
+ import { defineComponent } from 'vue'
+ import Icon from '/@/components/Icon/index'
+ import { cardList } from './data'
+ import { PageWrapper } from '/@/components/Page'
+ import { List } from 'ant-design-vue'
- export default defineComponent({
- components: {
- Icon,
- Progress,
- PageWrapper,
- [List.name]: List,
- [List.Item.name]: List.Item,
- AListItemMeta: List.Item.Meta,
- [Row.name]: Row,
- [Col.name]: Col,
- },
- setup() {
- return {
- prefixCls: 'list-basic',
- list: cardList,
- pagination: {
- show: true,
- pageSize: 3,
- },
- };
- },
- });
+ export default defineComponent({
+ components: {
+ Icon,
+ Progress,
+ PageWrapper,
+ [List.name]: List,
+ [List.Item.name]: List.Item,
+ AListItemMeta: List.Item.Meta,
+ [Row.name]: Row,
+ [Col.name]: Col,
+ },
+ setup() {
+ return {
+ prefixCls: 'list-basic',
+ list: cardList,
+ pagination: {
+ show: true,
+ pageSize: 3,
+ },
+ }
+ },
+ })
</script>
<style lang="less" scoped>
- .list-basic {
- &__top {
- padding: 24px;
- text-align: center;
- background-color: @component-background;
+ .list-basic {
+ &__top {
+ padding: 24px;
+ text-align: center;
+ background-color: @component-background;
- &-col {
- &:not(:last-child) {
- border-right: 1px dashed @border-color-base;
- }
+ &-col {
+ &:not(:last-child) {
+ border-right: 1px dashed @border-color-base;
+ }
- div {
- margin-bottom: 12px;
- font-size: 14px;
- line-height: 22px;
- color: @text-color;
- }
+ div {
+ margin-bottom: 12px;
+ font-size: 14px;
+ line-height: 22px;
+ color: @text-color;
+ }
- p {
- margin: 0;
- font-size: 24px;
- line-height: 32px;
- color: @text-color;
- }
- }
- }
+ p {
+ margin: 0;
+ font-size: 24px;
+ line-height: 32px;
+ color: @text-color;
+ }
+ }
+ }
- &__content {
- padding: 24px;
- margin-top: 12px;
- background-color: @component-background;
+ &__content {
+ padding: 24px;
+ margin-top: 12px;
+ background-color: @component-background;
- .list {
- position: relative;
- }
+ .list {
+ position: relative;
+ }
- .icon {
- font-size: 40px !important;
- }
+ .icon {
+ font-size: 40px !important;
+ }
- .extra {
- position: absolute;
- top: 20px;
- right: 15px;
- font-weight: normal;
- color: @primary-color;
- cursor: pointer;
- }
+ .extra {
+ position: absolute;
+ top: 20px;
+ right: 15px;
+ font-weight: normal;
+ color: @primary-color;
+ cursor: pointer;
+ }
- .description {
- display: inline-block;
- width: 40%;
- }
+ .description {
+ display: inline-block;
+ width: 40%;
+ }
- .info {
- display: inline-block;
- width: 30%;
- text-align: center;
+ .info {
+ display: inline-block;
+ width: 30%;
+ text-align: center;
- div {
- display: inline-block;
- padding: 0 20px;
+ div {
+ display: inline-block;
+ padding: 0 20px;
- span {
- display: block;
- }
- }
- }
+ span {
+ display: block;
+ }
+ }
+ }
- .progress {
- display: inline-block;
- width: 15%;
- vertical-align: top;
- }
- }
- }
+ .progress {
+ display: inline-block;
+ width: 15%;
+ vertical-align: top;
+ }
+ }
+ }
</style>
--
Gitblit v1.9.3