|
|
@@ -1,5 +1,59 @@
|
|
|
<template>
|
|
|
- 处置力量一张图
|
|
|
+ <BusinessMainCom title="企业一张图">
|
|
|
+ <div class="power">
|
|
|
+ <div class="__gis-business-main_title">数量统计</div>
|
|
|
+ <FocusContentCom class="one">1</FocusContentCom>
|
|
|
+ <div class="__gis-business-main_title">区域分布</div>
|
|
|
+ <FocusContentCom class="two">2</FocusContentCom>
|
|
|
+ <div class="__gis-business-main_title">处置力量列表</div>
|
|
|
+ <div class="form">
|
|
|
+ <div class="form-one">
|
|
|
+ <CusFormColumn
|
|
|
+ labelWidth="44"
|
|
|
+ :span="24"
|
|
|
+ link="select"
|
|
|
+ label="区域:"
|
|
|
+ v-model:param="power.tempForm.area"
|
|
|
+ static
|
|
|
+ :options="[]"
|
|
|
+ />
|
|
|
+ <CusFormColumn
|
|
|
+ labelWidth="44"
|
|
|
+ :span="24"
|
|
|
+ link="select"
|
|
|
+ label="状态:"
|
|
|
+ v-model:param="power.tempForm.status"
|
|
|
+ static
|
|
|
+ :options="[]"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="form-two">
|
|
|
+ <CusFormColumn
|
|
|
+ labelWidth="44"
|
|
|
+ :span="24"
|
|
|
+ label="搜索:"
|
|
|
+ v-model:param="power.tempForm.text"
|
|
|
+ />
|
|
|
+ <div class="__cus-buttons-2">
|
|
|
+ <div class="__cus-button-submit __hover" @click="onSearch">搜索</div>
|
|
|
+ <div class="__cus-button-cancel __hover" @click="onReset">重置</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="table">
|
|
|
+ <CusTable
|
|
|
+ ref="ref_cusTable"
|
|
|
+ :tableData="power.table.data"
|
|
|
+ :tableHead="power.table.head"
|
|
|
+ :total="power.table.total"
|
|
|
+ :page="power.table.pageNum"
|
|
|
+ :pageSize="power.table.pageSize"
|
|
|
+ @handlePage="handlePage"
|
|
|
+ >
|
|
|
+ </CusTable>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </BusinessMainCom>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
@@ -18,25 +72,126 @@ import {
|
|
|
import {useStore} from 'vuex'
|
|
|
import {useRouter, useRoute} from 'vue-router'
|
|
|
import {ElMessage, ElMessageBox} from "element-plus";
|
|
|
+import BusinessMainCom from '../common/business-main.vue'
|
|
|
+import FocusContentCom from '../common/focus-content.vue'
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: '',
|
|
|
- components: {},
|
|
|
+ components: {
|
|
|
+ BusinessMainCom,
|
|
|
+ FocusContentCom,
|
|
|
+ },
|
|
|
props: {},
|
|
|
setup(props, {emit}) {
|
|
|
const store = useStore();
|
|
|
const router = useRouter();
|
|
|
const route = useRoute();
|
|
|
const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
|
|
|
- const state = reactive({})
|
|
|
+ const state = reactive({
|
|
|
+ power: {
|
|
|
+ form: {},
|
|
|
+ tempForm: {
|
|
|
+ area: '',
|
|
|
+ status: '',
|
|
|
+ text: ''
|
|
|
+ },
|
|
|
+ table: {
|
|
|
+ head: [
|
|
|
+ {value: "name", label: "姓名", show: true,},
|
|
|
+ {value: "phone", label: "联系电话", show: true},
|
|
|
+ {value: "area", label: "管辖区域", show: true},
|
|
|
+ {value: "status", label: "状态", show: true},
|
|
|
+ ],
|
|
|
+ data: <any>[],
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ total: 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ const onSearch = () => {
|
|
|
+ state.power.table.pageNum = 1
|
|
|
+ state.power.form = JSON.parse(JSON.stringify(state.power.tempForm))
|
|
|
+ handleSearch()
|
|
|
+ }
|
|
|
+ const onReset = () => {
|
|
|
+ state.power.tempForm = {
|
|
|
+ area: '',
|
|
|
+ status: '',
|
|
|
+ text: ''
|
|
|
+ }
|
|
|
+ onSearch()
|
|
|
+ }
|
|
|
+ const handleSearch = () => {
|
|
|
+ state.power.table.data = []
|
|
|
+ state.power.table.total = 100
|
|
|
+ for (let i = 0; i < 10; i++) {
|
|
|
+ state.power.table.data.push({
|
|
|
+ name: '张三',
|
|
|
+ phone: '13810101010',
|
|
|
+ area: '海口市',
|
|
|
+ status: '可调度',
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const handlePage = ({page, pageSize}: any) => {
|
|
|
+ state.power.table.pageNum = page
|
|
|
+ state.power.table.pageSize = pageSize
|
|
|
+ handleSearch()
|
|
|
+ }
|
|
|
onMounted(() => {
|
|
|
+ state.power.form = JSON.parse(JSON.stringify(state.power.tempForm))
|
|
|
+ handleSearch()
|
|
|
})
|
|
|
return {
|
|
|
...toRefs(state),
|
|
|
+ onSearch,
|
|
|
+ onReset,
|
|
|
+ handlePage,
|
|
|
}
|
|
|
},
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
+@import "../main";
|
|
|
+.power {
|
|
|
+ flex: 1;
|
|
|
+ padding: 0 12px 10px 12px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ .one {
|
|
|
+ height: 98px;
|
|
|
+ }
|
|
|
+ .two {
|
|
|
+ height: 262px;
|
|
|
+ }
|
|
|
+ .form {
|
|
|
+ :deep(.el-form-item) {
|
|
|
+ margin-bottom: 7px;
|
|
|
+ }
|
|
|
+ .form-one {
|
|
|
+ display: flex;
|
|
|
+ >div {
|
|
|
+ width: calc((100% - 10px) / 2);
|
|
|
+ flex: unset;
|
|
|
+ &:last-child {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .form-two {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ .cus-form-column {
|
|
|
+ flex: 1;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
caozhaorui