故障诊断 知识搜索静态页面完成 封装公共table组件

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "echarts": "^5.3.3",
     "element-ui": "^2.15.9",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",

src/assets/css/index.css

@@ -1,7 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@import './elementReset.scss'
+@import "./elementReset.scss";
 /*初始化 start*/
 body,
 div,
@@ -35,8 +35,11 @@ td {
   padding: 0;
   border: 0;
 }
+html,body{
+  /* background-color: #eee; */
+}
 body {
-  font-family: "微软雅黑",Verdana, Arial, Helvetica, sans-serif;
+  font-family: "微软雅黑", Verdana, Arial, Helvetica, sans-serif;
   -webkit-text-size-adjust: 100%;
 }
 td,

src/components/Layout.vue

@@ -8,6 +8,7 @@
                     <el-menu-item index="path2">path2</el-menu-item>
                 </el-submenu> -->
                 <el-menu-item index="knowledgeSearch">知识搜索</el-menu-item>
+                <el-menu-item index="comprehensiveDiagnosis">综合诊断</el-menu-item>
                 <!-- <el-submenu index="2">
                     <template slot="title"><i class="el-icon-menu"></i>导航二</template>
                     <el-menu-item index="2-1">选项1</el-menu-item>

src/router/index.js

@@ -1,26 +1,31 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-Vue.use(VueRouter)
+import Vue from "vue";
+import VueRouter from "vue-router";
+Vue.use(VueRouter);
 const routes = [
   {
-    path: '/',
-    name: 'Home',
-    component: () => import('../views/Home.vue')
+    path: "/",
+    name: "Home",
+    redirect: "/knowledgeSearch",
   },
   {
-    path: '/knowledgeSearch',
-    name: 'knowledgeSearch',
-    component: () => import('../views/KnowledgeSearch/index.vue')
+    path: "/knowledgeSearch",
+    name: "knowledgeSearch",
+    component: () => import("../views/KnowledgeSearch/index.vue"),
   },
   {
-    path: '/path2',
-    name: 'path2',
-    component: () => import('../views/Path2.vue')
+    path: "/comprehensiveDiagnosis",
+    name: "comprehensiveDiagnosis",
+    component: () => import("../views/ComprehensiveDiagnosis/index.vue"),
   },
-]
+  {
+    path: "/faultDetail",
+    name: "faultDetail",
+    component: () => import("../views/FaultDetail"),
+  },
+];
 
 const router = new VueRouter({
-  routes
-})
+  routes,
+});
 
-export default router
+export default router;

src/views/ComprehensiveDiagnosis/components/AddTask.vue

@@ -0,0 +1,108 @@
+<template>
+    <el-dialog title="新建任务" :visible.sync="visible" width="50%" :close-on-click-modal="false"
+        :close-on-press-escape="false" :show-close="false">
+        <div>
+            <el-steps class="mb-5" :space="800" :active="step" finish-status="success" align-center>
+                <el-step title="会商信息"> </el-step>
+                <el-step title="选择文件"></el-step>
+            </el-steps>
+
+            <div v-show="step == 1">
+                <el-form ref="form" :model="form" label-width="120px">
+                    <el-form-item label="活动名称">
+                        <el-input v-model="form.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="数据编号">
+                        <el-input v-model="form.name"></el-input>
+                    </el-form-item>
+
+                    <el-form-item label="测试项目">
+                        <el-select v-model="form.region" placeholder="请选择活动区域">
+                            <el-option label="区域一" value="shanghai"></el-option>
+                            <el-option label="区域二" value="beijing"></el-option>
+                        </el-select>
+                    </el-form-item>
+
+                    <el-form-item label="会商ID">
+                        <el-input v-model="form.name"></el-input>
+                    </el-form-item>
+
+                    <el-form-item label="测试开始时间">
+                        <el-input v-model="form.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="测试结束时间">
+                        <el-input v-model="form.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="故障现象">
+                        <el-input v-model="form.name"></el-input>
+                    </el-form-item>
+
+                </el-form>
+                <div class="flex justify-center items-center">
+                    <el-button @click="$parent.addTaskModalVisible = false">取 消</el-button>
+                    <el-button type="primary" @click="step = 2">下一步</el-button>
+                </div>
+            </div>
+
+            <div v-show="step == 2">
+                <el-form ref="form" :model="form" label-width="120px">
+                    <el-form-item label="图片视频：">
+                        <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
+                            :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
+                            <i class="el-icon-plus"></i>
+                        </el-upload>
+                    </el-form-item>
+                    <el-form-item label="数据文件：">
+                        <el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/"
+                            :auto-upload="false">
+                            <el-button slot="trigger" size="small" type="primary">选择数据文件</el-button>
+                        </el-upload>
+                    </el-form-item>
+                </el-form>
+
+                  <div class="flex justify-center items-center">
+                      <el-button type="primary" @click="step = 1">上一步</el-button>
+                    <el-button @click="$parent.addTaskModalVisible = false">完成</el-button>
+                </div>
+            </div>
+
+        </div>
+        <!-- <span slot="footer" class="dialog-footer flex items-center justify-center">
+            <el-button @click="$parent.addTaskModalVisible = false">取 消</el-button>
+            <el-button type="primary" @click="step = 2">下一步</el-button>
+        </span> -->
+    </el-dialog>
+</template>
+<script>
+export default {
+    name: 'AddTask',
+    props: {
+        visible: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            step: 1,
+            form: {
+                name: '',
+                region: '',
+                date1: '',
+                date2: '',
+                delivery: false,
+                type: [],
+                resource: '',
+                desc: ''
+            }
+        }
+    },
+    methods: {
+        close() {
+            console.log(this.$parent);
+        }
+    }
+};
+</script>
+<style scoped lang="scss">
+</style>

