合并大屏项目

zhangxiaoxu123

2023-01-04 e595499209b7edcc6404fcb516620c7925ce1375

合并大屏项目

 src/components/page/leaderShow/Dialog/blackNameForm.vue

New file
@@ -0,0 +1,178 @@
<template>
    <div class="blackNameForm-wrap">
        <el-dialog
                title="黑名单重点车辆记录"
                :visible.sync="dialogVisible"
                width="60%">
            <div class="daibanForm-main">
                <el-table
                        :data="pageData.rows"
                        style="width: 100%"
                        max-height="550">
                    <el-table-column
                            align="center"
                            fixed
                            type="index"
                            label="序号"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="carNo"
                            label="车牌号"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="color"
                            label="车辆颜色"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="carType"
                            label="车辆类型"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="violationCount"
                            label="违章次数"
                            width="120">
                    </el-table-column>
                </el-table>
                <div class="black-footer-box">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageData.currentPage"
                            :page-sizes="[10, 20, 30, 40, 50, 100, 200]"
                            :page-size="pageData.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pageData.total">
                    </el-pagination>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "blackNameForm",
        data() {
            return {
                pageConfig: {
                    pageDataUrl: this.$systemconfig.basePath + '/statistic/getBlackRecord',
                },
                pageData: this.$byutil.defaultPageData(),
                dialogVisible:false,
            }
        },
        methods: {
            initData() {
                this.dialogVisible = true
                this.$byutil.initTableMaxHeight(this);
                this.loadData();
            },
            //加载数据
            loadData() {
                this.$byutil.loadPageData(this, this.pageConfig.pageDataUrl,this.pageData);
            },
            handleSizeChange(val) {
                this.pageData.pageSize = val;
                this.loadData();
            },
            handleCurrentChange(val) {
                this.pageData.page = val;
                this.loadData();
            }
        }
    }
</script>

<style lang="scss">
    .blackNameForm-wrap{
        .el-dialog__title{
            color: #fff;
        }
        .el-dialog, .el-pager li{
            background:rgba(0,0,0,0.9);
        }
        .el-form-item__label{
            color: #00fff6;
        }
        .el-table th{
            background:rgba(4,40,70,0.7);
        }
        .el-table tr{
            background:transparent;
        }
        .el-table__footer-wrapper, .el-table__header-wrapper:nth-child(even){
            background:rgba(4,40,70,0.7);
        }
        .el-table__row:nth-child(even){
            background:rgba(4,40,70,0.7);
        }
        .el-table, .el-table__expanded-cell{
            background:transparent;
        }
        .el-table td, .el-table th.is-leaf{
            border:none;
        }
        .el-table__body,.el-table__header{
            width: 100% !important;
        }
        .el-table::before,.el-table__fixed-right::before, .el-table__fixed::before{
            background-color: transparent;
        }
        .el-table__body tr.hover-row.current-row>td, .el-table__body tr.hover-row.el-table__row--striped.current-row>td, .el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td{
            background-color: #374f65;
        }
        .el-table--enable-row-hover .el-table__body tr:hover>td{
            background-color: #374f65;
        }
        .el-table thead{
            color: #fff;
        }
        .el-table{
            color:#00fff6;
        }
        .el-dialog__header{
            display: flex;
            justify-content: center;
        }
    }
    .black-footer-box{
        .el-pagination__total{
            color:#fff;
        }
        .el-pager li{
            color:#fff;
        }
        .el-pagination__jump{
            color:#fff;
        }
        .el-input__inner,.btn-prev,.btn-next,.el-pagination button:disabled{
            background-color: transparent;
        }
        .el-pager li.active{
            color: #409EFF;
        }
        .el-input__inner{
            color:#fff;
            border:1px solid #409EFF;
        }
        .el-pagination .btn-next, .el-pagination .btn-prev{
            color:#fff;
        }
    }
</style>

<style lang="scss" scoped>
    .black-footer-box{
        display: flex;
        flex-direction: row-reverse;
        margin-top: 0.1042rem  /* 20/192 */;
    }
</style>

 src/components/page/leaderShow/Dialog/breakLawOrderForm.vue

New file
@@ -0,0 +1,280 @@
<template>
    <div class="breakLawOrderForm-wrap">
        <el-dialog
                title="违章车辆执法订单记录"
                :visible.sync="dialogVisible"
                width="80%">
            <div class="daibanForm-main">
                <el-table
                        :data="pageData.rows"
                        style="width: 100%"
                        max-height="550">
                    <el-table-column
                            align="center"
                            prop="carNo"
                            label="车牌号"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            :show-overflow-tooltip="true"
                            header-align="center"
                            align="left"
                            prop="address"
                            label="位置"
                            width="220">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="userName"
                            label="执行人"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="money"
                            label="金额（元）"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="status"
                            label="状态"
                            :filter-multiple="false"
                            :filters="statesOptions"
                            column-key="tag"
                            :filter-method="filterTag"
                            :formatter="statesFormat"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="violationTypeName"
                            label="违章类型"
                            width="160">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="payStatus"
                            :formatter="payStatusFormat"
                            label="缴费状态"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="createTime"
                            label="时间"
                            width="180">
                    </el-table-column>
                    <!--<el-table-column
                            fixed="right"
                            label="操作"
                            width="120">
                        <template slot-scope="scope">
                            <el-button
                                    v-if="scope.row.status != 3 && scope.row.status != 1"
                                    @click.native.prevent="deleteRow(scope.row)"
                                    type="primary"
                                    size="mini">
                                撤销
                            </el-button>
                            &lt;!&ndash;<el-button
                                    @click.native.prevent="deleteRow(scope.$index, tableData)"
                                    type="danger"
                                    size="mini">
                                删除
                            </el-button>&ndash;&gt;
                        </template>
                    </el-table-column>-->
                </el-table>
                <div class="break-footer-box">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageData.currentPage"
                            :page-sizes="[10, 20, 30, 40, 50, 100, 200]"
                            :page-size="pageData.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pageData.total">
                    </el-pagination>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "breakLawOrderForm",
        data() {
            return {
                pageConfig:{
                    findPageUrl:this.$systemconfig.basePath + '/ticket/findPage',
                    deleteDataUrl: this.$systemconfig.basePath + '/ticket/delete',
                },
                pageData: this.$byutil.defaultPageData(),
                dialogVisible:false,
                statesOptions: [
                    { value: 0, text: "未处理" },
                    { value: 1, text: "已处理" },
                    { value: 2, text: "未完成" },
                    { value: 3, text: "撤销" },
                ],
            }
        },
        methods: {
            payStatusFormat(row) {  //缴费状态
                if(row.type == 0) {
                    return '待缴费'
                }else if(row.type == 1) {
                    return '已缴费'
                }else if(row.type == 2) {
                    return '支付失败'
                }
            },
            statesFormat(row) {  //状态
                if(row.status == 0) {
                    return '未处理'
                }else if(row.status == 1) {
                    return '已处理'
                }else if(row.status == 2) {
                    return '未完成'
                }else if(row.status == 3) {
                    return '撤销'
                }
            },
            filterTag(value,row) {
                console.log('value-------',value)
                console.log('row.status',row.status)
                return row.status === value
            },
            deleteRow(row) {  //撤销
                this.$confirm('是否继续此操作？','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(() => {
                    console.log('row-------',row.id)
                    this.$byutil.postData(this,this.pageConfig.deleteDataUrl,{id:row.id},res => {
                        this.$message.success(res.message)
                        this.loadData();
                    })
                }).catch(() => {
                    this.$message({
                        type:'info',
                        message:"已取消"
                    })
                })

            },
            typeFormat(row) {
                if(row.type == 0) {
                    return '现场处罚'
                }else if(row.type == 1) {
                    return '上级任务'
                }
            },
            initData() {
                this.dialogVisible = true
                this.$byutil.initTableMaxHeight(this);
                this.loadData();
            },
            loadData() {
                this.$byutil.loadPageData(this,this.pageConfig.findPageUrl,this.pageData)
            },
            handleSizeChange(val) {
                this.pageData.pageSize = val;
                this.loadData();
            },
            handleCurrentChange(val) {
                this.pageData.page = val;
                this.loadData();
            }
        }
    }
</script>

<style lang="scss">
    .breakLawOrderForm-wrap{
        .el-dialog__title{
            color: #fff;
        }
        .el-dialog, .el-pager li{
            background:rgba(0,0,0,0.9);
        }
        .el-form-item__label{
            color: #00fff6;
        }
        .el-table th{
            background:rgba(4,40,70,0.7);
        }
        .el-table tr{
            background:transparent;
        }
        .el-table__footer-wrapper, .el-table__header-wrapper:nth-child(even){
            background:rgba(4,40,70,0.7);
        }
        .el-table__row:nth-child(even){
            background:rgba(4,40,70,0.7);
        }
        .el-table, .el-table__expanded-cell{
            background:transparent;
        }
        .el-table td, .el-table th.is-leaf{
            border:none;
        }
        .el-table__body,.el-table__header{
            width: 100% !important;
        }
        .el-table::before,.el-table__fixed-right::before, .el-table__fixed::before{
            background-color: transparent;
        }
        .el-table__body tr.hover-row.current-row>td, .el-table__body tr.hover-row.el-table__row--striped.current-row>td, .el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td{
            background-color: #374f65;
        }
        .el-table--enable-row-hover .el-table__body tr:hover>td{
            background-color: #374f65;
        }
        .el-table thead{
            color: #fff;
        }
        .el-table{
            color:#00fff6;
        }
        .el-dialog__header{
            display: flex;
            justify-content: center;
        }
    }
    .break-footer-box{
        .el-pagination__total{
            color:#fff;
        }
        .el-pager li{
            color:#fff;
        }
        .el-pagination__jump{
            color:#fff;
        }
        .el-input__inner,.btn-prev,.btn-next,.el-pagination button:disabled{
            background-color: transparent;
        }
        .el-pager li.active{
            color: #409EFF;
        }
        .el-input__inner{
            color:#fff;
            border:1px solid #409EFF;
        }
        .el-pagination .btn-next, .el-pagination .btn-prev{
            color:#fff;
        }
    }
</style>

<style lang="scss" scoped>
    .break-footer-box{
        margin-top: 20px;
        display: flex;
        flex-direction: row-reverse;
    }
</style>

 src/components/page/leaderShow/Dialog/daibanForm.vue

