遂昌综合执法平台UI
parent: eba69a5d | 补丁 | 提交 | show whitespace
“dzb”
2022-09-26 ccd7b3c5b24fa115a732ea915e2e586de717ea1c 
完成logo管理
8个文件已修改
5个文件已添加
563 ■■■■■ 已修改文件
public/index.html 5 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/App.vue 50 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/Img/index.vue 26 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/Table/index.vue 89 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/Upload/index.vue 84 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/main.js 2 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/router/index.js 5 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/utils/helper.js 17 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/layout/components/Menu/index.vue 2 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/login/index.vue 10 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/operate/lawEnforcement/index.vue 97 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/systemSetting/platform/mySetting/index.vue 25 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/systemSetting/platform/portalSetting/index.vue 151 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 
 public/index.html


@@ -4,9 +4,10 @@


    <meta charset="utf-8">


    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <meta name="viewport" content="width=device-width,initial-scale=1.0">


    <link rel="icon" href="<%= BASE_URL %>favicon.ico">


    <!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico"> -->


    <!-- <link rel="icon" href="http://140.143.152.226:8410/sczhzf/M00/00/00/rBUAD2MxQ8CAXBxsAAACVqU61WY764.png"> -->


    <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->


    <title>遂昌执法平台</title>


    <!-- <title>遂昌执法平台</title> -->


  </head>


  <body>


    <noscript>




 src/App.vue


@@ -3,12 +3,52 @@


    <router-view />


  </div>


</template>


<script>




export default {


  data() {


    return {


      mytitle: '',


    }


  },


  async created() {


    const imgObj = await this.getIcon();


    this.changIcon(imgObj);


  },


  methods: {


    changIcon(obj) {


      var link = document.querySelector("link [rel*='icon']") || document.createElement("link");


      var title = document.querySelector("title") || document.createElement("title");


      link.type = "image/x-icon";


      link.rel = "shortcut icon";


      link.href = obj.chromeLinkUrl;  //icon图标


      title.innerHTML = obj.title;


      document.getElementsByTagName("head")[0].appendChild(link);


      document.getElementsByTagName("head")[0].appendChild(title);


    },


    // 获取icon


    async getIcon() {


      let result;


      const pic = JSON.parse(localStorage.getItem('pic'));


      if (pic) {


        result = pic;


        console.log('缓存')


      } else {


        console.log('请求');


        await this.$axios({


          method: 'get',


          url: 'sccg/system/portal/logo/search',


        }).then(res => {


          console.log(res);


          result = res.data;


          localStorage.setItem('pic',JSON.stringify(result));


        })


      }


      return result;


    },


  }


};


</script>


<style >




</style>


<script>


export default {




};


</script>




 src/components/Img/index.vue


New file


@@ -0,0 +1,26 @@


<template>


    <div class="Img">


        <img :src="imgUrl" alt="" :style="{'width':width,'height':height,'border-radius':radius}">


    </div>


</template>


<script>


export default {


    data() {


        return {




        }


    },


    props: ['imgUrl', 'width', 'height', 'radius'],


}


</script>


<style lang="scss" scoped>


.Img {


    width: 100%;


    height: 100%;


    background-color: rgba(249, 249, 249, 1);


    display: flex;


    justify-content: center;


    align-items: center;


    border-radius: 4px;


}


</style>




 src/components/Table/index.vue


New file


@@ -0,0 +1,89 @@


<template>


    <div class="Table">


        <el-table ref="multipleTable" :data="tableData" 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" :min-width="5">


            </el-table-column>


            <el-table-column v-for="(item,idx) in option.group" :key="item.prop" :label="item.label" :prop="item.prop"


            :min-width="item['min-width'] ? item['item.min-width']:'10'">


                <template slot-scope="scope">


                    <div v-if="item.type === 'text'">


                        {{scope.row[item.prop]}}


                    </div>


                    <div v-else class="operationBox">


                        <div class="divider" v-for="(child,index) in item.children" :key="child.operationName">


                            <span @click="backMykey(scope.$index,child.mykey)">{{child.operationName}}</span>


                            <el-divider direction="vertical" v-if="index !== item.children.length-1"></el-divider>


                        </div>


                    </div>


                </template>


            </el-table-column>


        </el-table>


    </div>


