Merge branch 'lbs'

luobisheng

2022-11-04 40eae1097035f908efee59518d0e6c2b2c9a5c2e

Merge branch 'lbs'

 src/views/operate/lawEnforcement/index.vue

@@ -1,122 +1,198 @@
<template>
    <div class="law-enforcement">
        <!-- table表格展示 -->
        <MyTable :tableData="list" :tableOption="tableOption" :totalNum="totalNum" @getCurrentPage="getCurrentPage"
            @openDialog="changeDialog">
            <template #operation="{info}">
                <div class="btn">
                    <!-- 操作区域 -->
                    <!-- {{getData(info)}} -->
                    <span @click="dataView(info)">查看</span>
                </div>
            </template>
        </MyTable>
        <!-- 弹窗 -->
        <div class="dialog">
            <el-dialog v-if="visible" :visible.async="visible" title="问题登记" width="60%" :before-close="handleClose">
                <MyView :viewData=showData />
            </el-dialog>
        </div>
    <div class="user-list">
        <header>
            <div class="header-title">运营管理 >> 巡查执法</div>
        </header>
        <nav>
            <el-tabs v-model="tabActiveName" @tab-click="tabChange">
                <el-tab-pane label="统计报表" name="first"></el-tab-pane>
                <el-tab-pane label="数据反查" name="second"></el-tab-pane>
            </el-tabs>
        </nav>
        <main>
            <div>
                <el-radio v-model="searchModel" label="document">归档查询</el-radio>
                <el-radio v-model="searchModel" label="timely">实时查询</el-radio>
                <label for="searchInput">
                    <span slot="prepend">统计类型：</span>
                    <el-input style="width: 200px" v-model="statisticalType" id="searchInput" placeholder="巡查队员统计"></el-input>
                </label>
            </div>
            <div class="search">
                <label for="inputDate">
                    <span slot="prepend">按年月查询：</span>
                    <el-input style="width: 200px" v-model="year" id="inputDate" placeholder="巡查队员统计"></el-input>
                    <span slot="append"> 年</span>
                </label>
                <span class="month-tag" :class="{ 'month-selected': item.selected }" v-for="item in monthList" :key="item.value" @click="selecteMonth(item)" >
                    {{ item.text }}
                    <span v-if="item.selected" style="font-size: 12px">√</span>
                </span>
                <el-button type="primary" @click="search()">搜索</el-button>
                <el-button type="primary" @click="reset()">重置</el-button>
            </div>
            <el-table :data="tableData"
            style="width: 100%"
            :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}">
                <el-table-column 
                v-for="{prop, label} in tableColumnData" 
                :key="prop" 
                :prop="prop" 
                :label="label"
            ></el-table-column>
            </el-table>
        </main>
    </div>
</template>
<script>
import MyTable from '@/components/Table'
import MyView from './components/dataView'
import MyView from './components/dataView';

export default {
    components: {
        MyTable, MyView
        MyView
    },
    data() {
        return {
            list: [
            searchModel: '',
            statisticalType: '',
            year: '',
            activeName: '',
            tabActiveName: '',
            monthList: [
                {
                    name: '张三',
                    sex: '男',
                    age: '23',
                    'min-width': '10',
                    text: '1月',
                    value: 1,
                    selected: false
                },
                {
                    name: '张四',
                    sex: '男',
                    age: '23',
                    'min-width': '10',
                    text: '2月',
                    value: 2,
                    selected: false
                },
                {
                    name: '丸小儿',
                    sex: '女',
                    age: '11',
                    'min-width': '10',
                    text: '3月',
                    value: 3,
                    selected: false
                },
                {
                    text: '4月',
                    value: 4,
                    selected: false
                },
                {
                    text: '5月',
                    value: 5,
                    selected: false
                },
                {
                    text: '6月',
                    value: 6,
                    selected: false
                },
                {
                    text: '7月',
                    value: 7,
                    selected: false
                },
                {
                    text: '8月',
                    value: 8,
                    selected: false
                },
                {
                    text: '9月',
                    value: 9,
                    selected: false
                },
                {
                    text: '10月',
                    value: 10,
                    selected: false
                },
                {
                    text: '11月',
                    value: 11,
                    selected: false
                },
                {
                    text: '12月',
                    value: 12,
                    selected: false
                }
            ],
            tableOption: {
                group: [
                    {
                        label: '姓名',
                        type: 'text',
                        prop: 'name',
                    },
                    {
                        label: '年龄',
                        type: 'text',
                        prop: 'age',
                    },
                    {
                        label: '性别',
                        type: 'text',
                        prop: 'sex',
                    },
                    {
                        label: '操作',
                        type: 'operation',
                        prop: 'operation',
                        children: [
                            {
                                operationName: '查看',
                                mykey: 'look',
                            },
                            {
                                operationName: '修改',
                                mykey: 'update',
                            }
                        ]
                    },
                ]
            },
            visible: false,
            totalNum: '',
            showData: {},
            tableData: [],
            tableColumnData: [
                {
                    prop: 'name',
                    label: '巡查人员',
                },
                {
                    prop: 'count',
                    label: '巡查次数',
                },
                {
                    prop: 'warnCount',
                    label: '警告数',
                },
                {
                    prop: 'punishCount',
                    label: '处罚数',
                },
                {
                    prop: 'finishCount',
                    label: '交办完成数',
                },
                {
                    prop: 'unfinishedCount',
                    label: '交办未完成数',
                }
            ]
        }
    },
    created() {
        this.totalNum = this.list.length;
    },
    methods: {
        // 关闭对话框
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.visible = false;
                    done();
                })
                .catch(_ => { });
        search() {
            console.log('search');
        },
        // 获取操作结果
        changeDialog({ index, mykey }) {
            console.log(index, mykey);
            this.showData = this.list[index];
            this.visible = true;

        reset() {
            this.year = '';
            this.searchModel = '';
            this.statisticalType = '';
            this.monthList.forEach(item => item.selected = false);
        },
        // 数据展示
        dataView(data) {
            console.log(data);

        selecteMonth(item) {
            item.selected = !item.selected;
        },
        // 获取当前页数据
        getCurrentPage(current) {
            console.log(current);

        tabChange() {

        }
    }
}
</script>
<style lang="scss" scoped>
.user-list {
    text-align: left;
    margin: 10px 20px;
    color: #4b9bb7; 
    
    .header-title {
        line-height: 40px;
    }

    .month-tag {
        margin: 5px;
        padding: 5px;
        border: 1px solid gray;
        border-radius: 10%;
        text-align: center;
    }

    .month-selected {
        border: 1px solid #409EFF;
    }
}
</style>