提交点位配置

src/components/common/handsontable.vue

@@ -147,7 +147,6 @@
                 }
             },
             init(settings) {
-                console.log("init")
                 var hotElement = document.getElementById(this.id)
                 var hotSettings = Object.assign({
                     width: this.getElement().width,
@@ -179,16 +178,16 @@
                 }
                 this.hot = new Handsontable(hotElement, hotSettings);
                 console.log(this.hot)
-                this.hot.view.wt.update('onCellDblClick', (row,cell) => { 
+                // this.hot.view.wt.update('onCellDblClick', (row,cell) => { 
 
-                    //Get editor and begin edit mode on current cell (maintain current double click functionality) 
-                    var activeEditor = this.hot.getActiveEditor(); 
-                    console.log(this.hot,activeEditor)
-                    activeEditor.beginEditing(); 
-                    this.onDblClick(activeEditor,row,cell)
-                    //Do whatever you want... 
+                //     //Get editor and begin edit mode on current cell (maintain current double click functionality) 
+                //     var activeEditor = this.hot.getActiveEditor(); 
+                //     console.log(this.hot,activeEditor)
+                //     activeEditor.beginEditing(); 
+                //     this.onDblClick(activeEditor,row,cell)
+                //     //Do whatever you want... 
 
-                }); 
+                // }); 
                 let pro = document.getElementById("hot-display-license-info");
                 if (!!pro) {
                     pro.parentNode.removeChild(pro);
@@ -197,9 +196,9 @@
             },
 
             //双击
-            onDblClick(activeEditor,row,cell){
-                console.log(111,activeEditor,row,cell)
-            },
+            // onDblClick(activeEditor,row,cell){
+            //     console.log(111,activeEditor,row,cell)
+            // },
             tableDown(el, rowArr) {
                 if (rowArr.row < 0) {
                     return false

src/components/config_point/data_origin.vue

@@ -1,9 +1,11 @@
 <template>
     <div class="saga-fill">
-        <div class="saga-title center h1">{{renderData.Name}}</div>
-        <div class="center h3">通讯协议：{{renderData.ProtocolType}}</div>
-        <div class="padding10 bg-F5">
-            <p class="p-over2 h5">{{renderData.Description}}</p>
+        <div class="mess-view">
+            <div class="saga-title">{{renderData.Name}}</div>
+            <div class="point-type">通讯协议：{{renderData.ProtocolType}}</div>
+            <div class="point-des">
+                <p class="p">{{renderData.Description}}</p>
+            </div>
         </div>
         <div class="doughnut-view">
             <doughnut v-if="renderData.Sum" width="200" height="200" :renderData="echartsData" :id="id"></doughnut>
@@ -44,9 +46,8 @@
         },
         mounted() {},
         methods: {
-            changeData(){
-                this.echartsData = [
-                    {
+            changeData() {
+                this.echartsData = [{
                         name: "未使用-" + this.renderData.Notused,
                         value: this.renderData.Notused
                     },
@@ -61,10 +62,10 @@
                 ]
             }
         },
-        watch:{
+        watch: {
             renderData: {
                 deep: true,
-                handler: function(){
+                handler: function() {
                     this.changeData()
                 }
             }
@@ -73,11 +74,45 @@
 </script>
 
 <style lang="scss" scoped>
-    .doughnut-view {
-        height: 300px;
-        width: 100%;
-        padding: 5px;
+    .mess-view {
+        height: 90px;
         box-sizing: border-box;
+        border-bottom: 1px solid #ddd;
+        overflow: hidden;
+        padding: 10px 20px 10px 15px;
+        .saga-title {
+            font-size: 14px;
+            color: #333;
+            font-weight: 600;
+            line-height: 14px;
+        }
+        .point-type{
+            font-size: 12px;
+            height: 17px;
+            line-height: 17px;
+            margin-top: 5px;
+            margin-bottom: 10px;
+            color: #999;
+        }
+        .point-des{
+            font-size: 12px;
+            height: 17px;
+            line-height: 17px;
+            p{
+                overflow: hidden;
+                text-overflow:ellipsis;
+                white-space: nowrap;
+                color: #999;
+            }
+        }
+    }
+    .saga-fill {
+        .doughnut-view {
+            height: 165px;
+            width: 100%;
+            padding: 0 5px;
+            box-sizing: border-box;
+        }
     }
 </style>
 

src/components/config_point/step3_edit/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class='box'>
+    <div class='point-box'>
         <div class='left'>
             <ul>
                 <li>
@@ -567,7 +567,7 @@ export default {
 </script>
 
 <style lang='scss' scoped>
-.box {
+.point-box {
     border: 1px solid #ccc;
     display: flex;
     padding: 20px 0;

src/views/point/config_point/index.vue

@@ -94,12 +94,11 @@
             flex-wrap: wrap; // justify-content: space-around;
             height: calc(100% - 90px);
             .saga-list-item {
-                width: 320px;
-                height: 475px;
-                border-radius: 22px;
-                border: 6px solid #dee3f3; //   &:hover {
-                //     border-color: #409eff;
-                //   }
+                background-color: #fff;
+                width: 345px;
+                height: 294px;
+                border-radius: 5px;
+                border: 1px solid #ddd;
             }
         }
     }

src/views/point/config_point/steps/index.vue

@@ -1,14 +1,19 @@
 <template>
-    <div ref="pointStep" class="h100 saga-maintenance" :style="`height:${activeHeight}px;`">
+    <div ref="pointStep" class="h100 saga-maintenance">
         <!-- <bread class="bread-view"></bread> -->
         <div class="saga-btns-view">
             <template v-for="(item,index) in jsonTitle">
                 <div
-                  :key="index"
-                  @click="changeStep(index)"
-                  class="saga-steps-btn saga-border pointer saga-size3"
-                >{{item}}</div>
-                <div v-if="index < jsonTitle.length - 1" class="saga-steps-btn saga-size3">👉</div>
+                    :key="index"
+                    @click="changeStep(index)"
+                    class="saga-steps-btn pointer saga-size3"
+                >
+                    <div class="border-view">
+                        <div class="point-step">{{index + 1}}</div>
+                        <div class="jiao"></div>
+                        <div class="point-title">{{item}}</div>
+                    </div>
+                </div>
             </template>
         </div>
         <div class="main-view">
@@ -43,7 +48,7 @@
             window.onresize = this.resize
         },
         methods: {
-            resize(){
+            resize() {
                 console.log(222)
                 this.activeHeight = this.$refs.pointStep.parentElement.parentElement.parentElement.offsetHeight - 10
             },
@@ -80,22 +85,79 @@
 </script>
 <style lang="scss">
     .h100 {
+        background-color: #fff;
+        padding: 0 10px;
+        box-sizing: border-box;
+        display: flex;
+        flex-flow: column;
         .bread-view {
             height: 45px;
         }
         .main-view {
-            height: calc(100% - 155px);
-            background: #ccc;
-            margin-top: 10px;
+            flex: 1;
+            display: flex;
+            flex-flow: column;
         }
         .saga-btns-view {
+            background-color: #fff;
+            display: flex;
+            justify-content: space-around;
+            padding: 20px 0;
+            box-sizing: border-box;
+            height: 80px;
             .saga-steps-btn {
-                height: 80px;
-                text-align: center;
-                /*设置文本水平居中*/
-                display: table-cell;
-                vertical-align: middle;
-                padding: 0 30px;
+                height: 40px;
+                background: #EEFAFF;
+                box-shadow: 0 0 2px 0 #DDD;
+                border-radius: 6px;
+                font-size: 14px;
+                line-height: 40px;
+                color: #666;
+                box-sizing: border-box;
+                .border-view {
+                    border: 1px solid #C2CEDB;
+                    border-radius: 6px;
+                    height: 34px;
+                    line-height: 34px;
+                    overflow: hidden;
+                    margin: 2px 5px;
+                    box-sizing: border-box;
+                    position: relative;
+                    flex: 1;
+                    .jiao{
+                        display: inline-block;
+                        border-top: 17px solid transparent;
+                        border-left: 17px solid #C2CEDB;
+                        border-bottom: 17px solid transparent;
+                        position: relative;
+                        float: left;
+                        &::after{
+                            content: '';
+                            position: absolute;
+                            top: -17px;
+                            left: -18px;
+                            border-top: 17px solid transparent;
+                            border-left: 17px solid #EEFAFF;
+                            border-bottom: 17px solid transparent;
+                        }
+                    }
+                    .point-step {
+                        font-size: 24px;
+                        padding: 0 9px;
+                        float: left;
+                    }
+                    .point-title{
+                        float: left;
+                        padding-left: 10px;
+                        padding-right: 22px;
+                        width: 168px;
+                    }
+                } // height: 80px;
+                // text-align: center;
+                // /*设置文本水平居中*/
+                // display: table-cell;
+                // vertical-align: middle;
+                // padding: 0 30px;
             }
         }
     }

src/views/point/config_point/steps/step1.vue

@@ -1,13 +1,13 @@
 <template>
     <div id="handsonStep1">
         <div class="btns-view">
-            <el-button>获取原始点位当前值</el-button>
-            <el-button @click="downloadExcel = true">导出Excel模板</el-button>
-            <el-button @click="updateExcel = true">导入Excel</el-button>
-            <el-button @click="addRow">新增行</el-button>
-            <el-button @click="downData">下载数据</el-button>
-            <el-button @click="saveData">保存</el-button>
-            <el-checkbox v-model="checked">只显示使用的原始点位</el-checkbox>
+            <el-button style="float:right;margin-top:4px;margin-left:10px;" type="primary" @click="saveData">保存</el-button>
+            <el-button style="float:right;margin-top:4px;" type="primary" @click="addRow">新增行</el-button>
+            <el-button style="float:right;margin-top:4px;" type="primary" @click="downData">下载数据</el-button>
+            <el-button style="float:right;margin-top:4px;" type="primary" @click="updateExcel = true">导入Excel</el-button>
+            <el-button style="float:right;margin-top:4px;" type="primary" @click="downloadExcel = true">导出Excel模板</el-button>
+            <el-checkbox style="float:right;line-height:40px;" v-model="checked">只显示使用的原始点位</el-checkbox>
+            <el-button type="primary">获取原始点位当前值</el-button>
         </div>
         <div id="handsontableSteps1" v-loading="isLoading">
             <handsontable-component v-if="!!allData.length" ref="handsontable" @mouseDown="clickTable" @change="changeHand"></handsontable-component>
@@ -189,7 +189,7 @@
             clickTable(info, row) {
                 let activeCell = this.hot.getActiveEditor()
                 this.renderData = info
-                console.log(activeCell)
+                console.log(activeCell,'activeCell')
                 if (activeCell.prop == "LocationFlag") {
                     this.localtionDialog = true
                 }
@@ -374,13 +374,15 @@
 </script>
 <style lang="scss" scoped>
     #handsonStep1 {
-        height: 100%;
+        flex: 1;
+        display: flex;
+        flex-flow:column;
         .btns-view {
-            height: 50px;
-            vertical-align: middle;
+            height: 40px;
+            line-height: 40px;
         }
         #handsontableSteps1 {
-            height: calc(100% - 50px);
+            flex: 1;
             overflow: hidden;
             position: relative;
         }

src/views/point/config_point/steps/step2.vue

@@ -1,16 +1,21 @@
 <template>
     <div id="handsonStep2">
         <div class="btns-view">
-            <el-button>AI自动识别</el-button>
-            <el-button @click="discern(1)">批量识别设备类型关键字</el-button>
-            <el-button @click="discern(2)">批量识别设备参数关键字</el-button>
-            <el-button @click="examine">检查&微调</el-button>
-            <el-button @click="reset">刷新</el-button>
-            <el-button @click="saveData">保存</el-button>
+            <el-button type="primary">AI自动识别</el-button>
+            <el-button type="primary" @click="discern(1)">批量识别设备类型关键字</el-button>
+            <el-button type="primary" @click="discern(2)">批量识别设备参数关键字</el-button>
+            <el-button type="primary" @click="examine">检查&微调</el-button>
+            <div style="float:right;">
+                <el-button type="primary" @click="reset">刷新</el-button>
+                <el-button type="primary" @click="saveData">保存</el-button>
+            </div>
         </div>
         <div id="handsontableSteps1">
             <handsontable-component ref="handsontable"></handsontable-component>
         </div>
+        <div class="center">
+            <pagination :page="pages" @change="changePage"></pagination>
+        </div>
         <own-dialog :width="'60%'" :title="title" :dialogVisible="isDialogShow" @cancel="close">
             <find-keyword ref="findKeyword" :type="type" @change="changeHand"></find-keyword>
         </own-dialog>
@@ -38,6 +43,7 @@
         updatePoint
     } from "@/fetch/point_http"
     import findKeyword from "@/components/config_point/find_keyword"
+    import pagination from "@/components/common/myPagination"
     export default {
         data() {
             return {
@@ -50,6 +56,16 @@
                 type: "",
                 examineDialog: false,
                 changeFlag: true,
+                pages: {
+                    size: 10,
+                    sizes: [10, 30, 50, 100],
+                    total: 0,
+                    currentPage: 0
+                },
+                oldPage: {
+                    currentPage: 0,
+                    size: 10
+                },
             }
         },
         created() {
@@ -78,12 +94,35 @@
                     this.$confirm("表格数据尚未保存，确定刷新吗？").then(_ => {
                         this.saveData()
                     }).catch(_ =>{
+                        this.pages.currentPage = this.oldPage.currentPage
+                        this.pages.size = this.oldPage.size
                         this.getData()
                     })
                 }else{
                     this.getData()
                 }
             },
+
+            //页面发生更改
+            changePage() {
+                if (!this.changeFlag) {
+                    //发生更改，提示是否保存
+                    this.$confirm('存在数据未保存, 是否继续?', '提示', {
+                        confirmButtonText: '确定',
+                        cancelButtonText: '取消',
+                        type: 'warning'
+                    }).then(() => {
+                        this.getData()
+                    }).catch(() => {
+                        this.pages.currentPage = this.oldPage.currentPage
+                        this.pages.size = this.oldPage.size
+                        return false
+                    });
+                } else {
+                    this.getData()
+                }
+            },
+
             /**
              *  @param num 代表着1类型2参数
              * 
@@ -173,10 +212,14 @@
                         Filters: {
                             DatasourceId: this.datasourceId,
                         },
-                        "PageNumber": 1,
-                        "PageSize": 50,
+                        "PageNumber": this.pages.currentPage || 1,
+                        "PageSize": this.pages.size,
                     }
                 }
+                this.oldPage = {
+                    size: this.pages.size,
+                    currentPage: this.pages.currentPage
+                }
                 queryPoint(param, res => {
                     console.log(res)
                     settings = {
@@ -188,6 +231,7 @@
                         maxRows: res.Content.length
                     }
                     this.hot = this.$refs.handsontable.init(settings)
+                    this.pages.total = res.Total
                     console.log(this.hot)
                 })
             },
@@ -199,19 +243,22 @@
             handsontableComponent,
             ownDialog,
             findKeyword,
-            examineMain
+            examineMain,
+            pagination
         }
     }
 </script>
 <style lang="scss" scoped>
     #handsonStep2 {
-        height: 100%;
+        flex: 1;
+        display: flex;
+        flex-flow:column;
         .btns-view {
-            height: 50px;
-            vertical-align: middle;
+            height: 40px;
+            line-height: 40px;
         }
         #handsontableSteps1 {
-            height: calc(100% - 50px);
+            flex: 1;
             overflow: hidden;
             position: relative;
         }

src/views/point/config_point/steps/step3.vue

@@ -1,13 +1,16 @@
 <template>
     <div id="handsonStep2">
         <div class="btns-view">
-            <el-button @click="dialogShow(1)">根据关键内容批量标准化设备标识</el-button>
-            <el-button @click="dialogShow(2)">根据关键内容批量对应数据字典</el-button>
-            <el-checkbox v-model="checked">只显示未标准化得的原始点位</el-checkbox>
+            <el-button type="primary" @click="dialogShow(1)">根据关键内容批量标准化设备标识</el-button>
+            <el-button type="primary" @click="dialogShow(2)">根据关键内容批量对应数据字典</el-button>
+            <el-checkbox style="float:right;" v-model="checked">只显示未标准化得的原始点位</el-checkbox>
         </div>
         <div id="handsontableSteps1">
             <handsontable-component @mouseDown="clickEdit" ref="handsontable"></handsontable-component>
         </div>
+        <div class="center">
+            <pagination :page="pages" @change="changePage"></pagination>
+        </div>
         <own-dialog :width="'1000px'" :dialogVisible="isDialogShow" @cancel="close">
             <dialog-main v-if="!isDataform"></dialog-main>
             <steps-main v-if="isDataform"></steps-main>
@@ -35,6 +38,7 @@
         queryPointRela
     } from "@/fetch/point_http"
     import step3Edit from '@/components/config_point/step3_edit/index'
+    import pagination from "@/components/common/myPagination"
     export default {
         data() {
             return {
@@ -45,7 +49,13 @@
                 isDataform: false,
                 /************point3_step_edit*********************** */
                 isEditDialogShow: false,                          
-                editData:{},                                  //编辑数据
+                editData:{},                              //编辑数据
+                pages: {
+                    size: 10,
+                    sizes: [10, 30, 50, 100],
+                    total: 0,
+                    currentPage: 0
+                },
             }
         }, 
         computed: {
@@ -79,6 +89,10 @@
                 }
                 this.isDialogShow = true
             },
+            //页面发生更改
+            changePage() {
+                this.getData()
+            },
             
             /**
              * 表格点击事件
@@ -105,8 +119,8 @@
                     type: this.protocolType,
                     data: {
                         DataSourceId: this.datasourceId,
-                        "PageNumber": 1,
-                        "PageSize": 50,
+                        "PageNumber": this.pages.currentPage || 1,
+                        "PageSize": this.pages.size,
                     }
                 }
                 queryPointRela(param, res => {
@@ -130,6 +144,7 @@
                         maxRows: res.Content.length
                     }
                     this.hot = this.$refs.handsontable.init(settings)
+                    this.pages.total = res.Total
                     console.log(this.hot)
                 })
             },
@@ -144,19 +159,22 @@
             ownDialog,
             dialogMain,
             step3Edit,
-            stepsMain
+            stepsMain,
+            pagination
         }
     }
 </script>
 <style lang="scss" scoped>
     #handsonStep2 {
-        height: 100%;
+        flex: 1;
+        display: flex;
+        flex-flow:column;
         .btns-view {
-            height: 50px;
-            vertical-align: middle;
+            height: 40px;
+            line-height: 40px;
         }
         #handsontableSteps1 {
-            height: calc(100% - 50px);
+            flex: 1;
             overflow: hidden;
             position: relative;
         }