فهرست منبع

wanda-adm:feat > 添加专用接口

shaun-sheep 4 سال پیش
والد
کامیت
fcf88dc96b

+ 12 - 0
src/api/equipComponent.ts

@@ -0,0 +1,12 @@
+import httputils from "@/api/httputils";
+const baseUrl = '/equip-component'
+
+//类型下信息点
+export function dictInfo(params: any): any {
+    return httputils.getJson(`${ baseUrl }/dict/equip/info?category=${ params.type }`, {})
+}
+
+//所有设备类型
+export function dictType(params: any): any {
+    return httputils.getJson(`${ baseUrl }/dict/equip/type`, {})
+}

+ 50 - 0
src/components/business/dataForm.vue

@@ -0,0 +1,50 @@
+<template>
+    <el-row :gutter="20" class="data-form">
+        <el-form label-position="top" label-width="80px">
+            <!-- template v-for-->
+            <template>
+                <p class="title">xxxxxx</p>
+                <el-col :span="8">
+                    <el-form-item label="名称">
+                        <el-input/>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                    <el-form-item label="名称">
+                        <el-input/>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                    <el-form-item label="名称">
+                        <el-input/>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                    <el-form-item label="名称">
+                        <el-input/>
+                    </el-form-item>
+                </el-col>
+            </template>
+
+
+        </el-form>
+
+
+    </el-row>
+</template>
+
+<script>
+export default {
+    name: 'dataForm'
+}
+</script>
+
+<style scoped lang="scss">
+.data-form{
+    .title{
+        border-left: 7px solid;
+        text-indent: 10px;
+        color:#646C73;
+    }
+}
+</style>

+ 0 - 23
src/components/public/adm-btn.vue

@@ -1,23 +0,0 @@
-<template>
-    <el-button :type="btnMsg.type" class="adm-btn">{{ btnMsg.title }}</el-button>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
-//按钮默认样式,文字
-interface Btn {
-    type: string
-    title: string
-}
-
-@Component({
-    name: 'adm-btn'
-})
-export default class extends Vue {
-    @Prop({ type: Object, default: '' }) btnMsg ?: Btn
-}
-</script>
-
-<style scoped>
-
-</style>

+ 2 - 0
src/components/public/adm-multi-table.vue

@@ -91,5 +91,7 @@ export default class extends Vue {
             padding: 0;
         }
     }
+
 }
 </style>
+

+ 13 - 27
src/components/public/adm-select.vue

@@ -1,47 +1,32 @@
 <template>
-    <el-select
-        v-model="value"
-        placeholder="请选择"
-        @change="handleFilter"
-        clearable
-        filterable
-        class="adm-select"
-    >
+ <span class="adm-select">
+        <el-select
+            v-model="value"
+            placeholder="请选择"
+            @change="handleFilter"
+            clearable
+            filterable
+        >
         <el-option
-            v-for="item in sortOptions"
+            v-for="item in list"
             :key="item.value"
             :label="item.label"
             :value="item.value"
 
         />
     </el-select>
+ </span>
 </template>
 
 <script lang="ts">
