You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
862 lines
34 KiB
862 lines
34 KiB
<template>
|
|
<!-- 资源监控 入口文件 -->
|
|
<div class="p-pages-box">
|
|
<!-- 页面头部 -->
|
|
<base-header title="资源监控管理"></base-header>
|
|
|
|
<!-- 页面地图 -->
|
|
<div class="p-pages-map">
|
|
<div id="mapDiv" class="amap-container"></div>
|
|
</div>
|
|
|
|
<div class="p-pack-up" @click="pageStatus=!pageStatus">
|
|
<div :class="pageStatus?'close':'show'" class="p-pack-arrow"></div>
|
|
<div class="p-pack-text" v-html="pageStatus?'展开':'收起'"></div>
|
|
</div>
|
|
<!-- <div id="mapDiv"></div>-->
|
|
|
|
<!-- 旅游资源统计 -->
|
|
<base-module id="resourceType" :class="pageStatus?'close-left':'show-left'" name="resourceType">
|
|
<base-module-card cardTitle="旅游资源统计" cardType="normal">
|
|
<base-num-box :bgNum="'7'" :num='resourceTypeData.total' type="green"></base-num-box>
|
|
<base-overflow v-if="resourceTypeData.resultList.length>0" class="p-resource-type" height="calc(100% - 60rem)">
|
|
<div v-for="(item,index) in resourceTypeData.resultList" :key="index">
|
|
<base-card-sub-title :title="item.name" class="m-b-small m-t-large"></base-card-sub-title>
|
|
<el-row :gutter="20">
|
|
<el-col v-for="(cell,index) in item.child" v-if="cell.num > 0" :key="index" :span="12" class="m-b-medium">
|
|
<resource-card :icon="baseUrl+cell.icon" :num="cell.num" :text="cell.text"></resource-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</base-overflow>
|
|
<base-default v-else text="暂无数据"></base-default>
|
|
</base-module-card>
|
|
</base-module>
|
|
|
|
<!-- 客流统计 -->
|
|
<base-module v-if="!resourceStatus" id="resourceFlow" :class="pageStatus?'close-right':'show-right'"
|
|
name="resourceFlow">
|
|
<base-module-card cardTitle="客流统计" cardType="normal">
|
|
<!-- 客流统计数据 -->
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<base-data-icon :num="flowVisitoData.flowNum" iconType="num" text="实时客流" type="blue"></base-data-icon>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<base-data-icon :num="flowVisitoData.dayNum" iconType="flow" text="今日客流"
|
|
type="green"></base-data-icon>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 客流报警数据 -->
|
|
<el-row :gutter="20" class="m-t-small m-b-small">
|
|
<el-col :span="24" class="p-small-table text-center">
|
|
<div :class="'type'+getClass(flowVisitoData.ratio)"><i class="iconfont icon-passenger-flow"></i><span
|
|
class="text"><base-dict :options="dict.type.comfort_match" :value='flowVisitoData.ratio'/></span></div>
|
|
</el-col>
|
|
<!-- <el-col :span="12" class="text-center">-->
|
|
<!-- <base-data-warn :text="flowVisitoData.alertNum==undefined?'0':flowVisitoData.alertNum.toString()"-->
|
|
<!-- type="alarm"></base-data-warn>-->
|
|
<!-- </el-col>-->
|
|
</el-row>
|
|
<!-- 分时段客流统计 -->
|
|
<!-- 分时段客流走势 -->
|
|
<base-module id="FlowTime" class="m-t-large" name="FlowTime" style="height: 13vh">
|
|
<base-echarts1 :propsData="FlowTrendData" type="line"></base-echarts1>
|
|
</base-module>
|
|
<!-- <eCharts :opts="flowVisitoData.eChartOpts" :propsData="flowVisitoData.eChartData"-->
|
|
<!-- style="height: calc(100% - 120rem)"></eCharts>-->
|
|
</base-module-card>
|
|
</base-module>
|
|
|
|
<!-- 车流统计 -->
|
|
<base-module v-if="!resourceStatus" id="resourceCar" :class="pageStatus?'close-right':'show-right'"
|
|
name="resourceCar">
|
|
<base-module-card cardTitle="车流统计" cardType="normal">
|
|
<!-- 车流统计数据 -->
|
|
<car-flow :props-data="CarFlowCountData"></car-flow>
|
|
<!-- 车流报警数据 -->
|
|
<el-row :gutter="20" class="m-t-small m-b-small">
|
|
<el-col :span="24" class="p-small-table text-center">
|
|
|
|
<div :class="'type'+getClass(CarFlowCountData.percentage)"><i class="iconfont icon-passenger-flow"></i><span
|
|
class="text"><base-dict :options="dict.type.comfort_match" :value='CarFlowCountData.percentage'/></span></div>
|
|
|
|
</el-col>
|
|
<!-- <el-col :span="12" class="text-center">-->
|
|
<!-- <base-data-warn :text="CarFlowCountData.warningNum==undefined?'0':CarFlowCountData.warningNum.toString()"-->
|
|
<!-- type="alarm"></base-data-warn>-->
|
|
<!-- </el-col>-->
|
|
</el-row>
|
|
<!-- 分时段车流趋势 -->
|
|
<base-module id="carFlow-trend " class="m-t-large" name="CarFlowTrend " style="height:13vh">
|
|
<base-echarts1 :propsData="CarFlowTrendData" type="line"></base-echarts1>
|
|
</base-module>
|
|
<eCharts :opts="flowCarData.eChartOpts" :propsData="flowCarData.eChartData"
|
|
style="height: calc(100% - 120rem)"></eCharts>
|
|
</base-module-card>
|
|
</base-module>
|
|
|
|
<!-- 资源列表 -->
|
|
<base-module v-if="resourceStatus" id="resourceList" name="resourceList">
|
|
<base-module-card :cardTitle="resourceName" cardType="normal">
|
|
<!-- 资源列表 搜索 -->
|
|
<div class="p-form m-b-mini display-flex p-resource-top-search">
|
|
<div class="p-resource-seek flex-auto">
|
|
<el-input v-model="resourceSearch.resourceName" placeholder="请输入资源名称"></el-input>
|
|
<base-data :text="resourceListTotal" class="p-resource-seek-data"></base-data>
|
|
<div class="p-resource-search-btn" @click="searchFun"><i class="iconfont icon-search"></i></div>
|
|
</div>
|
|
<div class="p-resource-seek-list" @click="getDialog(resourceName,'list')"><i class="iconfont icon-list"></i>
|
|
</div>
|
|
</div>
|
|
<!-- 资源列表 筛选 -->
|
|
<div class="display-flex p-resource-top-filter">
|
|
<el-row :gutter="10">
|
|
<el-col :span="8">
|
|
<tree-select v-model="resourceSearch.insideArea" :options="reousrceIptions" :show-count="true"
|
|
class="p-select" placeholder="区域"/>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-select :popper-append-to-body="false"
|
|
v-if="currentData.dataType == 'scenic' || currentData.dataType == 'fun' || currentData.dataType == 'travel'"
|
|
v-model="resourceSearch.grade" class="p-select " placeholder="等级" clearable>
|
|
<el-option v-for="dict in dict.type.scenic_level" :key="dict.value" :label="dict.label"
|
|
:value="dict.value"/>
|
|
</el-select>
|
|
<el-select :popper-append-to-body="false"
|
|
v-if="currentData.dataType == 'hotel' || currentData.dataType == 'homestay' || currentData.dataType == 'shopping'"
|
|
v-model="resourceSearch.grade" class="p-select " placeholder="等级" clearable>
|
|
<el-option v-for="dict in dict.type.hotel_level" :key="dict.value" :label="dict.label"
|
|
:value="dict.value"/>
|
|
</el-select>
|
|
<el-select :popper-append-to-body="false" clearable v-if="currentData.dataType == 'rural'" v-model="resourceSearch.grade" class="p-select "
|
|
placeholder="等级">
|
|
<el-option v-for="dict in dict.type.rural_level" :key="dict.value" :label="dict.label"
|
|
:value="dict.value"/>
|
|
</el-select>
|
|
<el-select :popper-append-to-body="false" clearable v-if="currentData.dataType == 'food'" v-model="resourceSearch.grade" class="p-select "
|
|
placeholder="等级">
|
|
<el-option v-for="dict in dict.type.food_level" :key="dict.value" :label="dict.label"
|
|
:value="dict.value"/>
|
|
</el-select>
|
|
<el-select :popper-append-to-body="false" clearable v-if="currentData.dataType == 'toilet'" v-model="resourceSearch.grade" class="p-select "
|
|
placeholder="等级">
|
|
<el-option v-for="dict in dict.type.toilet_level" :key="dict.value" :label="dict.label"
|
|
:value="dict.value"/>
|
|
</el-select>
|
|
<el-select :popper-append-to-body="false" clearable v-if="currentData.dataType == 'carpark'" v-model="resourceSearch.grade" class="p-select "
|
|
placeholder="等级">
|
|
<el-option v-for="dict in dict.type.carpark_level" :key="dict.value" :label="dict.label"
|
|
:value="dict.value"/>
|
|
</el-select>
|
|
<el-select :popper-append-to-body="false" clearable v-if="currentData.dataType == 'flower'" v-model="resourceSearch.protectionLevel"
|
|
class="p-select " placeholder="保护等级">
|
|
<el-option v-for="dict in dict.type.flower_level" :key="dict.value" :label="dict.label"
|
|
:value="dict.value"/>
|
|
</el-select>
|
|
<el-select :popper-append-to-body="false" clearable
|
|
v-if="currentData.dataType == 'video' || currentData.dataType == 'passflow' || currentData.dataType == 'broadcast' || currentData.dataType == 'led' || currentData.dataType == 'wifi' || currentData.dataType == 'pole' || currentData.dataType == 'patrol' || currentData.dataType == 'report' || currentData.dataType == 'sos' || currentData.dataType == 'vibe' || currentData.dataType == 'geologi' || currentData.dataType == 'fire' || currentData.dataType == 'intrude'"
|
|
v-model="resourceSearch.devBrand" class="p-select " placeholder="设备品牌">
|
|
<el-option v-for="dict in dict.type.dev_brand_dict" :key="dict.value" :label="dict.label"
|
|
:value="dict.value"/>
|
|
</el-select>
|
|
<el-select :popper-append-to-body="false" clearable v-if="currentData.dataType == 'guide'" v-model="resourceSearch.level" class="p-select "
|
|
placeholder="导游等级">
|
|
<el-option v-for="dict in dict.type.guide_level" :key="dict.value" :label="dict.label"
|
|
:value="dict.value"/>
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-select :popper-append-to-body="false" clearable v-if="currentData.dataType == 'scenic'" v-model="resourceSearch.label"
|
|
class="p-select flex-auto" placeholder="主题类型">
|
|
<el-option v-for="dict in dict.type.scenic_type" :key="dict.value" :label="dict.label"
|
|
:value="dict.value"/>
|
|
</el-select>
|
|
<el-select :popper-append-to-body="false" clearable v-if="currentData.dataType == 'fun'" v-model="resourceSearch.label" class="p-select flex-auto"
|
|
placeholder="主题类型">
|
|
<el-option v-for="dict in dict.type.fun_type" :key="dict.value" :label="dict.label"
|
|
:value="dict.value"/>
|
|
</el-select>
|
|
<el-select :popper-append-to-body="false" clearable v-if="currentData.dataType == 'hotel'" v-model="resourceSearch.label"
|
|
class="p-select flex-auto" placeholder="主题类型">
|
|
<el-option v-for="dict in dict.type.hotel_type" :key="dict.value" :label="dict.label"
|
|
:value="dict.value"/>
|
|
</el-select>
|
|
<el-select :popper-append-to-body="false" clearable v-if="currentData.dataType == 'rural'" v-model="resourceSearch.label"
|
|
class="p-select flex-auto" placeholder="主题类型">
|
|
<el-option v-for="dict in dict.type.rural_type" :key="dict.value" :label="dict.label"
|
|
:value="dict.value"/>
|
|
</el-select>
|
|
<el-select :popper-append-to-body="false" clearable v-if="currentData.dataType == 'homestay'" v-model="resourceSearch.label"
|
|
class="p-select flex-auto" placeholder="主题类型">
|
|
<el-option v-for="dict in dict.type.homestay_type" :key="dict.value" :label="dict.label"
|
|
:value="dict.value"/>
|
|
</el-select>
|
|
<el-select :popper-append-to-body="false" clearable v-if="currentData.dataType == 'food'" v-model="resourceSearch.label" class="p-select flex-auto"
|
|
placeholder="主题类型">
|
|
<el-option v-for="dict in dict.type.food_type" :key="dict.value" :label="dict.label"
|
|
:value="dict.value"/>
|
|
</el-select>
|
|
<el-select :popper-append-to-body="false" clearable v-if="currentData.dataType == 'shopping'" v-model="resourceSearch.label"
|
|
class="p-select flex-auto" placeholder="主题类型">
|
|
<el-option v-for="dict in dict.type.shopping_type" :key="dict.value" :label="dict.label"
|
|
:value="dict.value"/>
|
|
</el-select>
|
|
<el-select :popper-append-to-body="false" clearable v-if="currentData.dataType == 'travel'" v-model="resourceSearch.label"
|
|
class="p-select flex-auto" placeholder="主题类型">
|
|
<el-option v-for="dict in dict.type.travel_type" :key="dict.value" :label="dict.label"
|
|
:value="dict.value"/>
|
|
</el-select>
|
|
<el-select :popper-append-to-body="false" clearable v-if="currentData.dataType == 'toilet'" v-model="resourceSearch.label"
|
|
class="p-select flex-auto" placeholder="主题类型">
|
|
<el-option v-for="dict in dict.type.toilet_type" :key="dict.value" :label="dict.label"
|
|
:value="dict.value"/>
|
|
</el-select>
|
|
<el-select :popper-append-to-body="false" clearable v-if="currentData.dataType == 'carpark'" v-model="resourceSearch.label"
|
|
class="p-select flex-auto" placeholder="主题类型">
|
|
<el-option v-for="dict in dict.type.carpark_type" :key="dict.value" :label="dict.label"
|
|
:value="dict.value"/>
|
|
</el-select>
|
|
<el-select :popper-append-to-body="false" clearable
|
|
v-if="currentData.dataType == 'video' || currentData.dataType == 'passflow' || currentData.dataType == 'broadcast' || currentData.dataType == 'led' || currentData.dataType == 'wifi' || currentData.dataType == 'pole' || currentData.dataType == 'patrol' || currentData.dataType == 'report' || currentData.dataType == 'sos' || currentData.dataType == 'vibe' || currentData.dataType == 'geologi' || currentData.dataType == 'fire' || currentData.dataType == 'intrude'"
|
|
v-model="resourceSearch.devModel" class="p-select " placeholder="规格型号">
|
|
<el-option v-for="dict in dict.type.dev_model_dict" :key="dict.value" :label="dict.label"
|
|
:value="dict.value"/>
|
|
</el-select>
|
|
<el-select :popper-append-to-body="false" clearable v-if="currentData.dataType == 'guide'" v-model="resourceSearch.languages" class="p-select "
|
|
placeholder="服务语种">
|
|
<el-option v-for="dict in dict.type.guide_languages" :key="dict.value" :label="dict.label"
|
|
:value="dict.value"/>
|
|
</el-select>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<base-overflow class="p-resource-type" height="calc(100% - 120rem)">
|
|
<div class="p-resource-list">
|
|
<div v-for="(item,index) in resourceListData" :key="index" class="p-resource-list-item"
|
|
@click="getDialog(item.resourceName,'detail',item.id == undefined ? item.userId : item.id,item)">
|
|
<div class="p-resource-list-img m-r-large">
|
|
<img :src="baseUrl+item.coverImg" :onerror="img404" v-if="item.coverImg">
|
|
<img v-else-if="item.imageUrl" :src="baseUrl+item.imageUrl.split(',')[0]" :onerror="img404">
|
|
<img v-else src="" :onerror="img404">
|
|
</div>
|
|
|
|
<div class="p-resource-list-right">
|
|
<div class="p-resource-list-top">
|
|
<div v-if="currentData.dataType == '01'" class="p-resource-list-title">{{ item.nickName }}</div>
|
|
<div v-else-if="currentData.dataType == 'guide'" class="p-resource-list-title">{{
|
|
item.guideName
|
|
}}
|
|
</div>
|
|
<div v-else-if="currentData.dataType == 'bus' || currentData.dataType == 'car'" class="p-resource-list-title">{{
|
|
item.carNumber
|
|
}}
|
|
</div>
|
|
<div v-else class="p-resource-list-title">{{ item.resourceName }}</div>
|
|
<div class="p-resource-list-level" v-if="item.grade">
|
|
<base-level :level="item.grade" :type="currentData.dataType"></base-level>
|
|
</div>
|
|
<div class="p-resource-list-level" v-if="currentData.dataType=='guide'">
|
|
<base-level :level="item.level" :type="currentData.dataType"></base-level>
|
|
</div>
|
|
</div>
|
|
<div v-if="currentData.dataType == 'guide'" class="p-resource-list-address m-t-mini">{{
|
|
item.telephone
|
|
}}
|
|
</div>
|
|
<div v-else class="p-resource-list-address m-t-mini">{{ item.address }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</base-overflow>
|
|
<!-- 分页 -->
|
|
|
|
<div class="p-pagination">
|
|
<pagination
|
|
:small="false"
|
|
v-show="resourceListTotal-0>0"
|
|
:limit.sync="resourceSearch.pageSize"
|
|
:page.sync="resourceSearch.pageNum"
|
|
:total="resourceListTotal-0"
|
|
:layout="'total, prev, pager, next'"
|
|
@pagination="getresourceListData(path,type)"
|
|
/>
|
|
</div>
|
|
</base-module-card>
|
|
</base-module>
|
|
|
|
<!-- 旅游资源导航 -->
|
|
<base-module name="resourceNav">
|
|
<div id="resourceNav" class="p-resource-nav">
|
|
<div class="p-resource-nav-top">
|
|
<div v-if="navStatus" :class="navPrevStatus" class="p-nav-page-prev" @click="getNavPrev()"></div>
|
|
<div v-if="navStatus" :class="navNextStatus" class="p-nav-page-next" @click="getNavNext()"></div>
|
|
<div class="p-resource-nav-top-inner">
|
|
<div ref="navBox" :style="{left:navMove}" class="p-resource-nav-top-box">
|
|
<template v-if="navClassData!=[]&&navClassActive!=-1">
|
|
<div v-for="(item,index) in navClassData[navClassActive].resourceTypesList" :key="index"
|
|
:class="navListActive == index?'active':''"
|
|
class="p-nav-top-item"
|
|
@click="getResourceList(item.name,item.dataType,index,item.mapIcon,item.interfacePath)">
|
|
<div v-if="!item.classifyIcon" class="p-nav-icon-img"><img
|
|
src="@/assets/test-images/p_bottom_nav_scenic-spot.svg"></div>
|
|
<div v-else class="p-nav-icon-img"><img :src="baseUrl+item.classifyIcon"></div>
|
|
<div class="p-nav-icon-text">{{ item.name }}</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-resource-nav-bottom">
|
|
<div v-for="(item,index) in navClassData" :key="item.id" :class="navClassActive == index?'active':''"
|
|
class="p-nav-btn" @click="getResourceClass(index)">{{ item.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</base-module>
|
|
|
|
<!-- 旅游资源弹窗 -->
|
|
<el-dialog v-if="dialogStatus" :modal="false" :visible.sync="dialogStatus" class="p-dialog">
|
|
<div slot="title" class="p-dialog-title">{{ dialogName }}</div>
|
|
<resoureDialog :code="code" :id="idNumber" :dataType="currentData.dataType" :interfacePath="currentData.interfacePath" :propsData="dialogData"
|
|
:total="resourceListTotal-0" :type="resourceType+dialogType"></resoureDialog>
|
|
</el-dialog>
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import covers from '@/assets/images/老白干导览图.jpg'
|
|
//引入 旅游资源卡片 组件
|
|
import resourceCard from "@/views/components/p-resource-card/ResourceCard";
|
|
//引入 数据报警 组件
|
|
import baseDataWarn from "@/views/components/p-data/BaseDataWarn";
|
|
//引入 数据展示 组件
|
|
import baseDataIcon from "@/views/components/p-data/BaseDataIcon";
|
|
//引入 数字盒子 组件
|
|
import baseNumBox from "@/views/components/p-num-box/BaseNumBox";
|
|
//引入 数据等级 组件
|
|
import baseLevel from "@/views/components/p-level/BaseLevel";
|
|
//引入 车流 模块
|
|
import carFlow from "@/views/picture/resource-monitoring/car-flow";
|
|
//引入 旅游资源弹窗 模块
|
|
import resoureDialog from "@/views/picture/resource-monitoring/resoure-dialog";
|
|
//引入 关闭按钮 组件
|
|
import BaseClose from "@/views/components/p-close/BaseClose";
|
|
|
|
import AMap from 'AMap'
|
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
import treeSelect from "@riophae/vue-treeselect";
|
|
|
|
import {
|
|
getBasicResourceCount,
|
|
getRsourceMenuGroupList,
|
|
getBasicList,
|
|
getAreaSupervisor,
|
|
getBasicDetail
|
|
} from "@/api/picture/resource-monitoring/resourceMonitoring";
|
|
import {getcurrentScenic, getHourData} from "@/api/picture/scenic-flow/scenicFlow";
|
|
import BaseDict from "@/views/components/p-dict/BaseDict";
|
|
import {timePeriodTrafficFlowTrend, vehicleStatistics} from "@/api/picture/car-park/carPark";
|
|
|
|
export default {
|
|
name: "index",
|
|
//引入字典表
|
|
dicts: ['scenic_level', 'scenic_type', 'rural_level', 'rural_type', 'fun_type'
|
|
, 'hotel_type', 'hotel_level', 'homestay_type', 'food_type', 'food_level'
|
|
, 'vehicle_type', 'artgallery_type', 'artgallery_level', 'cultural_type', 'memorialhall_type'
|
|
, 'library_type', 'technology_level', 'gymnasium_type', 'toilet_type', 'toilet_level'
|
|
, 'carpark_type', 'carpark_level', 'guide_level', 'guide_languages'
|
|
, 'shopping_type', 'museum_type', 'museum_level', 'travel_type', 'dev_brand_dict', 'dev_model_dict', 'comfort_match'],
|
|
components: {
|
|
resourceCard,
|
|
baseDataWarn,
|
|
baseDataIcon,
|
|
baseNumBox,
|
|
baseLevel,
|
|
resoureDialog,
|
|
BaseClose,
|
|
carFlow,
|
|
treeSelect,
|
|
BaseDict
|
|
},
|
|
data() {
|
|
return {
|
|
path:'',
|
|
type:'',
|
|
code:null,
|
|
markers:[],
|
|
icon:'',
|
|
img404: "this.onerror=''; this.src='" + require('@/assets/images/no-pic.jpg') + "'",
|
|
|
|
host:null,
|
|
//分时段客流走势 数据
|
|
FlowTrendData: {eChartOpts: {}, eChartData: {}},
|
|
//车流统计 数据
|
|
CarFlowCountData: {},
|
|
//分时段车流趋势 数据
|
|
CarFlowTrendData: {eChartOpts: {}, eChartData: {}},
|
|
//地图对象
|
|
map: null,
|
|
markerArr: [],
|
|
baseUrl: process.env.VUE_APP_BASE_API,
|
|
currentData: {
|
|
interfacePath: "",
|
|
name: "",
|
|
dataType: "",
|
|
mapIcon: "",
|
|
index: 0
|
|
},
|
|
//旅游资源统计数据
|
|
resourceTypeData: {
|
|
resultList: [
|
|
{
|
|
name: "",
|
|
child: []
|
|
}
|
|
],
|
|
total: '0'
|
|
},
|
|
//客流统计数据
|
|
flowVisitoData: {},
|
|
//车流统计数据
|
|
flowCarData: {},
|
|
//旅游资源导航数据
|
|
navClassData: [],
|
|
//旅游资源子导航数据
|
|
navListData: [],
|
|
navClassActive: -1,
|
|
navListActive: -1,
|
|
|
|
navNum: 0,
|
|
navStatus: false,
|
|
navMove: 0,
|
|
navPage: 0,
|
|
navPrevStatus: 'none',
|
|
navNextStatus: 'none',
|
|
pageStatus: false,
|
|
//资源列表 数据
|
|
resourceListTotal: '',
|
|
resourceListData: [],
|
|
reousrceIptions: undefined,
|
|
//资源信息筛选 表单
|
|
resourceSearch: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
resourceName: "",
|
|
insideArea: null,
|
|
grade: "",
|
|
label: "",
|
|
type: "",
|
|
userType: ""
|
|
},
|
|
//资源 状态
|
|
resourceStatus: false,
|
|
//资源类别
|
|
resourceType: "",
|
|
//资源名称
|
|
resourceName: "",
|
|
//资源分页
|
|
resourcePage: 0,
|
|
//弹框 数据信息
|
|
dialogStatus: false,
|
|
dialogData: null,
|
|
idNumber:null,
|
|
dialogType: '',
|
|
dialogName: '',
|
|
defaultProps: {
|
|
children: 'children',
|
|
label: 'label'
|
|
},
|
|
dictData:[],
|
|
dictData1:[]
|
|
}
|
|
},
|
|
created() {
|
|
this.host = window.location.host;
|
|
},
|
|
mounted() {
|
|
//获取内部区域树
|
|
this.getAreaSupervisor();
|
|
//获取 旅游资源统计 数据
|
|
this.getResourceType();
|
|
//获取 客流统计 数据
|
|
this.getFlowVisitorData();
|
|
//获取 车流统计 数据
|
|
this.getFlowCarData();
|
|
// //获取 旅游资源 导航类别 数据
|
|
this.getNavClass();
|
|
//初始化地图
|
|
setTimeout(() => {
|
|
this.initMap();
|
|
this.coverMap()
|
|
}, 2500);
|
|
this.getDicts('comfort_match').then(response => {
|
|
this.dictData = response.data
|
|
}),
|
|
this.getDicts('comfort_match').then(response => {
|
|
this.dictData = response.data
|
|
})
|
|
},
|
|
methods: {
|
|
getAreaSupervisor() {
|
|
getAreaSupervisor().then(response => {
|
|
this.reousrceIptions = response.data;
|
|
});
|
|
},
|
|
searchFun() {
|
|
let interfacePath = this.currentData.interfacePath;
|
|
let dataType = this.currentData.dataType;
|
|
let mapIcon = this.currentData.mapIcon;
|
|
this.getresourceListData(interfacePath, dataType, mapIcon)
|
|
},
|
|
initMap() {
|
|
const map = new AMap.Map('mapDiv', {
|
|
center: [115.710998,37.827129],
|
|
resizeEnable: true,
|
|
zoom: 20,
|
|
mapStyle: "amap://styles/blue"
|
|
})
|
|
this.map = map
|
|
|
|
// 地图添加各种控件
|
|
AMap.plugin(['AMap.PlaceSearch'], function () {
|
|
map.addControl(new AMap.PlaceSearch())
|
|
})
|
|
},
|
|
//获取旅游资源统计数据
|
|
getResourceType() {
|
|
getBasicResourceCount().then(response => {
|
|
this.resourceTypeData = response.data;
|
|
});
|
|
},
|
|
//获取客流统计数据
|
|
getFlowVisitorData() {
|
|
getcurrentScenic().then(response => {
|
|
this.flowVisitoData = response.data
|
|
})
|
|
//获取 分时段客流走势 数据
|
|
let Opts = {
|
|
unit: ['次'],
|
|
extra: {
|
|
line: {linearType: "custom",}
|
|
}
|
|
}
|
|
this.FlowTrendData.eChartOpts = Opts
|
|
getHourData().then(response => {
|
|
this.FlowTrendData.eChartData = response.data
|
|
});
|
|
this.flowVisitoData.eChartData = oneChartData
|
|
},
|
|
//获取车流统计数据
|
|
getFlowCarData() {
|
|
//获取 车流统计 数据
|
|
vehicleStatistics().then(response => {
|
|
this.CarFlowCountData = response.data
|
|
});
|
|
let Opts = {
|
|
unit: ['辆'],
|
|
extra: {
|
|
line: {linearType: "custom",}
|
|
}
|
|
}
|
|
this.CarFlowTrendData.eChartOpts = Opts
|
|
timePeriodTrafficFlowTrend().then(response => {
|
|
this.CarFlowTrendData.eChartData = response.data
|
|
});
|
|
},
|
|
//获取 旅游资源 导航类别 数据
|
|
getNavClass() {
|
|
getRsourceMenuGroupList().then(response => {
|
|
this.navClassData = response.data;
|
|
this.getResourceClass(0);
|
|
});
|
|
},
|
|
//获取 旅游资源 导航列表 数据
|
|
getNavList() {
|
|
this.navNum = this.navClassData[this.navClassActive].resourceTypesList == undefined ? 0 : this.navClassData[this.navClassActive].resourceTypesList.length
|
|
if (this.navNum > 6) {
|
|
this.navStatus = true
|
|
this.navPrevStatus = "noActive"
|
|
this.navNextStatus = "active"
|
|
} else {
|
|
this.navStatus = false
|
|
}
|
|
},
|
|
//获取 旅游资源 列表
|
|
getResourceList(title, type, index, mapIcon, path) {
|
|
this.icon = mapIcon
|
|
this.path = path
|
|
this.type = type
|
|
// this.resourceSearch.insideArea = "";
|
|
// this.resourceSearch.protectionLevel = "";
|
|
// this.resourceSearch.level="";
|
|
// this.resourceSearch.languages = "";
|
|
// this.resourceSearch.grade = "";
|
|
// this.resourceSearch.label = "";
|
|
// this.resourceSearch.devModel = "";
|
|
// this.resourceSearch.devBrand = "";
|
|
this.resourceSearch= {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
}
|
|
this.currentData = {
|
|
interfacePath: path,
|
|
name: title,
|
|
dataType: type,
|
|
mapIcon: mapIcon,
|
|
index: index
|
|
};
|
|
this.navListActive = index;
|
|
this.resourceStatus = true;
|
|
this.resourceName = title;
|
|
this.resourceType = type;
|
|
this.getresourceListData(path, type, mapIcon)
|
|
},
|
|
getResourceClass(index) {
|
|
if (this.navClassActive != index) {
|
|
this.navClassActive = index;
|
|
this.navListActive = -1;
|
|
this.resourceStatus = false;
|
|
this.resourceName = "";
|
|
this.resourceType = "";
|
|
this.navPage = 0;
|
|
this.getNavList();
|
|
}
|
|
},
|
|
//获取 旅游资源 数据
|
|
getresourceListData(path, type, mapIcon) {
|
|
let this_ =this
|
|
if (path.includes("guide")) {
|
|
|
|
} else if (path.includes("user")) {
|
|
this.resourceSearch.userType = type;
|
|
|
|
} else {
|
|
this.resourceSearch.type = type;
|
|
|
|
}
|
|
let url = path + "list";
|
|
getBasicList(url, this.resourceSearch).then(response => {
|
|
this.resourceListTotal = response.total;
|
|
this.resourceListData = response.rows;
|
|
// this.map.clearMap();
|
|
if (mapIcon&&mapIcon!=''&&mapIcon!=null){
|
|
this.markerMap(mapIcon);
|
|
|
|
}else{
|
|
this.markerMap(this_.icon);
|
|
|
|
}
|
|
});
|
|
},
|
|
markerMap(mapIcon) {
|
|
let Url = window.location.origin
|
|
let that = this;
|
|
if (this.resourceListData.length > 0) {
|
|
this.map.setCenter([this.resourceListData[0].lon, this.resourceListData[0].lat]);
|
|
}
|
|
const url = this.baseUrl+mapIcon
|
|
this.map.remove(this.markers)
|
|
this.resourceListData.forEach((item) => {
|
|
if (item.lon!=undefined&&item.lat!=undefined){
|
|
var marker = new AMap.Marker({
|
|
position: [item.lon, item.lat], //位置
|
|
icon: Url+url,
|
|
offset:new AMap.Pixel(-30.5, -85)
|
|
// offset:[-30.5,-85]
|
|
});
|
|
|
|
marker.setMap(this.map);
|
|
this.markers.push(marker)
|
|
AMap.event.addListener(marker, 'click', function (e) {
|
|
that.getDialog(item.resourceName, 'detail',item.id,item);
|
|
});
|
|
}
|
|
});
|
|
},
|
|
coverMap(){
|
|
const imageLayer = new AMap.ImageLayer({
|
|
url: covers,
|
|
bounds: new AMap.Bounds(
|
|
[115.707797, 37.824846],
|
|
[115.71447, 37.834998]
|
|
),
|
|
zooms: [10, 20]
|
|
});
|
|
imageLayer.setMap(this.map)
|
|
},
|
|
getNavPrev() {
|
|
if (this.navPage > 0) {
|
|
this.navPage = this.navPage - 1
|
|
}
|
|
},
|
|
getNavNext() {
|
|
if (this.navPage < this.navNum - 6) {
|
|
this.navPage = this.navPage + 1
|
|
}
|
|
},
|
|
//获取 对话框
|
|
getDialog(title, type, id,data) {
|
|
if (data&&data.lon&&data.lat&&data.lon!=null&&data.lat!=null){
|
|
this.map.setCenter([data.lon, data.lat]);
|
|
}
|
|
if (type == 'list') {
|
|
this.dialogData = this.resourceListData
|
|
this.dialogStatus = true
|
|
} else {
|
|
this.code = data.resourceCode
|
|
this.getBasicDetail(id);
|
|
}
|
|
if (this.currentData.dataType == 'guide') {
|
|
this.dialogName = '导游信息';
|
|
} else if (this.currentData.dataType == '01') {
|
|
this.dialogName = '工作人员信息'
|
|
} else if (this.currentData.dataType == 'bus') {
|
|
this.dialogName = '旅游大巴'
|
|
} else if (this.currentData.dataType == 'car') {
|
|
this.dialogName = '交通车辆'
|
|
} else {
|
|
this.dialogName = title
|
|
}
|
|
this.dialogType = type
|
|
},
|
|
getBasicDetail(id) {
|
|
let url = this.currentData.interfacePath + id;
|
|
if (!this.currentData.interfacePath.includes("guide") && !this.currentData.interfacePath.includes("user") && !this.currentData.interfacePath.includes("venue") && !this.currentData.interfacePath.includes("emergency")) {
|
|
url += "/" + this.currentData.dataType;
|
|
}
|
|
getBasicDetail(url).then(response => {
|
|
this.$nextTick(() => {
|
|
this.idNumber = id
|
|
this.dialogStatus = true
|
|
this.dialogData = response.data;
|
|
});
|
|
});
|
|
},
|
|
getClass(value) {
|
|
if(value){
|
|
let itemData = this.dictData.filter((item) => {
|
|
let Array = item.dictValue.split('-')
|
|
return Number(Array[0]) <= Number(value) && Number(value) < Number(Array[1])
|
|
});
|
|
if(itemData[0]){
|
|
return itemData[0].cssClass}
|
|
}else{return ''}
|
|
},
|
|
|
|
},
|
|
watch: {
|
|
// 被侦听的变量count
|
|
navPage() {
|
|
this.navMove = -(this.navPage) * 115 + 'rem'
|
|
if (this.navPage == 0) {
|
|
this.navNextStatus = "active"
|
|
this.navPrevStatus = "noActive"
|
|
} else if (this.navPage == this.navNum-6) {
|
|
this.navNextStatus = "noActive"
|
|
this.navPrevStatus = "active"
|
|
} else {
|
|
this.navNextStatus = "active"
|
|
this.navPrevStatus = "active"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 单柱状/折线图数据
|
|
const oneChartData = {
|
|
name: "柱状图/折线图/区域图",
|
|
categories: [
|
|
"星期一",
|
|
"星期二",
|
|
"星期三",
|
|
"星期四",
|
|
"星期五",
|
|
"星期六",
|
|
"星期日",
|
|
],
|
|
seriesData: [
|
|
{
|
|
name: "数量",
|
|
value: [50, 60, 40, 80, 100, 40, 60],
|
|
},
|
|
],
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.p-pagination ::v-deep.pagination-container{
|
|
background: transparent;
|
|
margin-top: 0;
|
|
}
|
|
.p-pagination ::v-deep.el-input__inner{
|
|
color: #eee;
|
|
}
|
|
#resourceType {
|
|
position: fixed;
|
|
top: 120rem;
|
|
left: $p-spacer-outer;
|
|
bottom: $p-spacer-outer;
|
|
z-index: 100;
|
|
width: 420px;
|
|
height: calc(100vh - 250rem);
|
|
}
|
|
|
|
#resourceList {
|
|
position: fixed;
|
|
top: 120rem;
|
|
right: $p-spacer-outer;
|
|
bottom: $p-spacer-outer;
|
|
z-index: 100;
|
|
width: 420px;
|
|
height: calc(100vh - 250rem);
|
|
}
|
|
|
|
#resourceFlow {
|
|
position: fixed;
|
|
top: 120rem;
|
|
right: $p-spacer-outer;
|
|
bottom: $p-spacer-outer;
|
|
z-index: 99;
|
|
width: 420px;
|
|
height: 34vh;
|
|
}
|
|
|
|
#resourceCar {
|
|
position: fixed;
|
|
top: 500rem;
|
|
right: $p-spacer-outer;
|
|
bottom: $p-spacer-outer;
|
|
z-index: 99;
|
|
width: 420px;
|
|
height: 34vh;
|
|
}
|
|
|
|
#resourceNav {
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 99;
|
|
width: 100%;
|
|
height: 106rem;
|
|
}
|
|
|
|
::v-deep .p-select {
|
|
.vue-treeselect__control {
|
|
background-color: transparent !important;
|
|
border-color: rgba(102, 182, 255, 0.5) !important;
|
|
}
|
|
|
|
.vue-treeselect__menu {
|
|
background-color: #001621;
|
|
}
|
|
|
|
.vue-treeselect__option--highlight {
|
|
background: #64d993;
|
|
}
|
|
}
|
|
::v-deep.amap-icon{
|
|
|
|
overflow:inherit !important;
|
|
|
|
}
|
|
</style>
|
|
|