feat:设备样例展示demo

3 weeks ago · 434e1da621
12 changed files with 718 additions and 6 deletions
--- a/src/components/Page/src/PageWrapper.vue
+++ b/src/components/Page/src/PageWrapper.vue
@ -127,8 +127,10 @@ watch(
 <template>
  <div ref="wrapperRef" :class="getClass">
    <PageHeader
-      v-if="getShowHeader" v-bind="omit($attrs, 'class')" ref="headerRef" :style="getHeaderStyle"
-      style="margin: 1rem; border-radius: 1rem;" :ghost="ghost" :title="title"
+      v-if="getShowHeader"
+      v-bind="omit($attrs, 'class')"
+      ref="headerRef" class="m-1" :style="getHeaderStyle"
+      style="padding:6px 8px;" :ghost="ghost" :title="title"
    >
      <template #default>
        <template v-if="content">
@ -163,14 +165,14 @@ watch(
  position: relative;

  .@{prefix-cls}-content {
-    margin: 1rem;
-    border-radius: 1rem;
+    margin: 0.1rem;
+    border-radius: 0.5rem;
  }

  .ant-page-header {
    &:empty {
-      margin: 1rem;
-      border-radius: 1rem;
+      margin: 0.1rem;
+      border-radius: 0.5rem;
    }
  }

--- a/src/views/dashboard/demo/components/DynamicInfo.vue
+++ b/src/views/dashboard/demo/components/DynamicInfo.vue
@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { Card, List } from 'ant-design-vue'
+import { dynamicInfoItems } from './data'
+import { Icon } from '@/components/Icon'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {},
+  },
+})
+const ListItem = List.Item
+const ListItemMeta = List.Item.Meta
+</script>
+
+<template>
+  <Card id="www" :title="props.data.Header" v-bind="$attrs" class-name="spcard">
+    <template #extra>
+      <a-button type="link">
+        更多
+      </a-button>
+    </template>
+    <List item-layout="horizontal" :data-source="props.data.Content">
+      <template #renderItem="{ item }">
+        <ListItem>
+          <ListItemMeta>
+            <template #description>
+              {{ item.StartTime }} {{ item.Duration }}
+            </template>
+            <!-- eslint-disable-next-line -->
+            <!-- <template #title> {{ item.Text }} <span v-html="item.desc"> </span> </template> -->
+            <template #title>
+              {{ item.Text }}
+            </template>
+
+            <!-- <template #avatar>
+              <Icon :icon="item.avatar" :size="30" />
+            </template> -->
+          </ListItemMeta>
+        </ListItem>
+      </template>
+    </List>
+  </Card>
+</template>
+
+<style scoped>
+::v-deep(.ant-card-body) {
+  height:80%;
+  padding:10px;
+overflow-y: auto;
+}
+</style>
--- a/src/views/dashboard/demo/components/Operation.vue
+++ b/src/views/dashboard/demo/components/Operation.vue
@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import { Card, Comment, List, ListItem } from 'ant-design-vue'
+
+import dayjs from 'dayjs'
+import { DislikeFilled, DislikeOutlined, LikeFilled, LikeOutlined } from '@ant-design/icons-vue'
+import { ref } from 'vue'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import { navItems } from './data'
+import { Icon } from '@/components/Icon'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {},
+  },
+})
+dayjs.extend(relativeTime)
+</script>
+
+<template>
+  <Card :title="props.data.Header" v-bind="$attrs">
+    <template #extra>
+      <a-button type="link">
+        {{ props.data.Content.length }} 条指导建议
+      </a-button>
+    </template>
+    <List
+      class="comment-list"
+      item-layout="horizontal"
+      :data-source="props.data.Content"
+    >
+      <template #renderItem="{ item }">
+        <ListItem>
+          <Comment>
+            <template #author>
+              <a>{{ item.FaultDesc }}</a>
+            </template>
+            <template #content>
+              <p>
+                {{ item.Guide }}
+              </p>
+            </template>
+            <template #datetime>
+              <a-tooltip :title="dayjs().format('YYYY-MM-DD HH:mm:ss')">
+                <span>{{ dayjs().fromNow() }}</span>
+              </a-tooltip>
+            </template>
+          </Comment>
+        </ListItem>
+      </template>
+    </List>
+  </Card>
+</template>
+
+<style scoped>
+::v-deep(.ant-card-body) {
+  height:80%;
+  padding:5px;
+overflow-y: auto;
+}
+
+::v-deep(.ant-list-item) {
+  padding:5px;
+}
+
+::v-deep(.ant-list-header) {
+padding:5px
+}
+</style>
--- a/src/views/dashboard/demo/components/ParameterInfo.vue
+++ b/src/views/dashboard/demo/components/ParameterInfo.vue
@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { Card } from 'ant-design-vue'
+import { BasicTable, useTable } from '@/components/Table'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {},
+  },
+})
+
+const [registerTable] = useTable({
+  dataSource: props.data.Content,
+  rowKey: 'id',
+  size: 'small',
+  immediate: false,
+  columns: props.data.Columns,
+  useSearchForm: false,
+  showTableSetting: false,
+  showIndexColumn: false,
+})
+</script>
+
+<template>
+  <Card :title="props.data.Header" v-bind="$attrs">
+    <!-- <template #extra>
+      <a-button type="link">
+        更多
+      </a-button>
+    </template> -->
+    <BasicTable @register="registerTable" />
+  </Card>
+</template>
+
+<style scoped>
+::v-deep(.ant-card-body) {
+  padding:5px;
+}
+</style>
--- a/src/views/dashboard/demo/components/ProjectCard.vue
+++ b/src/views/dashboard/demo/components/ProjectCard.vue
@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { Card, CardGrid } from 'ant-design-vue'
+import { groupItems } from './data'
+import { Icon } from '@/components/Icon'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {},
+  },
+})
+</script>
+
+<template>
+  <Card :title="props.data.Header" v-bind="$attrs">
+    <template #extra>
+      <a-button type="link">
+        更多
+      </a-button>
+    </template>
+
+    <CardGrid v-for="item in props.data.Content" :key="item.Point" class="!h-1/3 !w-full !md:w-1/2">
+      <!-- <Icon :icon="item.icon" :color="item.color" size="30" /> -->
+      <div class="text-center text-lg">
+        {{ item.Point }}
+      </div>
+
+      <div class="text-secondary mt-2 h-10 flex">
+        {{ item.FaultDesc }}
+      </div>
+      <!-- <div class="text-secondary flex justify-between">
+        <span>{{ item.group }}</span>
+        <span>{{ item.date }}</span>
+      </div> -->
+    </CardGrid>
+  </Card>
+</template>
+
+<style scoped>
+::v-deep(.ant-card-grid) {
+  padding:15px;
+}
+
+::v-deep(.ant-card-body) {
+height:80%;
+overflow-y: auto;
+
+}
+</style>
--- a/src/views/dashboard/demo/components/QuickNav.vue
+++ b/src/views/dashboard/demo/components/QuickNav.vue
@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { Card, CardGrid } from 'ant-design-vue'
+import { navItems } from './data'
+import { Icon } from '@/components/Icon'
+</script>
+
+<template>
+  <Card title="快捷导航">
+    <CardGrid v-for="item in navItems" :key="item.title">
+      <span class="flex flex-col items-center">
+        <Icon :icon="item.icon" :color="item.color" size="20" />
+        <span class="text-md mt-2 truncate">{{ item.title }}</span>
+      </span>
+    </CardGrid>
+  </Card>
+</template>
--- a/src/views/dashboard/demo/components/SaleRadar.vue
+++ b/src/views/dashboard/demo/components/SaleRadar.vue
@ -0,0 +1,91 @@
+<script lang="ts" setup>
+import type { Ref } from 'vue'
+import { ref, watch } from 'vue'
+import { Card } from 'ant-design-vue'
+import { useECharts } from '@/hooks/web/useECharts'
+import { propTypes } from '@/utils/propTypes'
+
+const props = defineProps({
+  loading: Boolean,
+  width: propTypes.string.def('100%'),
+  height: propTypes.string.def('400px'),
+})
+
+const chartRef = ref<HTMLDivElement | null>(null)
+const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
+watch(
+  () => props.loading,
+  () => {
+    if (props.loading)
+      return
+
+    setOptions({
+      legend: {
+        bottom: 0,
+        data: ['Visits', 'Sales'],
+      },
+      tooltip: {},
+      radar: {
+        radius: '60%',
+        splitNumber: 8,
+        indicator: [
+          {
+            name: '2017',
+          },
+          {
+            name: '2017',
+          },
+          {
+            name: '2018',
+          },
+          {
+            name: '2019',
+          },
+          {
+            name: '2020',
+          },
+          {
+            name: '2021',
+          },
+        ],
+      },
+      series: [
+        {
+          type: 'radar',
+          symbolSize: 0,
+          areaStyle: {
+            shadowBlur: 0,
+            shadowColor: 'rgba(0,0,0,.2)',
+            shadowOffsetX: 0,
+            shadowOffsetY: 10,
+            opacity: 1,
+          },
+          data: [
+            {
+              value: [90, 50, 86, 40, 50, 20],
+              name: 'Visits',
+              itemStyle: {
+                color: '#b6a2de',
+              },
+            },
+            {
+              value: [70, 75, 70, 76, 20, 85],
+              name: 'Sales',
+              itemStyle: {
+                color: '#67e0e3',
+              },
+            },
+          ],
+        },
+      ],
+    })
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <Card title="销售统计" :loading="loading">
+    <div ref="chartRef" :style="{ width, height }" />
+  </Card>
+</template>
--- a/src/views/dashboard/demo/components/WorkbenchHeader.vue
+++ b/src/views/dashboard/demo/components/WorkbenchHeader.vue
@ -0,0 +1,36 @@
+<script lang="ts" setup>
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {},
+  },
+})
+</script>
+
+<template>
+  <div>
+    <!-- <Avatar :src="userinfo.user.avatar || headerImg" :size="72" class="!mx-auto !block" /> -->
+    <div class="mt-2 md:mt-0">
+      <h1 class="text-center text-lg md:text-2xl">
+        <!-- 早安, {{ userinfo.user.nickname }}, 开始您一天的工作吧！ -->
+        {{ props.data.title }}
+      </h1>
+      <!-- <span class="text-secondary"> 今日晴，20℃ - 32℃！ </span> -->
+    </div>
+    <!-- <div class="mt-4 flex flex-1 justify-end md:mt-0">
+      <div class="flex flex-col justify-center text-right">
+        <span class="text-secondary"> 待办 </span>
+        <span class="text-2xl">2/10</span>
+      </div>
+
+      <div class="mx-12 flex flex-col justify-center text-right md:mx-16">
+        <span class="text-secondary"> 项目 </span>
+        <span class="text-2xl">8</span>
+      </div>
+      <div class="mr-4 flex flex-col justify-center text-right md:mr-10">
+        <span class="text-secondary"> 团队 </span>
+        <span class="text-2xl">300</span>
+      </div>
+    </div> -->
+  </div>
+</template>
--- a/src/views/dashboard/demo/components/data.ts
+++ b/src/views/dashboard/demo/components/data.ts
@ -0,0 +1,156 @@
+interface GroupItem {
+  title: string
+  icon: string
+  color: string
+  desc: string
+  date: string
+  group: string
+}
+
+interface NavItem {
+  title: string
+  icon: string
+  color: string
+}
+
+interface DynamicInfoItem {
+  avatar: string
+  name: string
+  date: string
+  desc: string
+}
+
+export const navItems: NavItem[] = [
+  {
+    title: '首页',
+    icon: 'ion:home-outline',
+    color: '#1fdaca',
+  },
+  {
+    title: '仪表盘',
+    icon: 'ion:grid-outline',
+    color: '#bf0c2c',
+  },
+  {
+    title: '组件',
+    icon: 'ion:layers-outline',
+    color: '#e18525',
+  },
+  {
+    title: '系统管理',
+    icon: 'ion:settings-outline',
+    color: '#3fb27f',
+  },
+  {
+    title: '权限管理',
+    icon: 'ion:key-outline',
+    color: '#4daf1bc9',
+  },
+  {
+    title: '图表',
+    icon: 'ion:bar-chart-outline',
+    color: '#00d8ff',
+  },
+]
+
+export const dynamicInfoItems: DynamicInfoItem[] = [
+  {
+    avatar: 'dynamic-avatar-1|svg',
+    name: '威廉',
+    date: '刚刚',
+    desc: '在 <a>开源组</a> 创建了项目 <a>Vue</a>',
+  },
+  {
+    avatar: 'dynamic-avatar-2|svg',
+    name: '艾文',
+    date: '1个小时前',
+    desc: '关注了 <a>威廉</a> ',
+  },
+  {
+    avatar: 'dynamic-avatar-3|svg',
+    name: '克里斯',
+    date: '1天前',
+    desc: '发布了 <a>个人动态</a> ',
+  },
+  {
+    avatar: 'dynamic-avatar-4|svg',
+    name: 'XingyuV',
+    date: '2天前',
+    desc: '发表文章 <a>如何编写一个Vite插件</a> ',
+  },
+  {
+    avatar: 'dynamic-avatar-5|svg',
+    name: '皮特',
+    date: '3天前',
+    desc: '回复了 <a>杰克</a> 的问题 <a>如何进行项目优化？</a>',
+  },
+  {
+    avatar: 'dynamic-avatar-6|svg',
+    name: '杰克',
+    date: '1周前',
+    desc: '关闭了问题 <a>如何运行项目</a> ',
+  },
+  {
+    avatar: 'dynamic-avatar-1|svg',
+    name: '威廉',
+    date: '1周前',
+    desc: '发布了 <a>个人动态</a> ',
+  },
+  {
+    avatar: 'dynamic-avatar-1|svg',
+    name: '威廉',
+    date: '2021-04-01 20:00',
+    desc: '推送了代码到 <a>Github</a>',
+  },
+]
+
+export const groupItems: GroupItem[] = [
+  {
+    title: 'Github',
+    icon: 'carbon:logo-github',
+    color: '',
+    desc: '不要等待机会，而要创造机会。',
+    group: '开源组',
+    date: '2021-04-01',
+  },
+  {
+    title: 'Vue',
+    icon: 'ion:logo-vue',
+    color: '#3fb27f',
+    desc: '现在的你决定将来的你。',
+    group: '算法组',
+    date: '2021-04-01',
+  },
+  {
+    title: 'Html5',
+    icon: 'ion:logo-html5',
+    color: '#e18525',
+    desc: '没有什么才能比努力更重要。',
+    group: '上班摸鱼',
+    date: '2021-04-01',
+  },
+  {
+    title: 'Angular',
+    icon: 'ion:logo-angular',
+    color: '#bf0c2c',
+    desc: '热情和欲望可以突破一切难关。',
+    group: 'UI',
+    date: '2021-04-01',
+  },
+  {
+    title: 'React',
+    icon: 'bx:bxl-react',
+    color: '#00d8ff',
+    desc: '健康的身体是实现目标的基石。',
+    group: '技术牛',
+    date: '2021-04-01',
+  },
+  {
+    title: 'Js',
+    icon: 'ion:logo-javascript',
+    color: '#EBD94E',
+    desc: '路是走出来的，而不是空想出来的。',
+    group: '架构组',
+    date: '2021-04-01',
+  },
+]
--- a/src/views/dashboard/demo/components/demo.json
+++ b/src/views/dashboard/demo/components/demo.json
@ -0,0 +1,130 @@
+{
+  "title": "示例设备展示",
+  "LeftUp": {
+    "Header": "设备静态图",
+    "pathq": "/src/assets/images/header.jpg",
+    "path": "/src/assets/svg/illustration.svg",
+    "Content": ""
+  },
+  "LeftMidUp": {
+    "Header": "故障诊断",
+    "Content": [{
+      "FaultDesc": "故障1故障1故障1故障1故障1",
+      "Point": "Diagnosis1"
+    }, {
+      "FaultDesc": "故障2",
+      "Point": "Diagnosis2"
+    },
+    {
+      "FaultDesc": "故障2",
+      "Point": "Diagnosis2"
+    }, {
+      "FaultDesc": "故障2",
+      "Point": "Diagnosis2"
+    }, {
+      "FaultDesc": "故障2",
+      "Point": "Diagnosis2"
+    }, {
+      "FaultDesc": "故障2",
+      "Point": "Diagnosis2"
+    }]
+  },
+  "RightMidUp": {
+    "Header": "报警记录",
+    "Content": [{
+      "Text": "故障1",
+      "StartTime": "Diagnosis1",
+      "Duration": 12.3
+    }, {
+      "Text": "故障1",
+      "StartTime": "Diagnosis1",
+      "Duration": 12.3
+    }]
+  },
+  "RightUp": {
+    "Header": "大模型-操作指导",
+    "Content": [{
+      "FaultDesc": "故障1",
+      "Guide": "如何处理故障1"
+    }, {
+      "FaultDesc": "故障2",
+      "Guide": "如何处理故障2"
+    }]
+  },
+  "LeftDown": {
+    "Header": "生产流程",
+		 "path": "/src/assets/svg/illustration.svg",
+    "Content": "/api/v1/assets/production_flow.svg"
+  },
+  "RightDown": {
+    "Header": "参数信息",
+    "Columns": [{
+      "title": "序号",
+      "dataIndex": "序号",
+      "width": 40
+    }, {
+      "title": "描述",
+      "dataIndex": "描述",
+      "width": 200
+    }, {
+      "title": "点号",
+      "dataIndex": "点号",
+      "width": 100
+    }, {
+      "title": "测量值",
+      "dataIndex": "测量值",
+      "width": 80
+    }, {
+      "title": "预测值",
+      "dataIndex": "预测值",
+      "width": 100
+    }, {
+      "title": "安全区域",
+      "dataIndex": "安全区域",
+      "width": 140
+    }],
+    "Content": [{
+      "序号": 1,
+      "描述": "",
+      "点号": "",
+      "测量值": 0.0,
+      "预测值": 0.0,
+      "安全区域": ""
+    }, {
+      "序号": 2,
+      "描述": "",
+      "点号": "",
+      "测量值": 0.0,
+      "预测值": 0.0,
+      "安全区域": ""
+    }, {
+      "序号": 3,
+      "描述": "",
+      "点号": "",
+      "测量值": 0.0,
+      "预测值": 0.0,
+      "安全区域": ""
+    }, {
+      "序号": 4,
+      "描述": "",
+      "点号": "",
+      "测量值": 0.0,
+      "预测值": 0.0,
+      "安全区域": ""
+    }, {
+      "序号": 5,
+      "描述": "",
+      "点号": "",
+      "测量值": 0.0,
+      "预测值": 0.0,
+      "安全区域": ""
+    }, {
+      "序号": 6,
+      "描述": "",
+      "点号": "",
+      "测量值": 0.0,
+      "预测值": 0.0,
+      "安全区域": ""
+    }]
+  }
+}
--- a/src/views/dashboard/demo/components/staticImg.vue
+++ b/src/views/dashboard/demo/components/staticImg.vue
@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { Card, CardGrid } from 'ant-design-vue'
+import { navItems } from './data'
+import { Icon } from '@/components/Icon'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {},
+  },
+})
+</script>
+
+<template>
+  <Card class="enter-y !my-1" :title="props.data.Header">
+    <img class="mx-auto h-50 w-full" :src="props.data.path">
+  </Card>
+</template>
--- a/src/views/dashboard/demo/index.vue
+++ b/src/views/dashboard/demo/index.vue
@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import WorkbenchHeader from './components/WorkbenchHeader.vue'
+import ProjectCard from './components/ProjectCard.vue'
+import DynamicInfo from './components/DynamicInfo.vue'
+import StaticImg from './components/staticImg.vue'
+import ParameterInfo from './components/ParameterInfo.vue'
+import Operation from './components/Operation.vue'
+import data from './components/demo.json'
+import { PageWrapper } from '@/components/Page'
+
+const loading = ref(true)
+
+setTimeout(() => {
+  loading.value = false
+}, 500)
+</script>
+
+<template>
+  <PageWrapper class="m-1">
+    <template #headerContent>
+      <WorkbenchHeader :data="data" />
+    </template>
+    <div class="bg-[#f5f5f5]">
+      <div class="enter-y h-90 md:flex">
+        <StaticImg class="m-1 w-full md:w-1/4" :loading="loading" :data="data.LeftUp" />
+        <ProjectCard class="enter-y m-1 w-full md:w-1/4" :loading="loading" :data="data.LeftMidUp" />
+        <DynamicInfo :loading="loading" class="enter-y m-1 w-full md:w-1/4" :data="data.RightMidUp" />
+        <Operation class="m-1 w-full md:w-1/4" :loading="loading" :data="data.RightUp" />
+      </div>
+      <div class="enter-y h-95 md:flex">
+        <StaticImg class="m-1 w-full md:w-1/2" :loading="loading" :data="data.LeftDown" />
+        <ParameterInfo class="m-1 w-full md:w-1/2" :loading="loading" :data="data.RightDown" />
+      </div>
+      <!-- <div class="enter-y w-full !mr-4 lg:w-7/10">
+        <StaticImg :loading="loading" :data="data.LeftUp" class="enter-y" />
+      </div> -->
+
+      <!-- <div class="enter-y w-full !mr-4 lg:w-7/10">
+        <ProjectCard :loading="loading" class="enter-y" />
+        <DynamicInfo :loading="loading" class="enter-y !my-4" />
+      </div>
+      <div class="enter-y w-full lg:w-3/10">
+        <QuickNav :loading="loading" class="enter-y" />
+
+        <Card class="enter-y !my-4" :loading="loading">
+          <img class="mx-auto h-30 xl:h-50" src="@/assets/svg/illustration.svg">
+        </Card>
+
+        <SaleRadar :loading="loading" class="enter-y" />
+      </div> -->
+    </div>
+  </PageWrapper>
+</template>