New file
@@ -0,0 +1,300 @@
<template>
    <div class="daibanForm-wrap">
        <el-dialog
                title="我的待办"
                :visible.sync="dialogVisible"
                width="80%"
                :before-close="handleClose">
            <div class="daibanForm-main">
                <el-table
                        :data="pageData.rows"
                        style="width: 100%"
                        max-height="550">
                    <el-table-column
                            align="center"
                            fixed
                            type="index"
                            label="序号"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            align="left"
                            prop="carNo"
                            label="车牌号"
                            min-width="120">
                    </el-table-column>
                    <el-table-column
                            :show-overflow-tooltip="true"
                            align="left"
                            prop="address"
                            label="位置"
                            min-width="200">
                    </el-table-column>
                    <el-table-column
                            align="left"
                            prop="userName"
                            label="执行人"
                            min-width="120">
                    </el-table-column>
                    <el-table-column
                            align="right"
                            prop="money"
                            label="金额（元）"
                            min-width="80">
                    </el-table-column>
                    <el-table-column
                            align="left"
                            prop="status"
                            label="状态"
                            :filter-multiple="false"
                            :filters="statesOptions"
                            column-key="tag"
                            :filter-method="filterTag"
                            :formatter="statesFormat"
                            min-width="120">
                    </el-table-column>
                    <el-table-column
                            align="left"
                            prop="violationTypeName"
                            label="违章类型"
                            min-width="120">
                    </el-table-column>
                    <el-table-column
                            align="left"
                            prop="payStatus"
                            :formatter="payStatusFormat"
                            label="缴费状态"
                            min-width="120">
                    </el-table-column>
                    <el-table-column
                            align="left"
                            prop="createTime"
                            label="时间"
                            min-width="180">
                    </el-table-column>
                    <el-table-column
                            align="right"
                            fixed="right"
                            label="操作"
                            min-width="120">
                        <template slot-scope="scope">
                            <el-button
                                    v-if="scope.row.status != 3 && scope.row.status != 1"
                                    @click.native.prevent="deleteRow(scope.row)"
                                    type="primary"
                                    size="mini">
                                撤销
                            </el-button>
                            <!--<el-button
                                    @click.native.prevent="deleteRow(scope.$index, tableData)"
                                    type="danger"
                                    size="mini">
                                删除
                            </el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
                <div class="footer-box">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageData.currentPage"
                            :page-sizes="[10, 20, 30, 40, 50, 100, 200]"
                            :page-size="pageData.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pageData.total">
                    </el-pagination>
                </div>

            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "daibanForm",
        data() {
            return {
                pageConfig: {
                    pageDataUrl: this.$systemconfig.basePath + '/ticket/findPage',
                    deleteDataUrl: this.$systemconfig.basePath + '/ticket/delete',
                },
                pageData: this.$byutil.defaultPageData(),
                dialogVisible:false,
                tableData: [],
                statesOptions: [
                    { value: 0, text: "未处理" },
                    { value: 1, text: "已处理" },
                    { value: 2, text: "未完成" },
                    { value: 3, text: "撤销" },
                ],
            }
        },
        mounted() {
            this.$byutil.initTableMaxHeight(this);
        },
        methods: {
            handleClose() {  //关闭弹框
                this.dialogVisible = false
            },
            payStatusFormat(row) {  //缴费状态
                if(row.type == 0) {
                    return '待缴费'
                }else if(row.type == 1) {
                    return '已缴费'
                }else if(row.type == 2) {
                    return '支付失败'
                }
            },
            statesFormat(row) {  //状态
                if(row.status == 0) {
                    return '未处理'
                }else if(row.status == 1) {
                    return '已处理'
                }else if(row.status == 2) {
                    return '未完成'
                }else if(row.status == 3) {
                    return '撤销'
                }
            },
            filterTag(value,row) {
                console.log('value-------',value)
                console.log('row.status',row.status)
                return row.status === value
            },
            /*statusFormat(row, column) {  //状态
              if(row.status == 0) {
                  return '未处理'
              }else if(row.status == 1) {
                  return '已处理'
              }else if(row.status == 2) {
                  return '未完成'
              }else if(row.status == 3) {
                  return '撤销'
              }
            },*/
            deleteRow(row) {  //撤销
                this.$confirm('是否继续此操作？','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(() => {
                    console.log('row-------',row.id)
                    this.$byutil.postData(this,this.pageConfig.deleteDataUrl,{id:row.id},res => {
                        this.$message.success(res.message)
                        this.loadData();
                    })
                }).catch(() => {
                    this.$message({
                        type:'info',
                        message:"已取消"
                    })
                })

            },
            //加载数据
            loadData() {
                this.$byutil.loadPageData(this, this.pageConfig.pageDataUrl,this.pageData);
            },
            initData() {
                this.dialogVisible = true
                this.loadData();
            },
            handleSizeChange(val) {
                this.pageData.pageSize = val;
                this.loadData();
            },
            handleCurrentChange(val) {
                this.pageData.page = val;
                this.loadData();
            }
        }
    }
</script>

<style lang="scss">
    .daibanForm-wrap{
        .el-dialog__title{
            color: #fff;
        }
        .el-dialog__wrapper{
            background:rgba(0,0,0,0.6);
        }
        .el-dialog, .el-pager li{
            background:rgba(0,0,0,0.5);
        }
        .el-form-item__label{
            color: #00fff6;
        }
        .el-table th{
            background:rgba(4,40,70,0.7);
        }
        .el-table tr{
            background:transparent;
        }
        .el-table__footer-wrapper, .el-table__header-wrapper:nth-child(even){
            background:rgba(4,40,70,0.7);
        }
        .el-table__row:nth-child(even){
            background:rgba(4,40,70,0.7);
        }
        .el-table, .el-table__expanded-cell{
            background:transparent;
        }
        .el-table td, .el-table th.is-leaf{
            border:none;
        }
        .el-table__body,.el-table__header{
            width: 100% !important;
        }
        .el-table::before,.el-table__fixed-right::before, .el-table__fixed::before{
            background-color: transparent;
        }
        .el-table__body tr.hover-row.current-row>td, .el-table__body tr.hover-row.el-table__row--striped.current-row>td, .el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td{
            background-color: #374f65;
        }
        .el-table thead{
            color: #fff;
        }
        .el-table{
            color:#00fff6;
        }
        .el-dialog__header{
            display: flex;
            justify-content: center;
        }
    }
    .footer-box{
        .el-pagination__total{
            color:#fff;
        }
        .el-pager li{
            color:#fff;
        }
        .el-pagination__jump{
            color:#fff;
        }
        .el-input__inner,.btn-prev,.btn-next,.el-pagination button:disabled{
            background-color: transparent;
        }
        .el-pager li.active{
            color: #409EFF;
        }
        .el-input__inner{
            color:#fff;
            border:1px solid #409EFF;
        }
        .el-pagination .btn-next, .el-pagination .btn-prev{
            color:#fff;
        }
    }
</style>

<style lang="scss" scoped>
.footer-box{
    margin-top: 20px;
    display: flex;
    flex-direction: row-reverse;
}
</style>

 src/components/page/leaderShow/Dialog/handleOrderForm.vue

New file
@@ -0,0 +1,193 @@
<template>
    <div class="blackNameForm-wrap">
        <el-dialog
                title="智慧泊车订单处理记录"
                :visible.sync="dialogVisible"
                width="50%">
            <div class="daibanForm-main">
                <el-table
                        :data="pageData.rows"
                        style="width: 100%"
                        max-height="550">
                    <el-table-column
                            align="center"
                            prop="carNo"
                            label="车牌号"
                            width="140">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="code"
                            label="订单号"
                            width="220">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="price"
                            label="金额（元）"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="status"
                            :formatter = "statusFormatter"
                            label="缴费状态"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            width="120"
                            align="center"
                            prop="createTime"
                            label="出场时间">
                    </el-table-column>
                    <el-table-column
                            width="120"
                            align="center"
                            prop="time"
                            label="停车时长（分钟）">
                    </el-table-column>
                </el-table>
                <div class="order-footer-box">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageData.currentPage"
                            :page-sizes="[10, 20, 30, 40, 50, 100, 200]"
                            :page-size="pageData.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pageData.total">
                    </el-pagination>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "handleOrderForm",
        data() {
            return {
                pageConfig:{
                    findPageUrl:this.$systemconfig.basePath + '/outPark/findPage',
                },
                pageData: this.$byutil.defaultPageData(),
                dialogVisible:false,
            }
        },
        mounted() {

        },
        methods: {
            statusFormatter(row) {
                if(row.status == 0) {
                    return '未缴费'
                }else if(row.status == 1) {
                    return '已缴费'
                }
            },
            initData() {
                this.dialogVisible = true
                this.$byutil.initTableMaxHeight(this);
                this.loadData();
            },
            loadData() {
                this.$byutil.loadPageData(this,this.pageConfig.findPageUrl,this.pageData)
            },
            handleSizeChange(val) {
                this.pageData.pageSize = val;
                this.loadData();
            },
            handleCurrentChange(val) {
                this.pageData.page = val;
                this.loadData();
            }
        }
    }
</script>

<style lang="scss">
    .blackNameForm-wrap{
        .el-dialog__title{
            color: #fff;
        }
        .el-dialog, .el-pager li{
            background:rgba(0,0,0,0.9);
        }
        .el-form-item__label{
            color: #00fff6;
        }
        .el-table th{
            background:rgba(4,40,70,0.7);
        }
        .el-table tr{
            background:transparent;
        }
        .el-table__footer-wrapper, .el-table__header-wrapper:nth-child(even){
            background:rgba(4,40,70,0.7);
        }
        .el-table__row:nth-child(even){
            background:rgba(4,40,70,0.7);
        }
        .el-table, .el-table__expanded-cell{
            background:transparent;
        }
        .el-table td, .el-table th.is-leaf{
            border:none;
        }
        .el-table__body,.el-table__header{
            width: 100% !important;
        }
        .el-table::before,.el-table__fixed-right::before, .el-table__fixed::before{
            background-color: transparent;
        }
        .el-table__body tr.hover-row.current-row>td, .el-table__body tr.hover-row.el-table__row--striped.current-row>td, .el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td{
            background-color: #374f65;
        }
        .el-table--enable-row-hover .el-table__body tr:hover>td{
            background-color: #374f65;
        }
        .el-table thead{
            color: #fff;
        }
        .el-table{
            color:#00fff6;
        }
        .el-dialog__header{
            display: flex;
            justify-content: center;
        }
    }
    .order-footer-box{
        .el-pagination__total{
            color:#fff;
        }
        .el-pager li{
            color:#fff;
        }
        .el-pagination__jump{
            color:#fff;
        }
        .el-input__inner,.btn-prev,.btn-next,.el-pagination button:disabled{
            background-color: transparent;
        }
        .el-pager li.active{
            color: #409EFF;
        }
        .el-input__inner{
            color:#fff;
            border:1px solid #409EFF;
        }
        .el-pagination .btn-next, .el-pagination .btn-prev{
            color:#fff;
        }
    }
</style>

<style lang="scss" scoped>
    .order-footer-box{
        display: flex;
        flex-direction: row-reverse;
        margin-top: 0.1042rem  /* 20/192 */;
    }
</style>

 src/components/page/leaderShow/Dialog/inAndOutForm.vue