</template>


<script>


import { deepClone } from '@/utils/helper';


export default {


    data() {


        return {




        }


    },


    props: {


        tableData: {


            type: Array,


            dafault: () => [],


        },


        tableOption: {


            type: Object,


            default: () => { }


        },


        openDialog:{


            type:Function,


            default:()=>{()=>{console.log(1)}}


        }


    },


    computed: {


        option() {


            return deepClone(this.tableOption);


        }


    },


    methods: {


        // 设置表格斑马纹


        tableRowClassName({ row, rowIndex }) {


            if ((rowIndex + 1) % 2 == 0) {


                return 'warning-row';


            } else {


                return 'success-row';


            }


            return '';


        },


        // 获取点击的关键字


        backMykey(index,value){


            this.$emit('openDialog',{index,mykey:value})


        }


    }


}


</script>


<style lang="scss" scoped>


.Table {


    width: 100%;


    .el-table{


        color: #4b9bb7;


    }


    &::v-deep .warning-row {


        background-color: #06122c;


    }




    &::v-deep .success-row {


        background-color: #071f39;


    }


    .operationBox{


        display: flex;


    }


    .el-divider{


        background-color: #4b9bb7;


    }


}


</style>




 src/components/Upload/index.vue


New file


@@ -0,0 +1,84 @@


<template>


    <el-upload :file-list="fileList" class="upload-demo" action="http://42.193.1.25:8082/sccg/file/medias" multiple


        :show-file-list="flag" :before-upload="beforeUpload" :limit="50" :on-success="handleSuccess"


        :headers="getToken()">


        <div class="uploadBtn" v-if="picUrl===''">


            <i class="el-icon-plus"></i>


            <span>上传图片</span>


        </div>


        <MyImg :imgUrl="picUrl" width="105px" height="105px" radius="4px" v-else class="uploadBtn"></MyImg>


    </el-upload>


</template>


<script>


import MyImg from '@/components/Img'


export default {


    components: {


        MyImg,


    },


    data() {


        return {


            fileList: [],


            flag: false,


        };


    },


    methods: {


        beforeUpload(rawFile) {


            console.log(rawFile);


            if (rawFile.type !== 'image/png' && rawFile.type !== 'image/svg+xml' && rawFile.type !== 'image/jpg' && rawFile.type !== 'image/jpeg') {


                this.$message.error('Avatar picture must be jpg/svg/jpeg/png format!')


                return false


            } else if (rawFile.size / 105 / 105 > 2) {


                this.$message.error('Avatar picture size can not exceed 2MB!')


                return false


            }


            return true


        },


        handleSuccess(res, file, filelist) {


            console.log(res);


            this.$emit('getPicUrl', { obj: res.data, value: this.mykey });


        },


        getToken() {


            const token = localStorage.getItem('token');


            const tokenHead = localStorage.getItem('tokenHead');


            if (token && tokenHead) {


                return { Authorization: tokenHead + token }


            }


        }


    },


    watch:{


        picUrl(newVal,oldVal){


            console.log(newVal);


        }


    },


    mounted() {


        console.log(this.picUrl);


    },


    props: ['getPicUrl', 'mykey', 'picUrl']


}


</script>


<style lang="scss" scoped>


.upload-demo {


    display: flex;


    height: 120px;


}




.uploadBtn {


    width: 120px;


    height: 120px;


    background-color: rgba(249, 249, 249, 1);


    display: flex;


    flex-direction: column;


    justify-content: center;


    align-items: center;


    border-radius: 4px;




    i {


        font-size: 30px;


        font-weight: 650;


    }




    span {


        line-height: 22px;


    }


}


</style>




 src/main.js


@@ -15,7 +15,7 @@


import api from "./utils/request"


Vue.prototype.$axios=api


console.log(process.env.VUE_APP_BASE_API);


Vue.use(ElementUI)


Vue.use(ElementUI);


