shaun-sheep 4 rokov pred
rodič
commit
f67e3e9f95

+ 68 - 24
src/views/legendLibrary/addForm.vue

@@ -5,31 +5,49 @@
                 <el-row :gutter='20'>
                     <el-col :span='12'>
                         <div>图例编码</div>
-                        <el-input v-model='ruleForm.Id' style='width:200px;height:32px;' disabled></el-input>
+                        <!-- <el-input v-model='ruleForm.Id' style='width:200px;height:32px;' disabled></el-input> -->
+                        <Input v-model='ruleForm.Id' disabled placeholder style='width:200px' />
                     </el-col>
                     <el-col :span='12'>
                         <div class='start'>图例名称</div>
-                        <el-input v-model='ruleForm.Name' style='width:200px;height:32px;'></el-input>
+                        <!-- <el-input v-model='ruleForm.Name' style='width:200px;height:32px;'></el-input> -->
+                        <Input v-model='ruleForm.Name' placeholder maxlength='20' style='width:200px' />
                     </el-col>
                     <el-col :span='12' style='margin-top:20px'>
                         <div class>单位</div>
-                        <el-input v-model='ruleForm.Unit' style='width:200px;height:32px;'></el-input>
+                        <!-- <el-input v-model='ruleForm.Unit' style='width:200px;height:32px;'></el-input> -->
+                        <Input v-model='ruleForm.Unit' placeholder style='width:200px' />
                     </el-col>
 
                     <el-col :span='12' style='margin-top:20px'>
                         <div class='start'>图例类型</div>
-                        <el-select v-model='ruleForm.Type' placeholder='请选择' style='width:200px;height:32px' @change='initGraph'>
+                        <!-- <el-select v-model='ruleForm.Type' placeholder='请选择' style='width:200px;height:32px' @change='initGraph'>
                             <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
-                        </el-select>
+                        </el-select>-->
+                        <span class='add-form-type'>
+                            <Select
+                                width='200'
+                                height='40'
+                                v-model='ruleForm.Type'
+                                :isReadOnly='true'
+                                @change='initGraph'
+                                :hideClear='true'
+                                :selectdata='options'
+                                placeholder='请选择'
+                            />
+                        </span>
                     </el-col>
                 </el-row>
             </div>
-            <div class='input-right' ref='graph' v-show='ruleForm.Type=="Zone" || ruleForm.Type=="Image" || ruleForm.Type =="Line"'>
-                <div v-show=' ruleForm.Type=="Image" && ruleForm.Url' class='input-right'>
-                    <img :key='key' :src='`/serve/topology-wanda/Picture/query/${ruleForm.Url}`' alt />
-                    <!-- {{ruleForm.Url}} -->
+            <div v-show='ruleForm.Type=="Zone" || ruleForm.Type=="Image" || ruleForm.Type =="Line"'>
+                <div style='color:#646C73'>展示预览</div>
+                <div class='input-right' ref='graph'>
+                    <div v-show=' ruleForm.Type=="Image" && ruleForm.Url' class='input-right'>
+                        <img :key='key' :src='`/serve/topology-wanda/Picture/query/${ruleForm.Url}`' alt />
+                        <!-- {{ruleForm.Url}} -->
+                    </div>
+                    <canvas id='canvas' :width='canvasWidth' :height='canvasHeight' v-show='!(ruleForm.Type=="Image" && ruleForm.Url)'></canvas>
                 </div>
-                <canvas id='canvas' :width='canvasWidth' :height='canvasHeight' v-show='!(ruleForm.Type=="Image" && ruleForm.Url)'></canvas>
             </div>
         </div>
         <div v-if='ruleForm.Type=="Zone" || ruleForm.Type=="Line"' class='form3'>
@@ -86,7 +104,7 @@
         </div>
         <div v-if='ruleForm.Type!="None"' class='form4'>
             <div class='form4-top'>
-                <span class='form4-span1'>专业/设备、位置类型</span>
+                <span class='form4-span1'>专业/设备、位置类型</span>
                 <span class='form4-span3'>铺位可视化typeid</span>
             </div>
             <div class='form3-bottom'>
