新建logo页面，第三方接口，案件池页面搭建

“dzb”

2022-09-21 74d460aa271f406cf36b2f20aa26b84d7c775217

新建logo页面，第三方接口，案件池页面搭建

 src/router/index.js

@@ -57,7 +57,19 @@
      {
        path: "operate",
        name: 'operate',
        component: () => import('@/views/operate/index.vue')
        component: () => import('@/views/operate'),
        children:[
          {
            path:'baseSetting',
            name:'baseSetting',
            component:()=> import('@/views/operate/baseSetting'),
          },
          {
            path:'casepool',
            name:'casepool',
            component:() => import('@/views/operate/disposal/casepool')
          }
        ]
      },
      {
        path: "video",

 src/views/layout/components/Menu/index.vue

@@ -54,7 +54,7 @@
              </el-submenu> -->
            </el-submenu>
            <!-- 平台设置 -->
            <el-submenu index="/home/article/add" class="secondMenu">
            <el-submenu index="/home/operate/add" class="secondMenu">
              <template slot="title">
                <span class="secondSpan">门户管理</span>
              </template>
@@ -71,17 +71,25 @@
              </span>
              <span class="fisrtSpan">运营管理</span>
            </template>
            <el-menu-item index="/home/article/add">执法管理</el-menu-item>
            <el-menu-item index="/home/article/add">调度管理</el-menu-item>
            <el-menu-item index="/home/article/add">店铺管理</el-menu-item>
            <el-menu-item index="/home/article/add">车辆管理</el-menu-item>
            <el-menu-item index="/home/article/add">图片管理</el-menu-item>
            <el-menu-item index="/home/article/add">视频管理</el-menu-item>
            <el-menu-item index="/home/article/add">消息管理</el-menu-item>
            <el-menu-item index="/home/article/add">审核管理</el-menu-item>
            <el-menu-item index="/home/article/add">短信管理</el-menu-item>
            <el-menu-item index="/home/article">算法模型管理</el-menu-item>
            <el-menu-item index="/home/article">日志管理</el-menu-item>
            <el-menu-item index="/home/operate/baseSetting">基础设置</el-menu-item>
            <el-submenu index="/home/operate/disposal">
              <template slot="title">
                <span class="secondSpan">事项处理管理</span>
              </template>
              <el-menu-item index="/home/operate/casepool">案件池</el-menu-item>
            </el-submenu>
            <el-menu-item index="/home/operate/myWait">我的待办</el-menu-item>
            <el-menu-item index="/home/operate/rectification">专项整治</el-menu-item>
            <el-menu-item index="/home/operate/">巡查执法</el-menu-item>
            <el-menu-item index="/home/operate/">案卷查询</el-menu-item>
            <el-menu-item index="/home/operate/">门前五包处置管理</el-menu-item>
            <el-menu-item index="/home/operate/">算法模型管理</el-menu-item>
            <el-menu-item index="/home/operate/">车辆管理</el-menu-item>
            <el-menu-item index="/home/operate">图片管理</el-menu-item>
            <el-menu-item index="/home/operate">视频管理</el-menu-item>
            <el-menu-item index="/home/operate">消息管理</el-menu-item>
            <el-menu-item index="/home/operate">短信管理</el-menu-item>
            <el-menu-item index="/home/operate">日志管理</el-menu-item>
          </el-submenu>
          <!-- 视频巡查模块 -->
          <el-submenu index="/home/video" class="firstMenu">
@@ -101,11 +109,11 @@
              </span>
              <span class="fisrtSpan">油烟信息查询</span>
            </template>
            <el-menu-item index="/home/article/add">预警研判</el-menu-item>
            <el-menu-item index="/home/article">违规检索</el-menu-item>
            <el-menu-item index="/home/article">趋势分析</el-menu-item>
            <el-menu-item index="/home/article">数据统计</el-menu-item>
            <el-menu-item index="/home/article">运行报告</el-menu-item>
            <el-menu-item index="/home/operate/add">预警研判</el-menu-item>
            <el-menu-item index="/home/operate">违规检索</el-menu-item>
            <el-menu-item index="/home/operate">趋势分析</el-menu-item>
            <el-menu-item index="/home/operate">数据统计</el-menu-item>
            <el-menu-item index="/home/operate">运行报告</el-menu-item>
          </el-submenu>
          <!-- 执法管理模块 -->
          <el-submenu index="/home/law" class="firstMenu">
@@ -115,11 +123,11 @@
              </span>
              <span class="fisrtSpan">执法管理</span>
            </template>
            <el-menu-item index="/home/article/add">预警研判</el-menu-item>
            <el-menu-item index="/home/article">违规检索</el-menu-item>
            <el-menu-item index="/home/article">趋势分析</el-menu-item>
            <el-menu-item index="/home/article">数据统计</el-menu-item>
            <el-menu-item index="/home/article">运行报告</el-menu-item>
            <el-menu-item index="/home/operate/add">预警研判</el-menu-item>
            <el-menu-item index="/home/operate">违规检索</el-menu-item>
            <el-menu-item index="/home/operate">趋势分析</el-menu-item>
            <el-menu-item index="/home/operate">数据统计</el-menu-item>
            <el-menu-item index="/home/operate">运行报告</el-menu-item>
          </el-submenu>
          <!-- 智能巡查模块 -->
          <el-submenu index="/home/intellect" class="firstMenu">
@@ -129,11 +137,11 @@
              </span>
              <span class="fisrtSpan">智能巡查</span>
            </template>
            <el-menu-item index="/home/article/add">预警研判</el-menu-item>
            <el-menu-item index="/home/article">违规检索</el-menu-item>
            <el-menu-item index="/home/article">趋势分析</el-menu-item>
            <el-menu-item index="/home/article">数据统计</el-menu-item>
            <el-menu-item index="/home/article">运行报告</el-menu-item>
            <el-menu-item index="/home/operate/add">预警研判</el-menu-item>
            <el-menu-item index="/home/operate">违规检索</el-menu-item>
            <el-menu-item index="/home/operate">趋势分析</el-menu-item>
            <el-menu-item index="/home/operate">数据统计</el-menu-item>
            <el-menu-item index="/home/operate">运行报告</el-menu-item>
          </el-submenu>
          <!-- 平台基本信息 -->
          <el-submenu index="/home/info" class="firstMenu">
@@ -143,11 +151,11 @@
              </span>
              <span class="fisrtSpan">平台基本信息</span>
            </template>
            <el-menu-item index="/home/article/add">预警研判</el-menu-item>
            <el-menu-item index="/home/article">违规检索</el-menu-item>
            <el-menu-item index="/home/article">趋势分析</el-menu-item>
            <el-menu-item index="/home/article">数据统计</el-menu-item>
            <el-menu-item index="/home/article">运行报告</el-menu-item>
            <el-menu-item index="/home/operate/add">预警研判</el-menu-item>
            <el-menu-item index="/home/operate">违规检索</el-menu-item>
            <el-menu-item index="/home/operate">趋势分析</el-menu-item>
            <el-menu-item index="/home/operate">数据统计</el-menu-item>
            <el-menu-item index="/home/operate">运行报告</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-scrollbar>

 src/views/operate/baseSetting/index.vue

New file
@@ -0,0 +1,15 @@
<template>
    <div class="baseSetting">
        1
    </div>
</template>
<script>
    export default {
        data(){
            return{

            }
        }
    }
</script>
<style lang="scss" scoped></style>

 src/views/operate/disposal/casepool/compenents/checkIn/index.vue

New file
@@ -0,0 +1,114 @@
<template>
    <div class="checkIn">
        <div class="form">
            <!-- :rules="createRoleRules" -->
            <el-form ref="user" label-width="140px" autoComplete="on" :model="role" label-position="right">
                <div class="things">
                    <div>填写基础信息</div>
                    <!-- 问题类型 -->
                    <el-form-item class="optionItem" label="角色名称:" prop="name">
                        <el-input v-model="role.name" placeholder="请填写角色名称"></el-input>
                    </el-form-item>
                    <!-- 大类名称 -->
                    <el-form-item class="optionItems" label="角色类型:" prop="status">
                        <el-select v-model="role.type" placeholder="请选择角色类型">
                            <el-option v-for="item in typeList" :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="description">
                        <el-input v-model="role.description" placeholder="请输入描述内容200字以内"></el-input>
                    </el-form-item>
                    <!-- 事件等级 -->
                    <el-form-item class="optionItem" label="角色名称:" prop="name">
                        <el-input v-model="role.name" placeholder="请填写角色名称"></el-input>
                    </el-form-item>
                    <!-- 案由 -->
                    <el-form-item class="optionItem" label="角色名称:" prop="name">
                        <el-input v-model="role.name" placeholder="请填写角色名称"></el-input>
                    </el-form-item>
                    <!-- 所属县区 -->
                    <el-form-item class="optionItem" label="角色名称:" prop="name">
                        <el-input v-model="role.name" placeholder="请填写角色名称"></el-input>
                    </el-form-item>
                    <!-- 所属社区 -->
                    <el-form-item class="optionItem" label="角色名称:" prop="name">
                        <el-input v-model="role.name" placeholder="请填写角色名称"></el-input>
                    </el-form-item>
                    <!-- 所属街道 -->
                    <el-form-item class="optionItem" label="角色名称:" prop="name">
                        <el-input v-model="role.name" placeholder="请填写角色名称"></el-input>
                    </el-form-item>
                    <!-- 事发地点 -->
                    <el-form-item class="optionItem" label="角色名称:" prop="name">
                        <el-input v-model="role.name" placeholder="请填写角色名称"></el-input>
                    </el-form-item>
                    <!-- 是否关联商铺 -->
                    <el-form-item class="optionItem" label="角色名称:" prop="name">
                        <el-input v-model="role.name" placeholder="请填写角色名称"></el-input>
                    </el-form-item>
                    <!-- 关联商铺名称 -->
                    <el-form-item class="optionItem" label="角色名称:" prop="name">
                        <el-input v-model="role.name" placeholder="请填写角色名称"></el-input>
                    </el-form-item>
                    <!-- 填写车牌号 -->
                    <el-form-item class="optionItem" label="角色名称:" prop="name">
                        <el-input v-model="role.name" placeholder="请填写角色名称"></el-input>
                    </el-form-item>
                    <!-- 问题描述 -->
                    <el-form-item class="optionItem" label="角色名称:" prop="name">
                        <el-input v-model="role.name" placeholder="请填写角色名称"></el-input>
                    </el-form-item>
                </div>
                <div class="person">
                    <div>填写反映人信息</div>
                    <!-- 反映人 -->
                    <el-form-item class="optionItem" label="角色名称:" prop="name">
                        <el-input v-model="role.name" placeholder="请填写角色名称"></el-input>
                    </el-form-item>
                    <!-- 联系方式 -->
                    <el-form-item class="optionItems" label="角色类型:" prop="status">
                        <el-select v-model="role.type" placeholder="请选择角色类型">
                            <el-option v-for="item in typeList" :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="description">
                        <el-input v-model="role.description" placeholder="请输入描述内容200字以内"></el-input>
                    </el-form-item>
                </div>
                <el-form-item>
                    <div class="optionBtn">
                        <el-button class="btn cancel">取消</el-button>
                        <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">提交
                        </el-button>
                    </div>
                </el-form-item>
            </el-form>

        </div>
        <div class="map">地图</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            role: {

            },
            createRoleRules: [

            ],
            typeList: []
        }
    }
}
</script>
<style lang="scss" scoped>