New file
@@ -0,0 +1,168 @@
<template>
    <div class="inAndOutForm-wrap">
        <el-dialog
                title="智慧泊实时入场记录"
                :visible.sync="dialogVisible"
                width="40%">
            <div class="daibanForm-main">
                <el-table
                        :data="pageData.rows"
                        style="width: 100%"
                        max-height="550">
                    <el-table-column
                            header-align="center"
                            align="center"
                            prop="carNo"
                            label="车牌号"
                            min-width="100">
                    </el-table-column>
                    <el-table-column
                            show-overflow-tooltip
                            align="left"
                            header-align="center"
                            prop="parkName"
                            label="停车场"
                            min-width="200">
                    </el-table-column>
                    <el-table-column
                            align="left"
                            header-align="center"
                            prop="createTime"
                            label="时间"
                            min-width="100">
                    </el-table-column>
                </el-table>
                <div class="inAndOut-footer-box">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageData.currentPage"
                            :page-sizes="[10, 20, 30, 40, 50, 100, 200]"
                            :page-size="pageData.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pageData.total">
                    </el-pagination>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "inAndOutForm",
        data() {
            return {
                pageConfig:{
                    enterParkUrl:this.$systemconfig.basePath + '/notice/enterPark',
                },
                pageData: this.$byutil.defaultPageData(),
                dialogVisible:false,
            }
        },
        methods: {
            initData() {
                this.dialogVisible = true
                this.$byutil.initTableMaxHeight(this);
                this.loadData();
            },
            loadData() {
                this.$byutil.loadPageData(this,this.pageConfig.enterParkUrl,this.pageData)
            },
            handleSizeChange(val) {
                this.pageData.pageSize = val;
                this.loadData();
            },
            handleCurrentChange(val) {
                this.pageData.page = val;
                this.loadData();
            }
        }
    }
</script>

<style lang="scss">
    .inAndOutForm-wrap{
        .el-dialog__title{
            color: #fff;
        }
        .el-dialog, .el-pager li{
            background:rgba(0,0,0,0.9);
        }
        .el-form-item__label{
            color: #00fff6;
        }
        .el-table th{
            background:rgba(4,40,70,0.7);
        }
        .el-table tr{
            background:transparent;
        }
        .el-table__footer-wrapper, .el-table__header-wrapper:nth-child(even){
            background:rgba(4,40,70,0.7);
        }
        .el-table__row:nth-child(even){
            background:rgba(4,40,70,0.7);
        }
        .el-table, .el-table__expanded-cell{
            background:transparent;
        }
        .el-table td, .el-table th.is-leaf{
            border:none;
        }
        .el-table__body,.el-table__header{
            width: 100% !important;
        }
        .el-table::before,.el-table__fixed-right::before, .el-table__fixed::before{
            background-color: transparent;
        }
        .el-table__body tr.hover-row.current-row>td, .el-table__body tr.hover-row.el-table__row--striped.current-row>td, .el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td{
            background-color: #374f65;
        }
        .el-table--enable-row-hover .el-table__body tr:hover>td{
            background-color: #374f65;
        }
        .el-table thead{
            color: #fff;
        }
        .el-table{
            color:#00fff6;
        }
        .el-dialog__header{
            display: flex;
            justify-content: center;
        }
    }
    .inAndOut-footer-box{
        .el-pagination__total{
            color:#fff;
        }
        .el-pager li{
            color:#fff;
        }
        .el-pagination__jump{
            color:#fff;
        }
        .el-input__inner,.btn-prev,.btn-next,.el-pagination button:disabled{
            background-color: transparent;
        }
        .el-pager li.active{
            color: #409EFF;
        }
        .el-input__inner{
            color:#fff;
            border:1px solid #409EFF;
        }
        .el-pagination .btn-next, .el-pagination .btn-prev{
            color:#fff;
        }
    }
</style>

<style lang="scss" scoped>
.inAndOut-footer-box{
    display: flex;
    flex-direction: row-reverse;
    margin-top: 0.1042rem  /* 20/192 */;
}
</style>

 src/components/page/leaderShow/Dialog/shangjiZhipaiForm.vue

New file
@@ -0,0 +1,239 @@
<template>
    <div class="shangjiZhipaiForm-wrap">
        <el-dialog
                title="违章车辆上级指派记录"
                :visible.sync="dialogVisible"
                width="80%">
            <div class="daibanForm-main">
                <el-table
                        :data="pageData.rows"
                        style="width: 100%"
                        max-height="550">
                    <el-table-column
                            align="center"
                            prop="carNo"
                            label="车牌号"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="address"
                            label="位置"
                            width="220">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="userName"
                            label="执行人"
                            width="160">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="money"
                            label="金额（元）"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="status"
                            label="状态"
                            :filter-multiple="false"
                            :filters="statesOptions"
                            column-key="tag"
                            :filter-method="filterTag"
                            :formatter="statesFormat"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="violationTypeName"
                            label="违章类型"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="payStatus"
                            :formatter="payStatusFormat"
                            label="缴费状态"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="createTime"
                            label="时间"
                            width="180">
                    </el-table-column>
                </el-table>
                <div class="shangji-footer-box">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageData.currentPage"
                            :page-sizes="[10, 20, 30, 40, 50, 100, 200]"
                            :page-size="pageData.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pageData.total">
                    </el-pagination>
                </div>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "shangjiZhipaiForm",
        data() {
            return {
                pageConfig: {
                    pageDataUrl: this.$systemconfig.basePath + '/ticket/findPage',
                },
                pageData: this.$byutil.defaultPageData(),
                type:{
                    type:1
                },
                statesOptions: [
                    { value: 0, text: "未处理" },
                    { value: 1, text: "已处理" },
                    { value: 2, text: "未完成" },
                    { value: 3, text: "撤销" },
                ],
                dialogVisible:false,
            }
        },
        methods: {
            payStatusFormat(row) {  //缴费状态
                if(row.type == 0) {
                    return '待缴费'
                }else if(row.type == 1) {
                    return '已缴费'
                }else if(row.type == 2) {
                    return '支付失败'
                }
            },
            statesFormat(row) {  //状态
                if(row.status == 0) {
                   return '未处理'
                }else if(row.status == 1) {
                    return '已处理'
                }else if(row.status == 2) {
                    return '未完成'
                }else if(row.status == 3) {
                    return '撤销'
                }
            },
            filterTag(value,row) {
                console.log('value-------',value)
                console.log('row.status',row.status)
                return row.status === value
            },
            initData() {
                this.dialogVisible = true
                this.$byutil.initTableMaxHeight(this);
                this.loadData();
            },
            //加载数据
            loadData() {
                let newObj = Object.assign({},this.pageData,this.type)
                console.log('newObj-----',newObj)
                this.$byutil.loadPageData(this, this.pageConfig.pageDataUrl,newObj);
            },
            handleSizeChange(val) {
                this.pageData.pageSize = val;
                this.loadData();
            },
            handleCurrentChange(val) {
                this.pageData.page = val;
                this.loadData();
            }
        }
    }
</script>

<style lang="scss">
    .shangjiZhipaiForm-wrap{
        .el-dialog__title{
            color: #fff;
        }
        .el-dialog, .el-pager li{
            background:rgba(0,0,0,0.9);
        }
        .el-form-item__label{
            color: #00fff6;
        }
        .el-table th{
            background:rgba(4,40,70,0.7);
        }
        .el-table tr{
            background:transparent;
        }
        .el-table__footer-wrapper, .el-table__header-wrapper:nth-child(even){
            background:rgba(4,40,70,0.7);
        }
        .el-table__row:nth-child(even){
            background:rgba(4,40,70,0.7);
        }
        .el-table, .el-table__expanded-cell{
            background:transparent;
        }
        .el-table td, .el-table th.is-leaf{
            border:none;
        }
        .el-table__body,.el-table__header{
            width: 100% !important;
        }
        .el-table::before,.el-table__fixed-right::before, .el-table__fixed::before{
            background-color: transparent;
        }
        .el-table__body tr.hover-row.current-row>td, .el-table__body tr.hover-row.el-table__row--striped.current-row>td, .el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td{
            background-color: #374f65;
        }
        .el-table--enable-row-hover .el-table__body tr:hover>td{
            background-color: #374f65;
        }
        .el-table thead{
            color: #fff;
        }
        .el-table{
            color:#00fff6;
        }
        .el-dialog__header{
            display: flex;
            justify-content: center;
        }
    }
    .shangji-footer-box{
        .el-pagination__total{
            color:#fff;
        }
        .el-pager li{
            color:#fff;
        }
        .el-pagination__jump{
            color:#fff;
        }
        .el-input__inner,.btn-prev,.btn-next,.el-pagination button:disabled{
            background-color: transparent;
        }
        .el-pager li.active{
            color: #409EFF;
        }
        .el-input__inner{
            color:#fff;
            border:1px solid #409EFF;
        }
        .el-pagination .btn-next, .el-pagination .btn-prev{
            color:#fff;
        }
    }

</style>

<style lang="scss" scoped>
.shangji-footer-box{
    display: flex;
    flex-direction: row-reverse;
    margin-top: 0.1042rem  /* 20/192 */;
}
</style>

 src/components/page/leaderShow/Dialog/weizhangForm.vue

New file
@@ -0,0 +1,67 @@
<template>
    <div class="weizhangForm-wrap">
        <el-dialog
                title="详情"
                :visible.sync="dialogVisible"
                width="30%">
            <div class="zhipaiForm-main">
                <el-form :model="weizhangForm" ref="weizhangForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="车牌号：" prop="carNo">
                        <el-input v-model="weizhangForm.carNo"></el-input>
                    </el-form-item>
                    <el-form-item label="停车场：" prop="parkName">
                        <el-input v-model="weizhangForm.parkName"></el-input>
                    </el-form-item>
                    <el-form-item label="时间：" prop="createTime">
                        <el-input v-model="weizhangForm.createTime"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "weizhangForm",
        data() {
            return {
                weizhangForm:{
                    carNo:'',
                    parkName:'',
                    createTime:''
                },
                dialogVisible:false,
            }
        },
        methods: {
            initData(val) {
                this.dialogVisible = true
                console.log(val)
                this.weizhangForm = val
            }
        }
    }
</script>

<style lang="scss">
    .weizhangForm-wrap{
        .el-dialog__title{
            color: #fff;
        }
        .el-dialog, .el-pager li{
            background:rgba(0,0,0,0.9);
        }
        .el-form-item__label{
            color: #00fff6;
        }
        .el-input__inner{
            background:transparent;
            color: #fff;
        }
        .el-textarea__inner{
            background:transparent;
            color: #fff;
        }
    }
</style>

 src/components/page/leaderShow/Dialog/xunjieOrderForm.vue

