<template>
<div class="map-search">
<div class="search">
<!-- 绫诲瀷涓嬫媺妗� -->
<div class="select" @click="showResTypeList">
<span class="name">{{ typeName }}</span>
<i class="arrow"></i>
</div>
<!-- 鏌ヨ鏉′欢 -->
<el-input
class="input"
type="text"
:placeholder="placeholder"
clearable
autocomplete="new-password"
v-model="keywords"
@input="setKeywords"
@keydown.enter.native="search"
@clear="onClearSearch"
/>
<div class="btn" @click="search">鎼滅储</div>
</div>
<div class="tool-btn">
<!-- 璧勬簮鍥惧眰 -->
<div v-if="showResourceLayers" class="types" @click="showStationTypes"></div>
<!-- 璀︽儏涓婃姤棰勮淇℃伅鎻愮ず -->
<div v-if="showIncidents" class="situation" @click="showPoliceIncidents(false)"></div>
<!-- 浜哄憳/璁惧 -->
<div class="dashboard" @click="searchPersonEquip(false)">浜哄憳/璁惧</div>
<!-- 宸￠槻浠〃鐩� -->
<div class="dashboard" @click="showDashboard(false)">宸￠槻浠〃鐩�</div>
</div>
<!-- 閫夋嫨鎼滅储椤圭洰 -->
<transition name="slide-fade">
<div v-show="resTypeListShow" class="res-type-list res-type-list-type">
<el-empty v-if="resTypeList.length <= 0"></el-empty>
<div
v-for="(item, index) in resTypeRoleList"
:key="index"
class="item"
:class="[item.value === type ? 'item-active' : '', item.disabled ? 'item-disabled' : '']"
@click="setType(item.value, index)"
>
<div class="icon" :class="'icon-' + item.value"></div>
<span class="name">{{ item.name }}</span>
</div>
<div class="filter-type">
<!-- 涓翠繚鍛� -->
<el-form v-if="Number(type) === 1 && platform === '3'" class="filter-form" :model="formEmployee">
<el-form-item v-if="isSuperVision" label="杈栧尯" style="padding-top: 6px">
<tree-select
class="tree-select"
:options="departs"
placeholder="璇烽€夋嫨"
:normalizer="normalizer1"
v-model="formEmployee.depart"
noOptionsText="鏃犳暟鎹�"
noResultsText="鏃犳暟鎹�"
@select="onSelectEmployeeDeparts"
/>
</el-form-item>
<el-form-item label="涓翠繚椤圭洰" style="padding-top: 6px">
<tree-select
class="tree-select"
:options="projects"
placeholder="璇烽€夋嫨"
:normalizer="normalizer2"
v-model="formEmployee.project"
noOptionsText="鏃犳暟鎹�"
noResultsText="鏃犳暟鎹�"
@select="onSelectEmployeeProjects"
/>
</el-form-item>
<el-form-item label="浜哄憳绫诲瀷" style="padding-top: 3px" v-if="platform === '3' && orgInstitutional === '0201'">
<div v-if="platform === '3' && orgInstitutional === '0201'" class="checkActWrap">
<el-checkbox
v-if="actEmployeeTypes.length"
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChangeAct"
>鍏ㄩ€�</el-checkbox
>
<!-- <div style="margin: 15px 0"></div> -->
<el-checkbox-group v-model="checkedActEmployeeTypes" @change="handleCheckedCitiesChangeAct">
<el-checkbox v-for="item in actEmployeeTypes" :label="item.code" :key="item.code">{{ item.name }}</el-checkbox>
</el-checkbox-group>
</div>
<el-radio-group v-model="formEmployee.type" v-else>
<el-radio
style="padding-top: 15px; margin-right: 25px"
v-for="item in employeeRolesTypes"
:key="item.name"
:label="item.code"
:disabled="item.disabled"
>{{ item.name }}</el-radio
>
</el-radio-group>
</el-form-item>
<el-form-item label="鍏虫敞绫诲瀷" style="padding-top: 6px">
<el-radio-group v-model="formEmployee.followed">
<el-radio :label="1">鍏ㄩ儴</el-radio>
<el-radio :label="2">宸插叧娉�</el-radio>
<el-radio :label="3">鏈叧娉�</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<!-- 浜哄憳 -->
<el-form v-if="Number(type) === 1 && platform !== '3' && personRoleValid" class="filter-form" :model="formEmployee">
<el-form-item label="绫诲瀷" style="padding-top: 3px">
<el-radio-group v-model="formEmployee.type">
<el-radio
style="padding-top: 15px; margin-right: 25px"
v-for="item in employeeRolesTypes"
:key="item.name"
:label="item.code"
:disabled="item.disabled"
>{{ item.name }}</el-radio
>
</el-radio-group>
</el-form-item>
</el-form>
<!-- 鍗曚綅 -->
<el-form v-if="Number(type) === 2 && companyRoleValid && platform === '1'" class="filter-form" :model="formStation">
<station-types-form
v-if="formStation.type === null || formStation.type === 'Security'"
:station-types="stationTypes"
:is-security="isSecurity"
:is-police-station="isPoliceStation"
@handleCheckChange="handleCheckChange"
></station-types-form>
<el-form-item label="绫诲瀷" style="padding-top: 3px">
<el-radio-group v-model="formStation.type">
<el-radio style="padding-top: 8px" v-for="item in stationRolesTypes" :key="item.code" :label="item.code">{{
item.name
}}</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<!-- 灏佹帶鍦� -->
<el-form v-if="Number(type) === 8 && platform === '1'" class="filter-form" :model="formStation">
<risk-types-form
:risk-types="allRiskTypes"
@handleCheckChange="handleCheckChange"
></risk-types-form>
</el-form>
<!-- 鍐呬繚鍗曚綅 -->
<el-form
v-if="Number(type) === 2 && sysUserInfo.role === 'Proprietor' && platform === '2'"
class="filter-form"
:model="formStation"
>
</el-form>
<!-- 宀楃偣 -->
<el-form v-if="Number(type) === 2 && platform === '3'" class="filter-form" :model="formStation">
<el-form-item v-if="isSuperVision" label="杈栧尯" style="padding-top: 6px">
<tree-select
class="tree-select"
:options="departs"
placeholder="璇烽€夋嫨"
:normalizer="normalizer1"
v-model="formStation.depart"
noOptionsText="鏃犳暟鎹�"
noResultsText="鏃犳暟鎹�"
@select="onSelectStationDeparts"
/>
</el-form-item>
<el-form-item label="涓翠繚椤圭洰" style="padding-top: 6px">
<tree-select
class="tree-select"
:options="projects"
placeholder="璇烽€夋嫨"
:normalizer="normalizer2"
v-model="formStation.project"
noOptionsText="鏃犳暟鎹�"
noResultsText="鏃犳暟鎹�"
@select="onSelectStationProjects"
/>
</el-form-item>
<el-form-item label="绫诲瀷" style="padding-top: 3px" v-if="platform === '3' && orgInstitutional === '0201'">
<div class="checkActWrap">
<el-checkbox
v-if="actEmployeeTypes.length"
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChangeAct"
>鍏ㄩ€�</el-checkbox
>
<!-- <div style="margin: 15px 0"></div> -->
<el-checkbox-group v-model="checkedActEmployeeTypes" @change="handleCheckedCitiesChangeAct">
<el-checkbox v-for="item in actEmployeeTypes" :label="item.code" :key="item.code">{{ item.name }}</el-checkbox>
</el-checkbox-group>
</div>
</el-form-item>
</el-form>
<!-- 浼佷笟 -->
<el-form
v-if="
Number(type) === 3 &&
platform === '2' &&
(sysUserInfo.role === 'PoliceStation' || sysUserInfo.role === 'PopulationPoliceStation')
"
class="filter-form"
:model="formCompany"
>
<el-form-item label="鍐呬繚鍗曚綅绫诲瀷" style="padding-top: 3px">
<el-checkbox :indeterminate="isIndeterminatePro" v-model="checkAllPro" @change="handleCheckAllChangePro"
>鍏ㄩ€�</el-checkbox
>
<el-checkbox-group v-model="formCompany.institutional" @change="handleCheckedCitiesChangePro">
<el-row>
<el-col style="padding-top: 10px" v-for="item in proprietorTypes" :key="item.code" :span="8">
<el-checkbox :label="item.code">
<span style="font-size: 12px; padding-left: 2px">{{ item.name }}</span>
</el-checkbox>
</el-col>
</el-row>
</el-checkbox-group>
</el-form-item>
<el-form-item label="杈栧尯" style="padding-top: 6px">
<tree-select
class="tree-select"
:options="departs"
placeholder="璇烽€夋嫨"
:normalizer="normalizer1"
v-model="formCompany.depart"
noOptionsText="鏃犳暟鎹�"
noResultsText="鏃犳暟鎹�"
@select="onSelectCompanyDeparts"
/>
</el-form-item>
</el-form>
<!-- 鏅鸿兘璁惧 -->
<el-form v-if="Number(type) === 5" class="filter-form" :model="formDevice">
<el-form-item v-if="isSuperVision" label="杈栧尯" style="padding-top: 6px">
<tree-select
class="tree-select"
:options="departs"
placeholder="璇烽€夋嫨"
:normalizer="normalizer1"
v-model="formDevice.depart"
noOptionsText="鏃犳暟鎹�"
noResultsText="鏃犳暟鎹�"
@select="onSelectDeviceDeparts"
/>
</el-form-item>
</el-form>
</div>
</div>
</transition>
<!-- 浜哄憳 -->
<transition name="slide-fade">
<div v-show="empoloyeesResultShow" class="employee-list">
<div ref="employeeRes" class="employee-detail" v-if="Number(type) === 1" v-loading="employeeLoading">
<el-empty v-if="resResult.length <= 0"></el-empty>
<div v-for="(item, index) in resResult" :key="index" class="employee-item" @click="onClickEmployee(item)">
<div class="employee-list-item">
<div class="employee-left">
<div class="name-photo">{{ item.nameSlice }}</div>
<div class="employee-item-detail">
<div class="employee-name">{{ item.name }}</div>
<div class="employee-contact" v-if="platform === '2'">
鎵€灞炲唴淇濆崟浣嶏細
<el-tooltip effect="dark" :content="item.proprietorCompanyName" placement="top">
<span class="item-value">{{ item.proprietorCompanyNameSlice }}</span>
</el-tooltip>
</div>
<div class="employee-contact" v-if="!item.isProprietor && platform !== '3'">
鎵€灞炲叕鍙革細
<el-tooltip effect="dark" :content="item.companyName" placement="top">
<span class="item-value">{{ item.companyNameSlice + (item.institutional === "0104" ? "/鑷嫑" : "") }}</span>
</el-tooltip>
</div>
<div class="employee-contact">
鑱旂郴鏂瑰紡锛�<span class="item-value">{{ item.isContact ? item.contact : "***********" }}</span>
<span class="hide-show" @click.stop="lookContact(index, 'isContact')" v-if="item.isContact">闅愯棌</span>
<span class="hide-show" @click.stop="lookContact(index, 'isContact')" v-if="!item.isContact">鏄剧ず</span>
</div>
<div class="employee-idCardNo">
璇佷欢鍙风爜锛�<span class="item-value">{{ item.isIdCardNo ? item.idCardNo : "******************" }}</span>
<span class="hide-show" @click.stop="lookContact(index, 'isIdCardNo')" v-if="item.isIdCardNo">闅愯棌</span>
<span class="hide-show" @click.stop="lookContact(index, 'isIdCardNo')" v-if="!item.isIdCardNo">鏄剧ず</span>
</div>
<div class="employee-contact" v-if="!item.isProprietor && platform !== '3'">
鎵€灞為┗鍕ょ偣锛�
<el-tooltip effect="dark" :content="item.securityStationName" placement="top">
<span class="item-value">{{ item.stationNameSlice }}</span>
</el-tooltip>
</div>
<div class="employee-contact" v-if="platform === '3'">
鎵€灞炰复淇濋」鐩細
<el-tooltip effect="dark" :content="item.projectName" placement="top">
<span class="item-value">{{ item.projectName }}</span>
</el-tooltip>
</div>
<div class="employee-contact" v-if="platform === '3'">
鎵€灞炰复淇濆矖鐐癸細
<el-tooltip effect="dark" :content="item.stationName" placement="top">
<span class="item-value">{{ item.stationNameSlice }}</span>
</el-tooltip>
</div>
</div>
</div>
<img class="address-icon" src="@/assets/images/map/icons/mark_b.png" alt="" />
</div>
</div>
<div v-if="resResult.length > 0 && !noMore" class="load-more">
<el-button type="primary" size="mini" @click="loadEmployee">鍔犺浇鏇村</el-button>
</div>
</div>
</div>
</transition>
<!-- 鎵у嫟鐐� -->
<transition name="slide-fade">
<div v-show="stationsResultShow" class="employee-list">
<div ref="stationRes" class="employee-detail" v-if="Number(type) === 2" v-loading="stationLoading">
<el-empty v-if="resResult.length <= 0"></el-empty>
<div v-for="(item, index) in resResult" :key="index" class="employee-item" @click="onClickStation(item.id)">
<div class="employee-item-new-main">
<div class="employee-item-new">
<img src="@/assets/images/mapSearch/椹诲嫟鐐瑰浠�.png" alt="" class="employee-item-new-img" />
<div class="employee-item-new-detail">
<div class="employee-new-name">{{ item.name }}</div>
<div class="employee-new-item" style="margin: 9px 0" v-if="platform !== '3'">
椹诲嫟鍦板潃锛�<span class="employee-new-value">{{ item.address }}</span>
</div>
<div class="employee-new-item" v-if="platform !== '3'">
淇濆畨鍏徃锛�<span class="employee-new-value">{{ item.companyName }}</span>
</div>
<div class="employee-new-item" style="margin: 9px 0" v-if="platform === '3'">
涓翠繚宀楃偣鍦板潃锛�<span class="employee-new-value">{{ item.address }}</span>
</div>
<div class="employee-new-item" style="margin: 9px 0" v-if="platform === '3'">
鎵€灞炰复淇濋」鐩細<span class="employee-new-value">{{ item.projectName }}</span>
</div>
<div class="employee-new-item" v-if="platform === '3'">
椤圭洰鎵€灞炲叕鍙革細<span class="employee-new-value">{{ item.companyName }}</span>
</div>
</div>
</div>
<img class="address-icon" src="@/assets/images/map/icons/mark_b.png" alt="" />
</div>
</div>
<div v-if="resResult.length > 0 && !noMore" class="load-more">
<el-button type="primary" size="mini" @click="loadStation">鍔犺浇鏇村</el-button>
</div>
</div>
</div>
</transition>
<!-- 灏佹帶鍦� -->
<transition name="slide-fade">
<div v-show="risksResultShow" class="employee-list">
<div ref="riskRes" class="employee-detail" v-if="Number(type) === 8" v-loading="riskLoading">
<el-empty v-if="resResult.length <= 0"></el-empty>
<div v-for="(item, index) in resResult" :key="index" class="employee-item" @click="onClickRisk(item)">
<div class="employee-item-new-main">
<div class="employee-item-new">
<img src="@/assets/images/mapSearch/椹诲嫟鐐瑰浠�.png" alt="" class="employee-item-new-img" />
<div class="employee-item-new-detail">
<div class="employee-new-name">{{ item.item_zonename }}</div>
<div class="employee-new-item" style="margin: 9px 0">
灏佹帶鍦板潃锛�<span class="employee-new-value">{{ item.item_fulladdress }}</span>
</div>
<div class="employee-new-item">
灏佹帶鏂规鍚嶇О锛�<span class="employee-new-value">{{ item.item_planname }}</span>
</div>
</div>
</div>
<img class="address-icon" src="@/assets/images/map/icons/mark_b.png" alt="" />
</div>
</div>
<div v-if="resResult.length > 0 && !noMore" class="load-more">
<el-button type="primary" size="mini" @click="loadRisk">鍔犺浇鏇村</el-button>
</div>
</div>
</div>
</transition>
<!--鏅鸿兘璁惧-->
<transition name="slide-fade">
<div v-show="devicesResultShow" class="employee-list">
<div ref="deviceRes" class="employee-detail" v-if="Number(type) === 5" v-loading="deviceLoading">
<el-empty v-if="resResult.length <= 0"></el-empty>
<div v-for="(item, index) in resResult" :key="index" class="employee-item" @click="onClickDevice(item.id)">
<div class="employee-item-new-main">
<div class="employee-item-new">
<img src="@/assets/images/mapSearch/鏅鸿兘瀵硅缁堢.png" alt="" class="employee-item-new-img" />
<div class="employee-item-new-detail">
<div class="employee-new-name">{{ item.dispatchNo }}</div>
<div class="employee-new-item" style="margin: 9px 0">
鎵€灞炲叕鍙革細<span class="employee-new-value">{{ item.organizationName }}</span>
</div>
<div class="employee-new-item">
鎵€灞為┗鍕ょ偣锛�<span class="employee-new-value">{{ item.securityStationName }}</span>
</div>
</div>
</div>
<img class="address-icon" src="@/assets/images/map/icons/mark_b.png" alt="" />
</div>
</div>
<div v-if="resResult.length > 0 && !noMore" class="load-more">
<el-button type="primary" size="mini" @click="loadDevice">鍔犺浇鏇村</el-button>
</div>
</div>
</div>
</transition>
<!-- 鍐呬繚鍗曚綅 -->
<transition name="slide-fade">
<div v-show="proprietorResultShow" class="employee-list">
<div ref="proprietorRes" class="employee-detail" v-if="Number(type) === 3" v-loading="proprietorLoading">
<el-empty v-if="resResult.length <= 0"></el-empty>
<div v-for="(item, index) in resResult" :key="index" class="employee-item" @click="onClickProprietor(item)">
<div class="employee-item-new-main">
<div class="employee-item-new">
<img src="@/assets/images/mapSearch/鍐呬繚鍗曚綅.png" alt="" class="employee-item-new-img" width="60" height="60" />
<div class="employee-item-new-detail">
<div class="employee-new-name">{{ item.name }}</div>
<div class="employee-new-item" style="margin: 9px 0">
鍐呬繚鍗曚綅鍦板潃锛�<span class="employee-new-value">{{ item.registerAddress }}</span>
</div>
<div class="employee-new-item">
璐熻矗浜哄憳锛�<span class="employee-new-value">{{ item.legal }}</span>
</div>
</div>
</div>
<img class="address-icon" src="@/assets/images/map/icons/mark_b.png" alt="" />
</div>
</div>
<div v-if="resResult.length > 0 && !noMore" class="load-more">
<el-button type="primary" size="mini" @click="loadProprietor">鍔犺浇鏇村</el-button>
</div>
</div>
</div>
</transition>
<!-- 鎼滆€冨満 -->
<transition name="slide-fade">
<div v-show="examResultShow" class="employee-list">
<div ref="proprietorRes" class="employee-detail" v-if="Number(type) === 7" v-loading="examLoading">
<el-empty v-if="resResult.length <= 0"></el-empty>
<div v-for="(item, index) in resResult" :key="index" class="employee-item" @click="onClickExam(item)">
<div class="employee-item-new-main">
<div class="employee-item-new">
<img src="@/assets/images/mapSearch/鑰冨満-2.png" alt="" class="employee-item-new-img" width="36" height="36" />
<div class="employee-item-new-detail">
<div class="employee-new-name">{{ item.name }}</div>
<div class="employee-new-item" style="margin: 9px 0">
鎵€灞炶€冪偣锛�<span class="employee-new-value">{{ item.examSiteName }}</span>
</div>
<div class="employee-new-item">
鍩硅鏈烘瀯锛�<span class="employee-new-value">{{ item.companyName }}</span>
</div>
</div>
</div>
<img class="address-icon" src="@/assets/images/map/icons/mark_b.png" alt="" />
</div>
</div>
<div v-if="resResult.length > 0 && !noMore" class="load-more">
<el-button type="primary" size="mini" @click="loadExam">鍔犺浇鏇村</el-button>
</div>
</div>
</div>
</transition>
<!-- 鎼滃湴鍧€缁撴灉妗� -->
<transition name="slide-fade">
<div v-show="resResultShow" class="res-type-list res-type-list-result">
<!-- 鍒楄〃 -->
<div class="pois" v-if="Number(type) === 4">
<el-empty v-if="resResult.length <= 0"></el-empty>
<div class="poi" v-for="(item, index) in resResult" :key="index" @click="onClickPoi(item)">
<span class="name">{{ item.name }}</span>
<span class="sub">{{ item.district }}{{ item.address }}</span>
</div>
</div>
</div>
</transition>
<!-- 璧勬簮鍥惧眰 -->
<transition name="slide-fade">
<div v-show="stationTypesShow" class="station-types">
<div class="header">
<span class="title">璧勬簮鍥惧眰</span>
<i class="el-icon-close" @click="stationTypesShow = false"></i>
</div>
<div class="content">
<div class="top">
<i class="location"></i>
<span class="title">椹诲嫟鐐圭被鍨�222</span>
</div>
<el-radio-group v-model="stationType">
<el-row>
<el-col v-for="item in stationTypes.filter((x, i) => i <= 23)" :key="item.code" :span="8">
<el-radio :label="item.code" @change="getStationsByType(item.code)"
><img class="type-icon" :src="item.icon" alt="" /><span>{{ item.name }}</span></el-radio
>
</el-col>
<el-col v-for="item in stationTypes.filter((x, i) => i > 23)" :key="item.code" :span="12">
<el-radio :label="item.code" @change="getStationsByType(item.code)"
><img class="type-icon" :src="item.icon" alt="" /><span>{{ item.name }}</span></el-radio
>
</el-col>
</el-row>
</el-radio-group>
</div>
</div>
</transition>
<transition name="slide-fade">
<div v-show="policeIncidentsShow" class="police-incidents">
<div class="header">
<span class="title">绾跨储涓婃姤</span>
<i class="el-icon-close" @click="policeIncidentsShow = false"></i>
</div>
<div class="list-detail" v-if="isDetail">
<div class="detail-header">
<div class="header-back" @click="goBackList">< {{isJinChengProject ? '杩斿洖绾跨储鍒楄〃' : '杩斿洖璀︽儏鍒楄〃'}}</div>
<div class="header-btn">
<div class="header-zb" @click="railCk">鍛ㄨ竟璋冨害</div>
<div v-if="isSuperVision" class="header-close" @click="closeIncident(policeIncidentsData.id)">鍏抽棴浜嬩欢</div>
</div>
</div>
<div class="detail" v-if="!isJinChengProject">
<div class="detail-item marginbottom11">
<div class="detail-item-title">浜嬩欢绫诲埆锛�</div>
<div class="detail-item-value">
{{ policeIncidentsData.name || "鏃�" }}
</div>
</div>
<div class="detail-item marginbottom11">
<div class="detail-item-title">鎶ヨ瀵硅薄锛�</div>
<div class="detail-item-value color-blue" @click="showEmployeeByIncident(policeIncidentsData.tenantEmployeeId)">
{{ policeIncidentsData.empName || "鏃�" }}
</div>
</div>
<div class="detail-item marginbottom11">
<div class="detail-item-title">鑱旂郴鏂瑰紡锛�</div>
<div class="detail-item-value">
{{ isPhone ? policeIncidentsData.contact : "***********" }}
<span class="hide-show" @click.stop="isPhone = !isPhone" v-if="isPhone">闅愯棌</span>
<span class="hide-show" @click.stop="isPhone = !isPhone" v-if="!isPhone">鏄剧ず</span>
</div>
</div>
<div class="detail-item marginbottom11">
<div class="detail-item-title">涓婃姤鏃堕棿锛�</div>
<div class="detail-item-value">
{{ policeIncidentsData.createdTime || "鏃�" }}
</div>
</div>
<div class="detail-item marginbottom11">
<div class="detail-item-title">浜嬪彂鍦扮偣锛�</div>
<div class="detail-item-value">
{{ policeIncidentsData.address || "鏃�" }}
</div>
</div>
<div class="detail-item marginbottom11">
<div class="detail-item-title">浜嬩欢绫诲瀷锛�</div>
<div class="detail-item-value">
{{ policeIncidentsData.policeEventType || "鏃�" }}
</div>
</div>
<div class="detail-item marginbottom11">
<div class="detail-item-title">浜嬩欢绾у埆锛�</div>
<div class="detail-item-value">
{{ policeIncidentsData.policeEventLevel || "鏃�" }}
</div>
</div>
<div class="detail-item marginbottom11" v-if="policeIncidentsData.name !== '涓€閿姤璀�'">
<div class="detail-item-title">浜嬩欢鎯呭喌锛�</div>
<div class="detail-item-value">
{{ policeIncidentsData.reason || "鏃�" }}
</div>
</div>
<div class="detail-item marginbottom11" v-if="policeIncidentsData.name !== '涓€閿姤璀�'">
<div class="detail-item-title">宸查噰鍙栨帾鏂斤細</div>
<div class="detail-item-value">
{{ policeIncidentsData.actionTaken || "鏃�" }}
</div>
</div>
<div class="detail-item marginbottom11" v-if="policeIncidentsData.name !== '涓€閿姤璀�'">
<div class="detail-item-title">澶勭悊鎯呭喌鍙婂彂灞曡秼鍔匡細</div>
<div class="detail-item-value">
{{ policeIncidentsData.actionTendency || "鏃�" }}
</div>
</div>
<div class="detail-item marginbottom11" v-if="policeIncidentsData.name !== '涓€閿姤璀�'">
<div class="detail-item-title">杩涗竴姝ュ鐞嗘剰瑙侊細</div>
<div class="detail-item-value">
{{ policeIncidentsData.processedSuggestion || "鏃�" }}
</div>
</div>
<div class="detail-item marginbottom11" v-if="policeIncidentsData.name !== '涓€閿姤璀�'">
<div class="detail-item-title">鐜板満璋冨害鎸囧锛�</div>
<div class="detail-item-value">
{{ policeIncidentsData.processedLocaleGuidance || "鏃�" }}
</div>
</div>
</div>
<div class="detail" v-else>
<div class="detail-item marginbottom11">
<div class="detail-item-title">绾跨储鏍囬锛�</div>
<div class="detail-item-value">
{{ policeIncidentsData.name || "鏃�" }}
</div>
</div>
<div class="detail-item marginbottom11">
<div class="detail-item-title">浜嬩欢绫诲瀷锛�</div>
<div class="detail-item-value">
{{ policeIncidentsData.policeEventType || "鏃�" }}
</div>
</div>
<div class="detail-item marginbottom11">
<div class="detail-item-title">涓婃姤瀵硅薄锛�</div>
<div class="detail-item-value color-blue" @click="showEmployeeByIncident(policeIncidentsData.tenantEmployeeId)">
{{ policeIncidentsData.empName || "鏃�" }}
</div>
<div class="detail-item-value" style="margin-left: 5px">
{{ isPhone ? policeIncidentsData.contact : "***********" }}
<span class="hide-show" @click.stop="isPhone = !isPhone" v-if="isPhone">闅愯棌</span>
<span class="hide-show" @click.stop="isPhone = !isPhone" v-if="!isPhone">鏄剧ず</span>
</div>
</div>
<div class="detail-item marginbottom11">
<div class="detail-item-title">涓婃姤鏃堕棿锛�</div>
<div class="detail-item-value">
{{ policeIncidentsData.createdTime || "鏃�" }}
</div>
</div>
<div class="detail-item marginbottom11" v-if="policeIncidentsData.name !== '涓€閿姤璀�'">
<div class="detail-item-title">绾跨储鍐呭锛�</div>
<div class="detail-item-value">
{{ policeIncidentsData.reason || "鏃�" }}
</div>
</div>
<div class="detail-item marginbottom11">
<div class="detail-item-title">绾跨储绾у埆锛�</div>
<div class="detail-item-value">
{{ policeIncidentsData.policeEventLevel || "鏃�" }}
</div>
</div>
</div>
</div>
<div class="border-list" v-if="!isDetail">
<div class="border-status">
<div
class="border-card"
v-for="(item, index) in levelCountTabList"
:key="index"
:name="item.name"
:style="activeTab(item)"
>
<div class="label" slot="label" @click="getPoliceIncidentsByLevel(item.level, 1)">
{{ item.label }}
<div class="value-main">
<span class="value"> {{ item.number }} </span><span class="unit">浠�</span>
</div>
</div>
</div>
</div>
<div class="pi-detail" v-if="policeIncidents.data">
<div v-for="(item, index) in policeIncidents.data" :key="index" :name="item.name" class="pi-detail-list">
<div class="pi-detail-item">
<div class="pi-name">{{ isJinChengProject ? item.policeEventType : item.name }}</div>
<div class="item margin-bottom-11">
{{isJinChengProject ? '涓婃姤瀵硅薄锛�' : '鎶ヨ瀵硅薄锛�'}}
<div class="item-value">
{{ item.empName }}
{{ item.isPoliceContact ? "*************" : item.contact }}
</div>
<span class="hide-show" @click.stop="policeContact(index)" v-if="item.isPoliceContact">鏄剧ず</span>
<span class="hide-show" @click.stop="policeContact(index)" v-if="!item.isPoliceContact">闅愯棌</span>
</div>
<div class="item margin-bottom-11" v-if="!isJinChengProject">浜嬩欢绫诲瀷锛歿{ item.policeEventType }}</div>
<div class="item margin-bottom-11">{{isJinChengProject ? '涓婃姤鏃堕棿锛�' : '浜嬪彂鏃堕棿锛�'}}{{ item.createdTime }}</div>
<div class="item" v-if="!isJinChengProject">浜嬪彂鍦扮偣锛歿{ item.address }}</div>
<div class="item" v-if="isJinChengProject">绾跨储鏍囬锛歿{ item.name }}</div>
</div>
<div class="pi-detail-btn">
<div class="detail-btn" @click="lookDetail(item, false)">璇︽儏</div>
<div v-if="isSuperVision" class="close-btn" @click="closeIncident(item.id)">鍏抽棴</div>
</div>
</div>
<div style="text-align: center">
<el-pagination
small
@current-change="handleCurrentChange"
layout="prev, pager, next"
:current-page="piCurrentPage"
:total="piTotal"
:page-size="piPageSize"
>
</el-pagination>
</div>
</div>
</div>
</div>
</transition>
<!-- 鏌ヨ鎬绘暟缁熻鍊� -->
<div class="total" v-if="Number(type) === 1 && sysUserInfo.role === 'PoliceStation' && platform === '1'">
<span class="label label-green">鎬绘暟</span>
<span class="value value-on">{{ totalNumCount }}</span>
<span class="label label-green">鍦ㄥ矖鏁�</span>
<span class="value value-on">{{ signInCount }}</span>
<span class="label label-gray">绂诲矖鏁�</span>
<span class="value value-off">{{ signOffCount }}</span>
<span class="label label-green">淇濆畨鍛�</span>
<span class="value value-off">{{ securityCount }}</span>
<span class="label label-green" v-if="!this.isJinChengProject">绀句細鍔涢噺</span>
<span class="value value-off" v-if="!this.isJinChengProject">{{ populationCount }}</span>
<span class="label label-gray">鏈縺娲绘暟</span>
<span class="value value-off">{{ noActivation }}</span>
</div>
<div class="total" v-if="Number(type) === 1 && platform === '2'">
<span class="label label-green">鎬绘暟</span>
<span class="value value-on">{{ totalNumCount }}</span>
<span class="label label-green">鍦ㄥ矖鏁�</span>
<span class="value value-on">{{ signInCount }}</span>
<span class="label label-gray">绂诲矖鏁�</span>
<span class="value value-off">{{ signOffCount }}</span>
<span class="label label-green">淇濆畨鍛�</span>
<span class="value value-off">{{ securityCount }}</span>
<span class="label label-green">鐢叉柟绠＄悊鍛�</span>
<span class="value value-off">{{ proprietorCount }}</span>
<span class="label label-gray">鏈縺娲绘暟</span>
<span class="value value-off">{{ noActivation }}</span>
</div>
<div class="total" v-if="Number(type) === 1 && platform === '3'">
<span class="label label-green">鎬绘暟</span>
<span class="value value-on">{{ totalNumCount }}</span>
<span class="label label-green">鍦ㄥ矖鏁�</span>
<span class="value value-on">{{ signInCount }}</span>
<span class="label label-gray">绂诲矖鏁�</span>
<span class="value value-off">{{ signOffCount }}</span>
<span class="label label-gray">鏈縺娲绘暟</span>
<span class="value value-off">{{ noActivation }}</span>
</div>
<div class="total" v-if="Number(type) === 2 && sysUserInfo.role === 'PoliceStation' && platform === '1'">
<span class="label label-green">椹诲嫟鐐�</span>
<span class="value value-off">{{ securityCount }}</span>
<span class="label label-green" v-if="!this.isJinChengProject">绀惧尯璀﹀姟</span>
<span class="value value-off" v-if="!this.isJinChengProject">{{ populationCount }}</span>
<span class="label label-gray">鏃犲潗鏍囨暟</span>
<span class="value value-off">{{ noLonLatCount }}</span>
</div>
<div class="total" v-if="Number(type) === 2 && platform === '3'">
<span class="label label-green">鎬绘暟</span>
<span class="value value-off">{{ securityCount }}</span>
</div>
<div class="total" v-if="Number(type) === 5">
<span class="label label-green">璁惧鎬绘暟</span>
<span class="value value-off">{{ totalNumCount }}</span>
<span class="label label-green" v-if="showDeviceOnline">鍦ㄧ嚎璁惧鏁�</span>
<span class="value value-off" v-if="showDeviceOnline">{{ deviceOnlineCount }}</span>
<span class="label label-gray" v-if="showDeviceOnline">绂荤嚎璁惧鏁�</span>
<span class="value value-off" v-if="showDeviceOnline">{{ deviceOfflineCount }}</span>
</div>
</div>
</template>
<script>
import address from "address";
import treeSelect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { ipLocation, place, getPlaceByTiandi } from "@/api/amap";
import { getStations, getStationDetail, getAllStationTypes } from "@/api/security-station-controller";
import { getAllRiskTypes, getRiskByRiskId, getRiskByName, getRiskByPlanId } from "@/api/risk-circle-controller";
import { getEmployees, getEmployeeDetail } from "@/api/employee-controller";
import { getCompanys } from "@/api/company-controller";
import { getDevices, getDeviceDetail } from "@/api/device-controller";
import { getOrganizationType } from "@/api/resource-controller";
import { getDeparts } from "@/api/departs-controller";
import { getProjects } from "@/api/projects-controller";
import {
getLevelCount,
getPoliceIncidentsNeOver,
policeIncidentsDetail,
policeIncidentsHandle,
policeIncidentsSosHandle,
} from "@/api/police-incident-controller";
import { getCurrentUser } from "@/api/tenant-user-controller";
import { textSlice } from "@/api/common";
import _ from "lodash";
import stationTypesForm from "@/components/StationTypesForm/index.vue";
import riskTypesForm from "@/components/RiskTypesForm/index.vue";
import { getExamSiteRooms } from "@/api/exam-site-room-controller";
export default {
name: "mapSearch",
props: {
sysUserInfo: {
type: Object,
required: true,
}, // sysUserInfo.role[ Urban 甯傚眬锛歋ubUrb 鍒嗗眬锛欳ompany 浼佷笟 PoliceStation锛氬熀灞傛淳鍑烘墍]
type: {
type: [String, Number],
default() {
return 1;
},
},
showResourceLayers: Boolean,
showIncidents: {
type: Boolean,
default: false,
},
mapType: {
type: String,
default: "",
},
},
components: { treeSelect, stationTypesForm, riskTypesForm },
data() {
return {
showDeviceOnline:process.env.VUE_APP_SYSTEM_REGION!=="1405",
actEmployeeTypes: [],
actAllEmployeeTypes: [],
orgInstitutional: "",
checkAll: false,
checkedActEmployeeTypes: [],
isIndeterminate: false,
platform: localStorage.getItem("platform") || "1",
deskTypes:
localStorage.getItem("platform") === "2"
? ["Proprietor"]
: localStorage.getItem("platform") === "3"
? ["TemporarySecurity"]
: ["Normal"],
deskTypesParam: ["TemporarySecurity"], //榛樿涓翠繚璋冨害鍙傛暟
checkAllPro: false,
isCompany: false,
isSecurity: false, //褰撳墠鐢ㄦ埛瑙掕壊鏄惁涓烘不瀹夊競灞€/鍒嗗眬
isPoliceStation: false, //褰撳墠鐢ㄦ埛瑙掕壊鏄惁涓烘淳鍑烘墍
companyTypes: [],
proprietorTypes: [],
proprietorTypesCode: [],
departs: [],
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.code,
label: node.name,
children: node.children,
// isDisabled: !node.selectable,
isDisabled: false,
};
},
normalizer1(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.code,
label: node.name,
children: node.children,
};
},
normalizer2(node) {
// if (node.children && !node.children.length) {
// delete node.children;
// }
return {
id: node.id,
label: node.name + "(" + node.statusLabel + ")",
// children: node.children,
};
},
projects: [],
formDevice: {
depart: null,
superviseDepartIds: [],
},
formCompany: {
institutional: [],
depart: null,
superviseDepartIds: [],
},
resTypeListShow: false,
activeTypeIndex: 0,
resTypeList: [
{
name: "淇濆畨鍛�",
value: 1,
roles: ["Urban", "SubUrb", "Company"],
platform: ["1"],
placeholder: "璇疯緭鍏ヤ繚瀹夊憳璇佷欢鍙锋垨濮撳悕",
},
{
name: "淇濆畨鍛�",
value: 1,
roles: ["Company"],
platform: ["2"],
placeholder: "璇疯緭鍏ヤ繚瀹夊憳璇佷欢鍙锋垨濮撳悕",
},
{
name: "浜哄憳",
value: 1,
roles: ["PoliceStation", "PopulationPoliceStation", "PopulationUrban", "PopulationSubUrb", "Proprietor"],
platform: ["1"],
placeholder: "璇疯緭鍏ヤ汉鍛樿瘉浠跺彿鎴栧鍚�",
},
{
name: "浜哄憳",
value: 1,
roles: [
"Urban",
"SubUrb",
"PoliceStation",
"PopulationPoliceStation",
"PopulationUrban",
"PopulationSubUrb",
"Proprietor",
],
platform: ["2"],
placeholder: "璇疯緭鍏ヤ汉鍛樿瘉浠跺彿鎴栧鍚�",
},
{
name: "涓翠繚鍛�",
value: 1,
roles: ["*"],
platform: ["3"],
placeholder: "璇疯緭鍏ヤ复淇濆憳璇佷欢鍙锋垨濮撳悕",
},
{
name: "椹诲嫟鐐�",
value: 2,
roles: ["Urban", "SubUrb", "Company"],
platform: ["1"],
placeholder: "璇疯緭鍏ラ┗鍕ょ偣鍚嶇О",
},
{
name: "椹诲嫟鐐�",
value: 2,
roles: ["PoliceStation", "PopulationPoliceStation", "Proprietor"],
platform: ["2"],
placeholder: "璇疯緭鍏ラ┗鍕ょ偣鍚嶇О",
},
{
name: "鎵у嫟鐐�",
value: 2,
roles: ["PoliceStation", "PopulationPoliceStation", "PopulationUrban", "PopulationSubUrb", "Proprietor"],
platform: ["1"],
placeholder: "璇疯緭鍏ユ墽鍕ょ偣鍚嶇О",
},
{
name: "灏佹帶鍦�",
value: 8,
roles: ["Urban", "SubUrb", "PoliceStation"],
platform: ["1"],
placeholder: "璇疯緭鍏ュ皝鎺у湀鍚嶇О",
},
{
name: "宀楃偣",
value: 2,
roles: ["*"],
platform: ["3"],
placeholder: "璇疯緭鍏ュ矖鐐瑰悕绉�",
},
{
name: "鍐呬繚鍗曚綅",
value: 3,
roles: [
"Urban",
"SubUrb",
"PoliceStation",
"PopulationPoliceStation",
"PopulationUrban",
"PopulationSubUrb",
"Proprietor",
],
platform: ["2"],
placeholder: "璇疯緭鍏ュ唴淇濆崟浣嶅悕绉�",
},
{
name: "鎼滆€冨満",
value: 7,
roles: ["*"],
platform: ["1"],
placeholder: "璇疯緭鍏ュ悕绉�",
},
{
name: "鎼滃湴鐐�",
value: 4,
roles: ["*"],
platform: ["*"],
placeholder: "璇疯緭鍏ュ湴鐐瑰悕绉�",
},
{
name: "鏅鸿兘璁惧",
value: 5,
roles: ["*"],
platform: ["*"],
// disabled: true,
placeholder: "璇疯緭鍏ユ櫤鑳借澶囧悕绉�",
},
],
keywords: "",
empoloyeesResultShow: false,
stationsResultShow: false,
risksResultShow: false,
devicesResultShow: false,
proprietorResultShow: false,
examResultShow: false,
resResultShow: false,
resResult: [],
policeIncidents: {},
stationTypesShow: false,
policeIncidentsShow: false,
stationType: null,
stationTypes: [],
riskTypes: [],
levelCounts: [],
levelCountTabList: [
{
label: "鐗瑰埆閲嶅ぇ",
number: "0",
name: "greatsCount",
level: "Greats",
bgColor: "#A80000",
},
{
label: "閲嶅ぇ",
number: "0",
name: "greatCount",
level: "Great",
bgColor: "#F48200",
},
{
label: "杈冨ぇ",
number: "0",
name: "moreCount",
level: "More",
bgColor: "#F7BE00",
},
{
label: "涓€鑸�",
number: "0",
name: "comonCount",
level: "Comon",
bgColor: "#00B40C",
},
],
employees: [],
levelIndex: undefined, //璀︽儏涓婃姤閫変腑
isDetail: false, //鏄惁璇︽儏
isFromWarn: false, //true 鏉ヨ嚜鎶ヨ娑堟伅绔嬪嵆澶勭悊 false 鏈湴鎶ヨ娑堟伅鏌ョ湅
currentLevel: "Greats",
policeIncidentsData: {}, //璀︽儏涓婃姤璇︽儏
isPoliceContact: true,
piCurrentPage: 1, //褰撳墠椤�
piTotal: 0, //鍒嗛〉鎬绘潯鏁�
piPageSize: 3, //鍒嗛〉榛樿3鏉�
isPhone: false,
isSuperVision: false, //鏄惁鐩戠璐︽埛 鏄� ture 鍚︼細false
stationCount: 0,
riskCount: 0,
deviceCount: 0,
employeeCount: 0,
companyCount: 0,
stationLoading: false,
riskLoading: false,
deviceLoading: false,
proprietorLoading: false,
examLoading: false,
employeeLoading: false,
stationPageIndex: 1,
riskPageIndex: 1,
proprietorPageIndex: 1,
examPageIndex: 1,
employeePageIndex: 1,
devicePageIndex: 1,
pageSize: 10,
noMore: false,
formEmployee: {
followed: 1,
type: null,
depart: null,
project: null,
projectIds: [],
superviseDepartIds: [],
},
employeeTypes: [
{
code: null,
name: "鍏ㄩ儴",
roles: ["PoliceStation", "PopulationPoliceStation", "Proprietor", "Urban", "SubUrb"],
platform: ["1", "2", "3"],
},
{
code: ["Security"],
name: "淇濆畨鍛�",
roles: ["PoliceStation", "PopulationPoliceStation", "Proprietor"],
platform: ["1", "2"],
},
{
code: ["TemporarySecurity"],
name: "涓翠繚鍛�",
roles: ["PoliceStation", "PopulationPoliceStation", "Urban", "SubUrb"],
platform: ["3"],
},
{
code: ["Population"],
name: "鍏ㄩ儴绀句細鍔涢噺",
roles: ["PoliceStation", "PopulationPoliceStation"],
platform: ["1"],
},
{
code: ["Population", "Security"],
name: "鍏艰亴绀句細鍔涢噺(閮ㄥ垎淇濆畨鍛�)",
roles: ["PoliceStation", "PopulationPoliceStation"],
platform: ["1"],
},
{
code: ["ProfessionalPopulation"],
name: "鍏ㄨ亴绀句細鍔涢噺",
roles: ["PoliceStation", "PopulationPoliceStation"],
platform: ["1"],
},
{
code: ["Proprietor"],
name: "鐢叉柟绠＄悊鍛�",
roles: ["PoliceStation", "PopulationPoliceStation", "Proprietor"],
platform: ["2"],
},
{
code: [""],
name: "鏅鸿兘璁惧鎸佹湁浜�",
roles: ["PoliceStation", "Urban", "SubUrb", "PopulationPoliceStation", "Proprietor"],
platform: ["1", "2", "3"],
disabled: true,
},
],
formStation: {
type: null,
stationTypes: [],
depart: null,
project: null,
projectIds: [],
superviseDepartIds: [],
},
formStationTypes: [
{
code: null,
name: "鍏ㄩ儴",
roles: ["PoliceStation", "PopulationPoliceStation", "Proprietor"],
},
{
code: "Security",
name: "椹诲嫟鐐�",
roles: ["PoliceStation", "PopulationPoliceStation", "Proprietor"],
},
{
code: "Population",
name: "绀惧尯璀﹀姟",
roles: ["PoliceStation", "PopulationPoliceStation", "Proprietor"],
},
],
formRisk: {
type: null,
zoneName: null,
shapeIds: [],
},
};
},
computed: {
loading() {
return this.stationLoading || this.riskLoading || this.examLoading || this.employeeLoading || this.proprietorLoading || this.deviceLoading;
},
isJinChengProject() {
return process.env.VUE_APP_DISPALY_RISK_CIRCLE && process.env.VUE_APP_DISPALY_RISK_CIRCLE === "true"
},
// ...mapState({ poiList: (state) => state.poiList || [] }),
resTypeRoleList() {
const platform = localStorage.getItem("platform") || "1";
if(!this.isJinChengProject){
this.resTypeList = this.resTypeList.filter((resType) => resType.value !== 8);
} else {
this.resTypeList = this.resTypeList.filter((resType) => resType.value !== 7);
}
return this.resTypeList.filter((type) => {
if (type.roles.includes("*") && type.platform.includes("*") && !type.display) {
return type;
} else {
// return type.roles.includes(this.sysUserInfo.role) || type.platform.includes(platform);
if (type.roles.includes(this.sysUserInfo.role)) {
return type.platform.includes(platform) || type.platform.includes("*");
}
if (type.platform.includes(platform)) {
return type.roles.includes(this.sysUserInfo.role) || type.roles.includes("*");
}
}
});
},
stationRolesTypes() {
if(this.isJinChengProject){
this.formStationTypes = this.formStationTypes.filter((resType) => resType.code !== "Population");
}
return this.formStationTypes.filter((type) => type.roles.includes(this.sysUserInfo.role)); // 閫氳繃鐢ㄦ埛瑙掕壊杩囨护鍙€夌殑绫诲瀷
},
employeeRolesTypes() {
if(this.isJinChengProject){
this.employeeTypes = this.employeeTypes.filter((empType) => !empType.code?.includes("Population") && !empType.code?.includes("ProfessionalPopulation"));
}
const platform = localStorage.getItem("platform") || "1";
return this.employeeTypes.filter((type) => type.roles.includes(this.sysUserInfo.role) && type.platform.includes(platform)); // 閫氳繃鐢ㄦ埛瑙掕壊杩囨护鍙€夌殑绫诲瀷
},
typeName() {
return this.resTypeRoleList[this.activeTypeIndex].name;
},
placeholder() {
return this.resTypeRoleList[this.activeTypeIndex].placeholder;
},
activeTab() {
return function ({ bgColor, level }) {
return {
color: "#fff",
background: bgColor,
borderColor: this.currentLevel === level ? "#0e71ff" : "grey",
opacity: this.currentLevel === level ? 1 : 0.4,
};
};
},
disabled() {
return this.stationLoading || this.noMore;
},
totalNumCount() {
return this.resResult.length;
},
signInCount() {
return this.resResult.filter(({ dutyStatus }) => dutyStatus === "SignIn").length;
},
signOffCount() {
return this.resResult.filter(({ dutyStatus }) => dutyStatus === "SignOut").length;
},
deviceOnlineCount() {
return this.resResult.filter(({ status }) => status === "Online").length;
},
deviceOfflineCount() {
return this.resResult.filter(({ status }) => status === "Offline").length;
},
noActivation() {
return this.resResult.filter(({ dutyStatus }) => dutyStatus === "None").length;
},
populationCount() {
return this.resResult.filter(({ rts }) => !rts.includes("Security")).length;
},
proprietorCount() {
return this.resResult.filter(({ rts }) => rts.includes("Proprietor")).length;
},
securityCount() {
return this.resResult.filter(({ rts }) => rts.includes("Security")).length;
},
noLonLatCount() {
return this.resResult.filter(({ longitude, latitude }) => {
return !longitude || !latitude;
}).length;
},
personRoleValid() {
return !["Company", "Urban", "SubUrb", "PopulationSubUrb", "PopulationUrban"].includes(this.sysUserInfo.role);
},
companyRoleValid() {
return !["Company", "Urban", "SubUrb", "PopulationSubUrb", "PopulationUrban", "Proprietor"].includes(this.sysUserInfo.role);
},
allRiskTypes() {
return this.riskTypes.map((item)=>{
return {
code: item.id,
name: item.item_name,
icon: JSON.parse(item.item_icon)[0].path
}
})
}
},
methods: {
showDashboard() {
this.$emit("showDashboard");
},
searchPersonEquip() {
this.$emit("searchPersonEquip");
},
handleCheckAllChangeAct(val) {
this.checkedActEmployeeTypes = val ? this.actEmployeeTypes.map((el) => el.code) : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChangeAct(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.actEmployeeTypes.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.actEmployeeTypes.length;
},
handleCheckChange(val) {
this.type === 8 ? this.formRisk.shapeIds = val : this.formStation.stationTypes = val;
console.log(this.formRisk.shapeIds);
},
handleCheckAllChangePro(val) {
this.formCompany.institutional = val ? this.proprietorTypes.map((x) => x.code) : [];
this.isIndeterminatePro = false;
},
handleCheckedCitiesChangePro(value) {
let checkedCount = value.length;
this.checkAllPro = checkedCount === this.proprietorTypes.length;
this.isIndeterminatePro = checkedCount > 0 && checkedCount < this.proprietorTypes.length;
},
onSelectCompanyDeparts(node) {
if (node?.children?.length > 0) {
const getTail = (item) => (item.children && item.children.length > 0 ? item.children.map((m) => getTail(m)) : [item]);
const result = _.flattenDeep(node.children.map((m) => [m, ...getTail(m)]));
console.log("mapSearch log result", result);
this.formCompany.superviseDepartIds = [node.code, ...result.map((x) => x.code)];
} else {
this.formCompany.superviseDepartIds = [node.code];
}
},
onSelectEmployeeDeparts(node) {
if (node?.children?.length > 0) {
const getTail = (item) => (item.children && item.children.length > 0 ? item.children.map((m) => getTail(m)) : [item]);
const result = _.flattenDeep(node.children.map((m) => getTail(m)));
console.log(" log result", result);
this.formEmployee.superviseDepartIds = [node.code, ...result.map((x) => x.code)];
} else {
this.formEmployee.superviseDepartIds = [node.code];
}
},
onSelectEmployeeProjects(node) {
if (node?.children?.length > 0) {
const getTail = (item) => (item.children && item.children.length > 0 ? item.children.map((m) => getTail(m)) : [item]);
const result = _.flattenDeep(node.children.map((m) => [m, ...getTail(m)]));
console.log(" log result", result);
this.formEmployee.projectIds = [node.code, ...result.map((x) => x.code)];
} else {
this.formEmployee.projectIds = [node.code];
}
},
onSelectStationDeparts(node) {
if (node?.children?.length > 0) {
const getTail = (item) => (item.children && item.children.length > 0 ? item.children.map((m) => getTail(m)) : [item]);
const result = _.flattenDeep(node.children.map((m) => [m, ...getTail(m)]));
console.log(" log result", result);
this.formStation.superviseDepartIds = [node.code, ...result.map((x) => x.code)];
} else {
this.formStation.superviseDepartIds = [node.code];
}
},
onSelectStationProjects(node) {
if (node?.children?.length > 0) {
const getTail = (item) => (item.children && item.children.length > 0 ? item.children.map((m) => getTail(m)) : [item]);
const result = _.flattenDeep(node.children.map((m) => [m, ...getTail(m)]));
console.log(" log result", result);
this.formStation.projectIds = [node.code, ...result.map((x) => x.code)];
} else {
this.formStation.projectIds = [node.code];
}
},
onSelectDeviceDeparts(node) {
if (node?.children?.length > 0) {
const getTail = (item) => (item.children && item.children.length > 0 ? item.children.map((m) => getTail(m)) : [item]);
const result = _.flattenDeep(node.children.map((m) => [m, ...getTail(m)]));
console.log(" log result", result);
this.formDevice.superviseDepartIds = [node.code, ...result.map((x) => x.code)];
} else {
this.formDevice.superviseDepartIds = [node.code];
}
},
parseStringToStar(str) {
if (str) {
return str.length > 2 ? str.substr(0, 2) + new Array(str.length - 2).join("*") + str.substr(-2) : str;
} else {
return "";
}
},
railCk() {
this.$emit("clickRail", this.policeIncidentsData);
},
async init() {
this.stationTypes = await getAllStationTypes({ deskTypes: [] }); //鑾峰彇椹诲嫟鐐逛俊鎭�
this.riskTypes = await getAllRiskTypes({}); //鑾峰彇灏佹帶鍦堜俊鎭�
console.log("riskTypes", this.riskTypes);
if (this.sysUserInfo.role !== "Company") {
this.formEmployee.type = this.employeeRolesTypes[0]?.code;
this.formStation.type = this.stationRolesTypes[0]?.code;
}
const userInfo = localStorage.getItem("userInfo");
let userInfoJson;
if (userInfo) {
userInfoJson = JSON.parse(userInfo);
this.orgInstitutional = userInfoJson.orgInstitutional;
} else {
getCurrentUser().then(async (response) => {
this.orgInstitutional = response.orgInstitutional;
userInfoJson = JSON.stringify(response);
});
}
if (userInfoJson) {
const { superviseDesk, role, organizationId } = userInfoJson;
this.isSuperVision = superviseDesk; //鍒ゆ柇韬唤 ture:鐩戠璐︽埛锛沠alse:浼佷笟璐︽埛
//鍒ゆ柇鏄惁鏄紒涓氭垨鍐呬繚鍗曚綅
if (role === "Company" || role === "Proprietor") {
this.isCompany = true;
}
if (this.platform !== "3") {
this.deskTypesParam = this.isCompany ? ["Normal", "Proprietor"] : this.deskTypes;
}
this.isSecurity = role === "Urban" || role === "SubUrb";
this.isPoliceStation = role === "PopulationPoliceStation" || role === "PoliceStation";
// this.resTypeList.filter((resType) => resType.value === 5)[0].disabled = ![
// "TLK_DMT1", //娴嬭瘯鐜浣跨敤
// "TLK_DMT347", //娴嬭瘯鐜浣跨敤
// "__yUx7oCr0CPEjfFd0T1K",
// "__Ovmh5cBQhH9e6IJtWlz",
// "O7f4fVUf",
// ].includes(organizationId); //濡傛灉褰撳墠缁勭粐鍒欐樉绀烘櫤鑳借澶�
// let disabledOrgId = ![
// "TLK_DMT1", //娴嬭瘯鐜浣跨敤
// "TLK_DMT347", //娴嬭瘯鐜浣跨敤
// "__l4j8hCF7xNmFSRfeQb0",
// "7JXUKfBb",
// "O7f4fVUf",
// "09T9dNBG",
// "VxPArVQC",
// "__iZjB3As6MOfttXkZTXo",
// ].includes(organizationId);
// this.resTypeList.filter((resType) => resType.value === 7).forEach(item=>{
// item.disabled = disabledOrgId;
// });
}
this.companyTypes = await getOrganizationType(); // 鑾峰彇浼佷笟绫诲瀷 {code,name}
this.proprietorTypes = this.companyTypes.filter((item) => item.category === "Proprietor");
this.proprietorTypesCode = this.proprietorTypes.map((item) => {
return item.code;
});
this.departs = await getDeparts({ deskTypes: this.deskTypes }); // 鑾峰彇杈栧尯鏍�
this.projects = await getProjects({
pageIndex: 1,
pageSize: 10000,
forExport: true,
keyword: null,
superviseDepartIds: [],
});
},
//鏄剧ず鎼滅储绫诲瀷淇℃伅
showResTypeList() {
this.resResultShow = false;
this.stationTypesShow = false; //闅愯棌璧勬簮鍥惧眰
this.policeIncidentsShow = false; //闅愯棌璀︽儏涓婃姤
this.empoloyeesResultShow = false; //闅愯棌淇濆畨鍛樺垪琛�
this.stationsResultShow = false; //闅愯棌椹诲嫟鐐瑰垪琛�
this.risksResultShow = false; //闅愯棌椋庢帶鍦堝垪琛�
this.devicesResultShow = false; //闅愯棌璁惧鍒楄〃
this.proprietorResultShow = false; //闅愯棌鍐呬繚鍗曚綅鍒楄〃
this.examResultShow = false; //闅愯棌鑰冨満鍒楄〃
this.resTypeListShow = !this.resTypeListShow; //鎼滅储绫诲瀷
},
setType(type, index) {
this.checkedActEmployeeTypes = [];
this.isIndeterminate = false;
this.checkAll = false;
this.activeTypeIndex = index;
console.log(type);
if (type === 1) {
this.actEmployeeTypes = this.actAllEmployeeTypes.filter((el) => !el.onlyForStation);
} else if (type === 2) {
this.actEmployeeTypes = this.actAllEmployeeTypes;
}
this.$emit("update:type", type);
// this.resTypeListShow = false;
// 绫诲瀷鍒囨崲鍚庣疆绌烘悳绱㈠唴瀹�
this.keywords = "";
this.resResult = [];
this.stationPageIndex = 1;
this.employeePageIndex = 1;
this.devicePageIndex = 1;
this.proprietorPageIndex = 1;
// 娓呯┖鍥炬爣
this.$emit("clearMap");
this.$emit("addPolylineEntity", true);
},
async search() {
if (this.loading) return false;
this.resResult = [];
this.employeePageIndex = 1;
this.devicePageIndex = 1;
this.stationPageIndex = 1;
this.proprietorPageIndex = 1;
const roles1 = ["Urban", "SubUrb", "PopulationUrban", "PopulationSubUrb", "Company"];
if (this.type === 1 && this.platform !== "3") {
if (roles1.includes(this.sysUserInfo.role)) {
if (!this.keywords.trim()) {
this.$message.info("璇疯緭鍏ユ悳绱㈡潯浠�");
return false;
}
}
}
if (this.type === 2 && this.platform !== "3") {
if (roles1.includes(this.sysUserInfo.role)) {
if (!this.keywords.trim()) {
this.$message.info("璇疯緭鍏ユ悳绱㈡潯浠�");
return false;
}
}
}
if (this.type === 4 || this.type === 7) {
if (!this.keywords.trim()) {
this.$message.info("璇疯緭鍏ユ悳绱㈡潯浠�");
return false;
}
// this.resResultShow = !!this.keywords;
// this.$store.commit("SET_PLACE_KEYWORDS", this.keywords);
}
this.noMore = false;
this.resTypeListShow = false;
this.resResultShow = false;
this.stationTypesShow = false; //闅愯棌璧勬簮鍥惧眰
this.policeIncidentsShow = false; //闅愯棌璀︽儏涓婃姤
this.$emit("hideAllLayers");
// 娓呯┖鍥炬爣
this.$emit("clearMap");
console.log("type", this.type);
if (this.type === 1) {
//鏌ヨ浜哄憳
await this.searchEmployees();
} else if (this.type === 2) {
// 鏌ヨ鎵у嫟鐐�
await this.searchStations();
} else if (this.type === 3) {
//鏌ヨ鍐呬繚鍗曚綅
await this.searchProprietors();
} else if (this.type === 4) {
// 鏌ヨ鍦扮偣
await this.getPlace();
} else if (this.type === 5) {
// 鎼滄櫤鑳借澶�
await this.searchDevices();
} else if (this.type === 7) {
// 鎼滆€冨満
await this.getExam();
} else if (this.type === 8) {
// 鎼滃皝鎺у湀
await this.searchRisks();
}
this.$emit("addPolylineEntity");
},
setKeywords() {
this.employeePageIndex = 1;
this.devicePageIndex = 1;
this.stationPageIndex = 1;
this.proprietorPageIndex = 1;
},
onClearSearch() {
this.empoloyeesResultShow = false;
this.stationsResultShow = false;
this.risksResultShow = false;
this.devicesResultShow = false;
this.proprietorResultShow = false;
this.examResultShow = false; //闅愯棌鑰冨満鍒楄〃
this.resTypeListShow = false;
this.resResultShow = false;
this.$emit("search", {
type: this.type,
data: [],
});
},
//鏄剧ず椹诲嫟鐐圭被鍨�
async showStationTypes() {
this.stationTypesShow = !this.stationTypesShow;
this.resResultShow = false; //鎼滅储鍦板潃琛�
this.resTypeListShow = false;
this.policeIncidentsShow = false; //闅愯棌璀︽儏涓婃姤
this.empoloyeesResultShow = false; //闅愯棌淇濆畨鍛樺垪琛�
this.stationsResultShow = false; //闅愯棌椹诲嫟鐐瑰垪琛�
this.risksResultShow = false;
this.devicesResultShow = false; //闅愯棌璁惧鍒楄〃
this.proprietorResultShow = false; //闅愯棌鍐呬繚鍗曚綅鍒楄〃
this.examResultShow = false; //闅愯棌鑰冨満鍒楄〃
// 绫诲瀷鍒囨崲鍚庣疆绌烘悳绱㈠唴瀹�
this.keywords = "";
this.$emit("clearMap");
this.$emit("hideAllLayers");
},
//鏍规嵁椹诲嫟鐐圭被鍨嬫煡璇㈤┗鍕ょ偣
async getStationsByType(stationType) {
},
/**
* @闅愯棌鎵€鏈夋悳绱㈢粨鏋滃垪琛ㄦ
*/
hideAllList() {
this.resResultShow = false;
this.resTypeListShow = false;
this.stationTypesShow = false; //闅愯棌璧勬簮鍥惧眰
this.empoloyeesResultShow = false; //闅愯棌淇濆畨鍛樺垪琛�
this.stationsResultShow = false; //闅愯棌椹诲嫟鐐瑰垪琛�
this.risksResultShow = false;
this.devicesResultShow = false; //闅愯棌璁惧鍒楄〃
this.proprietorResultShow = false; //闅愯棌鍐呬繚鍗曚綅鍒楄〃
this.examResultShow = false; //闅愯棌鑰冨満鍒楄〃
this.policeIncidentsShow = false; //闅愯棌璀︽儏涓婃姤鍒楄〃
},
//鏄剧ず璀︽儏涓婃姤
async showPoliceIncidents(alwaysShow) {
if (!alwaysShow) {
this.currentLevel = "Greats";
this.policeIncidentsShow = !this.policeIncidentsShow;
}
// 绫诲瀷鍒囨崲鍚庣疆绌烘悳绱㈠唴瀹�
this.keywords = "";
this.$emit("clearMap");
this.resResultShow = false;
this.resTypeListShow = false;
this.stationTypesShow = false; //闅愯棌璧勬簮鍥惧眰
this.empoloyeesResultShow = false; //闅愯棌淇濆畨鍛樺垪琛�
this.stationsResultShow = false; //闅愯棌椹诲嫟鐐瑰垪琛�
this.risksesultShow = false;
this.devicesResultShow = false; //闅愯棌璁惧鍒楄〃
this.proprietorResultShow = false; //闅愯棌鍐呬繚鍗曚綅鍒楄〃
this.examResultShow = false; //闅愯棌鑰冨満鍒楄〃
this.levelCounts = await getLevelCount(); //鑾峰彇璀︽儏涓婃姤绛夌骇鏁伴噺
console.log("levelCounts", this.levelCounts);
// this.levelCountTabList.forEach((item) => {
// item.number = this.levelCounts[item.name];
// });
for (let key in this.levelCounts) {
const data = this.levelCountTabList.find((x) => x.name === key);
if (data) data.number = this.levelCounts[key];
}
await this.getPoliceIncidentsByLevel(
// this.levelCountTabList[0].level,
this.currentLevel,
1
);
},
//鏍规嵁绾у埆鏄剧ず璀︽儏涓婃姤
async getPoliceIncidentsByLevel(level, currentPage) {
this.isDetail = false;
this.currentLevel = level;
this.policeIncidents = {};
this.piCurrentPage = currentPage;
this.$forceUpdate();
getPoliceIncidentsNeOver({
pageIndex: currentPage,
pageSize: this.piPageSize,
level: level,
status: "None",
})
.then((res) => {
console.log("PoliceIncidents", res);
const { totalCount } = res; //鎬绘暟
this.piTotal = totalCount;
this.policeIncidents = res;
for (let i = 0; i < this.policeIncidents.data.length; i++) {
let item = this.policeIncidents.data[i];
item.isPoliceContact = true;
}
})
.catch((err) => {
console.log(err);
});
},
handleCurrentChange(val) {
this.piCurrentPage = val;
this.getPoliceIncidentsByLevel(this.currentLevel, val);
},
policeContact(index) {
let that = this;
let list = JSON.parse(JSON.stringify(that.policeIncidents.data));
list[index].isPoliceContact = !list[index].isPoliceContact;
this.$nextTick(() => {
that.policeIncidents.data = [];
this.$set(that.policeIncidents, "data", list);
});
console.log(that.policeIncidents.data[index].isPoliceContact);
},
lookContact(index, type) {
console.log(index, type);
this.resResult[index][type] = !this.resResult[index][type];
this.$set(this.resResult, index, this.resResult[index]);
},
loadEmployee() {
if (this.keywords) {
this.noMore = false;
this.employeePageIndex++;
this.searchEmployees();
}
},
//鏌ヨ淇濆畨鍛�
async searchEmployees() {
this.employeeLoading = true;
var followed = null;
if (this.formEmployee.followed == "2") {
followed = true;
} else if (this.formEmployee.followed == "3") {
followed = false;
}
getEmployees({
pageIndex: this.employeePageIndex,
pageSize: this.pageSize,
keyword: this.keywords,
searchModel: this.keywords ? "Keyword" : "SecurityResource",
deskTypes: this.deskTypesParam,
resourceTypes: this.formEmployee.type,
projectId: this.formEmployee.project,
followed: followed,
superviseDepartIds: this.formEmployee.superviseDepartIds,
stationTypes: this.platform === "3" ? this.checkedActEmployeeTypes : [],
})
.then((res) => {
if ([...res].length < this.pageSize) {
this.noMore = true;
} else {
this.employeeCount += [...res].length;
}
const resResult = [...this.resResult, ...res];
this.resResult = resResult.map((item) => {
const { proprietorCompanyName, securityStationName, idCardNo, contact, rts, name, companyName } = item;
const isContact = false;
const isIdCardNo = false;
const type = "employee";
if (this.keywords) {
return {
...item,
type,
isIdCardNo,
isContact,
nameSlice: name.slice(-2),
companyNameSlice: textSlice(companyName),
proprietorCompanyNameSlice: textSlice(proprietorCompanyName),
stationNameSlice: textSlice(securityStationName),
idCardNoHide: this.parseStringToStar(idCardNo),
contactHide: this.parseStringToStar(contact),
isProprietor: !!rts.includes("Proprietor"), //鏄惁鐢叉柟绠＄悊鍛�
};
} else {
return {
...item,
type,
isIdCardNo,
isContact,
};
}
});
this.empoloyeesResultShow = this.keywords !== "";
const roles = ["PoliceStation", "PopulationPoliceStation", "PopulationUrban", "PopulationSubUrb", "Proprietor"];
if ((!this.keywords && roles.includes(this.sysUserInfo.role)) || this.platform === "3") {
this.$emit("search", {
type: 1,
data: this.resResult,
keywords: this.keywords
});
}
})
.catch((err) => {
console.log(err);
})
.finally(() => {
this.employeeLoading = false;
if (this.resResult.length >= 10) {
this.$nextTick(() => {
this.scrollToBottom("employeeRes");
});
}
});
},
//鏌ヨ椹诲嫟鐐�
async searchStations() {
this.stationLoading = true;
getStations({
pageIndex: this.stationPageIndex,
pageSize: this.pageSize,
searchModel: this.keywords ? "Name" : "SecurityResource",
deskTypes: this.deskTypesParam,
stationTypes:
this.platform === "3" && this.orgInstitutional === "0201"
? this.checkedActEmployeeTypes
: this.formStation.type === "Security"
? this.formStation.stationTypes
: [],
keyword: this.keywords,
resourceType: this.keywords ? null : this.formStation.type,
projectId: this.formStation.project,
superviseDepartIds: this.formStation.superviseDepartIds,
})
.then((res) => {
console.log(res);
if ([...res].length < this.pageSize) {
this.noMore = true;
} else {
this.stationCount += [...res].length;
}
this.resResult = [...this.resResult, ...res];
this.stationsResultShow = this.keywords !== "";
if (!this.keywords || this.platform === "3") {
this.$emit("search", {
type: 2,
data: this.resResult.map((res) => {
return { ...res, type: "station" };
}),
keywords: this.keywords
});
}
})
.catch((err) => {
console.log(err);
})
.finally(() => {
this.stationLoading = false;
this.$nextTick(() => {
this.scrollToBottom("stationRes");
});
});
},
//鏌ヨ椋庢帶鍦�
async searchRisks() {
this.riskLoading = true;
getRiskByName({
zoneName: this.keywords,
shapeIds: this.formRisk.shapeIds,
})
.then((res) => {
console.log(res);
if ([...res].length < this.pageSize) {
this.noMore = true;
} else {
this.riskCount += [...res].length;
}
this.resResult = [...this.resResult, ...res];
this.$emit("search", {
type: 8,
data: this.resResult.map((res) => {
return {
...res,
longitude: res.item_attendancesitelongitude,
latitude: res.item_attendancesitelatitude,
type: "risk"
};
}),
keywords: ''
});
})
.catch((err) => {
console.log(err);
})
.finally(() => {
this.riskLoading = false;
this.$nextTick(() => {
this.scrollToBottom("riskRes");
});
});
},
loadStation() {
console.log(this.keywords);
if (this.keywords) {
this.noMore = false;
this.stationPageIndex++;
this.searchStations();
}
},
loadRisk() {
console.log(this.keywords);
if (this.keywords) {
this.noMore = false;
this.riskPageIndex++;
this.searchRisks();
}
},
loadDevice() {
if (this.keywords) {
this.noMore = false;
this.devicePageIndex++;
this.searchDevices();
}
},
//鏌ヨ鏅鸿兘璁惧
async searchDevices() {
this.deviceLoading = true;
getDevices({
pageIndex: this.devicePageIndex,
pageSize: this.pageSize,
searchModel: this.keywords ? "Keyword" : "SecurityResource",
deskTypes: this.deskTypesParam,
superviseDepartIds: this.formDevice.superviseDepartIds,
keyword: this.keywords,
})
.then((res) => {
console.log(res);
if ([...res].length < this.pageSize) {
this.noMore = true;
} else {
this.deviceCount += [...res].length;
}
this.resResult = [...this.resResult, ...res];
this.devicesResultShow = this.keywords !== "";
if (!this.keywords) {
this.$emit("search", {
type: 5,
data: this.resResult.map((res) => {
return { ...res, type: "device" };
}),
});
}
})
.catch((err) => {
console.log(err);
})
.finally(() => {
this.deviceLoading = false;
this.$nextTick(() => {
this.scrollToBottom("deviceRes");
});
});
},
//鏌ヨ鍐呬繚鍗曚綅
async searchProprietors() {
this.proprietorLoading = true;
console.log("institutional", this.formCompany.institutional);
let institutional = this.proprietorTypesCode;
if (this.formCompany.institutional && this.formCompany.institutional.length > 0) {
institutional = this.formCompany.institutional;
}
getCompanys({
pageIndex: 1,
pageSize: 5,
institutionals: institutional,
keyword: this.keywords,
searchModel: this.keywords ? "Keyword" : "SecurityResource",
superviseDepartIds: this.formCompany.superviseDepartIds,
deskTypes: this.isCompany ? ["Normal", "Proprietor"] : this.deskTypes,
})
.then((res) => {
console.log(res);
if ([...res].length < this.pageSize) {
this.noMore = true;
} else {
this.companyCount += [...res].length;
}
this.resResult = [...this.resResult, ...res];
this.proprietorResultShow = this.keywords !== "";
if (!this.keywords) {
this.$emit("search", {
type: 3,
data: this.resResult.map((res) => {
return { ...res, type: "company" };
}),
});
}
})
.catch((err) => {
console.log(err);
})
.finally(() => {
this.proprietorLoading = false;
this.$nextTick(() => {
this.scrollToBottom("proprietorRes");
});
});
},
loadProprietor() {
console.log(this.keywords);
if (this.keywords) {
this.noMore = false;
this.proprietorPageIndex++;
this.searchProprietors();
}
},
scrollToBottom(name) {
const container = this.$refs[name];
console.log(container.scrollHeight);
container.scrollTop = container.scrollHeight;
},
//鏌ヨ鍦板潃
async getPlace() {
if (this.mapType === "tianditu") {
const params = {
keyWord: this.keywords,
mapBound: "-180,-90,180,90",
level: 12,
queryType: 1,
start: 0,
count: 10,
};
const { data } = await getPlaceByTiandi(params);
if (data?.status?.infocode === 1000) {
if (data.pois) {
this.resResult = data.pois.map((poi) => {
return { ...poi, type: "location", tel: poi.phone, location: poi.lonlat, id: poi.hotPointID };
});
this.resResultShow = true;
this.$emit("search", {
type: 4,
data: this.resResult,
});
}
}
} else {
const city = (await ipLocation(address.ip())) || "鍘﹂棬";
console.log(city);
place({
keywords: this.keywords,
offset: 10,
city,
})
.then((res) => {
console.log("placeRes", res);
const { status, data } = res;
if (status === 200) {
console.log("poidata", data);
// if (data.infocode === "10044") {
// this.$message({
// message: "鎼滃湴鐐硅揪鍒颁粖鏃ラ檺棰濓紒",
// type: "warning",
// });
// return;
// }
if (data.tips) {
this.resResult = data.tips
.map((poi) => {
return { ...poi, type: "location" };
})
.filter((x) => typeof x.id === "string");
console.log("locationresResult", this.resResult);
this.resResultShow = true;
this.$emit("search", {
type: 4,
data: this.resResult,
});
}
}
})
.catch((err) => {
console.log(err);
});
}
},
onClickEmployee(employee) {
if (employee.longitude && employee.latitude) {
//鏈夌粡绾害
// 娓呯┖鍥炬爣
this.$emit("clearMap");
console.log(employee);
this.hideAllList();
this.$emit("clickEmployee", employee, "isBack");
this.$emit("addPolylineEntity");
} else {
this.$message({
message: "璇ヤ汉鍛樻湭瀹屾垚绛惧埌锛屾棤浣嶇疆鍧愭爣锛�",
type: "warning",
});
}
},
onClickStation(stationId) {
console.log("stationId", stationId);
getStationDetail(stationId)
.then((station) => {
console.log("station", station);
if (station) {
const { longitude, latitude } = station;
if (longitude && latitude) {
//鏈夌粡绾害
this.$emit("clickStation", station, "station");
// 娓呯┖鍥炬爣
this.$emit("clearMap");
this.hideAllList();
this.$emit("addPolylineEntity");
} else {
this.$message({
message: "璇ラ┗鍕ょ偣鏈畬鍠勪綅缃潗鏍囷紒",
type: "warning",
});
}
}
})
.catch((err) => {
console.log(err);
});
},
onClickRisk(item) {
console.log("riskId", item);
if(!item.item_planid) {
this.$message({
message: "鏈壘鍒板叧鑱旀柟妗坕d锛�",
type: "warning",
});
return
}
getRiskByRiskId({
planId: item.item_planid, //鏂规id
zoneId: item.item_zoneid //灏佹帶鍦坕d
})
.then((risk) => {
console.log("risk", risk);
if (risk) {
const { item_attendancesitelongitude, item_attendancesitelatitude } = risk[0];
if (item_attendancesitelongitude && item_attendancesitelatitude) {
//鏈夌粡绾害
this.$emit("clickRisk", risk[0], "risk");
// 娓呯┖鍥炬爣
this.$emit("clearMap");
this.hideAllList();
this.$emit("addPolylineEntity");
} else {
this.$message({
message: "璇ュ皝鎺у湀鏈畬鍠勪綅缃潗鏍囷紒",
type: "warning",
});
}
}
})
.catch((err) => {
console.log(err);
});
},
onClickDevice(deviceId) {
console.log("deviceId", deviceId);
getDeviceDetail(deviceId)
.then((device) => {
console.log("device", device);
if (device) {
const { longitude, latitude } = device;
if (longitude && latitude) {
//鏈夌粡绾害
this.$emit("clickDevice", device);
// 娓呯┖鍥炬爣
this.$emit("clearMap");
this.hideAllList();
} else {
this.$message({
message: "璇ユ櫤鑳借澶囨湭瀹屽杽浣嶇疆鍧愭爣锛�",
type: "warning",
});
}
}
})
.catch((err) => {
console.log(err);
});
},
onClickProprietor(company) {
console.log("company", company);
if (company) {
if (company.longitude && company.latitude) {
//鏈夌粡绾害
this.$emit("clickCompany", company, "company");
// 娓呯┖鍥炬爣
this.$emit("clearMap");
this.hideAllList();
} else {
this.$message({
message: "璇ュ唴淇濆崟浣嶆湭瀹屽杽浣嶇疆鍧愭爣锛�",
type: "warning",
});
}
}
},
// * 鎼滆€冨満
loadExam() {
if (this.keywords) {
this.noMore = false;
this.examPageIndex++;
this.getExam();
}
},
async getExam() {
this.examLoading = true;
getExamSiteRooms({
pageIndex: 1,
pageSize: this.examPageIndex,
forExport: false,
searchModel: "Keyword",
keyword: this.keywords,
})
.then((res) => {
console.log(res);
if ([...res].length < this.pageSize) {
this.noMore = true;
}
this.resResult = [...this.resResult, ...res];
this.examResultShow = this.keywords !== "";
this.$emit("search", {
type: 7,
data: this.resResult.map((res) => {
return { ...res, type: "exam" };
}),
});
})
.catch((err) => {
this.$emit("search", {
type: 7,
data: [],
});
this.$message.error(err);
})
.finally(() => {
this.examLoading = false;
});
},
// * 鎼滅储缁撴灉鐐瑰嚮鏌愭潯鑰冨満
onClickExam(exam) {
console.log(exam);
if (exam) {
if (exam.longitude && exam.latitude) {
//鏈夌粡绾害
this.$emit("clickExam", exam, "exam");
// 娓呯┖鍥炬爣
this.$emit("clearMap");
this.hideAllList();
} else {
this.$message({
message: "璇ヨ€冨満鏈畬鍠勪綅缃潗鏍囷紒",
type: "warning",
});
}
}
},
onClickPoi(poi) {
// 娓呯┖鍥炬爣
this.$emit("clearMap");
this.hideAllList();
this.$emit("clickPoi", poi);
},
// 鏌ョ湅璇︽儏
lookDetail(item, isFromWarn) {
console.log("item", item);
const { policeEventLevel } = item;
this.isDetail = true;
this.isFromWarn = isFromWarn;
this.levelCountTabList.forEach((temp) => {
if (temp.label === policeEventLevel) {
this.currentLevel = temp.level;
}
});
policeIncidentsDetail(item.id).then((res) => {
this.policeIncidentsData = res;
res['id'] = res.tenantEmployeeId;
this.$emit("showInfo", res, false);
});
},
//鍏抽棴璀︽儏
closeIncident(id) {
this.$confirm("鏄惁纭鍏抽棴浜嬩欢锛屽叧闂簨浠跺悗鍒欓粯璁や簨浠剁姸鎬佷负宸插鐞�", "鎻愮ず", {
confirmButtonText: "纭鍏抽棴",
cancelButtonText: "鍙栨秷",
customClass: "del-model",
type: "warning",
})
.then(() => {
policeIncidentsHandle(id);
this.$message({
type: "success",
message: "鍏抽棴鎴愬姛!",
});
this.showPoliceIncidents(true);
})
.catch(() => {
// this.$message({
// type: 'info',
// message: '宸插彇娑堝叧闂�'
// });
});
},
// 杩斿洖璀︽儏鍒楄〃
goBackList() {
this.isDetail = false;
if (this.isFromWarn) {
//濡傛灉鏄璀﹀鐞嗭紝闇€瑕佸埛鏂伴〉闈�
this.showPoliceIncidents(true);
}
},
showEmployeeByIncident(employeeId) {
getEmployeeDetail(employeeId, this.deskTypes[0])
.then((employee) => {
this.$emit("clickEmployee", employee);
})
.catch((err) => {
console.log(err);
});
},
setActEmployeeTypes(list) {
this.actAllEmployeeTypes = list;
if (this.type == 1) {
this.actEmployeeTypes = list.filter((el) => !el.onlyForStation);
} else if (this.type == 2) {
this.actEmployeeTypes = list;
}
},
},
mounted() {
this.init();
},
};
</script>
<style scoped lang="scss">
@import "src/styles/animation";
.map-search {
position: absolute;
top: 16px;
left: 34px;
.search {
//width: 500px;
//height: 52px;
//background: #FFFFFF;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.0993);
border-radius: 4px 4px 4px 0;
//opacity: 1;
border: 2px solid #3e8dff;
display: flex;
.select {
width: 82px;
height: 48px;
background: #f2f2f2;
border-radius: 2px 2px 2px 2px;
opacity: 1;
display: flex;
align-items: center;
justify-content: center;
//padding: 0 8px;
cursor: pointer;
.name {
//width: 42px;
//height: 17px;
font-size: 14px;
//font-family: PingFangSC-Regular-Regular, PingFangSC-Regular;
font-weight: 400;
color: rgba(0, 0, 0, 0.4019);
//line-height: 17px;
//-webkit-background-clip: text;
//-webkit-text-fill-color: transparent;
margin-right: 8px;
}
.arrow {
display: block;
width: 16px;
height: 16px;
background: url("~@/assets/images/mapSearch/涓嬫媺 1.png") no-repeat center;
}
}
.input {
width: 476px;
height: 48px;
background: #ffffff;
outline: none;
border: 0;
padding: 0 24px;
::v-deep .el-input__inner {
width: 100%;
height: 100%;
border: 0;
}
&:focus {
outline: none;
border: 0;
}
&::placeholder {
color: rgba(0, 0, 0, 0.4);
}
}
.btn {
width: 60px;
//height: 52px;
background: #0e71ff;
border-radius: 0 2px 2px 0;
//opacity: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
font-weight: 400;
color: #ffffff;
cursor: pointer;
}
}
.employee-list {
width: 560px;
height: 510px;
//overflow-y: auto;
//overflow: scroll;
background: #ffffff;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
border-radius: 0 0 8px 8px;
opacity: 1;
border: 2px solid #3e8dff;
position: absolute;
left: 0;
top: 50px;
display: flex;
justify-content: space-between;
/* align-items: center; */
.employee-detail {
width: 100%;
overflow-y: auto;
//padding: 0 24px;
.employee-item {
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
&:hover {
background: rgba(14, 113, 255, 0.1);
}
cursor: pointer;
flex-direction: column;
align-items: center;
padding: 9px 16px;
.employee-name {
font-size: 14px;
font-weight: 400;
}
.employee-contact {
font-size: 12px;
font-weight: 400;
}
.employee-idCardNo {
font-size: 12px;
font-weight: 400;
}
.employee-list-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0;
.employee-left {
display: flex;
align-items: center;
.name-photo {
width: 60px;
height: 60px;
background: #0e71ff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #fff;
}
.employee-item-detail {
margin-left: 12px;
.employee-name {
color: #000000;
font-size: 14px;
}
.employee-contact {
font-size: 14px;
margin-top: 10px;
color: #000000;
display: flex;
align-content: center;
.item-value {
color: #000000;
}
.type-icon {
width: 16px;
height: 16px;
margin-left: 4px;
}
}
.employee-idCardNo {
font-size: 14px;
margin-top: 10px;
color: #000000;
display: flex;
align-content: center;
.item-value {
color: #000000;
}
.type-icon {
width: 16px;
height: 16px;
margin-left: 4px;
}
}
}
}
.address-icon {
width: 24px;
height: 34px;
}
}
.employee-item-new-main {
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 0;
}
.employee-item-new {
display: flex;
align-items: center;
.employee-item-new-img {
width: 60px;
height: 60px;
}
.employee-item-new-detail {
margin-left: 5px;
.employee-new-name {
font-size: 14px;
color: #000000;
}
.employee-new-item {
display: flex;
align-items: center;
font-size: 12px;
color: rgba(0, 0, 0, 0.65);
.mployee-new-value {
color: #000000;
}
}
}
}
.address-icon {
width: 24px;
height: 34px;
}
}
}
.load-more {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 10px 0;
box-sizing: content-box;
}
}
.res-type-list {
width: 558px;
//height: 112px;
background: #ffffff;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
border-radius: 0 0 8px 8px;
opacity: 1;
border: 2px solid #3e8dff;
position: absolute;
left: 0;
top: 50px;
//padding: 0 24px;
display: flex;
justify-content: space-between;
align-items: center;
&-type {
display: flex;
flex-wrap: wrap;
.item {
width: 110px;
height: 94px;
//height: 112px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
padding: 9px 0;
&-active {
background: rgba(0, 0, 0, 0.05);
}
&-disabled {
pointer-events: none;
opacity: 0.3;
}
.icon {
&-1 {
width: 42px;
height: 43px;
background: url("~@/assets/images/mapSearch/淇濆畨浜哄憳.png") no-repeat;
background-size: 100% 100%;
}
&-2 {
width: 42px;
height: 43px;
background: url("~@/assets/images/mapSearch/椹诲嫟鐐瑰浠�.png") no-repeat;
background-size: 100% 100%;
}
&-3 {
width: 42px;
height: 42px;
background: url("~@/assets/images/mapSearch/鍐呬繚鍗曚綅.png") no-repeat;
background-size: 100% 100%;
}
&-4,
&-0 {
width: 42px;
height: 43px;
background: url("~@/assets/images/mapSearch/鎼滃湴鍧€.png") no-repeat;
background-size: 100% 100%;
}
&-5 {
width: 44px;
height: 44px;
background: url("~@/assets/images/mapSearch/鏅鸿兘瀵硅缁堢.png") no-repeat;
background-size: 100% 100%;
}
&-6 {
width: 44px;
height: 44px;
background: url("~@/assets/images/mapSearch/鐢靛瓙鍥存爮.png") no-repeat;
background-size: 100% 100%;
}
&-7 {
width: 44px;
height: 44px;
background: url("~@/assets/images/mapSearch/鎼滆€冨満.png") no-repeat;
background-size: 100% 100%;
}
&-8 {
width: 44px;
height: 44px;
background: url("~@/assets/images/mapSearch/椹诲嫟鐐瑰浠�.png") no-repeat;
background-size: 100% 100%;
}
}
.name {
margin-top: 16px;
}
}
.filter-type {
width: 100%;
margin: 10px;
padding: 13px 0;
border-top: 1px solid #eeeeee;
::v-deep .filter-form {
.el-form-item {
// padding-top: 10px;
width: 100%;
//border-top: 1px solid #eeeeee;
margin-bottom: 10px;
&.is-last {
border-top: 0;
}
&.center {
width: 100%;
display: flex;
justify-content: center;
.btn-full {
width: 428px;
height: 39px;
line-height: 10px;
background: #0e71ff;
&:hover,
&:active {
background: #569bff;
}
.el-loading-spinner {
margin-top: 0;
transform: translate(-26px, -6px);
i {
color: #fff;
}
}
}
}
}
.el-form-item__label {
border-left: 4px solid #0e71ff;
height: 20px;
width: 100%;
padding-left: 12px;
font-size: 14px;
font-weight: 400;
color: #000000;
line-height: 18px;
display: flex;
align-items: center;
margin-bottom: 10px;
}
.el-form-item__content {
padding-left: 4px;
line-height: 1;
}
.type-icon {
width: 16px;
height: 16px;
}
.tree-select {
padding-top: 6px;
width: 477px;
font-size: 14px;
line-height: 35px;
// font-family: PingFang SC-Regular, PingFang SC;
// font-weight: 400;
color: #606266;
.vue-treeselect__placeholder {
line-height: 35px;
}
.vue-treeselect__control {
height: 35px !important;
}
.vue-treeselect__placeholder,
.vue-treeselect__single-value {
line-height: 35px;
}
}
.el-checkbox-group {
.el-row {
//height: 270px;
overflow-y: auto;
overflow-x: hidden;
.el-checkbox {
line-height: 1;
}
}
}
.el-checkbox {
// display: block;
}
}
//.filter-item {
// padding-top: 16px;
// width: 100%;
// border-top: 1px solid #eeeeee;
//}
}
}
&-result {
align-items: unset;
height: auto;
max-height: 460px;
overflow-y: scroll;
padding-top: 8px;
.pois {
width: 100%;
.poi {
width: 100%;
height: 46px;
cursor: pointer;
//padding: 0 24px;
display: flex;
align-items: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
padding: 0 16px;
&:hover {
background: rgba(14, 113, 255, 0.1);
}
.name {
font-size: 14px;
font-weight: 400;
color: #000000;
}
.sub {
margin-left: 16px;
font-size: 12px;
font-weight: 400;
color: rgba(0, 0, 0, 0.65);
}
}
}
}
}
.station-types {
width: 608px;
height: 716px;
background: #ffffff;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
border-radius: 4px 4px 8px 8px;
border: 2px solid #3e8dff;
position: absolute;
top: 68px;
left: 0;
padding: 0 24px;
.header {
height: 54px;
border-bottom: 1px solid #bdcfde;
display: flex;
justify-content: space-between;
align-items: center;
.title {
font-size: 16px;
font-weight: 500;
color: #333333;
}
i {
cursor: pointer;
font-size: 16px;
color: #999999;
}
}
.content {
.top {
display: flex;
align-items: stretch;
justify-content: flex-start;
margin: 16px 0 19px 0;
.location {
width: 22px;
height: 22px;
background: url("~@/assets/images/mapSearch/椹诲嫟鐐圭被鍨�.png") no-repeat;
background-size: 100% 100%;
margin-right: 8px;
}
.title {
font-size: 16px;
font-weight: 500;
color: #0e71ff;
}
}
.type-icon {
width: 16px;
height: 16px;
}
.el-col {
margin-bottom: 24px;
}
::v-deep .el-radio {
display: flex;
align-items: center;
.el-radio__label {
display: flex;
align-items: center;
padding-left: 8px;
font-size: 16px;
color: #666666;
}
}
}
}
.police-incidents {
width: 568px;
height: auto;
background: #ffffff;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
border-radius: 4px 4px 8px 8px;
border: 2px solid #3e8dff;
position: absolute;
top: 58px;
left: 0;
/* padding: 0 24px; */
.header {
height: 54px;
/* border-bottom: 1px solid #bdcfde; */
display: flex;
justify-content: space-between;
align-items: center;
padding: 7px 12px 0 12px;
.title {
font-size: 16px;
font-weight: 500;
color: #333333;
}
i {
cursor: pointer;
font-size: 16px;
color: #999999;
}
}
.border-list {
background: #e6f0ff;
height: 655px;
padding: 7px 12px 12px 12px;
}
.border-status {
display: flex;
align-items: center;
justify-content: space-between;
.border-card {
width: 126px;
height: 64px;
cursor: pointer;
background: #f0f0f0;
border-radius: 4px 4px 0 0;
border: 1px solid #d9d9d9;
/* float: left; */
margin-top: 7px;
padding: 8px;
box-sizing: border-box;
.label {
font-size: 14px;
/* color: #666666; */
font-weight: 500;
}
.value-main {
vertical-align: middle;
.value {
font-size: 28px;
/* color: #666666; */
font-weight: bold;
}
.unit {
font-size: 8px;
/* color: #999999; */
}
}
}
}
.pi-detail {
background: #fff;
border: 1px solid #0e71ff;
height: 570px;
// overflow: scroll;
padding: 0 16px;
.pi-detail-list {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #bdcfde;
padding: 19px 0;
}
.pi-detail-item {
.pi-name {
font-size: 16px;
color: #333333;
font-weight: bold;
margin-bottom: 8px;
}
.item {
display: flex;
align-items: center;
font-size: 14px;
color: #5e5e5e;
.item-value {
color: #333333;
}
.item-icon {
margin-left: 8px;
width: 16px;
height: 16px;
}
}
}
.margin-bottom-11 {
margin-bottom: 11px;
}
.pi-detail-btn {
.detail-btn {
width: 76px;
height: 32px;
background: #0e71ff;
box-shadow: 0 2px 0 0 rgba(5, 145, 255, 0.1);
border-radius: 6px;
opacity: 1;
border: 1px solid rgba(0, 0, 0, 0);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 14px;
color: #ffffff;
}
.close-btn {
width: 76px;
height: 32px;
border-radius: 6px;
opacity: 1;
border: 1px solid #ff4d4f;
font-size: 14px;
color: #ff4d4f;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-top: 16px;
}
}
}
.list-detail {
padding: 0 11px 14px 14px;
.detail-header {
padding-top: 10px;
border-top: 1px solid #bdcfde;
display: flex;
align-items: center;
justify-content: space-between;
.header-back {
font-size: 14px;
color: #0e70ff;
cursor: pointer;
}
.header-btn {
display: flex;
align-items: center;
.header-zb {
width: 76px;
height: 32px;
background: #1677ff;
box-shadow: 0 2px 0 0 rgba(5, 145, 255, 0.1);
border-radius: 6px;
opacity: 1;
border: 1px solid rgba(0, 0, 0, 0);
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
font-size: 14px;
cursor: pointer;
}
.header-close {
width: 76px;
height: 32px;
border-radius: 6px;
border: 1px solid #ff4d4f;
color: #ff4d4f;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
margin-left: 16px;
cursor: pointer;
}
}
}
.detail {
width: 100%;
height: auto;
background: #e6f0ff;
border-radius: 4px;
margin-top: 20px;
padding: 16px 18px;
// overflow: scroll;
.detail-item {
display: flex;
align-items: center;
font-size: 14px;
.detail-item-title {
color: #5e5e5e;
}
.detail-item-value {
color: #333333;
}
.color-blue {
color: #0e70ff;
border-bottom: 1px solid #0e70ff;
cursor: pointer;
}
}
.marginbottom11 {
margin-bottom: 11px;
}
}
}
}
.tool-btn {
//width: 52px;
height: 52px;
position: absolute;
top: 0;
left: 650px;
display: flex;
align-items: center;
.dashboard {
margin-left: 16px;
// width: 2.70833vw;
height: 2.70833vw;
cursor: pointer;
background-color: #8306fb;
color: #fff;
width: 98px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
}
.types {
width: 52px;
height: 52px;
cursor: pointer;
background: url("~@/assets/images/mapSearch/璧勬簮鍥惧眰.png") no-repeat;
background-size: 100% 100%;
margin-right: 20px;
//position: absolute;
//top: 0;
//left: 530px;
}
.situation {
width: 52px;
height: 52px;
cursor: pointer;
background: url("~@/assets/images/mapSearch/璀︽儏涓婃姤.png") no-repeat;
background-size: 100% 100%;
//position: absolute;
//top: 0;
//left: 598px;
}
}
.total {
position: absolute;
right: -100px;
top: 0;
min-width: 152px;
height: 60px;
background: rgba(255, 255, 255, 0.8);
transform: translate(100%, 0);
border-radius: 4px;
border-left: 4px solid #0e70ff;
padding: 0 12px;
display: flex;
align-items: center;
.label {
height: 30px;
font-size: 14px;
font-weight: 400;
color: #333333;
display: flex;
align-items: center;
word-wrap: normal;
white-space: nowrap;
&::before {
content: "";
display: block;
width: 8px;
height: 8px;
background: #0e70ff;
border-radius: 50%;
margin-right: 2px;
}
&-green {
&::before {
background: #60da84;
}
}
&-gray {
&::before {
background: #999999;
}
}
&-green,
&-gray {
margin-left: 10px;
padding-left: 16px;
border-left: 2px solid #b2cce4;
}
&:first-child {
border-left: 0;
padding-left: 0;
}
}
.value {
font-size: 24px;
font-weight: 500;
color: #000000;
margin-left: 8px;
word-wrap: normal;
white-space: nowrap;
}
}
}
.hide-show {
font-size: 14px;
font-family: PingFang SC-Regular, PingFang SC, serif;
font-weight: 400;
color: #0eff56;
cursor: pointer;
padding-left: 5px;
}
.checkActWrap {
max-height: 500px;
width: 100%;
overflow-y: scroll;
padding: 5px 0;
}
</style>