</style>

 src/views/operate/disposal/casepool/index.vue

New file
@@ -0,0 +1,222 @@
<template>
    <div class="casepool">
        <!-- 查询添加 -->
        <header>
            <div class="search">
                <span>来源查询：</span>
                <el-input placeholder="请输入问题来源"></el-input>
            </div>
            <div class="add">
                <el-button type="primary" icon="el-icon-plus">添加</el-button>
            </div>
        </header>
        <!-- 主体展示 -->
        <main>
            <div class="mainContent">
                <!-- 导航状态标签 -->
                <div class="nav">
                    <el-tabs type="border-card">
                        <el-tab-pane :label="item.name" v-for="item in tagList" :key="item.name">
                            <!-- 数据渲染 -->
                            <el-table ref="multipleTable"
                                :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="6">
                                    <template slot-scope="scope">{{ scope.row.id }}</template>
                                </el-table-column>
                                <el-table-column prop="source" label="问题来源" min-width="10">
                                </el-table-column>
                                <el-table-column prop="bigKind" label="大类名称" min-width="6">
                                </el-table-column>
                                <el-table-column prop="samllKind" label="小类名称" min-width="6">
                                </el-table-column>
                                <el-table-column prop="reson" label="案由" min-width="10">
                                </el-table-column>
                                <el-table-column prop="location" label="报警点位" min-width="10">
                                </el-table-column>
                                <el-table-column prop="area" label="所属区域" min-width="10">
                                </el-table-column>
                                <el-table-column prop="appendTime" label="报警时间" min-width="10">
                                </el-table-column>
                                <el-table-column prop="duration" label="持续时间" min-width="6">
                                </el-table-column>
                                <el-table-column prop="operation" label="操作" min-width="15">
                                    <template slot-scope="scope">
                                        <div class="operation">
                                            <span @click="handleFind(scope.row)">上报</span>
                                            <span class="line">|</span>
                                            <span @click="handleUpdate(scope.row)">调度</span>
                                            <span class="line">|</span>
                                            <span>再学习</span>
                                            <span class="line">|</span>
                                            <span>暂不处理</span>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </main>
        <!-- 组件区 -->
        <footer>
            <el-dialog :visible.async="visible" width="45%">
                <checkIn></checkIn>
            </el-dialog>
        </footer>
    </div>