-import { Vue, Component, Emit } from "vue-property-decorator";
+import { Vue, Component, Emit, Prop } from "vue-property-decorator";
 @Component({
     name: 'adm-select'
 })
 export default class extends Vue {
     // 初始化值
     private value = ''
-    // 下拉数据
-    private sortOptions = [{
-        value: '选项1',
-        label: '黄金糕'
-    }, {
-        value: '选项2',
-        label: '双皮奶'
-    }, {
-        value: '选项3',
-        label: '蚵仔煎'
-    }, {
-        value: '选项4',
-        label: '龙须面'
-    }, {
-        value: '选项5',
-        label: '北京烤鸭'
-    }]
+    @Prop({ default: Array }) list?: []
 
     @Emit('selectValue')
     private handleFilter() {
@@ -52,4 +37,5 @@ export default class extends Vue {
 
 <style scoped>
 
+
 </style>

+ 0 - 30
src/components/public/adm-tabs.vue

@@ -1,30 +0,0 @@
-<template>
-    <el-tabs class="adm-tabs" v-model="activeName" type="card" @tab-click="handleClick">
-        <el-tab-pane v-for="(item,index) in paneMsg" :key="index" :label="item" :name="index.toString()"></el-tab-pane>
-    </el-tabs>
-</template>
-<script lang="ts">
-// tabs 数组
-interface Pane {
-    [index: number]: number
-}
-
-import { Vue, Component, Prop, Emit } from "vue-property-decorator";
-@Component({
-    name: 'adm-tabs'
-})
-export default class extends Vue {
-    private activeName = '0'
-
-    @Prop({ type: Array, default: [] }) paneMsg?: Pane
-
-    @Emit('paneValue')
-    private handleClick(tab: any) {
-        return tab
-    }
-}
-</script>
-
-<style scoped>
-
-</style>

+ 0 - 8
src/icons/README.md

@@ -1,13 +1,5 @@
 # vue-svgicon
 
-## English
-
-* All svg components were generated by `vue-svgicon` using svg files
-* After you adding new svg files into `icons/svg` folder, run `yarn svg` to regerenrate all svg components (before this, you should have `vue-svgicon` installed globally or use `npx`)
-* See details at: [https://github.com/MMF-FE/vue-svgicon](https://github.com/MMF-FE/vue-svgicon)
-
-## 中文
-
 * 所有的 svg 组件都是由 `vue-svgicon` 生成的
 * 每当在 `icons/svg` 文件夹内添加 icon 之后,可以通过执行 `yarn svg` 来重新生成所有组件 (在此之前需要全局安装 `vue-svgicon` 或使用 `npx`)
 * 详细文档请见:[https://github.com/MMF-FE/vue-svgicon](https://github.com/MMF-FE/vue-svgicon)

+ 1 - 0
src/icons/components/index.ts

@@ -11,3 +11,4 @@ import './password'
 import './table'
 import './tree'
 import './user'
+import './void'

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 112 - 0
src/icons/components/void.ts


تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 104 - 0
src/icons/svg/void.svg


+ 1 - 2
src/views/maintain/components/index.ts

@@ -1,8 +1,7 @@
 export { default as AdmSelect } from "@/components/public/adm-select.vue"
 export { default as AdmSearch } from "@/components/public/adm-search.vue"
-export { default as AdmBtn } from "@/components/public/adm-btn.vue"
-export { default as AdmTabs } from "@/components/public/adm-tabs.vue"
 export { default as AdmMultiTable } from "@/components/public/adm-multi-table.vue"
 export { default as Statistics } from "@/components/public/adm-statistics.vue"
 export { default as Pagination } from "@/components/public/adm-pagination.vue"
+export { default as dataForm } from "@/components/business/dataForm.vue"
 

+ 168 - 17
src/views/maintain/device/index.vue

@@ -2,27 +2,73 @@
     <div class="adm-device">
         <statistics :statistics-msg="statisticsMsg"/>
         <div class="operation">
-            <admSelect @selectValue="selectValue"/>
+            <admSelect @selectValue="selectValue" :list="list"/>
             <admSearch @SearchValue="SearchValue"/>
-            <admBtn :btnMsg="btnMsg"/>
+            <el-button type="default" @click="addDevice" class="adm-btn">添加设备</el-button>
         </div>
         <div class="hr"></div>
         <div class="content">
-            <admTabs :paneMsg="paneMsg" @paneValue="paneValue"/>
+            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+                <el-tab-pane v-for="(item,index) in paneMsg" :key="index" :label="item" :name="index.toString()"/>
+            </el-tabs>
             <div class="table">
-                <admMultiTable :currentHeader="currentHeader" :tableData="tableData"/>
-                <Pagination :paginationList="paginationList" @currentPage="currentPage"/>
+                <template v-if="true">
+                    <admMultiTable :currentHeader="currentHeader" :tableData="tableData"/>
+                    <Pagination :paginationList="paginationList" @currentPage="currentPage"/>
+                </template>
+                <div v-else class="void align">
+                    <svg-icon name="void" :width="120" :height="123"/>
+                    <p class="void-title">暂无内容</p>
+                    <p class="void-tips">可点击左上角选择设备类型</p>
+                </div>
             </div>
         </div>
+        <!--        添加/编辑 设备-->
+        <el-dialog
+            :title="deviceMsg"
+            :visible.sync="dialogVisible"
+            @close="close"
+        >
+            <template v-if="next">
+                <div class="align" style="height: 400px">
+                    <span class="text ">设备类别</span>
+                    <el-select
+                        v-model="deviceVal"
+                        placeholder="请选择"
+                        clearable
+                        filterable
+                    >
+                        <el-option
+                            v-for="item in list"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+
+                        />
+                    </el-select>
+                </div>
+                <el-button type="primary" class="fr" @click="handleNext">下一步</el-button>
+            </template>
+            <template v-else-if="displayLocation && deviceVal">
+                <el-button type="primary" class="fr ml-10">保存</el-button>
+                <el-button type="default" class="fr ml-10">取消</el-button>
+                <el-button type="default" class="fr ml-10">重置</el-button>
+            </template>
+            <template v-else>
+                <dataForm/>
+                <el-button type="primary" class="fr ml-10">确定</el-button>
+                <el-button type="default" class="fr" @click="handlePosition">维护位置</el-button>
+            </template>
+        </el-dialog>
     </div>
 </template>
 <script lang="ts">
 import { Vue, Component } from "vue-property-decorator";
-import { Statistics, AdmSelect, AdmSearch, AdmBtn, AdmTabs, AdmMultiTable, Pagination } from '../components/index'
+import { Statistics, AdmSelect, AdmSearch, AdmMultiTable, Pagination, dataForm } from '../components/index'
 
 @Component({
     name: 'adm-device',
-    components: { Statistics, AdmSelect, AdmSearch, AdmBtn, AdmTabs, AdmMultiTable, Pagination }
+    components: { Statistics, AdmSelect, AdmSearch, AdmMultiTable, Pagination, dataForm }
 })
 export default class extends Vue {
     private statisticsMsg = {
@@ -30,16 +76,39 @@ export default class extends Vue {
         total: 234
 
     }
-    private btnMsg = {
-        type: 'default',
-        title: '添加设备'
-    }
+    // 设备类值
+    deviceVal = ''
+    // 维护位置
+    displayLocation = false
+    // 下拉数据
+    list = [
+        {
+            value: '选项1',
+            label: '黄金糕'
+        }, {
+            value: '选项2',
+            label: '双皮奶'
+        }, {
+            value: '选项3',
+            label: '蚵仔煎'
+        }, {
+            value: '选项4',
+            label: '龙须面'
+        }, {
+            value: '选项5',
+            label: '北京烤鸭'
+        }]
+    private dialogVisible = false
     private paneMsg = ['设计阶段维护', '施工阶段维护', '运维阶段维护']
+    private activeName = ""
     private paginationList = {
         size: 1,
         sizes: [10, 20.50, 100],
         total: 200
     }
+    // 下一步
+    private next = true
+    private deviceMsg = '添加设备'
     private currentHeader = this.paneMsg[0]
     private tableData = [{
         date: '2016-05-03',
@@ -94,7 +163,7 @@ export default class extends Vue {
 
 
 // 维护阶段 tabs
-    paneValue(val: any) {
+    handleClick(val: any) {
         console.log(val)
         this.currentHeader = val.label
         switch (val.index) {
@@ -110,7 +179,7 @@ export default class extends Vue {
 
     //设备类筛选
     selectValue(val: string) {
-        console.log(val)
+        console.log(val, 3)
 
     }
 
@@ -118,14 +187,47 @@ export default class extends Vue {
     SearchValue(val: string) {
         console.log(val)
     }
+
     // 当前分页
-    currentPage(val:number) {
+    currentPage(val: number) {
         console.log(val)
     }
+
+    // 添加设备
+    addDevice() {
+        this.dialogVisible = true
+    }
+
+    //下一步事件
+    handleNext() {
+        if (this.deviceVal) {
+            this.next = false
+        }
+    }
+
+//    维护位置
+    handlePosition() {
+        this.displayLocation = true
+    }
+
+// close
+    close() {
+        this.next = true
+        this.displayLocation = false
+    }
 }
 </script>
 <style lang="scss" scoped>
 $margin: 12px;
+$border: 1px solid #E1E7EA;
+.align {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    flex-wrap: wrap;
+}
+
 .adm-device {
     background: #fff;
     padding: 12px;
@@ -136,6 +238,7 @@ $margin: 12px;
 
         .adm-select {
             margin-right: $margin;
+
         }
 
         .adm-btn {
@@ -156,11 +259,28 @@ $margin: 12px;
         height: 100%;
 
         .table {
-            border-left: 1px solid #E1E7EA;
-            border-right: 1px solid #E1E7EA;
-            border-bottom: 1px solid #E1E7EA;
+            border-left: $border;
+            border-right: $border;
+            border-bottom: $border;
             height: calc(100% - 180px);
             padding: 12px;
+
+            .void {
+
+                margin-top: 200px;
+            }
+
+            .void-title {
+                color: #333333;
+                line-height: 21px;
+                font-size: 16px;
+            }
+
+            .void-tips {
+                color: #9CA1A9;
+                line-height: 22px;
+                font-size: 14px;
+            }
         }
 
         .adm-multi-table {
@@ -176,9 +296,40 @@ $margin: 12px;
         bottom: 30px;
     }
 }
+
 </style>
 <style>
+.data-form {
+    height: 430px;
+}
+
+.text {
+    color: #000000;
+    margin-bottom: 10px;
+
+}
+
 .el-tabs__header {
     margin: 0;
 }
+
+.el-dialog__header {
+    border-bottom: 1px solid #D8D8D8;
+}
+
+.fl {
+    float: left;
+}
+
+.fr {
+    float: right;
+}
+
+.el-dialog__body {
+    overflow: hidden;
+}
+
+.ml-10 {
+    margin-left: 10px;
+}
 </style>

+ 2 - 2
src/views/maintain/space/components/spaceGraph.vue

@@ -58,7 +58,7 @@
 import { Vue, Component, Watch } from "vue-property-decorator";
 import { FloorView } from "@/utils/graph/FloorView";
 import { FloorScene } from "@/utils/graph/FloorScene";
-import canvasFun from "./canvasFun";
+import canvasFun from "./canvasFun.vue";
 
 @Component({
     components: { canvasFun },
@@ -339,4 +339,4 @@ export default class spaceGraph extends Vue {
         }
     }
 }
-</style>
+</style>

+ 1 - 1
src/views/maintain/space/index.vue

@@ -29,7 +29,7 @@
 import { Vue, Component, Watch } from "vue-property-decorator";
 import Bus from "@/utils/bus";
 import { Statistics, AdmSearch, AdmMultiTable } from "../components/index";
-import spaceGraph from "./components/spaceGraph";
+import spaceGraph from "./components/spaceGraph.vue";
 @Component({
     name: "space-index",
     components: { Statistics, AdmSearch, AdmMultiTable, spaceGraph },

+ 0 - 8
src/views/project/index.vue

@@ -26,14 +26,6 @@ export default class extends Vue {
     get roles() {
         return UserModule.roles;
     }
-
-    selectValue(val: string) {
-        console.log(val)
-    }
-
-    SearchValue(val: string) {
-        console.log(val)
-    }
 }
 </script>