New file
@@ -0,0 +1,239 @@
<template>
    <div class="xunjieOrderForm-wrap">
        <el-dialog
                title="违章车辆日常巡街记录"
                :visible.sync="dialogVisible"
                width="70%">
            <div class="daibanForm-main">
                <el-table
                        :data="pageData.rows"
                        style="width: 100%"
                        max-height="550">
                    <el-table-column
                            align="center"
                            prop="carNo"
                            label="车牌号"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            header-align="center"
                            :show-overflow-tooltip="true"
                            align="left"
                            prop="address"
                            label="位置"
                            width="220">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="userName"
                            label="执行人"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="money"
                            label="金额（元）"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="status"
                            label="状态"
                            :filter-multiple="false"
                            :filters="statesOptions"
                            column-key="tag"
                            :filter-method="filterTag"
                            :formatter="statesFormat"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="violationTypeName"
                            label="违章类型"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="payStatus"
                            :formatter="payStatusFormat"
                            label="缴费状态"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="createTime"
                            label="时间"
                            width="180">
                    </el-table-column>
                </el-table>
                <div class="xunjie-footer-box">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageData.currentPage"
                            :page-sizes="[10, 20, 30, 40, 50, 100, 200]"
                            :page-size="pageData.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pageData.total">
                    </el-pagination>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "xunjieOrderForm",
        data() {
            return {
                pageConfig: {
                    pageDataUrl: this.$systemconfig.basePath + '/ticket/findPage',
                },
                pageData: this.$byutil.defaultPageData(),
                type:{
                    type:0
                },
                dialogVisible:false,
                statesOptions: [
                    { value: 0, text: "未处理" },
                    { value: 1, text: "已处理" },
                    { value: 2, text: "未完成" },
                    { value: 3, text: "撤销" },
                ],
            }
        },
        methods: {
            payStatusFormat(row) {  //缴费状态
                if(row.type == 0) {
                    return '待缴费'
                }else if(row.type == 1) {
                    return '已缴费'
                }else if(row.type == 2) {
                    return '支付失败'
                }
            },
            statesFormat(row) {  //状态
                if(row.status == 0) {
                    return '未处理'
                }else if(row.status == 1) {
                    return '已处理'
                }else if(row.status == 2) {
                    return '未完成'
                }else if(row.status == 3) {
                    return '撤销'
                }
            },
            filterTag(value,row) {
                console.log('value-------',value)
                console.log('row.status',row.status)
                return row.status === value
            },
            initData() {
                this.dialogVisible = true
                this.$byutil.initTableMaxHeight(this);
                this.loadData();
            },
            //加载数据
            loadData() {
                let newObj = Object.assign({},this.pageData,this.type)
                console.log('newObj-----',newObj)
                this.$byutil.loadPageData(this, this.pageConfig.pageDataUrl,newObj);
            },
            handleSizeChange(val) {
                this.pageData.pageSize = val;
                this.loadData();
            },
            handleCurrentChange(val) {
                this.pageData.page = val;
                this.loadData();
            }
        }
    }
</script>

<style lang="scss">
    .xunjieOrderForm-wrap{
        .el-dialog__title{
            color: #fff;
        }
        .el-dialog, .el-pager li{
            background:rgba(0,0,0,0.9);
        }
        .el-form-item__label{
            color: #00fff6;
        }
        .el-table th{
            background:rgba(4,40,70,0.7);
        }
        .el-table tr{
            background:transparent;
        }
        .el-table__footer-wrapper, .el-table__header-wrapper:nth-child(even){
            background:rgba(4,40,70,0.7);
        }
        .el-table__row:nth-child(even){
            background:rgba(4,40,70,0.7);
        }
        .el-table, .el-table__expanded-cell{
            background:transparent;
        }
        .el-table td, .el-table th.is-leaf{
            border:none;
        }
        .el-table__body,.el-table__header{
            width: 100% !important;
        }
        .el-table::before,.el-table__fixed-right::before, .el-table__fixed::before{
            background-color: transparent;
        }
        .el-table__body tr.hover-row.current-row>td, .el-table__body tr.hover-row.el-table__row--striped.current-row>td, .el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td{
            background-color: #374f65;
        }
        .el-table--enable-row-hover .el-table__body tr:hover>td{
            background-color: #374f65;
        }
        .el-table thead{
            color: #fff;
        }
        .el-table{
            color:#00fff6;
        }
        .el-dialog__header{
            display: flex;
            justify-content: center;
        }
    }
    .xunjie-footer-box{
        .el-pagination__total{
            color:#fff;
        }
        .el-pager li{
            color:#fff;
        }
        .el-pagination__jump{
            color:#fff;
        }
        .el-input__inner,.btn-prev,.btn-next,.el-pagination button:disabled{
            background-color: transparent;
        }
        .el-pager li.active{
            color: #409EFF;
        }
        .el-input__inner{
            color:#fff;
            border:1px solid #409EFF;
        }
        .el-pagination .btn-next, .el-pagination .btn-prev{
            color:#fff;
        }
    }
</style>

<style lang="scss" scoped>
    .xunjie-footer-box{
        display: flex;
        flex-direction: row-reverse;
        margin-top: 0.1042rem  /* 20/192 */;
    }
</style>

 src/components/page/leaderShow/Dialog/zhipaiForm.vue

New file
@@ -0,0 +1,174 @@
<template>
    <div class="zhipaiForm-wrap">
        <el-dialog
                :before-close="handleClose"
                title="指派任务"
                :visible.sync="dialogVisible"
                width="35%">
            <div class="zhipaiForm-main">
               <el-form :model="zhipaiForm" :rules="zhipaiRules" ref="zhipaiForm" label-width="100px" class="demo-ruleForm">
                   <el-form-item label="车牌号：" prop="carNo">
                       <el-input v-model="zhipaiForm.carNo"></el-input>
                   </el-form-item>
                   <el-form-item label="车牌颜色：" prop="color">
                       <el-input v-model="zhipaiForm.color"></el-input>
                   </el-form-item>
                   <el-form-item label="车辆类型：" prop="carType">
                       <el-input v-model="zhipaiForm.carType"></el-input>
                   </el-form-item>
                   <el-form-item label="违章类型：" prop="violationTypeId">
                       <!--<el-input v-model="zhipaiForm.violationTypeId"></el-input>-->
                       <el-select v-model="zhipaiForm.violationTypeId" placeholder="请选择">
                           <el-option
                                   v-for="item in weizhangOptions"
                                   :key="item.id"
                                   :label="item.content"
                                   :value="item.id">
                           </el-option>
                       </el-select>
                   </el-form-item>
                   <el-form-item label="位置：" prop="address">
                       <el-input v-model="zhipaiForm.address"></el-input>
                   </el-form-item>
                   <el-form-item label="执行人：" prop="userId">
                       <!--<el-input v-model="zhipaiForm.userId"></el-input>-->
                       <el-select v-model="zhipaiForm.userId" placeholder="请选择">
                           <el-option
                                   v-for="item in zhixingrenOptions"
                                   :key="item.id"
                                   :label="item.name"
                                   :value="item.id">
                           </el-option>
                       </el-select>
                   </el-form-item>
                   <el-form-item label="备注：" prop="remark">
                       <el-input type="textarea" v-model="zhipaiForm.remark"></el-input>
                   </el-form-item>
                   <el-form-item>
                       <div class="fabuBtn">
                           <el-button type="primary" @click="submitForm('zhipaiForm')">发布</el-button>
                       </div>
                   </el-form-item>
               </el-form>
            </div>
         </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "zhipaiForm",
        data() {
            return {
                pageConfig:{
                    saveData:this.$systemconfig.basePath + '/ticket/save2',
                    weizhangData:this.$systemconfig.basePath + '/violationType/findAll',
                    zhixingrenData:this.$systemconfig.basePath + '/user/findAll',
                },
                weizhangOptions:[],
                zhixingrenOptions:[],
                dialogVisible:false,
                zhipaiForm:{
                    carNo:'',
                    color:'',
                    carType:'',
                    violationTypeId:'',
                    address:'',
                    userId:'',
                    type:1,
                    remark:''
                },
                zhipaiRules:{
                    carNo: [
                        { required: true, message: '请输入车牌号', trigger: 'blur' },
                    ],
                    color: [
                        { required: true, message: '请输入车辆颜色', trigger: 'blur' },
                    ],
                    carType: [
                        { required: true, message: '请输入车辆类型', trigger: 'blur' },
                    ],
                    violationTypeId: [
                        { required: true, message: '请选择违章类型', trigger: 'change' },
                    ],
                    address: [
                        { required: true, message: '请输入位置', trigger: 'blur' },
                    ],
                    userId: [
                        { required: true, message: '请选择执行人', trigger: 'change' },
                    ],
                }
            }
        },
        methods:{
            handleClose() {
                this.dialogVisible = false
                this.$refs.zhipaiForm.resetFields();
            },
            initData() {
                this.dialogVisible = true
                this.$byutil.postData4(this,this.pageConfig.weizhangData,null,res => {
                    this.weizhangOptions = res.obj
                })
                this.$byutil.postData4(this,this.pageConfig.zhixingrenData,null,res => {
                    this.zhixingrenOptions = res.obj
                })
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if(valid) {
                        this.$byutil.postData(this,this.pageConfig.saveData,this.zhipaiForm,res => {
                            this.$refs[formName].resetFields();
                            this.dialogVisible = false
                            this.$message.success(res.message)
                        })
                    }
                })
            }
        }
    }
</script>

<style lang="scss">
.zhipaiForm-wrap{
    .el-dialog__title{
        color: #fff;
    }
    .el-dialog__wrapper{
        background:rgba(0,0,0,0.6);
    }
    .el-dialog, .el-pager li{
       background:rgba(0,0,0,0.5);
    }
    .el-form-item__label{
        color: #00fff6;
    }
    .el-input__inner{
        background:transparent;
        color: #fff;
        border: 1px solid #00fff6;
    }
    .el-textarea__inner{
        background:transparent;
        color: #fff;
        border: 1px solid #00fff6;
    }
    .fabuBtn{
        .el-button{
            width: 1.0417rem  /* 200/192 */;
           border:1px solid #00fff6;
            background:transparent;
        }
    }
    .el-select{
        width: 100%;
    }
}
</style>

<style lang="scss" scoped>
    .fabuBtn{
        display: flex;
        justify-content: center;
    }
</style>

 src/components/page/leaderShow/leaderIndex.vue