</template>
<script>
    import checkIn from './compenents/checkIn';
export default {
    components:{    
        checkIn,
    },
    data() {
        return {
            tagList: [
                {
                    name: '待处理',
                    value: 0,
                },
                {
                    name: '已上报',
                    value: 0,
                },
                {
                    name: '已调度',
                    value: 0,
                },
                {
                    name: '在学习',
                    value: 0,
                },
                {
                    name: '暂不处理',
                    value: 0,
                },
                {
                    name: '违规',
                    value: 0,
                },
                {
                    name: '违建',
                    value: 0,
                },
            ],
            tableData: [
                {
                    id: 13413114,
                    source: '人工上报/视频巡查',
                    appendTime:'2022-01-09 14:52'
                }
            ],
            visible:true
        }
    },
    methods: {
        // 设置表格斑马纹
        tableRowClassName({ row, rowIndex }) {
            if ((rowIndex + 1) % 2 == 0) {
                return 'warning-row';
            } else {
                return 'success-row';
            }
            return '';
        },
    }
}
</script>
<style lang="scss" scoped>
.casepool {
    text-align: left;
    color: #4b9bb7;

    header {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        line-height: 60px;

        .search {
            display: flex;

            span {
                flex: 2;
            }

            .el-input {
                flex: 5;

                &::v-deep .el-input__inner {
                    background-color: #09152f;
                    border: 1px solid #17324c;
                }
            }
        }

        .add {
            .el-button {
                background-color: #eb5d01;
                border: none;
                border-radius: 20px;
            }
        }
    }

    main {
        .mainContent {
            .nav {
                &::v-deep .el-tabs--border-card {
                    border: none;
                }

                &::v-deep .el-tabs--border-card>.el-tabs__content {
                    background-color: #09152f;
                }

                &::v-deep .el-tabs__nav-scroll {
                    background-color: #09152f;
                }

                &::v-deep .el-tabs__header {
                    line-height: 60px;
                }

                &::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item {
                    color: #fff;
                }

                &::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
                    color: #4b9bb7;
                    background-color: #071f39;
                    border: none;
                }

                .el-table{
                    font-size: 12px;
                    color:#4b9bb7;
                    .line{
                        padding: 0 5px;
                    }
                }

                &::v-deep .el-table__empty-block {
                    background-color: #09152f;
                    color: #4b9bb7;
                }
                .el-table::v-deep .warning-row {
                    background: #06122c;
                }

                .el-table::v-deep .success-row {
                    background: #071f39;
                }
            }
        }
    }
}
</style>

 src/views/operate/disposal/index.vue