new Vue({


  router,


  store,




 src/router/index.js


@@ -151,6 +151,11 @@


                component: () => import('@/views/operate/rectification/renovationList'),


              }


            ]


          },


          {


            path:'lawEnforcement',


            name:'lawEnforcement',


            component:()=>import('@/views/operate/lawEnforcement')


          }


        ]


      },




 src/utils/helper.js


New file


@@ -0,0 +1,17 @@


// 深拷贝


function deepClone(obj){


    let objClone = Array.isArray(obj) ? [] : {};


    if(obj && typeof obj === 'object' && obj != null){


        for(let key in obj){


            if(obj.hasOwnProperty(key)){


                if(obj[key] && typeof obj[key] === 'object'){


                    objClone[key] = deepClone(obj[key]);


                }else{


                    objClone[key] = obj[key];


                }


            }


        }


    }


    return objClone;


}


export {deepClone};




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


@@ -98,7 +98,7 @@


                <el-menu-item index="/home/operate/rectification/surveyList">普查列表</el-menu-item>


                <el-menu-item index="/home/operate/rectification/renovationList">整治列表</el-menu-item>  


            </el-submenu>


            <el-menu-item index="/home/operate/dasd">巡查执法</el-menu-item>


            <el-menu-item index="/home/operate/lawEnforcement">巡查执法</el-menu-item>


            <el-menu-item index="/home/operate/dasds">案卷查询</el-menu-item>


            <el-submenu index="/home/operate/fivepack" class="secondMenu">


              <template slot="title">




 src/views/login/index.vue


@@ -4,7 +4,7 @@


    <div class="text">


      <div class="logo">


        <img


          src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__155eeb2ceaac89ec717869a050964a36.svg"


          :src="imgUrl"


          alt="">


      </div>


      <div class="text-r">