src/views/ComprehensiveDiagnosis/components/OwnCard.vue

@@ -0,0 +1,88 @@
+<template>
+    <div class="own-card mt-3 flex ">
+        <div class="card-left   pt-3">
+            <div class=" text-lg text-white text-center">DF26B</div>
+            <div class="flex items-center justify-around mt-5">
+                <el-progress type="circle" :percentage="25" width="80"></el-progress>
+                <el-progress type="circle" :percentage="25" width="80"></el-progress>
+            </div>
+            <div class="text-white m-5 text-center title">
+                20180409_1452
+            </div>
+        </div>
+
+        <el-card class="flex-1 card-right">
+            <span>故障现象</span>
+            <div class=" bg-gray-300 fault-content"></div>
+            <div class=" flex items-center justify-between">
+                <div class=" text-sm text-gray-400">
+                    2022-07-22 09:17:19
+                </div>
+                <div class="mt-1">
+                    <el-button type="primary" size="mini" @click="handleDetail">查看</el-button>
+                    <el-button type="danger" size="mini" @click="handleDelete">删除</el-button>
+                </div>
+            </div>
+        </el-card>
+
+    </div>
+</template>
+<script>
+export default {
+    name: 'OwnCard',
+    data() {
+        return {
+
+        }
+    },
+    methods: {
+        handleDetail() {
+            this.$router.push('/faultDetail')
+        },
+        handleDelete() {
+            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.$message({
+                    type: 'success',
+                    message: '删除成功!'
+                });
+            }).catch(() => {
+
+            });
+        }
+    }
+};
+</script>
+<style scoped lang="scss">
+.own-card {
+    width: 49%;
+    height: 210px;
+
+    .card-left {
+        width: 200px;
+        height: 100%;
+        background-image: linear-gradient(-45deg, #2c8ff6, #0069d6);
+        border-radius: 10px 0 0 10px;
+
+        .title {
+            border: 1px solid #fff;
+            border-radius: 5px;
+        }
+
+
+    }
+
+    .card-right {
+        background-color: #efefef;
+        border-radius: 0 10px 10px 0;
+        height: 100%;
+
+        .fault-content {
+            min-height: 130px;
+        }
+    }
+}
+</style>

src/views/ComprehensiveDiagnosis/index.vue

@@ -0,0 +1,50 @@
+<template>
+    <div>
+        <div class=" flex justify-between items-center">
+            <el-button icon="el-icon-plus" type="primary" @click="addTaskModalVisible = true">新建任务</el-button>
+            <div>
+                <span> 待办：</span>
+                <el-select v-model="value" placeholder="请选择">
+                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                    </el-option>
+                </el-select>
+            </div>
+        </div>
+        <div class=" flex items-center justify-between flex-wrap">
+            <OwnCard v-for="item in 6" :key="item"></OwnCard>
+        </div>
+        <div class="mt-2 flex items-center justify-end">
+            <el-pagination background layout="prev, pager, next" :total="1000">
+            </el-pagination>
+        </div>
+        <AddTask :visible="addTaskModalVisible"></AddTask>
+    </div>
+</template>
+<script>
+import AddTask from './components/AddTask.vue'
+import OwnCard from './components/OwnCard.vue'
+export default {
+    name: 'ComprehensiveDiagnosis',
+    components: {
+        AddTask, OwnCard
+    },
+    data() {
+        return {
+            options: [{
+                value: '选项一',
+                label: '选项一'
+            }, {
+                value: '选项二',
+                label: '选项二'
+            }, {
+                value: '选项三',
+                label: '选项三'
+            }],
+            value: '',
+            addTaskModalVisible: false
+        }
+    }
+};
+</script>
+<style scoped lang="scss">
+</style>

src/views/FaultDetail/index.vue

@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <div>
+            <el-button icon="el-icon-back" size="small"  type="primary" @click="$router.back()">返回</el-button>
+            <el-button icon="el-icon-refresh" size="small" type="primary">重新诊断</el-button>
+            <el-button icon="el-icon-document" size="small" type="primary">诊断结果</el-button>
+        </div>
+        
+    </div>
+</template>
+<script>
+export default {
+    name: 'faultDetail',
+    data() {
+        return {
+
+        }
+    }
+};
+</script>
+<style scoped lang="scss">
+</style>

src/views/Home.vue

@@ -1,17 +0,0 @@
-<template>
-    <div>
-        
-    </div>
-</template>
-<script>
-export default {
-    data() {
-        return {
-
-        }
-    }
-};
-</script>
-<style scoped lang="scss">
-
-</style>

src/views/Path1.vue

@@ -1,17 +0,0 @@
-<template>
-    <div>
-        vm1
-    </div>
-</template>
-<script>
-export default {
-    name: 'path1',
-    data() {
-        return {
-
-        }
-    }
-};
-</script>
-<style scoped lang="scss">
-</style>

src/views/Path2.vue

@@ -1,17 +0,0 @@
-<template>
-    <div>
-        vm2
-    </div>
-</template>
-<script>
-export default {
-    name: 'path2',
-    data() {
-        return {
-
-        }
-    }
-};
-</script>
-<style scoped lang="scss">
-</style>