New file
@@ -0,0 +1,15 @@
<template>
    <div class="disposal">
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        data(){
            return{

            }
        }
    }
</script>
<style lang="scss" scoped></style>

 src/views/systemSetting/baseSetting/user/index.vue

@@ -308,12 +308,8 @@

            &::v-deep .el-table__empty-block {
                background-color: #09152f;
            }

            &::v-deep .el-table__empty-block {
                color: #4b9bb7;
            }

            .operation {
                display: flex;


 src/views/systemSetting/platform/mySetting/index.vue

@@ -1,5 +1,146 @@
<template>
    <div>
        
    <div class="mySetting">
        <!-- header 页面标题提示 -->
        <header>
            <div class="headerTitle">系统设置 >> 门户管理 > 自定义菜单设置</div>
        </header>
        <!-- main 内容展示区 -->
        <main>
            <div class="mainContent">
                <!-- 侧边导航栏 -->
                <div class="aside">
                    <div class="asideItem" v-for="(item,index) in menuList" :key="item.id" @click="getContent(index)">
                        <h4>{{item.title}}</h4>
                        <!-- 子菜单 -->
                        <ul class="menu">
                            <li class="menuItem" v-for="(son,sonIndex) in item.children" @click.stop="getContent(index,sonIndex)">
                                <span>{{son.title}}</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 菜单设置 -->
                <div class="content">
                    <h4>菜单管理-{{article.title}}</h4>
                    <!-- 子菜单项目 -->
                    <ul class="edit">
                        <li class="editItem">
                            <label>名称:</label>
                            <span>{{article.name}}</span>
                        </li>
                        <li class="editItem">
                            <label>描述:</label>
                            <span>{{article.description}}</span>
                        </li>
                        <li class="editItem">
                            <label>是否显示菜单:</label>
                            <span>{{article.hidden===0 ? '否':'是' }}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </main>
    </div>
</template>
</template>
<script>
export default {
    data() {
        return {
            menuList:[],
            article:[],
        }
    },
    created(){
        const { getMenuList } = this;
        getMenuList();
    },
    methods:{
        // 获取菜单列表
        getMenuList(){
            this.$axios.get('sccg/menu/treeList').then(res=>{
                console.log(res);
                const {data} = res;
                this.menuList = data;
                this.getContent(0);
            })
        },
        // 切换菜单内容展示
        getContent(index,sonIndex=null){
            if(sonIndex===null){
                this.article = this.menuList[index];
                return;
            }
            this.article = this.menuList[index][sonIndex];
        }
    }
}
</script>
<style lang="scss" scoped>
.mySetting {
    text-align: left;
    color: #4b9bb7;

    header {
        line-height: 60px;
        padding: 0 20px;
    }

    main {
        .mainContent {
            display: flex;

            li {
                list-style: none;
            }

            .aside {
                width: 200px;
                border: 1px solid #fff;
                padding: 20px;
                height: calc(100vh - 120px);
                .asideItem {
                    h4 {
                        line-height: 40px;
                        margin: 0;
                    }

                    ul {
                        padding: 0;
                        margin: 0;
                    }

                    .menu {
                        .menuItem {
                            line-height: 30px;
                        }
                    }
                }
            }

            .content {
                flex: 1;
                margin-left: 100px;
                h4 {
                    margin: 0;
                    line-height: 80px;
                }

                ul {
                    padding: 0;
                    margin: 0;
                }

                .edit {
                    .editItem {
                        line-height: 40px;
                        display: flex;
                        span{
                            margin-left: 10px;
                        }
                    }
                }
            }
        }
    }
}
</style>

 src/views/systemSetting/platform/otherInterface/components/createInterface/index.vue

New file
@@ -0,0 +1,260 @@
<template>
    <div class="createmyInterface">
        <main>
            <div class="mainContent">
                <el-form ref="user" label-width="140px" autoComplete="on" :model="myInterface"
                    :rules="createmyInterfaceRules" label-position="right">
                    <!-- 应用名称 -->
                    <el-form-item label="应用名称:" prop="applicationName">
                        <el-input v-model="myInterface.applicationName" placeholder="填写应用名称"></el-input>
                    </el-form-item>
                    <!-- 应用图标 -->
                    <el-form-item label="应用图标:" prop="applicationIconUrl">
                        <div class="iconBox">
                            <div class="upload">
                                <img src="@/assets/imgs/user/default-avatar.jpg" alt="">
                            </div>
                            <div class="iconView">
                                <span>示意图</span>
                                <img src="@/assets/imgs/user/default-avatar.jpg" alt="">
                            </div>
                            <div class="tip">
                                <span>只允许上传jpg,jpeg,png,svg格式的图片，建议尺寸为105px*105px</span>
                            </div>
                        </div>
                    </el-form-item>
                    <!-- 应用类型 -->
                    <el-form-item label="应用类型:" prop="applicationType">
                        <div class="optionItem">
                            <el-radio-group v-model="myInterface.applicationType">
                                <el-radio :label="1">网页应用</el-radio>
                            </el-radio-group>
                        </div>
                    </el-form-item>
                    <!--网站url  -->
                    <el-form-item label="网站url:" prop="websiteUrl">
                        <el-input v-model="myInterface.websiteUrl"></el-input>
                    </el-form-item>
                    <!-- 应用描述 -->
                    <el-form-item label="应用描述:" prop="description">
                        <el-input v-model="myInterface.description" placeholder="请填写描述"></el-input>
                    </el-form-item>
                    <!-- 按钮 -->
                    <el-form-item>
                        <div class="optionBtn">
                            <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">提交
                            </el-button>
                            <el-button class="btn reset">重置</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </main>
    </div>
</template>
<script>
export default {
    data() {
        const validateApplicationName = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写用户名称"));
            }
        };
        const validateApplicationIconUrl = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写登录密码"));
            } else {
                const rep = /^\w+$/;
                if (!rep.test(value)) {
                    callback(new Error("密码只能是以数字、26个英文字母或者下划线组成的字符串"));
                }
            }
        };
        const validateApplicationType = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写用户姓名"));
            } else {
                const rep = /^[\u4E00-\u9FA5]{2,4}$/;
                if (!rep.test(value)) {
                    callback("请输入正确的用户姓名");
                }
            }
        };
        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("请输入正确的手机号码");
                }
            }
        };
        return {
            myInterface: {
            },
            createmyInterfaceRules: {
                applicationName: [
                    { required: true, trigger: "blur", validator: validateApplicationName},
                ],
                applicationIconUrl: [
                    { required: true, trigger: "blur", validator: validateApplicationIconUrl },
                ],
                applicationType: [
                    { required: true, trigger: "blur", validator: validateApplicationType },
                ],
                websiteUrl: [
                    { required: true, trigger: "blur" },
                ],
                description: [
                    { required: false, trigger: "blur" },
                ],
            },
        }
    },
    created() {
        const that = this;
    },
    methods: {
        handleUser() {
            const { myInterface } = this;
            this.$axios.post('sccg/system/portal/thirdApp/add', {
                websiteUrl:myInterface.websiteUrl,
                applicationIconUrl:myInterface.applicationIconUrl,
                applicationType:0,
                description:myInterface.description,
                applicationName:myInterface.applicationName
            }).then(res => {
                console.log(res);
                // if (res.code === 200) {
                //     this.refresh();
                // }
            })
        },
    },
    props: ['refresh']
}
</script>
<style lang="scss" scoped>
.createmyInterface {
    border-radius: 1px;
    background-color: #09152f;

    main {
        text-align: left;
        padding: 0 55px;
        background-color: #09152f;
        padding-bottom: 50px;
        .mainContent {
            display: flex;
            justify-content: center;
            padding-top: 50px;

            .iconBox {
                display: flex;

                .upload {
                    display: flex;
                    align-items: flex-end;

                    img {
                        width: 120px;
                        height: 120px;
                        border-radius: 4px;
                    }
                }

                .iconView {
                    display: flex;
                    flex-direction: column;
                    margin-left: 30px;
                    justify-content: flex-end;

                    img {
                        width: 70px;
                        height: 70px;
                        border-radius: 4px;
                    }
                }

                .tip {
                    display: flex;
                    align-items: flex-end;
                    margin-left: 30px;
                    font-size: 12px;

                    span {
                        line-height: 20px;
                    }
                }
            }
            .optionBtn{
                margin-top: 30px;
                &::v-deep .el-button{
                    padding: 12px 40px;
                }
                .reset{
                    border: 1px solid #0079fe;
                    color: #0079fe;
                }
            }
            &::v-deep .el-form-item__label {
                color: #4b9bb7;
            }

            &::v-deep .el-input__inner {
                background-color: #09152f;
                border: 1px solid #17324c;
            }

            .addPerson {
                display: flex;
                list-style: none;
                padding: 0;

                li {
                    background-color: #cccccc;
                    width: 36px;
                    height: 36px;
                    border-radius: 50%;
                    color: #fff;
                    text-align: center;
                    font-size: 30px;
                    margin-left: 10px;
                }
            }

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

                .el-select {
                    width: 100%;
                }
            }

            .optionHandleSp {
                display: flex;

                .areaNumber,
                .moreNumber {
                    flex: 1;
                }

                .telNumber {
                    flex: 2;
                }
            }

        }
    }

    footer {
        border-top: 1px solid #fff;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 20px;
    }
}
</style>

 src/views/systemSetting/platform/otherInterface/components/viewInterface/index.vue