@@ -80,6 +80,7 @@


        // username: "admin",


        // password: "macro123",


      },


      imgUrl:'',


      loginRules: {


        username: [


          { required: true, trigger: "blur", validator: validateUsername },


@@ -92,7 +93,12 @@


      pwdType: false,


    };


  },


  created() { },


  created() {


    const pic = JSON.parse(localStorage.getItem('pic'));


    if(pic){


      this.imgUrl = pic.loginPageIconUrl


    }


   },


  methods: {


    showPwd() {


      if (!this.pwdType) {




 src/views/operate/lawEnforcement/index.vue


New file


@@ -0,0 +1,97 @@


<template>


    <div class="law-enforcement">


        <MyTable :tableData="list" :tableOption="tableOption" @openDialog="changeDialog">


        </MyTable>


        <!-- 组件区 -->


        <div class="dialog">


            <el-dialog v-if="visible" :visible.async="visible" title="问题登记" width="60%" :before-close="handleClose">


                <checkIn></checkIn>


            </el-dialog>


        </div>


    </div>


</template>


<script>


import MyTable from '@/components/Table'


export default {


    components: {


        MyTable,


    },


    data() {


        return {


            list: [


                {


                    name: '张三',


                    sex: '男',


                    age: '23',


                    'min-width': '10',


                },


                {


                    name: '张四',


                    sex: '男',


                    age: '23',


                    'min-width': '10',


                },


                {


                    name: '丸小儿',


                    sex: '女',


                    age: '11',


                    'min-width': '10',


                },


            ],


            tableOption: {


                group: [


                    {


                        label: '姓名',


                        type: 'text',


                        prop: 'name',


                    },


                    {


                        label: '年龄',


                        type: 'text',


                        prop: 'age',


                    },


                    {


                        label: '性别',


                        type: 'text',


                        prop: 'sex',


                    },


                    {


                        label: '操作',


                        type: 'operation',


                        prop: 'operation',


                        children: [


                            {


                                operationName: '查看',


                                mykey : 'look',


                            },


                            {


                                operationName: '修改',


                                mykey:'update',


                            }


                        ]


                    },


                ]


            },


            visible:false


        }


    },


    methods:{


        // 关闭对话框


        handleClose(done) {


            this.$confirm('确认关闭？')


                .then(_ => {


                    this.visible = false;


                    done();


                })


                .catch(_ => { });


        },


        // 获取操作结果


        changeDialog({index,mykey}){


            console.log(index,mykey);


        }


    }


}


</script>


<style lang="scss" scoped>




</style>




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


@@ -13,7 +13,8 @@


                        <h4>{{item.title}}</h4>


                        <!-- 子菜单 -->


                        <ul class="menu">


                            <li class="menuItem" v-for="(son,sonIndex) in item.children" @click.stop="getContent(index,sonIndex)">


                            <li class="menuItem" v-for="(son,sonIndex) in item.children"


                                @click.stop="getContent(index,sonIndex)">


                                <span>{{son.title}}</span>


                            </li>


                        </ul>


@@ -57,12 +58,19 @@


    methods:{


        // 获取菜单列表


        getMenuList(){


            this.$axios.get('sccg/menu/treeList').then(res=>{


                console.log(res);


                const {data} = res;


                this.menuList = data;


                this.getContent(0);


            })


            // this.$axios({


            //     method: 'get',


            //     url: 'sccg/system/portal/menu/search',


            //     data: {


            //         current: 1,


            //         size: 10,


            //     }


            // }).then(res => {


            //     console.log(res);


            //     const { data } = res;


            //     this.menuList = data;


            //     this.getContent(0);


            // })


        },


        // 切换菜单内容展示


        getContent(index,sonIndex=null){


@@ -98,6 +106,7 @@


                border: 1px solid #fff;


                padding: 20px;


                height: calc(100vh - 120px);




                .asideItem {


                    h4 {


                        line-height: 40px;


@@ -120,6 +129,7 @@


            .content {


                flex: 1;


                margin-left: 100px;




                h4 {


                    margin: 0;


                    line-height: 80px;


@@ -134,6 +144,7 @@


                    .editItem {


                        line-height: 40px;


                        display: flex;




                        span{


                            margin-left: 10px;


                        }




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


@@ -11,30 +11,23 @@


                <li>


                    <div class="desc">产品图标：主要用于网页头部</div>


                    <div class="upload">


                        <div class="uploadBtn">


                            <i class="el-icon-plus"></i>


                            <span>上传图片</span>


                        </div>


                        <MyUpload @getPicUrl="setPicUrl" mykey="chromeLinkUrl" :picUrl="icon.chromeLinkUrl"></MyUpload>


                        <div class="uploadTip"><span>只允许上传jpg,jpeg,png,svg格式的图片，建议尺寸为105px*105px</span></div>


                    </div>


                </li>


                <li>


                    <div class="desc">网站图标：主要用于浏览器标签页</div>


                    <div class="upload">


                        <div class="uploadBtn">


                            <i class="el-icon-plus"></i>


                            <span>上传图片</span>


                        </div>


                        <MyUpload @getPicUrl="setPicUrl" mykey="websiteHeadUrl" :picUrl="icon.websiteHeadUrl">


                        </MyUpload>


                        <div class="uploadTip"><span>只允许上传jpg,jpeg,png,svg格式的图片，建议尺寸为105px*105px</span></div>


                    </div>


                </li>


                <li>


                    <div class="desc">登录页图标：主要用于登录页</div>


                    <div class="upload">


                        <div class="uploadBtn">


                            <i class="el-icon-plus"></i>


                            <span>上传图片</span>


                        </div>


                        <MyUpload @getPicUrl="setPicUrl" mykey="loginPageIconUrl" :picUrl="icon.loginPageIconUrl">


                        </MyUpload>


                        <div class="uploadTip"><span>只允许上传jpg,jpeg,png,svg格式的图片，建议尺寸为105px*105px</span></div>


                    </div>


                </li>


@@ -44,28 +37,117 @@


            <div class="webTitle">


                <div class="text">网站标题:</div>


                <div class="inner">


                    <el-input type="text" placeholder="遂昌执法局" v-model="title"></el-input>


                    <el-input type="text" placeholder="遂昌执法局" v-model="icon.title"></el-input>


                </div>


            </div>


            <div class="footerBtn">


                <el-button class="cancel">返回</el-button>


                <el-button type="primary">提交</el-button>


                <el-button type="primary" @click="changeLogo">提交</el-button>


            </div>


        </footer>


    </div>


</template>


<script>


import MyUpload from '@/components/Upload'


export default {


    components: {


        MyUpload,


    },


    data() {


        return {


            title:'',


            icon:{


                login:'',


                website:'',


                product:'',


                loginPageIconUrl: '',


                websiteHeadUrl: '',


                chromeLinkUrl: '',


                title: '',


            },


        }




    },


    methods: {


        setPicUrl({obj, value}) {


            const { icon } = this;


            const baseUrl = 'http://140.143.152.226:8410/';


            for (let key in icon) {


                if (key === value) {


                    icon[key] = baseUrl + obj.url1;


            }


        }


            this.icon = icon;


        },


        // 更改logo入口


        async changeLogo() {


            const {icon} = this;


            console.log(icon);


            const preIcon = await this.getIcon();


            if (preIcon.length === 0) {


                this.handleChangeLogo();


                return;


    }


            for(let key in icon){


                if(icon[key]!==''){


                    preIcon[key] = icon[key];


                }


            }


            this.handleChangeLogo(preIcon);


        },


        // 获取更改前的logo


        async getIcon() {


            let result;


            await this.$axios({


                method: 'get',


                url: 'sccg/system/portal/logo/search',


            }).then(res => {


                result = res.data;


            })


            return result;


        },


        // 执行更改logo操作


        handleChangeLogo(obj = null) {


            if (obj === null) {


                const { icon } = this;


                for (let key in icon) {


                    if (icon[key] === '') {


                        delete icon[key];


                    }


                }


                let length = Object.keys(icon).length;


                if (length !== 0) {


                    // 发送请求


                    this.$axios({


                        method: 'post',


                        url: 'sccg/system/portal/logo/add',


                        data: icon


                    }).then(res => {


                        console.log(res);


                        if (res.code == 200) {


                            this.$message({


                                message: res.message,


                                type: 'success'


                            })


                        }


                    })


                }


            } else {


                console.log(obj);


                // 发送请求


                this.$axios({


                    method: 'put',


                    url: 'sccg/system/portal/logo/update',


                    data: obj


                }).then(res => {


                    console.log(res);


                    this.$message({


                        message: res.message,


                        type: 'success'


                    })


                })


            }


            localStorage.removeItem('pic');


            window.location.href='';




        }


    },


}


</script>


<style lang="scss" scoped>


@@ -98,6 +180,7 @@




            li {


                margin-top: 30px;




                .desc {


                    line-height: 22px;


                }


@@ -107,30 +190,12 @@


                    line-height: 100px;


                    margin-top: 15px;




                    .uploadBtn {


                        width: 120px;


                        height: 120px;


                        background-color:rgba(249, 249, 249, 1);


                        display: flex;


                        flex-direction: column;


                        justify-content: center;


                        align-items: center;


                        border-radius: 4px;


                        i {


                            font-size: 30px;


                            font-weight: 650;


                        }




                        span {


                            line-height: 22px;


                        }


                    }




                    .uploadTip {


                        display: flex;


                        align-items: flex-end;


                        margin-left: 20px;


                        font-size: 14px;




                        span{


                            line-height: 22px;


                        }


@@ -139,33 +204,43 @@


            }


        }


    }




    footer{


        padding: 0 20px;




        .webTitle{


            display: flex;


            line-height: 40px;


            margin:30px 0;




            .text{


                flex: 1;


            }




            .inner{


                flex: 13;




                .el-input{


                    width: 496px;


                }




                &::v-deep .el-input__inner{


                    background-color: #09152f;


                    border: 1px solid #17324c;;


                    border: 1px solid #17324c;


                    ;


                }


            }


        }




        .footerBtn{


            display: flex;


            justify-content: center;




            &::v-deep .el-button{


                padding: 12px 40px;


                font-weight: 600;


            }




            .cancel{


                border: 2px solid #0079fe;


                color: #0079fe;