New file
@@ -0,0 +1,1392 @@
<template>
    <div class="leaderIndex-wrap">
        <div class="leaderIndex-title">
            <h1>峰峰矿区综合行政执法局智慧泊车平台</h1>
            <div class="leader-title-left">
                <h2>欢迎登录，{{userName}}!</h2>
            </div>
            <div class="logout" @click="logout">
                退出登录
            </div>
            <div class="leader-title-right" @click="houtaiBtn">
                <h2>后台管理</h2>
            </div>
            <div class="weizhang-content">
                <h2 @click="weizhangBtn(item)" v-if="index < 1" v-for="(item,index) in weizhangList" :key="index">违法车辆：{{item.carNo}}进入{{item.parkName}}  {{item.createTime}}</h2>
            </div>
        </div>
        <div class="leaderIndex-main">
            <div class="leaderIndex-main-left">
               <div class="leader-left-block">
                   <div class="leader-block-title">
                        <h1>智慧泊车订单处理记录</h1>
                   </div>
                   <div class="leader-block-main">
                       <div class="leader-block-num-box">
                           <div class="leader-block-num-line">
                               <h1><font class="teshuColor">{{tongjiNumObj.data1}}</font>单</h1>
                               <h2>（应缴<font>{{tongjiNumObj.data2}}</font>单）</h2>
                           </div>
                           <h2>今日实缴订单数量</h2>
                       </div>
                       <div class="leader-block-num-box">
                           <div class="leader-block-num-line">
                               <h1><font class="teshuColor">{{tongjiNumObj.data3}}</font>元</h1>
                           </div>
                           <h2>今日订单总金额</h2>
                       </div>
                       <img @click="handleOrderBtn" class="moreIcon" src="../../../assets/images/moreIcon.png" alt="">
                   </div>
               </div>
               <div class="leader-left-block">
                    <div class="leader-block-title">
                        <h1>智慧泊车实时出入场记录</h1>
                    </div>
                    <div class="leader-block-main">
                        <div class="leader-block-num-box">
                            <div class="leader-block-num-line">
                                <h1><font class="teshuColor">{{tongjiNumObj.data4}}</font>辆</h1>
                            </div>
                            <h2>今日入场数量</h2>
                        </div>
                        <div class="leader-block-num-box">
                            <div class="leader-block-num-line">
                                <h1><font class="teshuColor">{{tongjiNumObj.data5}}</font>辆</h1>
                            </div>
                            <h2>今日出场数量</h2>
                        </div>
                        <img @click="inAndOutBtn" class="moreIcon" src="../../../assets/images/moreIcon.png" alt="">
                    </div>
                </div>
               <div class="leader-left-block">
                    <div class="leader-block-title">
                        <h1>违章车辆执法订单记录</h1>
                    </div>
                    <div class="leader-block-main">
                        <div class="leader-block-num-box">
                            <div class="leader-block-num-line">
                                <h1><font class="teshuColor">{{tongjiNumObj.data6}}</font>单</h1>
                                <h2>（应缴<font>{{tongjiNumObj.data7}}</font>单）</h2>
                            </div>
                            <h2>今日实缴订单数量</h2>
                        </div>
                        <div class="leader-block-num-box">
                            <div class="leader-block-num-line">
                                <h1><font class="teshuColor">{{tongjiNumObj.data8}}</font>元</h1>
                            </div>
                            <h2>今日订单总金额</h2>
                        </div>
                        <img @click="breakLawOrderBtn" class="moreIcon" src="../../../assets/images/moreIcon.png" alt="">
                    </div>
                </div>
            </div>
            <div class="leaderIndex-main-middle">
                <div class="waitWork">
                    <div class="waitWork-block" @click="daibanBtn">
                        <img src="../../../assets/images/waitIcon1.png" alt="">
                        <h1>我的待办</h1>
                    </div>
                    <div class="show-main-middle-title">
                        <h1>{{nowTime}}</h1>
                    </div>
                    <div class="waitWork-block" @click="zhipaiBtn">
                        <img src="../../../assets/images/waitIcon2.png" alt="">
                        <h1>指派任务</h1>
                    </div>
                </div>
                <div class="map-box">
                    <div class="bmView" id="container"></div>
                </div>
                <div class="leader-tongji-box">
                    <div class="leader-tongji-dingdan">
                        <div class="leader-dingdan-box">
                            <h1><font class="teshuFont">{{tongjiNumObj.data9}}</font>单</h1>
                            <h1>本月泊车订单数量</h1>
                        </div>
                        <div class="leader-dingdan-box">
                            <h1><font class="teshuFont">{{tongjiNumObj.data10}}</font>元</h1>
                            <h1>本月泊车订单金额</h1>
                        </div>
                    </div>
                    <div class="leader-tongji-echarts-box">
                        <div class="tclyvEcharts" id="zhengticheweiliyonglv"></div>
                        <div class="tclyvEcharts" id="fakuancheliangchengjiaolv"></div>
                    </div>
                    <div class="leader-tongji-dingdan">
                        <div class="leader-dingdan-box">
                            <h1><font class="teshuFont">{{tongjiNumObj.data11}}</font>单</h1>
                            <h1>本月违法车辆订单数量</h1>
                        </div>
                        <div class="leader-dingdan-box">
                            <h1><font class="teshuFont">{{tongjiNumObj.data12}}</font>元</h1>
                            <h1>本月违法车辆订单金额</h1>
                        </div>
                    </div>
                </div>
            </div>
            <div class="leaderIndex-main-left">
                <div class="leader-left-block">
                    <div class="leader-block-title">
                        <h1>违章车辆上级指派记录</h1>
                    </div>
                    <div class="leader-block-main">
                        <div class="leader-block-num-box">
                            <div class="leader-block-num-line">
                                <h1><font class="teshuColor">{{tongjiNumObj.data15}}</font>次</h1>
                            </div>
                            <h2>今日指派任务次数</h2>
                        </div>
                        <div class="leader-block-num-box">
                            <div class="leader-block-num-line">
                                <h1><font class="teshuColor">{{tongjiNumObj.data16}}</font>次</h1>
                            </div>
                            <h2>今日完成指派任务</h2>
                        </div>
                        <img @click="shangjiZhipaiBtn" class="moreIcon" src="../../../assets/images/moreIcon.png" alt="">
                    </div>
                </div>
                <div class="leader-left-block">
                    <div class="leader-block-title">
                        <h1>违章车辆日常巡街记录</h1>
                    </div>
                    <div class="leader-block-main">
                        <div class="leader-block-num-box">
                            <div class="leader-block-num-line">
                                <h1><font class="teshuColor">{{tongjiNumObj.data17}}</font>单</h1>
                            </div>
                            <h2>今日巡街订单数</h2>
                        </div>
                        <div class="leader-block-num-box">
                            <div class="leader-block-num-line">
                                <h1><font class="teshuColor">{{tongjiNumObj.data18}}</font>元</h1>
                            </div>
                            <h2>今日巡街订单金额</h2>
                        </div>
                        <img @click="xunjieOrderBtn" class="moreIcon" src="../../../assets/images/moreIcon.png" alt="">
                    </div>
                </div>
                <div class="leader-left-block">
                    <div class="leader-block-title">
                        <h1>黑名单重点车辆记录</h1>
                    </div>
                    <div class="leader-block-main">
                        <div class="leader-block-num-box">
                            <div class="leader-block-num-line">
                                <h1><font class="teshuColor">{{tongjiNumObj.data19}}</font>辆</h1>
                            </div>
                            <h2>黑名单车辆总数</h2>
                        </div>
                        <div class="leader-block-num-box">
                            <div class="leader-block-num-line">
                                <h1><font class="teshuColor">{{tongjiNumObj.data20}}</font>辆</h1>
                            </div>
                            <h2>今日新增黑名单车辆</h2>
                        </div>
                        <img @click="blackNameBtn" class="moreIcon" src="../../../assets/images/moreIcon.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <zhipaiForm ref="zhipaiForm" v-if="zhipaiVisiable"></zhipaiForm>
        <daibanForm ref="daibanForm" v-if="daibanVisiable"></daibanForm>
        <blackNameForm ref="blackNameForm" v-if="blackNameVisiable"></blackNameForm>
        <handleOrderForm ref="handleOrderForm" v-if="handleOrderVisiable"></handleOrderForm>
        <inAndOutForm ref="inAndOutForm" v-if="inAndOutVisiable"></inAndOutForm>
        <breakLawOrderForm ref="breakLawOrderForm" v-if="breakLawOrderVisiable"></breakLawOrderForm>
        <shangjiZhipaiForm ref="shangjiZhipaiForm" v-if="shangjiZhipaiVisiable"></shangjiZhipaiForm>
        <xunjieOrderForm ref="xunjieOrderForm" v-if="xunjieOrderVisiable"></xunjieOrderForm>
        <weizhangForm ref="weizhangForm" v-if="weizhangVisiable"></weizhangForm>
    </div>
</template>