New file
@@ -0,0 +1,246 @@
<template>
    <div class="createmyInterface">
        <main>
            <div class="mainContent">
                <el-form ref="user" label-width="140px" autoComplete="on" :model="myInterface"
                    :rules="createmyInterfaceRules" label-position="right">
                    <!-- 应用名称 -->
                    <el-form-item label="应用名称:" prop="applicationName">
                        <el-input v-model="myInterface.applicationName" placeholder="填写应用名称"></el-input>
                    </el-form-item>
                    <!-- 应用图标 -->
                    <el-form-item label="应用图标:" prop="applicationIconUrl">
                        <div class="iconBox">
                            <div class="upload">
                                <img src="@/assets/imgs/user/default-avatar.jpg" alt="">
                            </div>
                            <div class="iconView">
                                <span>示意图</span>
                                <img src="@/assets/imgs/user/default-avatar.jpg" alt="">
                            </div>
                            <div class="tip">
                                <span>只允许上传jpg,jpeg,png,svg格式的图片，建议尺寸为105px*105px</span>
                            </div>
                        </div>
                    </el-form-item>
                    <!-- 应用类型 -->
                    <el-form-item label="应用类型:" prop="applicationType">
                        <div class="optionItem">
                            <el-radio-group v-model="myInterface.applicationType">
                                <el-radio :label="1">网页应用</el-radio>
                            </el-radio-group>
                        </div>
                    </el-form-item>
                    <!--网站url  -->
                    <el-form-item label="网站url:" prop="websiteUrl">
                        <el-input v-model="myInterface.websiteUrl"></el-input>
                    </el-form-item>
                    <!-- 应用描述 -->
                    <el-form-item label="应用描述:" prop="description">
                        <el-input v-model="myInterface.description" placeholder="请填写描述"></el-input>
                    </el-form-item>
                    <!-- 按钮 -->
                    <!-- <el-form-item>
                        <div class="optionBtn">
                            <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">提交
                            </el-button>
                            <el-button class="btn reset">重置</el-button>
                        </div>
                    </el-form-item> -->
                </el-form>
            </div>
        </main>
    </div>