@@ -135,20 +153,20 @@ export default {
         return {
             options: [
                 {
-                    value: 'None',
-                    label: '非图例'
+                    id: 'None',
+                    name: '非图例'
                 },
                 {
-                    value: 'Zone',
-                    label: '区域'
+                    id: 'Zone',
+                    name: '区域'
                 },
                 {
-                    value: 'Image',
-                    label: '图标'
+                    id: 'Image',
+                    name: '图标'
                 },
                 {
-                    value: 'Line',
-                    label: '线条'
+                    id: 'Line',
+                    name: '线条'
                 }
             ],
 
@@ -399,7 +417,7 @@ export default {
             if (this.$refs.select1 && this.$refs.select1.$el) {
                 this.$refs.select1.$el.children[0].children[0].setAttribute(
                     'style',
-                    'background:url(' + this.borderLineOptionObject.src + ')  center center no-repeat;color:transparent;'
+                    'background:#ffffff url(' + this.borderLineOptionObject.src + ')  center center no-repeat;color:transparent;'
                 )
             }
             if (this.view) {
@@ -549,7 +567,19 @@ export default {
     .ant-input-number {
         border-radius: 4px 0 0 4px;
     }
-
+    // .add-form-type {
+    //     /deep/ .p-select .p-select-header {
+    //         height: 40px;
+    //         line-height: 40px;
+    //         border: 1px solid #dcdfe6;
+    //     }
+    //     /deep/ .p-select .p-select-header .p-select-selected-box .p-select-fakePlaceholder {
+    //         line-height: 40px;
+    //     }
+    //     /deep/ .p-select .p-select-header .p-select-triangle{
+    //         top: 12px;
+    //     }
+    // }
     .form2 {
         display: flex;
         .input-left {
@@ -654,6 +684,7 @@ export default {
         border-bottom: 1px solid rgba(195, 198, 203, 1);
         position: absolute;
         text-align: center;
+        line-height: 26px;
     }
 }
 </style>
@@ -671,21 +702,34 @@ export default {
     word-break: break-all !important;
     word-wrap: break-word !important;
     height: auto !important;
-    line-height: 25px;
+    line-height: 21px;
 }
 .p-select-area .p-transfer-right {
     width: 245px !important;
 }
-
+.p-select-area .p-transfer-right .p-transfer-selected .p-transfer-selected-item {
+    height: 25px;
+}
 .p-select-area .p-transfer-right .p-transfer-selected .p-transfer-selected-item > span {
     word-break: break-all !important;
     white-space: normal !important;
     word-break: break-all !important;
     word-wrap: break-word !important;
     height: auto !important;
-    line-height: 25px;
+    line-height: 16px;
     display: block;
     width: 225px;
     padding-right: 3px;
 }
+.p-popover-tip-content .p-popover-tip-content-item {
+    margin-left: 4px;
+    margin-bottom: 8px;
+    padding-left: 4px;
+    padding-right: 4px;
+    background-color: #f5f6f7 !important;
+    border-radius: 2px;
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+}
 </style>

+ 27 - 8
src/views/legendLibrary/addLegend.vue

@@ -1,7 +1,6 @@
 <template>
     <div class='add-legend'>
         <el-dialog :title='title' :visible.sync='dialogVisible'>
-            <!-- <add-list v-show='title=="" && GraphCategoryId' ref='searchList' :GraphCategoryId='GraphCategoryId' @mesg='mesg'></add-list> -->
             <add-form
                 ref='add'
                 :InfosList='InfosList'
@@ -16,6 +15,23 @@
                 <el-button type='primary' @click='save' size='small'>确 定</el-button>
             </span>
         </el-dialog>
+        <!-- <Modal :show='dialogVisible' :title='title' mode='middle' @close='dialogVisible=false'>
+            <template #content>
+                <add-form
+                    ref='add'
+                    :InfosList='InfosList'
+                    :InfoTypeIdList='InfoTypeIdList'
+                    :ruleForm='info'
+                    @addSuccess='addSuccess'
+                    @updateSuccess='updateSuccess'
+                    :title='title'
+                />
+            </template>
+            <template #handle>
+                <Button @click='dialogVisible = false,cancal()' type='default'>取 消</Button>
+                <Button @click='save' type='primary'>确 定</Button>
+            </template>
+        </Modal>-->
         <TransferSelectModal
             defaultExpandAll
             default-expand-all
@@ -196,18 +212,21 @@ export default {
 
 <style lang='less' scoped>
 .add-legend {
-}
-</style>
-<style lang='less'>
-.add-legend {
-    .el-dialog {
+    /deep/ .el-dialog {
         width: 840px;
         height: 509px;
+        border-radius: 8px;
+        .el-dialog__header {
+            border-bottom: 1px solid #e4e5e7;
+        }
+        .el-dialog__title {
+            font-size: 16px;
+        }
     }
-    .el-dialog__footer {
+    /deep/ .el-dialog__footer {
         position: absolute;
         bottom: 20px;
         right: 20px;
     }
 }
-</style>
+</style>

+ 91 - 45
src/views/legendLibrary/index.vue

@@ -11,7 +11,7 @@
             </Dropdown>
         </div>-->
         <div class='legend-library-top'>
-            图例库管理
+            <span style='display:inline-block;font-size:16px'>图例库管理</span>
             <span class='library-btn'>
                 <el-button size='small' @click='dumpRules'>图例绘制规则</el-button>
                 <el-button size='small' type='primary' @click='add'>添加图例</el-button>
@@ -31,17 +31,17 @@
                 ></Select>
 
                 <TreeSelect
+                    title='已选项'
                     caption='说明书位置:'
                     tipPlace='top'
-                    width='180'
-                    style='margin:0 12px'
+                    width='200'
+                    style='margin:0 0 0 12px'
                     :returnParentNode='false'
                     :isShowAllChoice='true'
                     :choseArea='true'
                     :lastStage='true'
                     :data='positionSelect'
                     @change='treeConfirmPosition'
-                    :hideClear='true'
                 />
                 <span class='device-position'>
                     <TreeSelect
@@ -54,7 +54,6 @@
                         :choseArea='true'
                         :data='deviceList'
                         :lastStage='true'
-                        :hideClear='true'
                         @change='treeConfirmDevice'
                     />
                 </span>
@@ -83,7 +82,6 @@
                     @change='treeConfirm'
                     :lastStage='true'
                     @focusChange='focusChange'
-                    :hideClear='true'
                 />
                 <Select
                     width='180'
@@ -96,7 +94,15 @@
                     style='margin:0 12px'
                     :hideClear='true'
                 ></Select>
-                <el-input size='small' @change='getTableList' prefix-icon='el-icon-search' v-model='keyword' style='width:192px;margin-right:12px;'></el-input>
+                <el-input
+                    size='small'
+                    @change='getTableList'
+                    prefix-icon='el-icon-search'
+                    v-model='keyword'
+                    clearable
+                    style='width:180px;margin-right:12px;float:right;position: absolute;right: 0; top: 45px;'
+                    @clear='keyword = ""'
+                ></el-input>
             </div>
             <el-table :data='tableData' :key='key' :border='true' style='width: 100%'>
                 <el-table-column prop='Name' label='图例名称' width='120'>
@@ -134,8 +140,8 @@
                 </el-table-column>
                 <el-table-column label='操作' width='100' v-if='state==1'>
                     <template slot-scope='scope' v-if='state==1'>
-                        <el-button @click='modifyClick(scope.row)' type='text' size='small'>修改</el-button>
-                        <el-button @click='deleteClick(scope.row)' type='text' size='small'>做废</el-button>
+                        <el-button @click='modifyClick(scope.row)' type='text'>修改</el-button>
+                        <el-button @click='deleteClick(scope.row)' type='text'>作废</el-button>
                     </template>
                 </el-table-column>
                 <el-table-column v-if='state==0' prop='DeleteTime' label='作废时间' width='180'>
@@ -155,6 +161,13 @@
             </div>
         </div>
         <add-legend ref='addLegend' @updateSuccess='updateSuccess' @addSuccess='addSuccess'></add-legend>
+        <Modal :show='modalStatusTip' title='确定要作废图例吗?' mode='tip' type='error' @close='modalStatusTip=false'>
+            <template #content>作废后则不可更改</template>
+            <template #handle>
+                <Button @click='modalStatusTip=false' type='default'>取消</Button>
+                <Button @click='modalConfirm' type='error'>作废</Button>
+            </template>
+        </Modal>
     </div>
 </template>
 <script>
@@ -254,6 +267,8 @@ export default {
     components: { addLegend, Select },
     data() {
         return {
+            deleteObject: {},
+            modalStatusTip: false,
             tableData: [],
             key: 1,
             dataSelect2: [
@@ -310,10 +325,10 @@ export default {
             visualizationList: [], //已选铺位可视化
             // majorList: [], //专业
             deviceList: [],
-            GraphCategoryIds: undefined, //说明书位置勾选集合
-            InfoLocals: undefined, //工程信息化
-            InfoSystems: undefined, //工程信息化专业/系统
-            InfoTypeIds: undefined //铺位可视化typeid
+            GraphCategoryIds: [], //说明书位置勾选集合
+            InfoLocals: [], //工程信息化
+            InfoSystems: [], //工程信息化专业/系统
+            InfoTypeIds: [] //铺位可视化typeid
         }
     },
     watch: {
@@ -387,28 +402,22 @@ export default {
         modifyClick(row) {
             this.$refs.addLegend.open(row, '修改图例库')
         },
-        deleteClick(row) {
-            this.$confirm('作废后则不可更改', '确定要作废图例吗?', {
-                confirmButtonText: '作废',
-                cancelButtonText: '取消',
-                type: 'warning',
-                center: true
-            })
-                .then(() => {
-                    let postParams = [
-                        {
-                            Id: row.Id
-                        }
-                    ]
-                    deleteLegend({ postParams }).then(res => {
-                        if (res.Result == 'success') {
-                            this.$message({
-                                type: 'success',
-                                message: '作废成功!'
-                            })
-                            this.getTableList()
-                        }
-                    })
+        modalConfirm() {
+            let postParams = [
+                {
+                    Id: this.deleteObject.Id
+                }
+            ]
+            deleteLegend({ postParams })
+                .then(res => {
+                    if (res.Result == 'success') {
+                        this.$message({
+                            type: 'success',
+                            message: '作废成功!'
+                        })
+                        this.modalStatusTip = false
+                        this.getTableList()
+                    }
                 })
                 .catch(() => {
                     this.$message({
@@ -417,6 +426,38 @@ export default {
                     })
                 })
         },
+        deleteClick(row) {
+            this.deleteObject = row
+            this.modalStatusTip = true
+            // this.$confirm('作废后则不可更改', '确定要作废图例吗?', {
+            //     confirmButtonText: '作废',
+            //     cancelButtonText: '取消',
+            //     type: 'warning',
+            //     center: true
+            // })
+            //     .then(() => {
+            //         let postParams = [
+            //             {
+            //                 Id: row.Id
+            //             }
+            //         ]
+            //         deleteLegend({ postParams }).then(res => {
+            //             if (res.Result == 'success') {
+            //                 this.$message({
+            //                     type: 'success',
+            //                     message: '作废成功!'
+            //                 })
+            //                 this.getTableList()
+            //             }
+            //         })
+            //     })
+            //     .catch(() => {
+            //         this.$message({
+            //             type: 'info',
+            //             message: '已取消删除'
+            //         })
+            //     })
+        },
         pageChanged(page, size) {
             this.currentPage = page
             this.getTableList()
@@ -432,10 +473,10 @@ export default {
         getTableList() {
             let postParams = {
                 Deleted: this.state == 1 ? false : true,
-                GraphCategoryIds: this.GraphCategoryIds, //说明书位置
-                InfoLocals: this.InfoLocals, //工程信息化位置与设备分类
-                InfoSystems: this.InfoSystems, //工程信息化专业/系统
-                InfoTypeIds: this.InfoTypeIds, //铺位可视化typeid
+                GraphCategoryIds: this.GraphCategoryIds.length ? this.GraphCategoryIds : undefined, //说明书位置
+                InfoLocals: this.InfoLocals.length ? this.InfoLocals : undefined, //工程信息化位置与设备分类
+                InfoSystems: this.InfoSystems.length ? this.InfoSystems : undefined, //工程信息化专业/系统
+                InfoTypeIds: this.InfoTypeIds.length ? this.InfoTypeIds : undefined, //铺位可视化typeid
                 Name: this.keyword,
                 PageNumber: this.currentPage,
                 PageSize: this.size,
@@ -477,13 +518,18 @@ export default {
         treeConfirmDevice(id, info) {
             this.InfoSystems = []
             this.InfoLocals = []
-            for (let i = 0; i < info.length; i++) {
-                let type = info[i]
-                if (type.name.includes('/')) {
-                    this.InfoLocals.push(type.id)
-                } else {
-                    this.InfoSystems.push(type.id)
+            if (info) {
+                for (let i = 0; i < info.length; i++) {
+                    let type = info[i]
+                    if (type.name.includes('/')) {
+                        this.InfoLocals.push(type.id)
+                    } else {
+                        this.InfoSystems.push(type.id)
+                    }
                 }
+            } else {
+                this.InfoSystems = []
+                this.InfoLocals = []
             }
             this.getTableList()
         },