门前三包和趋势分析

“dzb”

2022-11-03 41dabb0db9619b8dbb8a311966e0b9920f67f7c8

门前三包和趋势分析

 src/views/intelligentPatrol/illegalSearch/index.vue

@@ -63,7 +63,7 @@
    </main>
    <footer>
      <!-- 查看具体信息 -->
      <el-dialog title="提示" :visible.sync="dialogView" width="30%" :before-close="handleClose">
      <el-dialog title="事件详情" :visible.sync="dialogView" width="45%" :before-close="handleClose">
        <ViewInfo :info="info"></ViewInfo>
      </el-dialog>
    </footer>
@@ -235,8 +235,17 @@
    },
    // 打开弹窗
    handleView(data) {
      this.info = data
      this.dialogView = true
      console.log(data)
    }
    },
    // 自定义关闭弹窗
    // myCloseDialog({flag,str,index}){
    //   console.log( this[str])
    //   if(index === 0){
       
    //   }
    // }
  }
}
</script>
@@ -294,7 +303,9 @@
        color: #4b9bb7;
      }
    }

    .el-table{
      color: #4b9bb7;
    }
    .tools {
      display: flex;
      justify-content: space-between;

 src/views/intelligentPatrol/illegalSearch/viewInfo/index.vue

@@ -1,14 +1,70 @@
<template>
    <div class="view-info"></div>
    <div id="view-info">
        <el-form ref="info" :model="myInfo" label-width="100px">
            <el-form-item label="事件编号:">
                <el-input v-model="myInfo.number" disabled></el-input>
            </el-form-item>
            <el-form-item label="违规类型:">
                <el-input v-model="myInfo.type" disabled></el-input>
            </el-form-item>
            <el-form-item label="事件来源:">
                <el-input v-model="myInfo.source" disabled></el-input>
            </el-form-item>
            <el-form-item label="事件等级:">
                <el-input v-model="myInfo.level" disabled></el-input>
            </el-form-item>
            <el-form-item label="报警点位:">
                <el-input v-model="myInfo.point" disabled></el-input>
            </el-form-item>
            <el-form-item label="所属组织:">
                <el-input v-model="myInfo.org" disabled></el-input>
            </el-form-item>
            <el-form-item label="报警时间:">
                <el-input v-model="myInfo.alarmTime" disabled></el-input>
            </el-form-item>
            <el-form-item label="持续时间:">
                <el-input v-model="myInfo.continueTime" disabled></el-input>
            </el-form-item>
            <el-form-item label="车牌号码:">
                <el-input v-model="myInfo.carNumber" disabled></el-input>
            </el-form-item>
            <el-form-item label="审核状态:">
                <el-input v-model="myInfo.state" disabled></el-input>
            </el-form-item>
            <el-form-item label="处理意见:">
                <el-input v-model="myInfo.advice" disabled></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default{
    data(){
        return{

export default {
    data() {
        return {
            myInfo: {
                
            }
        }
    },
    props: ['info','myCloseDialog'],
    created() {
        this.myInfo = JSON.parse(JSON.stringify(this.info))
    },
    methods: {
        
    }
}
</script>
<style lang="scss" scoped>
#view-info{
    padding: 5vh 8vw;
    .el-form{
        ::v-deep .el-input__inner{
            border: none;
        }
        ::v-deep .el-form-item__label{
            color: #4b9bb7;
        }
    }
}
</style>

 src/views/intelligentPatrol/trendAnalysis/index.vue

@@ -1,13 +1,148 @@
<template>
  <div>趋势分析</div>
  <div class="trend-analysis">
    <!-- 侧边栏 -->
    <div class="trend-side">
      <!-- 输入区域 -->
      <div class="trend-input-area">
        <span class="trend-title">趋势分析</span>
        <el-form ref="form" :model="search" label-width="6vw">
          <el-form-item label="类型查询">
            <el-input v-model="search.type" placeholder="内容信息"></el-input>
          </el-form-item>
          <el-form-item label="时间范围">
            <el-input v-model="search.timeRange" suffix-icon="el-icon-date" placeholder="选择时间范围"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- 数据展示 -->
      <div class="trend-data-show">
        <!-- 点位切换 -->
        <div class="trend-data-header">
          <el-button type="text">高发点位</el-button>
          <el-button type="text">首次违规点位</el-button>
        </div>
        <!-- 对应数据 -->
        <div class="trend-data-main">
          <div class="high-point">
            <div class="point-item" v-for="item in highList" :key="item.id">
              <span>{{ item.pointName }}</span>
              <span>{{ item.count }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="trend-main"></div>
    <div class="trend-footer" v-if="timeRangeFlag">
      <!-- 选择时间范围 -->
      <div class="time-area">
        <el-date-picker v-model="search.timeRange" type="datetimerange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>
    </div>
  </div>
</template>

<script>
export default {

  data() {
    return {
      search: {
        type: '',
        timeRange: ''
      },
      timeRangeFlag: false,
      highList: [
        {
          id: 1,
          pointName: '后庆路200号-球',
          count: '100次',
        },
        {
          id: 2,
          pointName: '后庆路200号-球',
          count: '100次',
        },
        {
          id: 3,
          pointName: '后庆路200号-球',
          count: '100次',
        },
        {
          id: 4,
          pointName: '后庆路200号-球',
          count: '100次',
        },
        {
          id: 5,
          pointName: '后庆路200号-球',
          count: '100次',
        },
      ]
    }
  }
}
</script>

<style>
<style lang="scss" scoped>
.trend-analysis {
  height: 100%;
  padding: 10vh 10vw;
  color: #4b9bb7;
  display: flex;
  .trend-side {
    width: 20vw;
    text-align: left;
    height: 100%;
    border: 1px solid #09152f;
    .trend-input-area {
      display: flex;
      flex-direction: column;
      padding: 0 2vw;
      &>span {
        line-height: 40px;
      }

      ::v-deep .el-form {
        .el-form-item__label {
          color: #4b9bb7;
        }
      }
    }

    .trend-data-show {
      width: 100%;
      line-height: 40px;
      .trend-data-header{
        display: flex;
        .el-button{
          flex: 1;
          border: 2px solid #09152f;
        }
        .el-button+.el-button{
          margin: 0;
        }
      }
      .trend-data-main {
        .high-point {
          .point-item {
            display: flex;
            padding: 0 2vw;
            justify-content: space-between;
          }
        }
      }
    }
  }
  .trend-main{
    flex: 1;
    border: 1px solid #09152f;
  }
  .trend-footer {
    ::v-deep .el-range-input {
      background-color: #09152f;
    }
  }
}
</style>

 src/views/operate/fivepack/threepack/components/aside/index.vue

@@ -14,37 +14,37 @@
    data() {
        return {
            data: [{
                label: '一级 1',
                label: '妙高街道',
                children: [{
                    label: '二级 1-1',
                    label: '东街',
                    children: [{
                        label: '三级 1-1-1'
                        label: '螺蛳垵'
                    }]
                }]
            }, {
                label: '一级 2',
                label: '云峰街道',
                children: [{
                    label: '二级 2-1',
                    label: '东亭',
                    children: [{
                        label: '三级 2-1-1'
                        label: '隔溪'
                    }]
                }, {
                    label: '二级 2-2',
                    label: '马头',
                    children: [{
                        label: '三级 2-2-1'
                        label: '龙口'
                    }]
                }]
            }, {
                label: '一级 3',
                label: '新路湾镇',
                children: [{
                    label: '二级 3-1',
                    label: '新路湾镇',
                    children: [{
                        label: '三级 3-1-1'
                        label: '新路湾镇'
                    }]
                }, {
                    label: '二级 3-2',
                    label: '新路湾镇',
                    children: [{
                        label: '三级 3-2-1'
                        label: '新路湾镇'
                    }]
                }]
            }],

 src/views/operate/fivepack/threepack/components/createUser/index.vue

File was deleted

 src/views/operate/fivepack/threepack/components/header/index.vue

@@ -8,31 +8,38 @@
                </div>
                <div class="status">
                    <span>店铺状态:</span>
                    <el-input placeholder="选择店铺状态" v-model="search"></el-input>
                    <el-select v-model="storeState" placeholder="选择店铺状态">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="findBtn">
                    <el-button type="primary" @click="setSearch" icon="el-icon-search">查询</el-button>
                    <el-button icon="el-icon-delete-solid">重置</el-button>
                    <el-button icon="el-icon-delete-solid" @click="handleReset">重置</el-button>
                </div>
            </div>
        </div>
        <div class="footer">
            <el-dialog :visible.sync="dialogCreate" title="添加店铺" width="45%" v-if="dialogCreate">
                <createUser @sendDialog="sendDialog" />
            </el-dialog>
        </div>
    </header>
</template>
<script>
import createUser from "../createUser";
export default {
    components: {
        createUser,
    },
    data() {
        return {
            dialogCreate: false,
            search: '',
            storeState: null,
            options:[
                {
                    label:'营业',
                    value:1
                },
                {
                    label:'倒闭',
                    value:2
                }
            ]
        }
    },
    methods: {
@@ -43,6 +50,12 @@
            console.log(flag);
            this.dialogCreate = flag.flag;
            this.$emit('setDialog', { flag: true })
        },
        // 重置搜索条件
        handleReset(){
            console.group(1)
            this.search = '',
            this.storeState =null
        }
    },
    props: ['setDialog', 'getSearch', 'flag'],
@@ -59,9 +72,11 @@
        line-height: 100px;
        justify-content: space-between;
        align-items: center;
        .find{

        .find {
            display: flex;
        }

        .search,
        .status {
            display: flex;

 src/views/operate/fivepack/threepack/components/main/index.vue

@@ -3,44 +3,42 @@
        <div class="mainContent">
            <!-- 数据展示 -->
            <el-table ref="multipleTable"
                :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}"
                :header-cell-style="{ background: '#06122c', 'font-size': '12px', color: '#4b9bb7', 'font-weight': '650', 'line-height': '45px' }"
                :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
                <el-table-column type="selection" min-width="5">
                </el-table-column>
                <el-table-column label="店铺编号" min-width="10">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                <el-table-column prop="storeNumber" label="店铺编号" min-width="10">
                </el-table-column>
                <el-table-column prop="nickName" label="店铺名称" min-width="10">
                <el-table-column prop="storeName" label="店铺名称" min-width="10">
                </el-table-column>
                <el-table-column prop="username" label="店铺联系人" min-width="10">
                <el-table-column prop="storeOwner" label="店铺联系人" min-width="10">
                </el-table-column>
                <el-table-column prop="mobile" label="店铺联系电话" min-width="10">
                <el-table-column prop="storePhone" label="店铺联系电话" min-width="10">
                </el-table-column>
                <el-table-column prop="note" label="店铺详细地址" min-width="10">
                <el-table-column prop="storeAddress" label="店铺详细地址" min-width="10">
                </el-table-column>
                <el-table-column prop="note" label="关联摄像机" min-width="10">
                <el-table-column prop="storeMoni" label="关联摄像机" min-width="10">
                </el-table-column>
                <el-table-column prop="operation" label="操作" min-width="15">
                <el-table-column prop="operation" label="操作" min-width="20">
                    <template slot-scope="scope">
                        <div class="operation">
                            <el-link icon="el-icon-edit" :underline="false">编辑</el-link>
                            <el-link class="leftPx" icon="el-icon-delete-solid" :underline="false">删除</el-link>
                            <el-link icon="el-icon-edit" :underline="false">推送信息</el-link>
                            <el-link icon="el-icon-edit" :underline="false">查看</el-link>
                            <el-link icon="el-icon-edit" :underline="false" @click="hadnleView(scope.row,0)">编辑</el-link>
                            <el-link class="leftPx" icon="el-icon-delete-solid" :underline="false" @click="handleDelete(scope.row.id)">删除</el-link>
                            <el-link class="leftPx" icon="el-icon-edit"  :underline="false">推送信息</el-link>
                            <el-link class="leftPx" icon="el-icon-edit" :underline="false" @click="hadnleView(scope.row,1)">查看</el-link>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 查看修改页面 -->
            <el-dialog :visible.sync="dialogUpdate" width="45%" v-if="dialogUpdate"
                :title="updateFlag ? '修改用户部门信息' :'查看用户信息'">
                <updateUser :updateFlag="updateFlag" :userInfo=userInfo />
            </el-dialog>
                :title="updateFlag ? '修改店铺信息' : '查看店铺信息'" :before-close="handleClose">
                <updateUser :updateFlag="updateFlag" :userInfo=userInfo @handleUpdateData="handleUpdateData" />
            </el-dialog> 
            <!-- 分页 -->
            <div class="pagination">
                <el-pagination background :current-page="currentPage" layout="prev, pager, next" :total="totalNum"
                    :page-size="pageSize" @current-change="changeCurrentPage" @prev-click="handlePrev"
                    @next-click="handleNext">
                    :page-size="pageSize" @current-change="changeCurrentPage">
                </el-pagination>
            </div>
        </div>
@@ -55,7 +53,53 @@
    },
    data() {
        return {
            tableData: [],
            tableData: [
                {
                    id: 1,
                    storeNumber: '1002220212',
                    storeName: '店铺1',
                    storeOwner: '张三',
                    storePhone: '17844631885',
                    storeAddress: '甜心街12号',
                    storeMoni: '摄像头1'
                },
                {
                    id: 2,
                    storeNumber: '1002220213',
                    storeName: '店铺2',
                    storeOwner: '张三',
                    storePhone: '17844631885',
                    storeAddress: '甜心街13号',
                    storeMoni: '摄像头1'
                },
                {
                    id: 3,
                    storeNumber: '1002220214',
                    storeName: '店铺3',
                    storeOwner: '张三',
                    storePhone: '17844631885',
                    storeAddress: '甜心街14号',
                    storeMoni: '摄像头1'
                },
                {
                    id: 4,
                    storeNumber: '1002220215',
                    storeName: '店铺4',
                    storeOwner: '张三',
                    storePhone: '17844631885',
                    storeAddress: '甜心街15号',
                    storeMoni: '摄像头1'
                },
                {
                    id: 5,
                    storeNumber: '1002220216',
                    storeName: '店铺5',
                    storeOwner: '张三',
                    storePhone: '17844631885',
                    storeAddress: '甜心街16号',
                    storeMoni: '摄像头1'
                },
            ],
            search: "111",
            dialogUpdate: false,
            updateFlag: false,
@@ -67,66 +111,49 @@
        }
    },
    created() {
        this.getUserList();
    },
    methods: {
        // 删除数据
        handleDelete(id){
            const {tableData} = this
            let idx
            for(let key in tableData){
                tableData[key].id === id ? idx = key :''
            }
            this.tableData.splice(idx,1)
        },
        // 打开弹窗
        hadnleView(data,index){
            index === 0 ? this.updateFlag = true : this.updateFlag = false
            this.userInfo = data
            this.dialogUpdate = true
        },
        // 自定义关闭弹窗
        handleClose(done){
            if(this.updateFlag){
                this.$confirm('确认关闭?')
                .then(_=>{
                    done()
                })
            }else{
                done()
            }
        },
        // 更新数据
        handleUpdateData(obj){
            const {tableData} = this
            let index = -1
            for(let item in tableData){
                if(tableData[item].id===obj.id){
                    index = item
                }
            }
            this.tableData.splice(index,1,obj)
            this.dialogUpdate = false
        },
        // 当前页改变触发事件
        changeCurrentPage(page) {
            this.currentPage = page;
            this.getUserList();
        },
        // 上一页点击事件
        handlePrev(page) {
            this.currentPage = page;
            this.getUserList();
        },
        // 下一页点击事件
        handleNext(page) {
            this.currentPage = page;
            this.getUserList();
        },
        // 修改角色
        handleChangeRole(obj) {
            this.dialogUpdate = true
            this.user = obj;
            // console.log(obj)
        },
        // 修改用户状态
        handleChangeStatus(obj) {
            let { id, status } = obj;
            status == true ? status = 1 : status = 0;
            this.$axios.post(`sccg/admin/updateStatus/` + id + '?status=' + status).then(res => {
                console.log(res);
            })
        },
        // 获取用户列表
        getUserList() {
            const that = this;
            const { currentPage, pageSize, search } = this;
            // 获取所有用户信息、用户查询(暂时支持电话号码)
            // this.$axios.get(`sccg/store/storeinfo/list?keyword=${search}&pageNum=${currentPage}&pageSize=${pageSize}`).then(res => {
            //     if (res.code === 200) {
            //         res.data.records.forEach(item => {
            //             item.createTime = helper(item.createTime);
            //             item.status == 1 ? item.status = true : item.status = false;
            //         })
            //         that.totalNum = res.data.pages * pageSize;
            //         that.tableData = res.data.records;
            //         this.renderFlag = true;
            //     }
            // })
        },
        // 查看用户信息(不可修改)
        handleFind(rowData) {
            this.dialogUpdate = true;
            this.updateFlag = false;
            this.userInfo = rowData;
        },
        // 修改用户部门信息
        handleUpdate(rowData) {
            this.dialogUpdate = true;
            this.updateFlag = true;
            this.userInfo = rowData
        },
        // 设置表格斑马纹
        tableRowClassName({ row, rowIndex }) {
@@ -147,12 +174,11 @@
                    if (this.keyword != '') {
                        this.search = this.keyword;
                    }
                    this.getUserList();
                    this.$emit('resetFresh', { flag: false })
                }
            },
            immediate: true
        }
        },
    }
}
</script>
@@ -203,10 +229,6 @@

        .operation {
            display: flex;

            .line {
                padding: 0 5px;
            }

            .el-button {
                // background-color: #fff;

 src/views/operate/fivepack/threepack/components/updateUser/index.vue

@@ -1,97 +1,33 @@
<template>
    <div class="updateUser">
        <!-- <header>
            <div class="headerTitle">{{updateFlag ? '修改用户部门信息' :'查看用户信息'}}</div>
        </header> -->
        <main>
            <!-- <div class="mainTitle">基础信息</div> -->
            <div class="mainContent">
                <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules"
                    label-position="right">
                    <!-- 用户名称 -->
                    <el-form-item class="optionItem" label="用户名称:" prop="username">
                        <el-input v-model="user.username" placeholder="填写用户名称" :disabled="true"></el-input>
                    <!-- 店铺编号 -->
                    <el-form-item class="optionItem" label="店铺编号:" prop="storeNumber">
                        <el-input v-model="user.storeNumber" placeholder="请填写店铺编号" :disabled="!updateFlag"></el-input>
                    </el-form-item>
                    <!-- 用户密码 -->
                    <el-form-item class="optionItems" label="用户密码:" prop="password">
                        <el-input v-model="user.password" type="password" placeholder="请输入用户密码" :disabled="true">
                        </el-input>
                    <!-- 店铺名称 -->
                    <el-form-item class="optionItem" label="店铺名称:" prop="storeName">
                        <el-input v-model="user.storeName" placeholder="请填写店名称" :disabled="!updateFlag"></el-input>
                    </el-form-item>
                    <!-- 所属用户姓名 -->
                    <!-- <el-form-item class="optionItem" label="所属用户姓名:" prop="true_name">
                        <el-input v-model="user.true_name" placeholder="请填写用户姓名"></el-input>
                    </el-form-item> -->
                    <!-- 性别 -->
                    <!-- <el-form-item class="optionItem" label="性别:" prop="gender">
                        <el-radio-group v-model="user.gender">
                            <el-radio :label="1">男</el-radio>
                            <el-radio :label="2">女</el-radio>
                        </el-radio-group>
                    </el-form-item> -->
                    <!-- 是否党员 -->
                    <el-form-item class="optionItem" label="是否党员:" prop="isDy">
                        <el-radio-group v-model="user.isDy" disabled>
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    <!-- 店铺联系人 -->
                    <el-form-item class="optionItem" label="店铺联系人:" prop="storeOwner">
                        <el-input v-model="user.storeOwner" placeholder="请填写店铺联系人" :disabled="!updateFlag"></el-input>
                    </el-form-item>
                    <!-- 所属手机号码 -->
                    <el-form-item class="optionItem" label="所属手机号码:" prop="mobile">
                        <el-input v-model="user.mobile" placeholder="请填写手机号码" :disabled="true"></el-input>
                    <!-- 店铺联系电话 -->
                    <el-form-item class="optionItem" label="店铺联系电话:" prop="storePhone">
                        <el-input v-model="user.storePhone" placeholder="请填写店铺联系电话" :disabled="!updateFlag"></el-input>
                    </el-form-item>
                    <!-- 邮箱地址 -->
                    <el-form-item class="optionItem" label="邮箱地址:" prop="email">
                        <el-input v-model="user.email" placeholder="请填写邮箱地址" :disabled="true"></el-input>
                    <!-- 店铺详细地址 -->
                    <el-form-item class="optionItem" label="店铺详细地址:" prop="storeAddress">
                        <el-input v-model="user.storeAddress" placeholder="请填写店铺详细地址" :disabled="!updateFlag"></el-input>
                    </el-form-item>
                    <!-- 选择角色 -->
                    <!-- <el-form-item class="optionItem" label="选择角色:" prop="role">
                        <el-select v-model="user.role" placeholder="请选择所属角色">
                            <el-option v-for="item in roleList" :key="item.name" :label="item.name" :value="item.value"
                                :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item> -->
                    <!-- 用户类型 -->
                    <el-form-item class="optionItem" label="用户类型:" prop="userType">
                        <el-select v-model="user.userType" placeholder="请选择用户类型" disabled>
                            <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value">
                            </el-option>
                        </el-select>
                    <!-- 关联摄像机 -->
                    <el-form-item class="optionItem" label="关联摄像机:" prop="storeMoni">
                        <el-input v-model="user.storeMoni" placeholder="请填写关联摄像机" :disabled="!updateFlag"></el-input>
                    </el-form-item>
                    <!-- 座机/分机 -->
                    <!-- <el-form-item class="optionItem" label="座机/分机:" prop="zj">
                        <div class="optionHandleSp">
                            <el-input class="areaNumber" v-model="user.zj.areaNumber" placeholder="电话区号">
                            </el-input>
                            <el-input class="telNumber" v-model="user.zj.phoneNumber" placeholder="电话号码">
                            </el-input>
                            <el-input class="moreNumber" v-model="user.zj.moreNumber" placeholder="分机号码">
                            </el-input>
                        </div>
                    </el-form-item> -->
                    <!-- 所属部门 -->
                    <el-form-item class="optionItem" label="所属部门:" prop="departmentId">
                        <el-select v-model="user.department" placeholder="请选择所属部门" :disabled="!updateFlag">
                            <el-option v-for="item in typeList" :key="item.name" :label="item.departName"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 当前职务 -->
                    <el-form-item class="optionItem" label="当前职务:" prop="jobTitle">
                        <el-select v-model="user.work" placeholder="请选择当前职务" disabled>
                            <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 填写所属mac地址 -->
                    <!-- <el-form-item class="optionItem" label="填写所属mac地址:" prop="mac">
                        <el-input v-model="user.mac" placeholder="请填写所属mac地址"></el-input>
                    </el-form-item> -->
                    <!-- 填写所属ip地址 -->
                    <!-- <el-form-item class="optionItem" label="填写所属ip地址:" prop="ip">
                        <el-input v-model="user.ip" placeholder="请填写所属ip地址"></el-input>
                    </el-form-item> -->
                    <el-form-item v-if="updateFlag">
                        <div class="optionBtn">
                            <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">提交
@@ -107,188 +43,89 @@
<script>
export default {
    data() {
        const validateNickname = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写用户名称"));
        const validateNumber = (rule,value,callback)=>{
            if(value){
                callback()
            }else{
                callback(new Error('店铺编号不能为空'))
            }
        };
        const validatePass = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写登录密码"));
            } else {
                const rep = /^\w+$/;
                if (!rep.test(value)) {
                    callback(new Error("密码只能是以数字、26个英文字母或者下划线组成的字符串"));
                }
        }
        const validateName = (rule,value,callback)=>{
            if(value){
                callback()
            }else{
                callback(new Error('店铺名称不能为空'))
            }
        };
        const validateTruename = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写用户姓名"));
            } else {
                const rep = /^[\u4E00-\u9FA5]{2,4}$/;
                if (!rep.test(value)) {
                    callback("请输入正确的用户姓名");
                }
        }
        const validateOwner = (rule,value,callback)=>{
            if(value){
                callback()
            }else{
                callback(new Error('店铺联系人不能为空'))
            }
        };
        const validatePhone = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写手机号码"));
            } else {
                const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/
                if (!rep.test(value)) {
                    callback("请输入正确的手机号码");
                }
        }
        const validatePhone = (rule,value,callback)=>{
            if(value){
                callback()
            }else{
                callback(new Error('店铺联系电话不能为空'))
            }
        };
        const validateMail = (rule, value, callback) => {
            if (value) {
                const rep = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
                if (!rep.test(value)) {
                    callback(new Error("请输入正确的邮箱"))
                }
        }
        const validateAddress = (rule,value,callback)=>{
            if(value){
                callback()
            }else{
                callback(new Error('店铺详细地址不能为空'))
            }
        };
        const validateRole = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写登录密码"));
            } else {
                callback();
        }
        const validateMoni = (rule,value,callback)=>{
            if(value){
                callback()
            }else{
                callback(new Error('店铺关联摄像机不能为空'))
            }
        };
        const validateType = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写登录密码"));
            } else {
                callback();
            }
        };
        const validateDepartment = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写登录密码"));
            } else {
                callback();
            }
        };
        const validateWork = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写登录密码"));
            } else {
                callback();
            }
        };
        const validateMac = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写登录密码"));
            } else {
                callback();
            }
        };
        const validateIp = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写登录密码"));
            } else {
                callback();
            }
        };
        }
        return {
            user: {
                nickName: '',
                password: '',
                username: '',
                // gender: 1,
                isDy: 1,
                mobile: '',
                email: '',
                // role: null,
                userType: null,
                zj: {
                    areaNumber: '',
                    phoneNumber: "",
                    moreNumber: "",
                },
                departmentId: null,
                jobTitle: null,
                // mac: '',
                // ip: '',
                storeNumber: '',
                storeName: '',
                storeOwner: '',
                storePhone: '',
                storeAddress: '',
                storeMoni: ''
            },
            createUserRules: {
                nickName: [
                    { required: true, trigger: "blur", validator: validateNickname },
                storeNumber: [
                    {trigger:'blur',validator:validateNumber}
                ],
                password: [
                    { required: true, trigger: "blur", validator: validatePass },
                storeName:  [
                    {trigger:'blur',validator:validateName}
                ],
                username: [
                    { required: true, trigger: "blur", validator: validateTruename },
                storeOwner:  [
                    {trigger:'blur',validator:validateOwner}
                ],
                // gender: [
                //     { required: true, trigger: "blur" },
                // ],
                isDy: [
                    { required: true, trigger: "blur" },
                storePhone: [
                    {trigger:'blur',validator:validatePhone}
                ],
                mobile: [
                    { required: true, trigger: "blur", validator: validatePhone },
                storeAddress: [
                    {trigger:'blur',validator:validateAddress}
                ],
                email: [
                    { required: false, trigger: "blur", validator: validateMail },
                ],
                // role: [
                //     { required: true, trigger: "blur", validator: validateRole },
                // ],
                userType: [
                    { required: true, trigger: "blur", validator: validateType },
                ],
                zj: [
                    { required: false, trigger: "blur" },
                ],
                departmentId: [
                    { required: true, trigger: "blur", validator: validateDepartment },
                ],
                jobTitle: [
                    { required: true, trigger: "blur", validator: validateWork },
                ],
                // mac: [
                //     { required: false, trigger: "blur", validator: validateMac },
                // ],
                // ip: [
                //     { required: false, trigger: "blur", validator: validateIp },
                // ],
                storeMoni:  [
                    {trigger:'blur',validator:validateMoni}
                ]
            },
            roleList: [
                { name: '角色1', value: 1 }, { name: '角色2', value: 2 }
            ],
            typeList: []
        }
    },
    created() {
        const that = this;
        this.user = JSON.parse(JSON.stringify(that.userInfo));
        // 获取角色列表
        // this.$axios.get('')
        // 获取用户类型列表
        // this.$axios.get('sccg/admin/list',{userType:0}).then(res=>{
        //     console.log(res);
        // })
        // 获取全部部门列表
        this.$axios.get('sccg/depart/page').then(res => {
            that.typeList = res.data.records;
        })
    },
    methods: {
        handleUser() {
            const { user } = this;
            this.$axios.post('sccg/depart/status', {
                id: user.departmentId,
                status: user.status ? 1 : 0,
            }).then(res => {
                console.log(res);
            })
            this.$emit('handleUpdateData',this.user)
        }
    },
    props: ['userInfo', 'updateFlag']
    props: ['userInfo', 'updateFlag','handleUpdateData']
}
</script>
<style lang="scss" scoped>
@@ -296,44 +133,17 @@
    border-radius: 1px;
    background-color: #09152f;

    // header {
    //     display: flex;
    //     justify-content: center;
    //     height: 60px;
    //     line-height: 60px;
    //     padding: 0 20px;
    //     border: 1px solid #fff;
    //     .headerTitle {
    //         color: #4b9bb7;
    //         font-weight: 600;
    //     }

    //     .headerTip span {
    //         color: #ff3b6c;
    //     }

    //     .headerTip label {
    //         color: #4b9bb7;
    //     }
    // }

    main {
        // border: 1px solid #fff;
        text-align: left;
        padding: 0 55px;
        background-color: #09152f;
        padding-bottom: 50px;
        // .mainTitle {
        //     color: #4b9bb7;
        //     font-weight: 600;
        //     line-height: 100px;
        //     font-size: 14px;
        // }

        .mainContent {
            display: flex;
            justify-content: center;
            padding-top: 50px;

            .el-form-item__content {
                width: 400px;


 src/views/operate/fivepack/threepack/index.vue

@@ -50,6 +50,8 @@
    display: flex;
    height: 100%;
    .right{
        flex: 1;
        height: 100%;
        padding-left: 20px;
    }
    &::v-deep .el-dialog__header,