</template>
<script>
export default {
    data() {
        const validateApplicationName = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写用户名称"));
            }
        };
        const validateApplicationIconUrl = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写登录密码"));
            } else {
                const rep = /^\w+$/;
                if (!rep.test(value)) {
                    callback(new Error("密码只能是以数字、26个英文字母或者下划线组成的字符串"));
                }
            }
        };
        const validateApplicationType = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写用户姓名"));
            } else {
                const rep = /^[\u4E00-\u9FA5]{2,4}$/;
                if (!rep.test(value)) {
                    callback("请输入正确的用户姓名");
                }
            }
        };
        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("请输入正确的手机号码");
                }
            }
        };
        return {
            myInterface: {
            },
            createmyInterfaceRules: {
                applicationName: [
                    { required: true, trigger: "blur", validator: validateApplicationName},
                ],
                applicationIconUrl: [
                    { required: true, trigger: "blur", validator: validateApplicationIconUrl },
                ],
                applicationType: [
                    { required: true, trigger: "blur", validator: validateApplicationType },
                ],
                websiteUrl: [
                    { required: true, trigger: "blur" },
                ],
                description: [
                    { required: false, trigger: "blur" },
                ],
            },
        }
    },
    created() {
        const that = this;
        const {userInfo} = this;
        this.myInterface = JSON.parse(JSON.stringify(userInfo));
    },
    methods: {
    },
    props: ['updateFlag','userInfo']
}
</script>
<style lang="scss" scoped>
.createmyInterface {
    border-radius: 1px;
    background-color: #09152f;

    main {
        text-align: left;
        padding: 0 55px;
        background-color: #09152f;

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

            .iconBox {
                display: flex;

                .upload {
                    display: flex;
                    align-items: flex-end;

                    img {
                        width: 120px;
                        height: 120px;
                        border-radius: 4px;
                    }
                }

                .iconView {
                    display: flex;
                    flex-direction: column;
                    margin-left: 30px;
                    justify-content: flex-end;

                    img {
                        width: 70px;
                        height: 70px;
                        border-radius: 4px;
                    }
                }

                .tip {
                    display: flex;
                    align-items: flex-end;
                    margin-left: 30px;
                    font-size: 12px;

                    span {
                        line-height: 20px;
                    }
                }
            }
            .optionBtn{
                &::v-deep .el-button{
                    padding: 12px 40px;
                }
                .reset{
                    border: 1px solid #0079fe;
                    color: #0079fe;
                }
            }
            &::v-deep .el-form-item__label {
                color: #4b9bb7;
            }

            &::v-deep .el-input__inner {
                background-color: #09152f;
                border: 1px solid #17324c;
            }

            .addPerson {
                display: flex;
                list-style: none;
                padding: 0;

                li {
                    background-color: #cccccc;
                    width: 36px;
                    height: 36px;
                    border-radius: 50%;
                    color: #fff;
                    text-align: center;
                    font-size: 30px;
                    margin-left: 10px;
                }
            }

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

                .el-select {
                    width: 100%;
                }
            }

            .optionHandleSp {
                display: flex;

                .areaNumber,
                .moreNumber {
                    flex: 1;
                }

                .telNumber {
                    flex: 2;
                }
            }

        }
    }

    footer {
        border-top: 1px solid #fff;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 20px;
    }
}
</style>

 src/views/systemSetting/platform/otherInterface/index.vue

