图表编辑

src/router/routes.js

@@ -1,42 +1,25 @@
 export default {
   routes: [
     {
-      meun: '',
-      code: '',
       hidden: 0,
       rootId: 0,
       icon: 'mdi-home',
-      remark: '',
       type: 0,
       title: '工作台',
-      local: '',
       path: '/home',
-      urls: '',
       children: [
         {
-          meun: '',
-          code: '',
           hidden: 1,
-          rootId: 653,
           icon: '',
-          remark: '',
           type: 1,
           title: '工作台',
-          local: '',
           path: '/home',
-          urls: '',
           children: [],
           enName: 'workbench',
-          id: 654,
           redirect: '',
-          level: 2,
-          openPath: '',
           active: '',
           label: '工作台',
           sort: 0,
-          parentId: 653,
-          effectiveStatus: true,
-          parentName: 'home',
           component: 'home',
           meta: {
             keepAlive: false,
@@ -51,35 +34,19 @@ export default {
             effectiveStatus: true
           },
           name: 'index',
-          style: '',
-          alwaysShow: 0,
-          metastr: '{"keepAlive":false,"allowClick":false,"enName":"workbench","editModules":true,"title":"工作台","fullScreen":false,"target":false}',
-          open: null
+          alwaysShow: 0
         },
         {
-          meun: '',
-          code: '',
           hidden: 1,
-          rootId: 653,
-          icon: '',
-          remark: '',
           type: 1,
           title: '主页编辑',
-          local: '',
           path: '/home/edit',
-          urls: '',
           children: [],
           enName: 'Edit Home Page',
-          id: 655,
           redirect: '',
-          level: 2,
-          openPath: '',
           active: '',
           label: '主页编辑',
           sort: 0,
-          parentId: 653,
-          effectiveStatus: true,
-          parentName: '',
           component: 'home/edit',
           meta: {
             keepAlive: false,
@@ -94,23 +61,14 @@ export default {
             effectiveStatus: true
           },
           name: 'homeEdit',
-          style: '',
-          alwaysShow: 0,
-          metastr: '{"keepAlive":false,"allowClick":false,"enName":"Edit Home Page","editModules":true,"title":"主页编辑","fullScreen":true,"target":false}',
-          open: null
+          alwaysShow: 0
         }
       ],
       enName: 'workbench',
-      id: 653,
       redirect: '',
-      level: 1,
-      openPath: '',
       active: '',
       label: '工作台',
       sort: 0,
-      parentId: 0,
-      effectiveStatus: true,
-      parentName: 'efficiency',
       component: 'Layout',
       meta: {
         allowClick: false,
@@ -122,10 +80,7 @@ export default {
         effectiveStatus: true
       },
       name: 'home',
-      style: '',
-      alwaysShow: 0,
-      metastr: '{"allowClick":false,"enName":"workbench","title":"工作台","target":false}',
-      open: null
+      alwaysShow: 0
     },
     {
       meun: '',
@@ -211,6 +166,54 @@ export default {
       metastr: '{"allowClick":false,"enName":"product Knowledge Base","title":"产品知识库","target":false}',
       open: null
     },
+    {
+      hidden: 0,
+      rootId: 0,
+      icon: 'mdi-chart-box',
+      type: 0,
+      path: '/data-chart',
+      children: [
+        {
+          hidden: 1,
+          icon: '',
+          type: 1,
+          title: '数据图表',
+          path: '/data-chart',
+          children: [],
+          enName: 'data Chart',
+          redirect: '',
+          active: '',
+          label: '数据图表',
+          sort: 0,
+          component: 'dataChart',
+          meta: {
+            roles: [],
+            enName: 'data Chart',
+            icon: '',
+            title: '数据图表',
+            fullScreen: false
+          },
+          name: 'index',
+          alwaysShow: 0
+        }
+      ],
+      enName: 'data Chart',
+      redirect: '',
+      active: '',
+      sort: 0,
+      component: 'Layout',
+      meta: {
+        allowClick: false,
+        roles: [],
+        enName: 'workbench',
+        icon: 'mdi-home',
+        title: '数据图表',
+        target: false,
+        effectiveStatus: true
+      },
+      name: 'home',
+      alwaysShow: 0
+    },
     {
       meun: '',
       code: '',

src/views/dataChart/dataChartEdit.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="d-flex chart heightFull widthFull">
+    <div class="chart-list heightFull overflow-y-auto mr-3">
+      <div v-for="(chart, key) in Charts" :key="key" class="chart-type mb-3" @click="onChange(chart, key)">
+        <div>
+          <span class="mdi" :class="chart.icon"></span>
+        </div>
+        <div>
+          {{ chart.title }}
+        </div>
+      </div>
+    </div>
+    <div class="chart-content d-flex heightFull">
+      <div class="chart-content-show heightFull mr-3"></div>
+      <div class="chart-content-chat heightFull d-flex flex-column">
+        <div class="chart-content-chat-title mb-3">
+          <v-tabs>
+            <v-tab>AI 取数</v-tab>
+          </v-tabs>
+        </div>
+        <div class="chart-content-chat-box overflow-y-auto">
+          <div class="pa-3">
+            <p v-for="i in 100" :key="i">The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through.</p>
+          </div>
+        </div>
+        <div class="pa-3">
+          <v-textarea
+            outlined
+            rows="3"
+            hide-details
+            value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through."
+          ></v-textarea>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// 属性模块
+import * as Charts from './utils/options.js'
+export default {
+  name: 'dataChartEdit',
+  data () {
+    return {
+      Charts
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.heightFull {
+  height: 100%;
+}
+.widthFull {
+  width: 100%;
+}
+.chart {
+  &-list {
+    // width: 100px;
+    .chart-type {
+      width: 100%;
+      height: 60px;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      padding: 10px;
+      border: 1px solid #ccc;
+      border-radius: 5px;
+      cursor: pointer;
+      .mdi {
+        font-size: 24px;
+      }
+      &:hover {
+        background-color: #f5f5f5;
+      }
+    }
+  }
+  &-content {
+    width: 0;
+    flex: 1;
+    &-show {
+      width: 50%;
+      border: 1px solid #ccc;
+    }
+    &-chat {
+      width: 50%;
+      border: 1px solid #ccc;
+      &-box {
+        height: 0;
+        flex: 1;
+      }
+    }
+
+  }
+}
+</style>

src/views/dataChart/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="pa-3 white">
+    <MTable
+      :headers="headers"
+      :items="items"
+      :show-select="false"
+      :loading="loading"
+      :can-delete="false"
+      @add="onAdd"
+    ></MTable>
+    <MDialog :visible.sync="show" title="图表编辑" fullscreen :footer="false">
+      <DataChartEdit v-if="show"></DataChartEdit>
+    </MDialog>
+  </div>
+</template>
+
+<script>
+import MTable from '@/components/List/table'
+import MDialog from '@/components/Dialog'
+import DataChartEdit from './dataChartEdit.vue'
+export default {
+  name: 'dataChart',
+  components: {
+    MTable,
+    MDialog,
+    DataChartEdit
+  },
+  data () {
+    return {
+      headers: [
+        { text: '标题', value: 'title' },
+        { text: '描述', value: 'describe' },
+        { text: '创建日期', value: 'createDate' },
+        { text: '操作', value: 'action' }
+      ],
+      items: [],
+      loading: false,
+      show: false
+    }
+  },
+  created () {
+  },
+  methods: {
+    onAdd () {
+      this.show = true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/dataChart/utils/options.js

@@ -0,0 +1,106 @@
+// const COLOR = ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00']
+
+export const line = {
+  title: '折线图',
+  icon: 'mdi-chart-line',
+  option: {
+    legend: {
+      show: true
+    },
+    xAxis: {
+      type: 'category',
+      data: []
+    },
+    yAxis: {
+      type: 'value'
+    },
+    series: [
+      {
+        data: [],
+        type: 'line',
+        smooth: true
+      }
+    ]
+  }
+}
+
+export const bar = {
+  title: '柱状图',
+  icon: 'mdi-chart-bar',
+  option: {
+    legend: {
+      show: true,
+      left: 'center'
+    },
+    xAxis: {
+      type: 'category',
+      data: []
+    },
+    yAxis: {
+      type: 'value'
+    },
+    series: [
+      {
+        data: [],
+        type: 'bar'
+      }
+    ]
+  }
+}
+
+export const pie = {
+  title: '饼图',
+  icon: 'mdi-chart-pie',
+  option: {
+    // title: {
+    //   text: 'Referer of a Website',
+    //   subtext: 'Fake Data',
+    //   left: 'center'
+    // },
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      left: 'center'
+    },
+    series: [
+      {
+        name: 'Access From',
+        type: 'pie',
+        radius: '50%',
+        data: [],
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        }
+      }
+    ]
+  }
+}
+
+// // 散点
+// export const scatter = {
+//   title: '散点图',
+//   icon: 'mdi-chart-bubble',
+//   option: {
+//     legend: {
+//       show: true
+//     },
+//     xAxis: {
+//       type: 'category',
+//       data: []
+//     },
+//     yAxis: {
+//       type: 'value'
+//     },
+//     series: [
+//       {
+//         data: [],
+//         type: 'scatter'
+//       }
+//     ]
+//   }
+// }