<script>
    import echarts from "echarts/lib/echarts";
    import zhipaiForm from "./Dialog/zhipaiForm";
    import daibanForm from "./Dialog/daibanForm";
    import blackNameForm from "./Dialog/blackNameForm";
    import handleOrderForm from "./Dialog/handleOrderForm";
    import inAndOutForm from "./Dialog/inAndOutForm";
    import breakLawOrderForm from "./Dialog/breakLawOrderForm";
    import shangjiZhipaiForm from "./Dialog/shangjiZhipaiForm";
    import xunjieOrderForm from "./Dialog/xunjieOrderForm";
    import weizhangForm from "./Dialog/weizhangForm";
    export default {
        name: "leaderIndex",
        components: {
            zhipaiForm,  //指派
            daibanForm,  //待办
            blackNameForm,  //黑名单
            handleOrderForm,  //智慧泊车订单处理记录
            inAndOutForm,  //出入场记录
            breakLawOrderForm,  //违章车辆执法订单记录
            shangjiZhipaiForm,  //违章车辆上级指派记录
            xunjieOrderForm,  //违章车辆上级指派记录
            weizhangForm,  //违章车辆list详情
        },
        data() {
            return {
                nowTime:'',
                nowTimes:null,
                pageConfig: {
                    getDataUrl: this.$systemconfig.basePath + '/statistic/getData1',
                    getLogoUrl: this.$systemconfig.basePath + '/statistic/getLogo',
                    findAllUrl: this.$systemconfig.basePath + '/user/findAll',
                    illegalCarUrl: this.$systemconfig.basePath + '/notice/illegalCar2',
                },
                weizhangTimer:null,  //违章list定时器
                getDataTimer:null, //统计数据定时器
                findAllTimer:null, //人员时器
                userName:'',  //登录人的名字
                weizhangList:[], //违章车辆list
                tongjiNumObj:{
                    data1:'',  //停车场今日实缴数量
                    data2:'',  //停车场今日应缴数量
                    data3:'',  //停车场今日订单数量

                    data4:'',  //停车场今日入场数量
                    data5:'',  //停车场今日出场数量

                    data6:'',  //违章今日实缴数量
                    data7:'',  //违章今日应缴数量
                    data8:'',  //违章今日订单总额

                    data9:'',  //本月泊车订单数
                    data10:'', //本月泊车订总额

                    data11:'',  //整体车位利用率
                    data12:'',  //罚款车辆成交率

                    data13:'',  //整体车位利用率
                    data14:'',  //罚款车位成交率

                    data15:'',  //今日指派任务次数
                    data16:'',  //今日完成数

                    data17:'',  //今日巡街订单数
                    data18:'',  //今日巡街订总额

                    data19:'',  //黑名单车辆总数
                    data20:'',  //今日新增黑名单数
                },
                zhipaiVisiable:false,  //指派弹框
                daibanVisiable:false,  //待办弹框
                blackNameVisiable:false,  //黑名单
                handleOrderVisiable:false,  //订单处理记录
                inAndOutVisiable:false,   //智慧泊车实时出入场记录
                breakLawOrderVisiable:false,   //违章车辆执法订单记录
                shangjiZhipaiVisiable:false,   //违章车辆日常巡街记录
                xunjieOrderVisiable:false,   //违章车辆上级指派记录
                weizhangVisiable:false,  //违章车辆list详情
                /*center: {
                    lng: 114.21148,
                    lat: 36.41937
                },*/
                zoom: 12.8,
                addressKeyword: "",
                reliArry:[],  //热力地图的数据
                lngData:[],
                heatmapOverlay:{},
                map:'',
                centerLng:'114.225914',
                centerLat:'36.438982',
            }
        },
        mounted() {
            this.newTimes()
            this.userName = JSON.parse(this.getStore('userinfo')).name
            this.getData()
            this.$nextTick(() => {
                this.createMap()
            })
            this.illegalCarUrl()
            this.getDataTimer = setInterval(() => {
                this.getData()
            },7200000)
            // this.getDataTimer = setInterval(this.getData,1000)
            this.weizhangTimer = setInterval(() => {
                this.illegalCarUrl()
            },300000)
            this.findAllTimer = setInterval(() => {
                this.createMap()
            },1200000)
        },
        beforeDestroy() {
            if(this.weizhangTimer) {
                clearInterval(this.weizhangTimer);
            }
            if(this.getDataTimer) {
                clearInterval(this.getDataTimer);
            }
            if(this.findAllTimer) {
                clearInterval(this.findAllTimer);
            }
        },
        methods:{
            logout() {
                this.removeStore('userinfo')
                this.$router.push('/leaderLogin');
            },
            // //显示当前时间（年月日时分秒）
            timeFormate(timeStamp) {
                let year = new Date(timeStamp).getFullYear();
                let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1;
                let date =new Date(timeStamp).getDate() < 10? "0" + new Date(timeStamp).getDate(): new Date(timeStamp).getDate();
                let hh =new Date(timeStamp).getHours() < 10? "0" + new Date(timeStamp).getHours(): new Date(timeStamp).getHours();
                let mm =new Date(timeStamp).getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes();
                let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
                let week = new Date(timeStamp).getDay();
                let weeks = ["日","一","二","三","四","五","六"];
                let getWeek = "星期" + weeks[week];
                this.nowTime = year + "年" + month + "月" + date +"日"+" "+hh+":"+mm+':'+ ss+ " "+ getWeek  ;
            },
            newTimes() {
                setInterval(()=> {
                    this.timeFormate(new Date())
                },1000)
            },
            weizhangBtn(val) {  //违章详情
                this.weizhangVisiable = true
                this.$nextTick(() => {
                    this.$refs.weizhangForm.initData(val)
                })
            },
            illegalCarUrl() {
                this.$byutil.postData4(this,this.pageConfig.illegalCarUrl,null,res => {
                     this.weizhangList = res.obj
                })
            },
            houtaiBtn() {  //跳转后台页面
                // window.location.href = 'http://ffkq.hesuancj.cn:38080/#/home'
                window.open('http://ffkq.hesuancj.cn:38080/#/home','_blank') // 在新窗口打开外链接
            },
            getData() {
                this.$byutil.postData4(this,this.pageConfig.getDataUrl,null,res => {
                    this.tongjiNumObj.data1 = res.obj.data1
                    this.tongjiNumObj.data2 = res.obj.data2
                    this.tongjiNumObj.data3 = res.obj.data3
                    this.tongjiNumObj.data4 = res.obj.data4
                    this.tongjiNumObj.data5 = res.obj.data5
                    this.tongjiNumObj.data6 = res.obj.data6
                    this.tongjiNumObj.data7 = res.obj.data7
                    this.tongjiNumObj.data8 = res.obj.data8
                    this.tongjiNumObj.data9 = res.obj.data9
                    this.tongjiNumObj.data10 = res.obj.data10
                    this.tongjiNumObj.data11 = res.obj.data11
                    this.tongjiNumObj.data12 = res.obj.data12
                    this.tongjiNumObj.data13 = res.obj.data13
                    console.log('this.tongjiNumObj.data13--------',this.tongjiNumObj.data13)
                    this.zhengticheweiliyonglv()
                    this.tongjiNumObj.data14 = res.obj.data14
                    console.log('this.tongjiNumObj.data14--------',this.tongjiNumObj.data14)
                    this.fakuancheliangchengjiaolv()
                    this.tongjiNumObj.data15 = res.obj.data15
                    this.tongjiNumObj.data16 = res.obj.data16
                    this.tongjiNumObj.data17 = res.obj.data17
                    this.tongjiNumObj.data18 = res.obj.data18
                    this.tongjiNumObj.data19 = res.obj.data19
                    this.tongjiNumObj.data20 = res.obj.data20

                })
            },
            xunjieOrderBtn() { //违章车辆日常巡街记录
                this.xunjieOrderVisiable = true
                this.$nextTick(() => {
                    this.$refs.xunjieOrderForm.initData()
                })
            },
            shangjiZhipaiBtn() { //违章车辆上级指派记录
                this.shangjiZhipaiVisiable = true
                this.$nextTick(() => {
                    this.$refs.shangjiZhipaiForm.initData()
                })
            },
            breakLawOrderBtn() {  //违章车辆执法订单记录
                this.breakLawOrderVisiable = true
                this.$nextTick(() => {
                    this.$refs.breakLawOrderForm.initData()
                })
            },
            inAndOutBtn() {  //智慧泊车实时出入场记录
                this.inAndOutVisiable = true
                this.$nextTick(() => {
                    this.$refs.inAndOutForm.initData()
                })
            },
            handleOrderBtn() {  //智慧泊车订单处理记录
                this.handleOrderVisiable = true
                this.$nextTick(() => {
                    this.$refs.handleOrderForm.initData()
                })
            },
            blackNameBtn() {  //黑名单重点车辆
                this.blackNameVisiable = true
                this.$nextTick(() => {
                    this.$refs.blackNameForm.initData()
                })
            },
            daibanBtn() {  //我的待办
                this.daibanVisiable = true
                this.$nextTick(() => {
                    this.$refs.daibanForm.initData()
                })
            },
            zhipaiBtn() {  //指派任务
               this.zhipaiVisiable = true
               this.$nextTick(() => {
                   this.$refs.zhipaiForm.initData()
               })
            },
            createMap(){  // // 方法 - 创建地图
                // 在百度地图容器中创建地图实例
                let map = new BMap.Map("container");
                // 将map变量存储在全局
                this.map = map;
                // let goodsData = require('../../../assets/custom_map_config.json')
                // 设定地图的中心点和坐标
                let point = new BMap.Point(this.centerLng, this.centerLat);
                // let marker = new BMap.Marker(point) // 创建标注
                // 设置中心点坐标和地图级别
                this.map.centerAndZoom(point, 1);
                // 添加自定义覆盖物
                // this.map.addOverlay(marker) // 将标注添加到地图中
                // 允许滚轮缩放
                this.map.enableScrollWheelZoom(point, 15);
                // 设置地图默认缩放比例
                this.map.setZoom(15);
                this.map.setMapStyle({
                       style:'midnight'
                            // styleJson:goodsData
                 });
                this.addHeatMap(this.map)
                this.addMarker(this.map,point)

            },
            addHeatMap(map) {  //热力图
                this.$byutil.postData(this,this.pageConfig.getLogoUrl,null,res => {
                    this.reliArry = res.obj
                    this.reliArry.forEach(item => {
                        this.lngData.push({count:70,lat:item.lat,lng:item.lng})
                    })
                    this.heatmapOverlay = new BMapLib.HeatmapOverlay({
                        // 热力图的每个点的半径大小
                        'radius': BMAP_POINT_SIZE_SMALL * 5,
                        // 热力的透明度0~1
                        'opacity': 0.8,
                        // 其中 key 表示插值的位置0~1，value 为颜色值
                        'gradient': {
                            0:'rgb(102, 255, 0)',
                            .5:'rgb(255, 170, 0)',
                            1:'rgb(255, 0, 0)'
                        }
                    });
                    map.addOverlay(this.heatmapOverlay);
                    this.heatmapOverlay.setDataSet({data:this.lngData,max:100});
                })
            },
            addMarker(map,point) {  //添加自定义图标
                this.$byutil.postData(this,this.pageConfig.findAllUrl,null,res => {
                    res.obj.forEach(item => {
                        if(item.lat) {
                            point = new BMap.Point(item.lng,item.lat)
                            //设置标注的图标
                            var icon = new BMap.Icon(require('../../../assets/images/mapicon.png'),new BMap.Size(32,32), {
                                anchor: new BMap.Size(0, 0)
                            });
                            //设置标注的经纬度
                            var markers = new BMap.Marker(point,{icon:icon});
                            // var content = `
                            // <table>
                            //     <tr>
                            //     <td>姓名： ${item.name}</td>
                            //     </tr>
                            // </table>
                            // `
                            // var infowindow = new BMap.InfoWindow(content);
                            // markers.addEventListener("click",function(){
                            //     this.openInfoWindow(infowindow);
                            // });

                            // # 配置好图标再配置图标上的文字(Label)
                            let option = {
                                point: {lng:item.lng, lat:item.lat},
                                offset: {width:-20, height:-18},
                                enableMassClear: true
                            }
                            let label = new window.BMap.Label(item.name, option)
                            markers.setLabel(label) // 放到这个点上

                            // # 设置label文字的样式，并添加背景图
                            label.setStyle({
                                color: '#1fd5fc',
                                fontSize: '14px',
                                background:'transparent',
                                border:'none'
                            })

                            //把标注添加到地图上
                            map.addOverlay(markers);
                        }
                    })
                })
            },
            getLocationPoint(e) {
                this.center.lng = e.point.lng;
                this.center.lat = e.point.lat;
                /* 创建地址解析器的实例 */
                let geoCoder = new BMap.Geocoder();
                /* 获取位置对应的坐标 */
                geoCoder.getPoint(this.addressKeyword, point => {
                    this.selectedLng = point.lng;
                    this.selectedLat = point.lat;
                });
                /* 利用坐标获取地址的详细信息 */
                // geocoder.getLocation(e.point, res=>{
                //     console.log(res);
                // })
           },
            zhengticheweiliyonglv() { //整体车位利用率
                //https://www.makeapie.com/editor.html?c=xFkzKG-bpl
                let myEchart = this.$echarts.init(document.getElementById('zhengticheweiliyonglv'))
                let angle = 0;//角度，用来做简单的动画效果的
                let value = this.tongjiNumObj.data13;
                let option = {
                    title: {
                        text: '{a|'+ value +'}{c|%}',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            rich:{
                                a: {
                                    fontSize: 26,
                                    color: '#29EEF3'
                                },

                                c: {
                                    fontSize: 12,
                                    color: '#ffffff',
                                    // padding: [5,0]
                                }
                            }
                        }
                    },
                    graphic: [{
                        type: 'text',
                        z: 100,
                        left: 'center',
                        top: '90%',
                        style: {
                            fill: '#34fff8',
                            text: '整体车位利用率',
                            // text: [
                            //     '横轴表示温度，单位是°C',
                            //     '纵轴表示高度，单位是km',
                            //     '右上角有一个图片做的水印',
                            //     '这个文本块可以放在图中各',
                            //     '种位置'
                            // ].join('\n'),
                            font: '15px Microsoft YaHei'
                        }
                    }],
                    legend: { show: false },
                    series: [ {
                        name: "ring5",
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function(params, api) {
                            return {
                                type: 'arc',
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
                                    startAngle: (0+angle) * Math.PI / 180,
                                    endAngle: (90+angle) * Math.PI / 180
                                },
                                style: {
                                    stroke: "#0CD3DB",
                                    fill: "transparent",
                                    lineWidth: 1.5
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    }, {
                        name: "ring5",
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function(params, api) {
                            return {
                                type: 'arc',
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
                                    startAngle: (180+angle) * Math.PI / 180,
                                    endAngle: (270+angle) * Math.PI / 180
                                },
                                style: {
                                    stroke: "#0CD3DB",
                                    fill: "transparent",
                                    lineWidth: 1.5
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    }, {
                        name: "ring5",
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function(params, api) {
                            return {
                                type: 'arc',
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                                    startAngle: (270+-angle) * Math.PI / 180,
                                    endAngle: (40+-angle) * Math.PI / 180
                                },
                                style: {
                                    stroke: "#0CD3DB",
                                    fill: "transparent",
                                    lineWidth: 1.5
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    }, {
                        name: "ring5",
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function(params, api) {
                            return {
                                type: 'arc',
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                                    startAngle: (90+-angle) * Math.PI / 180,
                                    endAngle: (220+-angle) * Math.PI / 180
                                },
                                style: {
                                    stroke: "#0CD3DB",
                                    fill: "transparent",
                                    lineWidth: 1.5
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    }, {
                        name: "ring5",
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function(params, api) {
                            let x0 = api.getWidth() / 2;
                            let y0 = api.getHeight() / 2;
                            let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
                            let point = getCirlPoint(x0, y0, r, (90+-angle))
                            return {
                                type: 'circle',
                                shape: {
                                    cx: point.x,
                                    cy: point.y,
                                    r: 4
                                },
                                style: {
                                    stroke: "#0CD3DB",//粉
                                    fill: "#0CD3DB"
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    }, {
                        name: "ring5",  //绿点
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function(params, api) {
                            let x0 = api.getWidth() / 2;
                            let y0 = api.getHeight() / 2;
                            let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
                            let point = getCirlPoint(x0, y0, r, (270+-angle))
                            return {
                                type: 'circle',
                                shape: {
                                    cx: point.x,
                                    cy: point.y,
                                    r: 4
                                },
                                style: {
                                    stroke: "#0CD3DB",      //绿
                                    fill: "#0CD3DB"
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    }, {
                        name: '吃猪肉频率',
                        type: 'pie',
                        radius: ['58%', '45%'],
                        silent: true,
                        clockwise: true,
                        startAngle: 90,
                        z: 0,
                        zlevel: 0,
                        label: {
                            normal: {
                                position: "center",

                            }
                        },
                        data: [{
                            value: value,
                            name: "",
                            itemStyle: {
                                normal: {
                                    color: { // 完成的圆环的颜色
                                        colorStops: [{
                                            offset: 0,
                                            color: '#34fff8' // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: '#a7fffc' // 100% 处的颜色
                                        }]
                                    },
                                }
                            }
                        },
                            {
                                value: 100-value,
                                name: "",
                                label: {
                                    normal: {
                                        show: false
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: "#021c2c"
                                    }
                                }
                            }
                        ]
                    },

                        {
                            name: "",
                            type: "gauge",
                            radius: "58%",
                            center: ['50%', '50%'],
                            startAngle: 0,
                            endAngle: 359.9,
                            splitNumber: 8,
                            hoverAnimation: true,
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                length: 60,
                                lineStyle: {
                                    width: 5,
                                    color: "#011020"
                                }
                            },
                            axisLabel: {
                                show: false
                            },
                            pointer: {
                                show: false
                            },
                            axisLine: {
                                lineStyle: {
                                    opacity: 0
                                }
                            },
                            detail: {
                                show: false
                            },
                            data: [{
                                value: 0,
                                name: ""
                            }]
                        },

                    ]
                };
                //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
                function getCirlPoint(x0, y0, r, angle) {
                    let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
                    let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
                    return {
                        x: x1,
                        y: y1
                    }
                }
                // function draw(){
                //     angle = angle+3
                //     myEchart.setOption(option, true)
                //     //window.requestAnimationFrame(draw);
                // }
                // setInterval(function() {
                //     //用setInterval做动画感觉有问题
                //     draw()
                // }, 100);
                myEchart.setOption(option,false)
            },
            fakuancheliangchengjiaolv() { //整体车位利用率
                //https://www.makeapie.com/editor.html?c=xFkzKG-bpl
                let myEchart = this.$echarts.init(document.getElementById('fakuancheliangchengjiaolv'))
                let angle = 0;//角度，用来做简单的动画效果的
                let value = this.tongjiNumObj.data14;
                let option = {
                    title: {
                        text: '{a|'+ value +'}{c|%}',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            rich:{
                                a: {
                                    fontSize: 26,
                                    color: '#29EEF3'
                                },

                                c: {
                                    fontSize: 12,
                                    color: '#ffffff',
                                    // padding: [5,0]
                                }
                            }
                        }
                    },
                    graphic: [{
                        type: 'text',
                        z: 100,
                        left: 'center',
                        top: '90%',
                        style: {
                            fill: '#34fff8',
                            text: '罚款车辆成交率',
                            // text: [
                            //     '横轴表示温度，单位是°C',
                            //     '纵轴表示高度，单位是km',
                            //     '右上角有一个图片做的水印',
                            //     '这个文本块可以放在图中各',
                            //     '种位置'
                            // ].join('\n'),
                            font: '15px Microsoft YaHei'
                        }
                    }],
                    legend: { show: false },
                    series: [ {
                        name: "ring5",
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function(params, api) {
                            return {
                                type: 'arc',
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
                                    startAngle: (0+angle) * Math.PI / 180,
                                    endAngle: (90+angle) * Math.PI / 180
                                },
                                style: {
                                    stroke: "#0CD3DB",
                                    fill: "transparent",
                                    lineWidth: 1.5
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    }, {
                        name: "ring5",
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function(params, api) {
                            return {
                                type: 'arc',
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
                                    startAngle: (180+angle) * Math.PI / 180,
                                    endAngle: (270+angle) * Math.PI / 180
                                },
                                style: {
                                    stroke: "#0CD3DB",
                                    fill: "transparent",
                                    lineWidth: 1.5
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    }, {
                        name: "ring5",
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function(params, api) {
                            return {
                                type: 'arc',
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                                    startAngle: (270+-angle) * Math.PI / 180,
                                    endAngle: (40+-angle) * Math.PI / 180
                                },
                                style: {
                                    stroke: "#0CD3DB",
                                    fill: "transparent",
                                    lineWidth: 1.5
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    }, {
                        name: "ring5",
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function(params, api) {
                            return {
                                type: 'arc',
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                                    startAngle: (90+-angle) * Math.PI / 180,
                                    endAngle: (220+-angle) * Math.PI / 180
                                },
                                style: {
                                    stroke: "#0CD3DB",
                                    fill: "transparent",
                                    lineWidth: 1.5
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    }, {
                        name: "ring5",
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function(params, api) {
                            let x0 = api.getWidth() / 2;
                            let y0 = api.getHeight() / 2;
                            let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
                            let point = getCirlPoint(x0, y0, r, (90+-angle))
                            return {
                                type: 'circle',
                                shape: {
                                    cx: point.x,
                                    cy: point.y,
                                    r: 4
                                },
                                style: {
                                    stroke: "#0CD3DB",//粉
                                    fill: "#0CD3DB"
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    }, {
                        name: "ring5",  //绿点
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function(params, api) {
                            let x0 = api.getWidth() / 2;
                            let y0 = api.getHeight() / 2;
                            let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
                            let point = getCirlPoint(x0, y0, r, (270+-angle))
                            return {
                                type: 'circle',
                                shape: {
                                    cx: point.x,
                                    cy: point.y,
                                    r: 4
                                },
                                style: {
                                    stroke: "#0CD3DB",      //绿
                                    fill: "#0CD3DB"
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    }, {
                        name: '吃猪肉频率',
                        type: 'pie',
                        radius: ['58%', '45%'],
                        silent: true,
                        clockwise: true,
                        startAngle: 90,
                        z: 0,
                        zlevel: 0,
                        label: {
                            normal: {
                                position: "center",

                            }
                        },
                        data: [{
                            value: value,
                            name: "",
                            itemStyle: {
                                normal: {
                                    color: { // 完成的圆环的颜色
                                        colorStops: [{
                                            offset: 0,
                                            color: '#34fff8' // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: '#a7fffc' // 100% 处的颜色
                                        }]
                                    },
                                }
                            }
                        },
                            {
                                value: 100-value,
                                name: "",
                                label: {
                                    normal: {
                                        show: false
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: "#021c2c"
                                    }
                                }
                            }
                        ]
                    },

                        {
                            name: "",
                            type: "gauge",
                            radius: "58%",
                            center: ['50%', '50%'],
                            startAngle: 0,
                            endAngle: 359.9,
                            splitNumber: 8,
                            hoverAnimation: true,
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                length: 60,
                                lineStyle: {
                                    width: 5,
                                    color: "#011020"
                                }
                            },
                            axisLabel: {
                                show: false
                            },
                            pointer: {
                                show: false
                            },
                            axisLine: {
                                lineStyle: {
                                    opacity: 0
                                }
                            },
                            detail: {
                                show: false
                            },
                            data: [{
                                value: 0,
                                name: ""
                            }]
                        },

                    ]
                };
                //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
                function getCirlPoint(x0, y0, r, angle) {
                    let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
                    let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
                    return {
                        x: x1,
                        y: y1
                    }
                }
                // function draw(){
                //     angle = angle+3
                //     myEchart.setOption(option, true)
                //     //window.requestAnimationFrame(draw);
                // }
                // setInterval(function() {
                //     //用setInterval做动画感觉有问题
                //     draw()
                // }, 100);
                myEchart.setOption(option,false)
            }
        }
    }
</script>

<style>
    .BMap_cpyCtrl {  /*百度地图logo*/
        display: none;
    }
    .anchorBL {  /*百度地图logo*/
        display: none;
    }
</style>
<style lang="scss" scoped>
    h1,h2,h3,h4,h5,h6{
        font-weight: normal;
    }

        .leaderIndex-wrap{
        width: 100%;
        height: 100%;
        background:url("../../../assets/images/leader-index-bj.jpg") no-repeat center;
        background-size: 100% 100%;
    }
    .leaderIndex-title{
        width: 100%;
        height: 0.46875rem  /* 90/192 */;
        background:url("../../../assets/images/leaderShow-title.png") no-repeat center;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        h1{
            font-size: 0.1146rem  /* 22/192 */;
            color: #eff6ff;
            font-family: '苹方 常规';
            font-weight: normal;
            margin-bottom: 22px;
        }
        .leader-title-left{
            position: absolute;
            left: 0.2083rem  /* 40/192 */;
            top:0.0521rem  /* 10/192 */;
            cursor: pointer;
            h2{
               font-size: 0.0625rem  /* 12/192 */;
                color: #fff;
            }
        }
        .leader-title-right{
            position: absolute;
            right: 0.2083rem  /* 40/192 */;
            top:0.1042rem  /* 20/192 */;
            cursor: pointer;
            h2{
                font-size: 0.0625rem  /* 12/192 */;
                color: #fff;
            }
        }
        .weizhang-content{
            position: absolute;
            right: 0.4167rem  /* 80/192 */;
            top:0.3125rem  /* 60/192 */;
            cursor: pointer;
            h2{
                font-size: 0.0729rem  /* 14/192 */;
                color: #fff;
                max-width: 1.4583rem  /* 280/192 */;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
    .leaderIndex-main{
        width: calc(98% - 0.4167rem  /* 80/192 */);
        height: calc(100% - 0.46875rem );
        margin:0 auto;
        display: flex;
        justify-content: space-between;
    }
    .leader-left-block{
        width: 1.6042rem  /* 308/192 */;
        /*height: 1.4583rem  !* 280/192 *!;*/
        height: calc(33.3% - 0.0521rem);
        background:rgba(61,136,234,0.14);
        border:1px solid #0f2d54;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 0.0521rem  /* 10/192 */;
    }
    .leader-block-title{
        width: 1.4583rem  /* 280/192 */;
        height: 0.25rem  /* 48/192 */;
        background:url("../../../assets/images/leaderShow-block-title.png") no-repeat center;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        h1{
            color: #fff;
            font-size: 0.09375rem  /* 18/192 */;
            font-weight: 600;
        }
    }
    .leader-block-main{
        width: 1.4583rem  /* 280/192 */;
        height: 0.9375rem  /* 180/192 */;
        background:url("../../../assets/images/leaderShow-block-main.png") no-repeat center;
        background-size: 100% 100%;
        margin-top: 0.0521rem  /* 10/192 */;
        display: flex;
        flex-direction: column;
        padding:0.0521rem  /* 10/192 */ 0.1042rem  /* 20/192 */;
        box-sizing: border-box;
        position: relative;
        .moreIcon{
            position: absolute;
            right: 0.15625rem  /* 30/192 */;
            bottom: 0.0521rem  /* 10/192 */;
            cursor: pointer;
            width: 0.1042rem  /* 20/192 */;
            height: 0.1042rem  /* 20/192 */;
        }
        .leader-block-num-box{
            display: flex;
            flex-direction: column;
            margin:0.026rem  /* 5/192 */ 0 0 0.0521rem  /* 10/192 */;
            .leader-block-num-line{
                display: flex;
                align-items: flex-end;
                h1{
                    color:#ffffff;
                    font-size: 0.0729rem  /* 14/192 */;
                    .teshuColor{
                        font-size: 0.1458rem  /* 28/192 */;
                        color: #ffc600;
                    }
                }
            }
            h2{
                color:#fff;
                font-size: 0.0729rem  /* 14/192 */;
            }
        }
    }
    .leaderIndex-main-middle{
        width:5.46875rem  /* 1050/192 */;
        margin:0 0.1042rem  /* 20/192 */;
        height: 100%;
    }
    .waitWork{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .waitWork-block{
            width: 1.125rem  /* 216/192 */;
            height: 0.3021rem  /* 58/192 */;
            background:url("../../../assets/images/wait-bj.png") no-repeat center;
            background-size: 100% 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            img{
                width: 0.125rem  /* 24/192 */;
                height: 0.125rem  /* 24/192 */;
                margin-right: 0.0521rem  /* 10/192 */;
            }
            h1{
                font-size: 0.0833rem  /* 16/192 */;
                color:#fff;
            }
        }
        .show-main-middle-title{
            width:2.09375rem  /* 402/192 */;
            height: 0.2083rem  /* 40/192 */;
            background:url("../../../assets/images/midlle-title-bj.png") no-repeat center;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            h1{
                color:#20fbf4;
                font-size: 0.1042rem  /* 20/192 */;
            }
        }
    }
    .map-box{
        background:rgba(14,32,76,0.6);
        border:1px solid #006fff;
        width: 5.4167rem  /* 1040/192 */;
        margin:0.1042rem  /* 20/192 */ auto 0.0521rem  /* 10/192 */;
        height: 2.8125rem  /* 540/192 */;
        .show-main-middle-inside{
            width: 100%;
            height: 100%;
        }
        .bmView{
            width: 100%;
            height: 100%;
        }
    }
    .leader-tongji-box{
        display: flex;
        width: 100%;
        height:1.1979rem  /* 230/192 */;
        max-height: calc(100% - 3.3229rem  /* 638/192 */ - 0.1042rem  /* 20/192 */);
        justify-content: space-between;
    }
    .leader-tongji-dingdan{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .leader-dingdan-box{
        width: 0.9792rem  /* 188/192 */;
        height: 0.4167rem  /* 80/192 */;
        background:url("../../../assets/images/leader-dingdan-bj.png") no-repeat center;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 0.0521rem  /* 10/192 */;
        h1{
            font-size: 0.0729rem  /* 14/192 */;
            color: #fff;
        }
        .teshuFont{
            font-size: 0.1146rem  /* 22/192 */;
            color: #fff;
        }
    }
    .tclyvEcharts{
        width: 1.1458rem  /* 220/192 */;
        height: 100%;
    }
    .leader-tongji-echarts-box{
        display: flex;
    }
    .logout{
        width: 0.5208rem  /* 100/192 */;
        height: 0.1667rem  /* 32/192 */;
        background: url('../../../assets/images/wait-bj.png') no-repeat center;
        background-size: 100% 100%;
        position: absolute;
        right: 0.667rem  /* 50/75 */;
        top:0.0729rem  /* 14/192 */;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor:pointer;
    }
</style>

 src/components/page/leaderShow/leaderLogin.vue

New file
@@ -0,0 +1,165 @@
<template>
   <div class="leaderLogin-wrap">
      <div class="leaderLogin-main">
         <img class="logoImg" src="../../../assets/images/logoImg.png" alt="">
         <div class="leaderLogin-main-inside">
            <h1>峰峰矿区综合行政执法局智慧泊车平台</h1>
            <div class="leaderLogin-content-bj">
               <h2>用户登录</h2>
               <div class="zhanghuAndMima-box">
                  <el-form :model="loginForm">
                     <el-form-item>
                        <el-input prefix-icon="el-icon-user-solid" v-model="loginForm.loginName"  placeholder="请输入账号">
                        </el-input>
                     </el-form-item>
                     <el-form-item>
                        <el-input type="password" prefix-icon="el-icon-s-cooperation" v-model="loginForm.password"  placeholder="请输入密码"></el-input>
                     </el-form-item>
                     <!--<div class="forgetPassWord-box">
                        <el-checkbox v-model="passWordCheck">记住密码</el-checkbox>
                        <div class="forgetPassWord-box-inside">
                           <h2>忘记密码？</h2>
                        </div>
                     </div>-->
                     <el-form-item>
                        <div class="denglu-box">
                           <el-button @click="loginBtn" class="dengluBtn">登 录</el-button>
                        </div>
                     </el-form-item>
                  </el-form>
               </div>
            </div>
         </div>
      </div>

   </div>
</template>

<script>
    export default {
        name: "login",
        data() {
           return {
              pageConfig: {
                loginDataUrl: this.$systemconfig.basePath + '/user/login'
              },
              passWordCheck:false,
              loginForm:{
                 loginName:'',
                 password:'',
              }
           }
        },
       methods:{
          loginBtn() {
             this.$byutil.postData(this,this.pageConfig.loginDataUrl,this.loginForm,res => {
                 if(res.success) {
                    //this.$message.success(res.message)
                    this.setStore('userinfo',res.obj)
                    this.$router.push({
                       path:'/leaderIndex'
                    })
                 }
             })
          }
       }
    }
</script>

<style lang="scss">
   .zhanghuAndMima-box{
      .el-input__inner{
         background:rgba(24,136,203,0.2);
         border:1px solid #457bff;
         color:#fff;
      }
      .el-checkbox__label{
         color: #fff;
      }
      .el-form-item{
         margin-top: 0.15625rem  /* 30/192 */;
      }
      .el-input__prefix{
         color:#00fffb;
      }
   }
</style>
<style lang="scss" scoped>
  .leaderLogin-wrap{
     width: 100%;
     height: 100%;
     background:url("../../../assets/images/login-bj.jpg") no-repeat center;
     background-size: 100% 100%;
     display: flex;
     justify-content: center;
     .leaderLogin-main{
        width: 60%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
     }
     .logoImg{
        width: 0.78125rem  /* 150/192 */;
        height: 0.78125rem  /* 150/192 */;
     }
     .leaderLogin-main-inside{
        margin-top: 0.09375rem  /* 18/192 */;
        h1{
           color: #fff;
           font-size: 0.1875rem  /* 36/192 */;
           line-height: 2;
           font-family: '苹方 中等';
           font-weight: normal;
        }
     }

  }
   .leaderLogin-content-bj{
      width: 3.28125rem  /* 630/192 */;
      height: 2.28125rem  /* 438/192 */;
      background:url('../../../assets/images/login-main-bj.png');
      background-size: 100%;
      margin-top: 0.1042rem  /* 20/192 */;
      padding:0.15625rem  /* 30/192 */;
      box-sizing: border-box;
      h2{
        color:#00fffb;
         font-size:0.1354rem  /* 26/192 */;
         text-align: center;
         line-height: 2;
      }
   }
   .zhanghuAndMima-box{
      width: 80%;
      margin:0 auto;
      margin-top: 0.1042rem  /* 20/192 */;
   }
   .denglu-box{
      width: 80%;
      margin:0.1042rem  /* 20/192 */ auto 0 ;
      background:transparent;
      border:1px solid #00fffb;
      border-radius: 4px;
      .dengluBtn{
         background:transparent;
         border:none;
         color:#ffffff;
         font-size:0.1146rem  /* 22/192 */;
         width: 100%;
         text-align: center;
      }
   }
   .forgetPassWord-box{
      display: flex;
      justify-content: space-between;
      margin-top: 0.0521rem  /* 10/192 */;
   }
   .forgetPassWord-box-inside{
      cursor: pointer;
      h2{
         font-size: 0.09375rem  /* 18/192 */;
         color: #fff;
      }
   }
</style>

 src/main.js

@@ -30,6 +30,9 @@
    size: 'small'
});

import echarts from 'echarts'
Vue.prototype.$echarts = echarts;

import '@/utils/lib-fiexible'

import {getStore,setStore,removeStore} from "./libs/store";