@@ -1,5 +1,224 @@
<template>
    <div>
        
    <div class="otherInterface">
        <header>
            <div class="headerTitle">系统设置 >> 门户管理 > 第三方应用接口管理</div>
            <div class="addInterface">
                <el-button class="add" @click="handleAdd">添加第三方接口</el-button>
            </div>
        </header>
        <main>
            <div class="mainContent">
                <!-- @selection-change="handleSelectionChange" -->
                <!-- 数据渲染 -->
                <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                    :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}"
                    :row-class-name="tableRowClassName">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column label="应用名称" prop="applicationName" min-width="10">
                    </el-table-column>
                    <el-table-column prop="applicationType" label="应用类型" min-width="10">
                    </el-table-column>
                    <el-table-column prop="websiteUrl" label="网站地址" min-width="10">
                    </el-table-column>
                    <el-table-column prop="description" label="应用描述" min-width="10">
                    </el-table-column>
                    <el-table-column label="操作" min-width="10">
                        <template slot-scope="scope">
                            <span @click="handleView(scope.row)">查看</span>
                            <span class="line">|</span>
                            <span @click="handleDelete(scope.row)">删除</span>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <!-- <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">
                    </el-pagination>
                </div> -->
            </div>
        </main>
        <footer>
            <!-- 创建弹窗 -->
            <el-dialog :visible.sync="dialogCreate" title="新增第三方接口" width="45%" v-if="dialogCreate"
                :before-close="handleClose">
                <createInterface />
            </el-dialog>
            <!-- 查看弹窗 -->
            <el-dialog :visible.sync="dialogUpdate" :title="updateFlag ?'修改第三方接口':'查看第三方接口'" width="45%" v-if="dialogUpdate"
                :before-close="handleClose">
                <viewInterface :updateFlag="updateFlag" :userInfo=userInfo />
            </el-dialog>
        </footer>
    </div>
</template>
</template>
<script>
import createInterface from './components/createInterface';
import viewInterface from './components/viewInterface'
export default {
    components: {
        createInterface,viewInterface
    },
    data() {
        return {
            tableData: [],
            search: "",
            dialogCreate: false,
            dialogUpdate: false,
            updateFlag: false,
            userInfo: '',
            // totalNum: 200,
            // pageSize: 10,
            // currentPage: 1,
        }
    },
    created() {
        this.getUserList();
    },
    methods: {
        // 获取接口列表
        getUserList() {
            const that = this;
            // const { currentPage, pageSize, search } = this;
            this.dialogCreate = false;
            this.$axios.get("sccg/system/portal/thirdApp/search").then(res => {
                const { code, data } = res;
                if (code == 200) {
                    this.tableData = data;
                }
            })
        },
        // 设置表格斑马纹
        tableRowClassName({ row, rowIndex }) {
            if ((rowIndex + 1) % 2 == 0) {
                return 'warning-row';
            } else {
                return 'success-row';
            }
            return '';
        },
        // 打开新增界面
        handleAdd() {
            this.dialogCreate = true;
        },
        // 创建弹窗关闭
        handleClose(done) {
            const that = this;
            this.$confirm('确认关闭？')
                .then(_ => {
                    that.dialogCreate = false;
                    done();
                })
                .catch(_ => { });
        },
        // 创建查看弹窗
        handleView(rowData){
            this.userInfo = rowData;
            this.dialogUpdate = true;
        },
        // 删除第三方接口
        handleDelete({id}){
            console.log(id);
            this.$axios.delete('sccg/system/portal/thirdApp/delete',{params:{
                id
            }}).then(res=>{
                console.log(res);
            })
        }
        // // 当前页改变触发事件
        // changeCurrentPage(page) {
        //     this.currentPage = page;
        //     this.getUserList();
        // },
        // // 上一页点击事件
        // handlePrev(page) {
        //     this.currentPage = page;
        //     this.getUserList();
        // },
        // // 下一页点击事件
        // handleNext(page) {
        //     this.currentPage = page;
        //     this.getUserList();
        // },
    }
}
</script>
<!-- sccg/system/portal/thirdApp/search -->
<style lang="scss" scoped>
.otherInterface {
    header {
        display: flex;
        line-height: 60px;
        justify-content: space-between;
        padding: 0 20px;
        color: #4b9bb7;

        &::v-deep .el-button {
            background-color: #eb5d01;
            border: none;
            color: #fff;
            border-radius: 20px;
        }
    }

    main {
        .mainContent {
            .el-table {
                color: #4b9bb7;

                &::v-deep .el-table__empty-block {
                    background-color: #06122c;
                }

                &::v-deep .el-table__empty-text {
                    color: #4b9bb7;
                }

                &::v-deep .warning-row {
                    background-color: #06122c;
                }

                &::v-deep .success-row {
                    background-color: #071f39;
                }
            }
            .line{
                padding: 0 5px;
                // margin-top: -10px;
            }
        }
    }

    footer {

        &::v-deep .el-dialog__header,
        &::v-deep .el-dialog__body {
            background-color: #06122c;
        }

        &::v-deep .el-dialog__header {
            display: flex;
            align-items: center;
            background-color: #fff;
            padding: 20px;
            line-height: 60px;
        }

        &::v-deep .el-dialog__title {
            color: #4b9bb7;
        }

        &::v-deep .el-dialog__close {
            width: 20px;
            height: 20px;
            // color: #fff;
        }

        &::v-deep .el-dialog__body {
            padding: 0;
        }
    }
}
</style>

 src/views/systemSetting/platform/portalSetting/index.vue

@@ -2,7 +2,7 @@
    <div class="log">
        <header>
            <div clas="headerTitle">
                系统设置 》门户管理 》logo管理
                系统设置 >> 门户管理 > logo管理
            </div>
        </header>
        <main>