2457 lines
102 KiB
HTML
2457 lines
102 KiB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
<head>
|
|
<title></title>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
|
|
<title></title>
|
|
<script src="./lib/jquery/dist/jquery.js"></script>
|
|
<script src="./lib/vuejs/vue.js"></script>
|
|
<script src="./lib/echarts5temp/composition-api1.0.0-rc.js"></script>
|
|
<script src="./lib/echarts5temp/echarts5.0.2.js"></script>
|
|
<!--<script src="../lib/echarts5temp/vue-echarts6.0.0-beta.js"></script>-->
|
|
<script src="./lib/vuejs/axios.min.js"></script>
|
|
<script src="./lib/elementui/index.js"></script>
|
|
<script src="./lib/linq.js/Content/Scripts/linq.min.js"></script>
|
|
<link href="./lib/elementui/index.css" rel="stylesheet" />
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app" style="background-color:#013954">
|
|
<el-container v-loading="loading" v-loading.fullscreen.lock="true" :element-loading-text="showLoadingTip"
|
|
element-loading-spinner="el-icon-loading" element-loading-background="#013954">
|
|
<el-header style="margin-top: 30px;">
|
|
<el-tooltip class="item" effect="dark" content="恢复搜索栏" placement="bottom-start">
|
|
<el-button icon="el-icon-delete" circle @click="nullFunction" tooltip="rrrrr"></el-button>
|
|
</el-tooltip>
|
|
<el-tooltip class="item" effect="dark" content="精准搜索" placement="bottom-start">
|
|
<el-button icon="el-icon-search" circle @click="drawer = true"></el-button>
|
|
</el-tooltip>
|
|
<el-tooltip class="item" effect="dark" content="自由组合搜索" placement="bottom-start">
|
|
<el-button icon="el-icon-pie-chart" circle @click="free = true"></el-button>
|
|
</el-tooltip>
|
|
<el-drawer title="组合查询" :visible.sync="drawer" :direction="direction" :before-close="handleClose"
|
|
size="80%">
|
|
<div>
|
|
<!--组合查询设计,浅笑写代码的地方...-->
|
|
<el-form :inline="true" class="demo-form-inline">
|
|
<el-form-item label="检测项目">
|
|
<el-select v-model="jcxm_value" size="mini" filterable multiple placeholder="请选择检测项目">
|
|
<el-option v-for="item in options" :key="item.value" :label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="监测环节">
|
|
<el-select v-model="jchj_value" size="mini" filterable multiple placeholder="请选择监测环节">
|
|
<el-option v-for="item in options2" :key="item.value" :label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="食品大类">
|
|
<el-select v-model="spdl_value" size="mini" filterable multiple placeholder="请选择食品大类"
|
|
@change="search2(1)">
|
|
<el-option v-for="item in options3" :key="item.value" :label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="食品亚类">
|
|
<el-select v-model="spyl_value" size="mini" filterable multiple placeholder="请选择食品亚类"
|
|
@change="search2(2)">
|
|
<el-option v-for="item in options4" :key="item.value" :label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="食品品种">
|
|
<el-select v-model="sppz_value" size="mini" filterable multiple placeholder="请选择食品品种"
|
|
@change="search2(3)">
|
|
<el-option v-for="item in options5" :key="item.value" :label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="食品细类">
|
|
<el-select v-model="spxl_value" size="mini" filterable multiple placeholder="请选择食品细类">
|
|
<el-option v-for="item in options6" :key="item.value" :label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="是否进口">
|
|
<el-select v-model="sfjk_value" size="mini" filterable multiple placeholder="请选择是否进口">
|
|
<el-option v-for="item in options7" :key="item.value" :label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="检验大类">
|
|
<el-select v-model="jydl_value" size="mini" filterable multiple placeholder="请选择检验大类">
|
|
<el-option v-for="item in options8" :key="item.value" :label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="任务来源">
|
|
<el-select v-model="rwly_value" size="mini" filterable multiple placeholder="请选择任务来源">
|
|
<el-option v-for="item in options9" :key="item.value" :label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<!--这块写入相关的选择框-->
|
|
<el-divider></el-divider>
|
|
<el-form ref="multisearch" :model="multisearch" label-width="150px" b>
|
|
<el-form-item label="合并年份计算">
|
|
<el-switch v-model="multisearch.isYearSum"></el-switch>
|
|
</el-form-item>
|
|
<!-- <el-form-item label="合并区域计算">
|
|
<el-switch v-model="multisearch.isAreaSum"></el-switch>
|
|
</el-form-item>
|
|
<el-form-item label="区域选择">
|
|
<el-checkbox-group v-model="multisearch.areas">
|
|
<el-checkbox v-for="item in selArea" :label="item"></el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-form-item> -->
|
|
<el-form-item label="年份选择">
|
|
|
|
<el-checkbox-group v-model="multisearch.years">
|
|
<el-checkbox v-for="item in selYear" :label="item"></el-checkbox>
|
|
</el-checkbox-group>
|
|
<el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-divider></el-divider>
|
|
<el-button
|
|
style="width: 100px;display: block;margin-left: auto;margin-right: auto;margin-top: 50px;margin-bottom: 20px;"
|
|
@click="search(0)">查询</el-button>
|
|
</div>
|
|
</el-drawer>
|
|
<el-drawer title="组合查询" :visible.sync="free" :direction="direction" :before-close="handleClose"
|
|
size="80%">
|
|
<div>
|
|
<!--组合查询设计,浅笑写代码的地方...-->
|
|
<el-form :inline="true" class="demo-form-inline">
|
|
<div class="demo-input-suffix" style="margin-left: 25%;">
|
|
<el-select v-model="ruleForm.leibie" placeholder="请选择类别">
|
|
<el-option v-for="(item,index) in Myjson" :key="index" :label="item.mytext"
|
|
:value="item.mytext" />
|
|
</el-select>
|
|
<el-select style="width: 150px;" v-model="ruleForm.tiaojian" placeholder="请选择条件">
|
|
<el-option v-for="(item,index) in Myjson1" :key="index" :label="item.mytext"
|
|
:value="item.mytext" />
|
|
</el-select>
|
|
<el-input style="width: 200px;" v-model="ruleForm.neirong" placeholder="请输入内容"
|
|
clearable></el-input>
|
|
<el-button plain @click="btnFuntion('and')">and</el-button>
|
|
<el-button plain @click="btnFuntion('or')">or</el-button>
|
|
<el-button plain @click="kuoHaoFuntion('(')">(</el-button>
|
|
<el-button plain @click="kuoHaoFuntion(')')">)</el-button>
|
|
</div>
|
|
<div>
|
|
<el-table :data="ruleData" style="width: 70%;margin: 50px; margin-left: 15%;">
|
|
<el-table-column prop="leibie" label="类别">
|
|
</el-table-column>
|
|
<el-table-column prop="tiaojian" label="条件">
|
|
</el-table-column>
|
|
<el-table-column prop="neirong" label="内容">
|
|
</el-table-column>
|
|
<el-table-column prop="fangshi" label="方式">
|
|
</el-table-column>
|
|
<el-table-column label="操作">
|
|
<template slot-scope="scope">
|
|
<el-button @click="deleteFunction(scope.row)" type="text" size="small">
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</el-form>
|
|
|
|
<el-button
|
|
style="width: 100px; display: block; margin-left: auto; margin-right: auto; margin-top: 50px; margin-bottom:20px;"
|
|
@click="search(1)">查询</el-button>
|
|
|
|
</div>
|
|
</el-drawer>
|
|
|
|
|
|
<el-radio-group v-model="radioModel" size="medium" @change="selectModel">
|
|
<el-radio-button label="项次数"></el-radio-button>
|
|
<el-radio-button label="项次数不合格率"></el-radio-button>
|
|
<el-radio-button label="件数"></el-radio-button>
|
|
<el-radio-button label="件数不合格率"></el-radio-button>
|
|
<el-radio-button label="覆盖率"></el-radio-button>
|
|
<el-radio-button label="采样点"></el-radio-button>
|
|
<el-radio-button label="平均值"></el-radio-button>
|
|
<!-- <el-radio-button label="流向"></el-radio-button> -->
|
|
</el-radio-group>
|
|
</el-header>
|
|
|
|
<el-main>
|
|
<!--左边显示的详细情况按钮-->
|
|
<el-popover placement="right" width="400" trigger="click">
|
|
<div style="width:400px;">
|
|
<span v-if="jcxm_value!=''">检测项目：{{jcxm_value}}</span>
|
|
</div>
|
|
<div style="width:400px;">
|
|
<span v-if="jchj_value!=''">监测环节：{{jchj_value}}</span>
|
|
</div>
|
|
<div style="width:400px;">
|
|
<span v-if="spdl_value!=''">食品大类：{{spdl_value}}</span>
|
|
</div>
|
|
<div style="width:400px;">
|
|
<span v-if="spyl_value!=''">食品亚类：{{spyl_value}}</span>
|
|
</div>
|
|
<div style="width:400px;">
|
|
<span v-if="sppz_value!=''">食品品种：{{sppz_value}}</span>
|
|
</div>
|
|
<div style="width:400px;">
|
|
<span v-if="spxl_value!=''">食品细类：{{spxl_value}}</span>
|
|
</div>
|
|
<div style="width:400px;">
|
|
<span v-if="sfjk_value!=''">是否进口：{{sfjk_value}}</span>
|
|
</div>
|
|
<div style="width:400px;">
|
|
<span v-if="jydl_value!=''">检验大类：{{jydl_value}}</span>
|
|
</div>
|
|
<div style="width:400px;">
|
|
<span v-if="rwly_value!=''">任务来源：{{rwly_value}}</span>
|
|
</div>
|
|
<div style="width:400px;">
|
|
<span v-if="multisearch.isYearSum">年份：{{multisearch.years}}</span>
|
|
</div>
|
|
<el-button slot="reference" icon="el-icon-arrow-right" circle
|
|
style="position:absolute;top:50%;z-index:2"></el-button>
|
|
</el-popover>
|
|
|
|
<div style="z-index: 255; position: absolute; margin-top: 40px; margin-left: 80%;">
|
|
<el-button round @click="paiXuFunction">排序</el-button>
|
|
</div>
|
|
<div id="main" v-show="mapShow==true" style="width: 100%;height:700px;">
|
|
|
|
</div>
|
|
|
|
|
|
</el-main>
|
|
</el-container>
|
|
</div>
|
|
</body>
|
|
|
|
|
|
</html>
|
|
<style>
|
|
.el-drawer__body {
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.el-drawer {
|
|
height: 500px;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
///////////////////////////////////////////////////
|
|
//该部分是Vue应用封装
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
//geoJsonScatter: {}, //
|
|
//geoCoordMapScatter: {}, //地理位置信息
|
|
//displayDataScatter:[], //地理位置显示数据
|
|
mapShow: true,
|
|
mapShow2: true,
|
|
multisearch: {
|
|
years: ['2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020','2021'],
|
|
areas: ['普陀区', '崇明区', '嘉定区', '金山区', '浦东新区', '杨浦区', '奉贤区', '青浦区', '闵行区', '松江区', '黄浦区', '徐汇区', '长宁区', '静安区', '虹口区', '宝山区'],
|
|
isYearSum: false,
|
|
isAreaSum: false
|
|
},
|
|
selYear: ['2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020','2021'],
|
|
selArea: ['普陀区', '崇明区', '嘉定区', '金山区', '浦东新区', '杨浦区', '奉贤区', '青浦区', '闵行区', '松江区', '黄浦区', '徐汇区', '长宁区', '静安区', '虹口区', '宝山区'],
|
|
//全选
|
|
checkAll: true,
|
|
//组合查询显示关闭
|
|
drawer: false,
|
|
//自由查询显示关闭
|
|
free: false,
|
|
//弹出界面的方向设定
|
|
direction: 'ttb',
|
|
radioModel: "项次数",
|
|
options: [],//监测项目
|
|
jcxm_value: '',
|
|
options2: [],//监测环节
|
|
jchj_value: '',
|
|
options3: [],//食品大类
|
|
spdl_value: '',
|
|
options4: [],//食品亚类
|
|
spyl_value: '',
|
|
options5: [],//食品品种
|
|
sppz_value: '',
|
|
options6: [],//食品细类
|
|
spxl_value: '',
|
|
str_num: 0,//判断食品等级 大类1 亚类2 品种3 细类4
|
|
options7: [
|
|
{
|
|
label: "是",
|
|
value: "是"
|
|
},
|
|
{
|
|
label: "否",
|
|
value: "否"
|
|
},
|
|
],//是否进口
|
|
sfjk_value: '',
|
|
options8: [],//检验大类
|
|
jydl_value: '',
|
|
options9: [],//任务来源
|
|
rwly_value: '',
|
|
//mapData1: [],
|
|
num: 0, //动态判断主搜索模块
|
|
numBer: 1000,
|
|
loading: true,
|
|
condition: '',
|
|
//showMapTip: ' 食品实时监管统计数据展示',
|
|
showLoadingTip: '正在进行海量实时数据计算,大约需要30秒钟,请等待...',
|
|
Myjson:
|
|
[
|
|
{ "mytext": "年份", "PY": "RWNF" },
|
|
{ "mytext": "抽样单编号", "PY": "CYDBH" },
|
|
{ "mytext": "任务编号", "PY": "RWBH" },
|
|
{ "mytext": "流水号", "PY": "LSH" },
|
|
{ "mytext": "任务来源", "PY": "RWLY" },
|
|
{ "mytext": "任务类型", "PY": "RWLX" },
|
|
{ "mytext": "任务性质", "PY": "RWXZ" },
|
|
{ "mytext": "被抽样人信息(名称)", "PY": "BCYRMC" },
|
|
{ "mytext": "执行年月", "PY": "ZXNY" },
|
|
//-----------新食品分类----------------------------
|
|
{ "mytext": "食品大类", "PY": "SP_DL" },
|
|
{ "mytext": "食品亚类", "PY": "SP_YL" },
|
|
{ "mytext": "食品品种", "PY": "SP_PZ" },
|
|
{ "mytext": "食品细类", "PY": "SP_XL" },
|
|
//-------------------------------------------------
|
|
|
|
//-----------原食品分类----------------------------
|
|
{ "mytext": "原食品分类", "PY": "OldYPFL" },
|
|
//-------------------------------------------------------
|
|
{ "mytext": "区域类型", "PY": "QYLX" },
|
|
{ "mytext": "地址（市）", "PY": "DZ_S" },
|
|
{ "mytext": "地址（区（县））", "PY": "DZ_QX" },
|
|
{ "mytext": "地址（街道（镇）", "PY": "DZ_Z" },
|
|
{ "mytext": "地址（弄）", "PY": "DZ_N" },
|
|
{ "mytext": "地址（号）", "PY": "DZ_H" },
|
|
{ "mytext": "地址（室）", "PY": "DZ_S1" },
|
|
{ "mytext": "连贯地址", "PY": "BCYDWMC" },
|
|
{ "mytext": "法人代表", "PY": "FRDB" },
|
|
{ "mytext": "年销售额", "PY": "NXSE" },
|
|
{ "mytext": "营业执照号", "PY": "YYZZH" },
|
|
{ "mytext": "联系人", "PY": "LXR1" },
|
|
{ "mytext": "经营许可证", "PY": "JYXKZ" },
|
|
{ "mytext": "电话", "PY": "DH1" },
|
|
{ "mytext": "传真", "PY": "CZ" },
|
|
{ "mytext": "邮编", "PY": "YX" },
|
|
{ "mytext": "抽样地点", "PY": "CYDD" },
|
|
{ "mytext": "抽样地点类型", "PY": "CYDDLX" },
|
|
{ "mytext": "样品来源", "PY": "YPLY" },
|
|
{ "mytext": "样品属性", "PY": "YPSX" },
|
|
{ "mytext": "样品类型", "PY": "YPLX" },
|
|
{ "mytext": "样品名称", "PY": "YPMC" },
|
|
{ "mytext": "商标", "PY": "SB" },
|
|
{ "mytext": "生产/ 加工\n购进日期", "PY": "SCJGGJRQ" },
|
|
{ "mytext": "规格型号", "PY": "GGXH" },
|
|
{ "mytext": "样品批号", "PY": "YPPH" },
|
|
{ "mytext": "保质期", "PY": "BZQ" },
|
|
{ "mytext": "执行标准/技术文件", "PY": "ZXBZ" },
|
|
{ "mytext": "质量等级", "PY": "ZLDJ" },
|
|
{ "mytext": "生产许可证编号", "PY": "SCXKZBH" },
|
|
{ "mytext": "单价", "PY": "DJ" },
|
|
{ "mytext": "是否出口", "PY": "SFCK" },
|
|
{ "mytext": "抽样基数/批量", "PY": "CYJS" },
|
|
{ "mytext": "抽样数量(含备样)", "PY": "CYSL" },
|
|
{ "mytext": "备样数量", "PY": "BYSL" },
|
|
{ "mytext": "样品形态", "PY": "YPXT" },
|
|
{ "mytext": "包装分类", "PY": "BZFL" },
|
|
{ "mytext": "生产者名称", "PY": "SCZMC" },
|
|
{ "mytext": "生产者地址_省", "PY": "SCZDZ_S" },
|
|
{ "mytext": "生产者地址_市", "PY": "SCZDZ_s" },
|
|
{ "mytext": "生产者地址_区县", "PY": "SCZDZ_Q" },
|
|
{ "mytext": "生产者地址", "PY": "SCZDZ" },
|
|
{ "mytext": "联系电话", "PY": "LXDH" },
|
|
{ "mytext": "(标称)样品储存条件", "PY": "YPCCTJ" },
|
|
{ "mytext": "寄、送样品截止日期", "PY": "YPJZRQ" },
|
|
{ "mytext": "寄送样品地址", "PY": "JSYPDZ" },
|
|
{ "mytext": "抽样样品包装", "PY": "CYYPBZ" },
|
|
{ "mytext": "抽样方式", "PY": "CYFS" },
|
|
{ "mytext": "抽样单位信息（单位名称）", "PY": "CYDWMC" },
|
|
{ "mytext": "抽样单位信息（地址）", "PY": "CYDWDZ" },
|
|
{ "mytext": "抽样单位信息（联系人）", "PY": "CYDWLXR" },
|
|
{ "mytext": "抽样单位信息（电话）", "PY": "CYDWDH" },
|
|
{ "mytext": "抽样单位信息（传真）", "PY": "CYDWCZ" },
|
|
{ "mytext": "抽样单位信息（邮编）", "PY": "CYDWYB" },
|
|
//{ "mytext": "备注", "PY": "QT" },
|
|
{ "mytext": "被抽样单位签名", "PY": "BCYDWQM" },
|
|
{ "mytext": "被抽样单位签名时间", "PY": "BCYDWSJ" },
|
|
{ "mytext": "抽样人", "PY": "CYRQM" },
|
|
{ "mytext": "抽样单位", "PY": "CYDW" },
|
|
{ "mytext": "抽样人签名时间", "PY": "CYSJ" },
|
|
{ "mytext": "检测机构", "PY": "JCDW" },
|
|
{ "type": 0, "mytext": "----以下样品检验信息----", "PY": "1" },
|
|
{ "type": 2, "mytext": "检测大类", "PY": "JCDL" },
|
|
{ "type": 2, "mytext": "检测亚类", "PY": "JCYL" },
|
|
{ "type": 2, "mytext": "检测小类", "PY": "JCXL" },
|
|
{ "type": 2, "mytext": "检测项目", "PY": "JCXM" },
|
|
{ "type": 2, "mytext": "检测标准", "PY": "JCBZ" },
|
|
{ "type": 2, "mytext": "评价标准", "PY": "PJBZ" },
|
|
{ "type": 2, "mytext": "检测方法", "PY": "JCFF" },
|
|
|
|
{ "type": 2, "mytext": "方法名称", "PY": "JCMC" },
|
|
{ "type": 2, "mytext": "定性值", "PY": "ffjcx" },
|
|
{ "type": 2, "mytext": "定性值单位", "PY": "ffjcxDW" },
|
|
{ "type": 2, "mytext": "定量值", "PY": "ffdlx" },
|
|
{ "type": 2, "mytext": "定量值单位", "PY": "ffdlxDW" },
|
|
{ "type": 2, "mytext": "限量值", "PY": "bzz" },
|
|
{ "type": 2, "mytext": "限量值单位", "PY": "xlzDW" },
|
|
{ "type": 2, "mytext": "检测值", "PY": "jcz" },
|
|
{ "type": 2, "mytext": "检测值单位", "PY": "jczDW" },
|
|
{ "type": 2, "mytext": "单项判定", "PY": "Yzhen" },
|
|
{ "type": 2, "mytext": "备注", "PY": "QT" },
|
|
{ "type": 0, "mytext": "----以下样品检验结果信息----", "PY": "1" },
|
|
{ "type": 2, "mytext": "检测结果", "PY": "JieGuo" },
|
|
{ "type": 2, "mytext": "是否进口", "PY": "SFJK" },
|
|
{ "type": 2, "mytext": "原产地", "PY": "YCD" },
|
|
{ "type": 2, "mytext": "网络平台名称", "PY": "WLPTMC" },
|
|
{ "type": 2, "mytext": "检验机构简称", "PY": "JYJGJC" },
|
|
]
|
|
,//条件查询内容
|
|
Myjson1: [
|
|
{ "mytext": "等于" },
|
|
{ "mytext": "不等于" },
|
|
{ "mytext": "包含" },
|
|
{ "mytext": "不包含" },
|
|
{ "mytext": "大于" },
|
|
{ "mytext": "小于" },
|
|
{ "mytext": "大于等于" },
|
|
{ "mytext": "小于等于" },
|
|
]
|
|
,//条件查询判断
|
|
ruleForm: {
|
|
leibie: '',
|
|
tiaojian: '',
|
|
neirong: '',
|
|
fangshi: '',
|
|
},
|
|
//条件查询数组
|
|
ruleData: [],
|
|
|
|
}
|
|
},
|
|
mounted() {
|
|
var _this = this; //this指向vue
|
|
Vue.prototype.$loading = this.loading
|
|
let sendArr = [
|
|
axios.get('./home/GetDistinctJCXM'),
|
|
axios.get('./home/GetDistinctJCHJ'),
|
|
axios.get('./home/GetDistinctSPDL'),
|
|
axios.get('./home/GetDistinctSPYL?str='),
|
|
axios.get('./home/GetDistinctSPPZ?str='),
|
|
axios.get('./home/GetDistinctSPXL?str='),
|
|
axios.get('./home/GetDistinctJYDL'),
|
|
axios.get('./home/GetDistinctRWLY'),
|
|
axios.get('../map/map/shanghai.json'),
|
|
//axios.get("../data/year.json"),
|
|
axios.get("../map/map/geoCoordMapjson2020_1.json"),
|
|
axios.get("../map/map/datajson2020_1 copy.json")
|
|
]
|
|
|
|
axios.all(sendArr).then(axios.spread(function (res1, res2, res3, res4, res5, res6, res8, res9, resGeo, resScattergeoCoordMap, resScatterdisplayData) {
|
|
//浅笑写的下来菜单的内容,重新封装
|
|
_this.putSearchData(_this.options, res1);
|
|
_this.putSearchData(_this.options2, res2);
|
|
_this.putSearchData(_this.options3, res3);
|
|
_this.putSearchData(_this.options4, res4);
|
|
_this.putSearchData(_this.options5, res5);
|
|
_this.putSearchData(_this.options6, res6);
|
|
_this.putSearchData(_this.options8, res8);
|
|
_this.putSearchData(_this.options9, res9);
|
|
//从后台读取预先设定的上海地图
|
|
geoJson = resGeo.data
|
|
//从后台读取年份列表
|
|
//year = resYear.data
|
|
|
|
//散点图叠加部分的参数
|
|
geoCoordMapScatter2 = resScattergeoCoordMap.data
|
|
displayDataScatter2 = resScatterdisplayData.data
|
|
|
|
//默认启动的显示内容
|
|
_this.getXiangCiShu();
|
|
showMapTip = "项次数"
|
|
}));
|
|
|
|
},
|
|
methods: {
|
|
//全选
|
|
handleCheckAllChange(val) {
|
|
if (this.checkAll) {
|
|
this.selYear.forEach(item => {
|
|
this.multisearch.years.push(item)
|
|
})
|
|
} else {
|
|
this.multisearch.years = []
|
|
}
|
|
},
|
|
//设置查询框的下来数据通用方法
|
|
putSearchData(opt, res) {
|
|
for (var i = 0; i < res.data.data.length; i++) {
|
|
opt.push({ label: res.data.data[i], value: res.data.data[i] })
|
|
}
|
|
},
|
|
//查询窗体关闭的响应动作
|
|
handleClose(done) {
|
|
done();
|
|
//this.$confirm('确认关闭？')
|
|
// .then(_ => {
|
|
// done();
|
|
// })
|
|
// .catch(_ => { });
|
|
},
|
|
//radio切换的相关设置
|
|
selectModel(e) {
|
|
this.mapShow = true
|
|
this.mapShow2 = false
|
|
switch (e) {
|
|
case "项次数":
|
|
this.getXiangCiShu()
|
|
showMapTip = e
|
|
this.num = 0
|
|
break;
|
|
case "项次数不合格率":
|
|
this.getXiangCiShuHeGeLv()
|
|
showMapTip = e
|
|
this.num = 1
|
|
numStr = 2;
|
|
break;
|
|
case "件数":
|
|
this.getZongJianShu()
|
|
showMapTip = e
|
|
this.num = 2
|
|
break;
|
|
case "件数不合格率":
|
|
this.getZongJianShuHeGeLv()
|
|
showMapTip = e
|
|
this.num = 3
|
|
numStr = 2;
|
|
break;
|
|
case "覆盖率":
|
|
this.getFuGaiLv()
|
|
showMapTip = "覆盖率（件/千人）"
|
|
this.num = 4
|
|
numStr = 3;
|
|
break;
|
|
case "平均值":
|
|
this.getPingJunZhi()
|
|
showMapTip = e
|
|
this.num = 5
|
|
break;
|
|
case "采样点":
|
|
// this.mapShow = false
|
|
// this.mapShow2 = true
|
|
this.num = 6
|
|
SanDianTuData = []
|
|
this.getSanDianTuBase();
|
|
|
|
break;
|
|
case "流向":
|
|
// this.mapShow = false
|
|
// this.mapShow2 = true
|
|
this.num = 7
|
|
this.getQuanGuoDiTu();
|
|
break;
|
|
default:
|
|
}
|
|
},
|
|
//清空查询
|
|
nullFunction() {
|
|
var _this = this; //this指向vue
|
|
_this.loading = true;
|
|
_this.jcxm_value = "";
|
|
_this.jchj_value = "";
|
|
_this.spdl_value = "";
|
|
_this.spxl_value = "";
|
|
_this.spyl_value = "";
|
|
_this.sppz_value = "";
|
|
_this.sfjk_value = "";
|
|
_this.jydl_value = "";
|
|
_this.rwly_value = "";
|
|
let str = "jcxm=0";
|
|
|
|
console.log('当前的选择tab项目' + _this.num)
|
|
|
|
switch (_this.num) {
|
|
case 0:
|
|
_this.getXiangCiShu();
|
|
break;
|
|
case 1:
|
|
_this.getXiangCiShuHeGeLv();
|
|
break;
|
|
case 2:
|
|
_this.getZongJianShu();
|
|
break;
|
|
case 3:
|
|
_this.getZongJianShuHeGeLV();
|
|
break;
|
|
case 4:
|
|
_this.getFuGaiLv();
|
|
break;
|
|
case 5:
|
|
_this.getPingJunZhi();
|
|
break;
|
|
case 6:
|
|
SanDianTuData = []
|
|
_this.getSanDianTuBase();
|
|
break;
|
|
case 7:
|
|
_this.getQuanGuoDiTu();
|
|
break;
|
|
default:
|
|
}
|
|
_this.loading = false;
|
|
},
|
|
//查询 亚类 品种 细类
|
|
search2(val) {
|
|
|
|
var _this = this; //this指向vue
|
|
|
|
_this.str_num = val;
|
|
if (_this.str_num == 1) {
|
|
_this.spyl_value = "";
|
|
_this.sppz_value = "";
|
|
_this.spxl_value = "";
|
|
axios.get('./home/GetDistinctSPYL?str=' + _this.spdl_value).then(function (res) {
|
|
_this.options4 = [];
|
|
for (var i = 0; i < res.data.data.length; i++) {
|
|
_this.options4.push({ label: res.data.data[i], value: res.data.data[i] })
|
|
}
|
|
})
|
|
}
|
|
if (_this.str_num == 2) {
|
|
_this.sppz_value = "";
|
|
_this.spxl_value = "";
|
|
axios.get('./home/GetDistinctSPPZ?str=' + _this.spyl_value).then(function (res) {
|
|
_this.options5 = [];
|
|
for (var i = 0; i < res.data.data.length; i++) {
|
|
_this.options5.push({ label: res.data.data[i], value: res.data.data[i] })
|
|
}
|
|
})
|
|
}
|
|
if (_this.str_num == 3) {
|
|
_this.spxl_value = "";
|
|
axios.get('./home/GetDistinctSPXL?str=' + _this.sppz_value).then(function (res) {
|
|
_this.options6 = [];
|
|
for (var i = 0; i < res.data.data.length; i++) {
|
|
_this.options6.push({ label: res.data.data[i], value: res.data.data[i] })
|
|
}
|
|
})
|
|
}
|
|
|
|
},
|
|
//查询
|
|
search(val) {
|
|
|
|
var _this = this; //this指向vue
|
|
_this.drawer = false;
|
|
_this.free = false;
|
|
_this.loading = true;
|
|
this.condition = "";
|
|
let n = _this.num;
|
|
if (val == 0) {
|
|
let str = "";
|
|
str = "JCXM=" + _this.jcxm_value;
|
|
str += "||CYDD=" + _this.jchj_value;
|
|
str += "||SP_DL=" + _this.spdl_value;
|
|
str += "||SP_YL=" + _this.spyl_value;
|
|
str += "||SP_PZ=" + _this.sppz_value;
|
|
str += "||SP_XL=" + _this.spxl_value;
|
|
str += "||SFJK=" + _this.sfjk_value;
|
|
str += "||JCDL=" + _this.jydl_value;
|
|
str += "||RWLY=" + _this.rwly_value;
|
|
if (n == 6 && _this.multisearch.isYearSum) {
|
|
|
|
str += "||RWNF=" + _this.multisearch.years
|
|
}
|
|
this.condition = str;
|
|
|
|
|
|
}
|
|
if (val == 1) {
|
|
var dT = _this.ruleData;
|
|
//console.log(dT);
|
|
Enumerable.From(dT).order
|
|
|
|
var HaveWhere = false
|
|
let sqlstr = "";
|
|
var kuohaoNum = 0;
|
|
var kuohaoI = 1;
|
|
dT.forEach(function (item, index) {
|
|
var lianjieleixing = " and ";
|
|
if (HaveWhere)//已有筛选条件 则将传来的 And OR 添加到查询语句
|
|
{
|
|
lianjieleixing = item.fangshi;
|
|
}
|
|
|
|
HaveWhere = true;//进入循环 则立刻变为 有 筛选条件
|
|
|
|
var shuxingmingE = ""//"mytext": "年份", "PY": "RWNF"
|
|
_this.Myjson.forEach(function (item2, index) {
|
|
if (item2.mytext == item.leibie) {
|
|
shuxingmingE = item2.PY;
|
|
}
|
|
})
|
|
let tiaojianzhi = item.neirong;
|
|
let yunxuanfu = item.tiaojian;
|
|
|
|
switch (yunxuanfu) {
|
|
case "(":
|
|
sqlstr = sqlstr + " and " + yunxuanfu + " ";
|
|
|
|
kuohaoNum = 1;
|
|
kuohaoI = 0;
|
|
//console.log("222", kuohaoNum);
|
|
break;
|
|
case ")":
|
|
sqlstr = sqlstr + yunxuanfu + " ";
|
|
kuohaoNum = 2;
|
|
break;
|
|
case "包含":
|
|
|
|
if (kuohaoNum == 1) {
|
|
if (kuohaoI == 0) {
|
|
sqlstr += " \"" + shuxingmingE + "\" like '%" + tiaojianzhi + "%' ";
|
|
} else {
|
|
sqlstr += " or \"" + shuxingmingE + "\" like '%" + tiaojianzhi + "%' ";
|
|
}
|
|
kuohaoI++;
|
|
} else {
|
|
sqlstr += lianjieleixing + " \"" + shuxingmingE + "\" like '%" + tiaojianzhi + "%' ";
|
|
}
|
|
break;
|
|
case "不包含":
|
|
if (kuohaoNum == 1) {
|
|
if (kuohaoI == 0) {
|
|
sqlstr += " \"" + shuxingmingE + "\" not like '%" + tiaojianzhi + "%' ";
|
|
} else {
|
|
sqlstr += " or \"" + shuxingmingE + "\" not like '%" + tiaojianzhi + "%' ";
|
|
}
|
|
kuohaoI++;
|
|
} else {
|
|
sqlstr += lianjieleixing + " \"" + shuxingmingE + "\" not like '%" + tiaojianzhi + "%' ";
|
|
}
|
|
|
|
break;
|
|
case "等于":
|
|
if (shuxingmingE != "jcz") {
|
|
//console.log("1");
|
|
if (kuohaoNum == 1) {
|
|
//console.log("11");
|
|
if (kuohaoI == 0) {
|
|
//console.log("111");
|
|
sqlstr += " \"" + shuxingmingE + "\" = '" + tiaojianzhi + "' ";
|
|
} else {
|
|
//console.log("1111");
|
|
sqlstr += " or \"" + shuxingmingE + "\" = '" + tiaojianzhi + "' ";
|
|
}
|
|
kuohaoI++;
|
|
} else {
|
|
//console.log("11111", kuohaoNum);
|
|
sqlstr += lianjieleixing + " \"" + shuxingmingE + "\" = '" + tiaojianzhi + "' ";
|
|
}
|
|
|
|
}
|
|
else {
|
|
if (kuohaoNum == 1) {
|
|
if (kuohaoI == 0) {
|
|
sqlstr += " \"" + shuxingmingE + "\" = " + tiaojianzhi + " ";
|
|
} else {
|
|
sqlstr += " or \"" + shuxingmingE + "\" = " + tiaojianzhi + " ";
|
|
}
|
|
kuohaoI++;
|
|
} else {
|
|
sqlstr += lianjieleixing + " \"" + shuxingmingE + "\" = " + tiaojianzhi + " ";
|
|
}
|
|
}
|
|
break;
|
|
case "不等于":
|
|
if (shuxingmingE != "jcz") {
|
|
|
|
if (kuohaoNum == 1) {
|
|
if (kuohaoI == 0) {
|
|
sqlstr += " \"" + shuxingmingE + "\" <> '" + tiaojianzhi + "' ";
|
|
} else {
|
|
sqlstr += " or \"" + shuxingmingE + "\" <> '" + tiaojianzhi + "' ";
|
|
}
|
|
kuohaoI++;
|
|
} else {
|
|
sqlstr += lianjieleixing + " \"" + shuxingmingE + "\" <> '" + tiaojianzhi + "' ";
|
|
}
|
|
}
|
|
else {
|
|
|
|
if (kuohaoNum == 1) {
|
|
if (kuohaoI == 0) {
|
|
sqlstr += " \"" + shuxingmingE + "\" <> " + tiaojianzhi + " ";
|
|
} else {
|
|
sqlstr += " or \"" + shuxingmingE + "\" <> " + tiaojianzhi + " ";
|
|
}
|
|
kuohaoI++;
|
|
} else {
|
|
sqlstr += lianjieleixing + " \"" + shuxingmingE + "\" <> " + tiaojianzhi + " ";
|
|
}
|
|
}
|
|
break;
|
|
case "大于":
|
|
if (shuxingmingE != "jcz") {
|
|
|
|
if (kuohaoNum == 1) {
|
|
if (kuohaoI == 0) {
|
|
sqlstr += " \"" + shuxingmingE + "\" > '" + tiaojianzhi + "' ";
|
|
} else {
|
|
sqlstr += " or \"" + shuxingmingE + "\" > '" + tiaojianzhi + "' ";
|
|
}
|
|
kuohaoI++;
|
|
} else {
|
|
sqlstr += lianjieleixing + " \"" + shuxingmingE + "\" > '" + tiaojianzhi + "' ";
|
|
}
|
|
}
|
|
else {
|
|
|
|
if (kuohaoNum == 1) {
|
|
if (kuohaoI == 0) {
|
|
sqlstr += " \"" + shuxingmingE + "\" > " + tiaojianzhi + " ";
|
|
} else {
|
|
sqlstr += " or \"" + shuxingmingE + "\" > " + tiaojianzhi + " ";
|
|
}
|
|
kuohaoI++;
|
|
} else {
|
|
sqlstr += lianjieleixing + " \"" + shuxingmingE + "\" > " + tiaojianzhi + " ";
|
|
}
|
|
}
|
|
break;
|
|
case "小于":
|
|
if (shuxingmingE != "jcz") {
|
|
|
|
if (kuohaoNum == 1) {
|
|
if (kuohaoI == 0) {
|
|
sqlstr += " \"" + shuxingmingE + "\" < '" + tiaojianzhi + "' ";
|
|
} else {
|
|
sqlstr += " or \"" + shuxingmingE + "\" < '" + tiaojianzhi + "' ";
|
|
}
|
|
kuohaoI++;
|
|
} else {
|
|
sqlstr += lianjieleixing + " \"" + shuxingmingE + "\" < '" + tiaojianzhi + "' ";
|
|
}
|
|
}
|
|
else {
|
|
|
|
if (kuohaoNum == 1) {
|
|
if (kuohaoI == 0) {
|
|
sqlstr += " \"" + shuxingmingE + "\" < " + tiaojianzhi + " ";
|
|
} else {
|
|
sqlstr += " or \"" + shuxingmingE + "\" < " + tiaojianzhi + " ";
|
|
}
|
|
kuohaoI++;
|
|
} else {
|
|
sqlstr += lianjieleixing + " \"" + shuxingmingE + "\" < " + tiaojianzhi + " ";
|
|
}
|
|
}
|
|
break;
|
|
case "大于等于":
|
|
if (shuxingmingE != "jcz") {
|
|
|
|
if (kuohaoNum == 1) {
|
|
if (kuohaoI == 0) {
|
|
sqlstr += " \"" + shuxingmingE + "\" >= '" + tiaojianzhi + "' ";
|
|
} else {
|
|
sqlstr += " or \"" + shuxingmingE + "\" >= '" + tiaojianzhi + "' ";
|
|
}
|
|
kuohaoI++;
|
|
} else {
|
|
sqlstr += lianjieleixing + " \"" + shuxingmingE + "\" >= '" + tiaojianzhi + "' ";
|
|
}
|
|
}
|
|
else {
|
|
|
|
if (kuohaoNum == 1) {
|
|
if (kuohaoI == 0) {
|
|
sqlstr += " \"" + shuxingmingE + "\" >= " + tiaojianzhi + " ";
|
|
} else {
|
|
sqlstr += " or \"" + shuxingmingE + "\" >= " + tiaojianzhi + " ";
|
|
}
|
|
kuohaoI++;
|
|
} else {
|
|
sqlstr += lianjieleixing + " \"" + shuxingmingE + "\" >= " + tiaojianzhi + " ";
|
|
}
|
|
}
|
|
break;
|
|
case "小于等于":
|
|
if (shuxingmingE != "jcz") {
|
|
|
|
if (kuohaoNum == 1) {
|
|
if (kuohaoI == 0) {
|
|
sqlstr += " \"" + shuxingmingE + "\" <= '" + tiaojianzhi + "' ";
|
|
} else {
|
|
sqlstr += " or \"" + shuxingmingE + "\" <= '" + tiaojianzhi + "' ";
|
|
}
|
|
kuohaoI++;
|
|
} else {
|
|
sqlstr += lianjieleixing + " \"" + shuxingmingE + "\" <= '" + tiaojianzhi + "' ";
|
|
}
|
|
}
|
|
else {
|
|
|
|
if (kuohaoNum == 1) {
|
|
if (kuohaoI == 0) {
|
|
sqlstr += " \"" + shuxingmingE + "\"\" <= " + tiaojianzhi + " ";
|
|
} else {
|
|
sqlstr += " or \"" + shuxingmingE + "\"\" <= " + tiaojianzhi + " ";
|
|
}
|
|
kuohaoI++;
|
|
} else {
|
|
sqlstr += lianjieleixing + " \"\"" + shuxingmingE + "\"\" <= " + tiaojianzhi + " ";
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
|
|
|
|
})
|
|
|
|
this.condition = sqlstr;
|
|
// console.log(this.condition);
|
|
}
|
|
|
|
if (n == 0) {
|
|
axios.get('./home/tongji?sqlname=XiangCiShu&condition=' + this.condition + '&multisearch=' + JSON.stringify(this.multisearch)).then(function (res) {
|
|
mapData = res.data.mapdata;
|
|
year = res.data.year;
|
|
refreshMap();
|
|
_this.loading = false;
|
|
})
|
|
}
|
|
if (n == 1) {
|
|
numStr = 2;
|
|
axios.get('./home/tongji?sqlname=XiangCiShu_HeGeLv&condition=' + this.condition + '&multisearch=' + JSON.stringify(this.multisearch)).then(function (res) {
|
|
mapData = res.data.mapdata;
|
|
year = res.data.year;
|
|
refreshMap();
|
|
_this.loading = false;
|
|
|
|
})
|
|
}
|
|
if (n == 2) {
|
|
axios.get('./home/tongji?sqlname=ZongJianShu&condition=' + this.condition + '&multisearch=' + JSON.stringify(this.multisearch)).then(function (res) {
|
|
mapData = res.data.mapdata;
|
|
year = res.data.year;
|
|
refreshMap();
|
|
_this.loading = false;
|
|
})
|
|
}
|
|
if (n == 3) {
|
|
numStr = 2;
|
|
axios.get('./home/tongji?sqlname=ZongJianShu_HeGeLv&condition=' + this.condition + '&multisearch=' + JSON.stringify(this.multisearch)).then(function (res) {
|
|
mapData = res.data.mapdata;
|
|
year = res.data.year;
|
|
refreshMap();
|
|
_this.loading = false;
|
|
|
|
})
|
|
}
|
|
if (n == 4) {
|
|
numStr = 3;
|
|
axios.get('./home/tongji?sqlname=FuGaiLv&condition=' + this.condition + '&multisearch=' + JSON.stringify(this.multisearch)).then(function (res) {
|
|
mapData = res.data.mapdata;
|
|
year = res.data.year;
|
|
refreshMap();
|
|
_this.loading = false;
|
|
|
|
})
|
|
}
|
|
if (n == 5) {
|
|
if (_this.jcxm_value.length > 0) {
|
|
axios.get('../map/JCZDW.json').then(function (res) {
|
|
|
|
var sss = _this.jcxm_value[0];
|
|
console.log(sss, res.data)
|
|
var arrRes = Enumerable.From(res.data).Where(function (x) { return x.name == sss }).ToArray();
|
|
console.log(arrRes)
|
|
showMapTip = arrRes[0].value;
|
|
|
|
});
|
|
|
|
}
|
|
//console.log(showMapTip)
|
|
|
|
axios.get('./home/tongji?sqlname=PingJunZhi&condition=' + this.condition + '&multisearch=' + JSON.stringify(this.multisearch)).then(function (res) {
|
|
mapData = res.data.mapdata;
|
|
year = res.data.year;
|
|
refreshMap();
|
|
_this.loading = false;
|
|
})
|
|
}
|
|
if (n == 6) {
|
|
|
|
//重写20211105
|
|
|
|
let sendArr = [
|
|
//axios.get('./home/tongji?sqlname=SanDianTuNew&condition=' + this.condition + '&multisearch=' + JSON.stringify(this.multisearch)),
|
|
axios.get('./home/GetSanDianTuBarDataAndGeoAddress?condition=' + this.condition + '&multisearch=' + JSON.stringify(this.multisearch))
|
|
]
|
|
axios.all(sendArr).then(axios.spread(function (res) {
|
|
//SanDianTuDataDT = [];
|
|
SanDianTuDataDT = res.data.bardata;
|
|
|
|
console.log('sandiantudatarrtt', SanDianTuDataDT)
|
|
//散点图叠加部分的参数
|
|
displayDataScatter2 = res.data.geodata
|
|
|
|
scatterAdd();
|
|
_this.loading = false;
|
|
}));
|
|
|
|
|
|
//axios.get('./home/tongji?condition=' + this.condition + '&multisearch=' + JSON.stringify(this.multisearch)).then(function (res) {
|
|
// SanDianTuDataDT = res.data.mapdata;
|
|
// scatterAdd();
|
|
// _this.loading = false;
|
|
//});
|
|
|
|
|
|
}
|
|
if (n == 7) {
|
|
axios.get('./home/SearchQianXi?condition=' + this.condition).then(axios.spread(function (res2) {
|
|
d1 = res2.data
|
|
qianxiAdd();
|
|
_this.loading = false;
|
|
}));
|
|
}
|
|
},
|
|
//项次数
|
|
getXiangCiShu() {
|
|
var _this = this; //this指向vue
|
|
_this.loading = true;
|
|
_this.num = 0;
|
|
axios.get('./home/XiangCiShuNew?strDZ=').then(function (res) {
|
|
//console.log('xiangcishu',res)
|
|
mapData = [];
|
|
mapData = res.data;
|
|
year = _this.selYear;
|
|
refreshMap();
|
|
_this.loading = false;
|
|
});
|
|
},
|
|
//项次数不合格率
|
|
getXiangCiShuHeGeLv() {
|
|
var _this = this; //this指向vue
|
|
_this.loading = true;
|
|
_this.num = 1;
|
|
axios.get('./home/XiangCiShuHeGeLvNew?strDZ=').then(function (res) {
|
|
mapData = []
|
|
mapData = res.data;
|
|
console.log('跟踪', mapData);
|
|
year = _this.selYear;
|
|
//console.log('xiangcishuhegelv', JSON.stringify(mapData));
|
|
refreshMap();
|
|
_this.loading = false;
|
|
});
|
|
},
|
|
//件数
|
|
getZongJianShu() {
|
|
var _this = this; //this指向vue
|
|
_this.loading = true;
|
|
_this.num = 2;
|
|
axios.get('./home/ZongJianShuNew?strDZ=').then(function (res) {
|
|
mapData = []
|
|
mapData = res.data;
|
|
year = _this.selYear;
|
|
refreshMap();
|
|
_this.loading = false;
|
|
});
|
|
},
|
|
//件数不合格率
|
|
getZongJianShuHeGeLv() {
|
|
var _this = this; //this指向vue
|
|
_this.loading = true;
|
|
_this.num = 3;
|
|
axios.get('./home/ZongJianShuHeGeLVNew?strDZ=').then(function (res) {
|
|
mapData = []
|
|
mapData = res.data;
|
|
year = _this.selYear;
|
|
refreshMap();
|
|
_this.loading = false;
|
|
});
|
|
},
|
|
//覆盖率
|
|
getFuGaiLv() {
|
|
var _this = this; //this指向vue
|
|
_this.loading = true;
|
|
_this.num = 4;
|
|
axios.get('./home/FuGaiLvNew?strDZ=').then(function (res) {
|
|
mapData = []
|
|
mapData = res.data;
|
|
year = _this.selYear;
|
|
refreshMap();
|
|
_this.loading = false;
|
|
});
|
|
},
|
|
//平均值
|
|
getPingJunZhi() {
|
|
var _this = this; //this指向vue
|
|
_this.loading = true;
|
|
_this.num = 5;
|
|
axios.get('./home/PingJunZhiNew?strDZ=').then(function (res) {
|
|
mapData = []
|
|
mapData = res.data;
|
|
year = _this.selYear;
|
|
refreshMap();
|
|
_this.loading = false;
|
|
});
|
|
},
|
|
//散点图????这个不用了?
|
|
//getSanDianTu() {
|
|
// var _this = this; //this指向vue
|
|
// _this.loading = true;
|
|
// _this.num = 6;
|
|
// axios.get('./home/SanDianTuNew?condition=' + _this.condition).then(function (res) {
|
|
// SahDianTuData = res.data;
|
|
// axios.get('./home/SanDianTuNewDT2?condition=' + _this.condition).then(function (res) {
|
|
// SahDianTuDataDT = res.data;
|
|
// scatterAdd();
|
|
// _this.loading = false;
|
|
// });
|
|
// });
|
|
//},
|
|
//散点图新的调整，重写访问方式
|
|
getSanDianTuBase() {
|
|
var _this = this; //this指向vue
|
|
_this.loading = true;
|
|
_this.num = 6;
|
|
|
|
//重写20211105
|
|
|
|
let sendArr = [
|
|
//axios.get('./home/SanDianTuBase'),
|
|
axios.get('./home/GetSanDianTuBarDataAndGeoAddress')
|
|
]
|
|
axios.all(sendArr).then(axios.spread(function (res) {
|
|
|
|
|
|
SanDianTuDataDT = res.data.bardata
|
|
|
|
console.log('sandiantudatarrtt', SanDianTuDataDT)
|
|
//散点图叠加部分的参数
|
|
//散点图叠加部分的参数
|
|
//散点图叠加部分的参数
|
|
displayDataScatter2 = res.data.geodata
|
|
|
|
scatterAdd();
|
|
_this.loading = false;
|
|
}));
|
|
|
|
|
|
//axios.get('./home/SanDianTuBase?condition=' + this.condition).then(function (res) {
|
|
// SanDianTuDataDT = res.data;
|
|
// scatterAdd();
|
|
// _this.loading = false;
|
|
//});
|
|
},
|
|
//全国迁徙图
|
|
getQuanGuoDiTu() {
|
|
var _this = this; //this指向vue
|
|
_this.loading = true;
|
|
let sendArr = [
|
|
axios.get('../map/data-qianxi.json'),
|
|
axios.get('./home/SearchQianXi?condition=')
|
|
]
|
|
axios.all(sendArr).then(axios.spread(function (res1, res2) {
|
|
geoJson = res1.data
|
|
d1 = res2.data
|
|
qianxiAdd();
|
|
_this.loading = false;
|
|
}));
|
|
},
|
|
//括号新增
|
|
kuoHaoFuntion(a) {
|
|
//this.ruleForm.fangshi = a;
|
|
var dT = {
|
|
leibie: "",
|
|
tiaojian: a,
|
|
neirong: "",
|
|
fangshi: ""
|
|
};
|
|
this.ruleData.push(dT);
|
|
},
|
|
//组合查询条件
|
|
btnFuntion(a) {
|
|
this.ruleForm.fangshi = a;
|
|
var dT = {
|
|
leibie: this.ruleForm.leibie,
|
|
tiaojian: this.ruleForm.tiaojian,
|
|
neirong: this.ruleForm.neirong,
|
|
fangshi: this.ruleForm.fangshi
|
|
};
|
|
this.ruleData.push(dT);
|
|
},
|
|
//删除组合查询
|
|
deleteFunction(a) {
|
|
var aa = this.ruleData.indexOf(a);
|
|
this.ruleData.splice(aa, 1);
|
|
},
|
|
//排序按钮
|
|
paiXuFunction() {
|
|
if (isBarSort) {
|
|
isBarSort = false
|
|
} else {
|
|
isBarSort = true
|
|
}
|
|
let n = this.num;
|
|
if (n == 1 || n == 3 || n == 4) {
|
|
numStr = 2
|
|
}
|
|
if (n == 6) {
|
|
scatterAdd();
|
|
} else {
|
|
refreshMap();
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
})
|
|
///////////////////////////////////////////////////
|
|
|
|
|
|
///////////////////////////////////////////////////
|
|
//该部分是原有echarts的部分调整代码
|
|
|
|
//初始化界面地图层
|
|
var myChart = echarts.init(document.getElementById('main'));
|
|
//公用地图地理数据
|
|
var geoJson = {};
|
|
//标题栏目数据
|
|
var showMapTip = '食品实时监管统计数据展示';
|
|
//显示年份数组(可配置)
|
|
var year = [];
|
|
|
|
var area = [];
|
|
|
|
var d1 = {};//全国地图数据
|
|
var geoJson = {};//全国地图
|
|
|
|
var numStr = 0;//判断参数 2为不合格率保留2位小数 3为覆盖率保留2位小数
|
|
|
|
//地图上每个区县的热点位置
|
|
var geoCoordMap = {
|
|
'宝山区': [121.404861, 31.392111],
|
|
'崇明区': [121.568484, 31.635916],
|
|
'嘉定区': [121.244394, 31.358136],
|
|
'金山区': [121.255144, 30.818932],
|
|
'浦东新区': [121.742177, 31.083823],
|
|
'杨浦区': [121.529302, 31.29835],
|
|
'奉贤区': [121.56251, 30.897998],
|
|
'青浦区': [121.085191, 31.124693],
|
|
'闵行区': [121.418901, 31.087213],
|
|
'松江区': [121.220231, 31.015194],
|
|
//以下准备单独显示
|
|
'黄浦区': [121.483572, 31.215946],
|
|
'徐汇区': [121.43752, 31.179973],
|
|
'长宁区': [121.380949, 31.20737],
|
|
'静安区': [121.450659, 31.270821],
|
|
'普陀区': [121.392058, 31.257885],
|
|
'虹口区': [121.485443, 31.276649],
|
|
};
|
|
//颜色设定数组
|
|
var colors = [
|
|
["#1DE9B6", "#F46E36", "#04B9FF", "#5DBD32", "#FFC809", "#FB95D5", "#BDA29A", "#6E7074", "#546570", "#C4CCD3"],
|
|
["#37A2DA", "#67E0E3", "#32C5E9", "#9FE6B8", "#FFDB5C", "#FF9F7F", "#FB7293", "#E062AE", "#E690D1", "#E7BCF3", "#9D96F5", "#8378EA", "#8378EA"],
|
|
["#DD6B66", "#759AA0", "#E69D87", "#8DC1A9", "#EA7E53", "#EEDD78", "#73A373", "#73B9BC", "#7289AB", "#91CA8C", "#F49F42"],
|
|
];
|
|
//地图实际交互数据,从后台获取(可配置)
|
|
var mapData = [];
|
|
//设定地图的显示中心点
|
|
var mapDisplayCenter = [121.4648, 31.2891];
|
|
|
|
var colorIndex = 0;
|
|
|
|
/*柱子Y名称*/
|
|
var categoryData = [];
|
|
//柱形显示的数据
|
|
var barData = [];
|
|
|
|
//是否表格显示排序(可配置)
|
|
var isBarSort = true;
|
|
|
|
|
|
//scatter叠加部分
|
|
var geoCoordMapScatter = [];
|
|
var displayDataScatter = [];
|
|
|
|
var geoCoordMapScatter2 = [];
|
|
var displayDataScatter2 = [];
|
|
|
|
var SanDianTuData = [];
|
|
var SanDianTuDataDT = [];//散点图柱状图DT
|
|
|
|
//地图动态显示方法
|
|
var refreshMap = function () {
|
|
//console.log('mapddata', JSON.stringify(mapData))
|
|
|
|
barData = []
|
|
categoryData = []
|
|
categoryData2 = []
|
|
//动态设置柱状显示的名称,实际上是区县名称
|
|
for (var key in geoCoordMap) {
|
|
categoryData2.push(key);
|
|
}
|
|
//动态设置柱状图的数据值
|
|
for (var i = 0; i < mapData.length; i++) {
|
|
|
|
|
|
|
|
barData.push([]);
|
|
categoryData.push([]);
|
|
var aaa = 0
|
|
var mapDt = [];
|
|
for (var j = 0; j < mapData[i].length; j++) {
|
|
//barData[i].push(formatDecimal(mapData[i][j].value,2))
|
|
//barData[i].push(mapData[i][j].value)
|
|
for (var k = 0; k < categoryData2.length; k++) {
|
|
if (mapData[i][j].name == categoryData2[k]) {
|
|
mapDt.push({
|
|
"name": categoryData2[k],
|
|
"value":mapData[i][j].value
|
|
})
|
|
}
|
|
|
|
}
|
|
|
|
console.log('第一次', mapDt)
|
|
|
|
}
|
|
for (var j = 0; j < categoryData2.length; j++) {
|
|
for (var k = 0; k < mapDt.length; k++) {
|
|
if (categoryData2[j] == mapDt[k].name) {
|
|
if (numStr == 2) {
|
|
barData[i].push({
|
|
"name": mapDt[k].name,
|
|
"value": mapDt[k].value
|
|
})
|
|
} else if (numStr == 3) {
|
|
barData[i].push({
|
|
"name": mapDt[k].name,
|
|
"value": mapDt[k].value
|
|
})
|
|
//console.log(numStr, mapDt[k].value);
|
|
} else {
|
|
barData[i].push({
|
|
"name": mapDt[k].name,
|
|
"value": mapDt[k].value
|
|
})
|
|
}
|
|
categoryData[i].push(mapDt[k].name)
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
console.log('第二次', barData)
|
|
|
|
//该部分是动态排序
|
|
if (isBarSort) {
|
|
barData[i].sort(function sortNumber(a, b) {
|
|
return a.value - b.value
|
|
});
|
|
categoryData[i] = [];
|
|
for (var g = 0; g < barData[i].length; g++) {
|
|
categoryData[i].push(barData[i][g].name)
|
|
}
|
|
}
|
|
}
|
|
|
|
echarts.registerMap('shanghai', geoJson);
|
|
var convertData = function (data) {
|
|
var res = [];
|
|
for (var i = 0; i < data.length; i++) {
|
|
var geoCoord = geoCoordMap[data[i].name];
|
|
if (geoCoord) {
|
|
if (numStr == 2) {
|
|
res.push({
|
|
name: data[i].name,
|
|
value: geoCoord.concat(formatDecimal(data[i].value, 2))
|
|
});
|
|
} else if (numStr == 3) {
|
|
res.push({
|
|
name: data[i].name,
|
|
value: geoCoord.concat(formatDecimal(data[i].value, 2))
|
|
});
|
|
} else {
|
|
res.push({
|
|
name: data[i].name,
|
|
value: geoCoord.concat(data[i].value)
|
|
});
|
|
}
|
|
|
|
}
|
|
}
|
|
console.log('跟踪2',res);
|
|
//debugger;
|
|
return res;
|
|
};
|
|
|
|
optionXyMap01 = {
|
|
timeline: {
|
|
data: year,
|
|
axisType: 'category',
|
|
autoPlay: true,
|
|
playInterval: 5000,
|
|
left: '10%',
|
|
right: '10%',
|
|
bottom: '2%',
|
|
width: '80%',
|
|
// height: null,
|
|
label: {
|
|
normal: {
|
|
textStyle: {
|
|
color: '#ddd'
|
|
}
|
|
},
|
|
emphasis: {
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
},
|
|
symbolSize: 10,
|
|
lineStyle: {
|
|
color: '#555'
|
|
},
|
|
checkpointStyle: {
|
|
borderColor: '#777',
|
|
borderWidth: 2
|
|
},
|
|
controlStyle: {
|
|
showNextBtn: true,
|
|
showPrevBtn: true,
|
|
normal: {
|
|
color: '#666',
|
|
borderColor: '#666'
|
|
},
|
|
emphasis: {
|
|
color: '#aaa',
|
|
borderColor: '#aaa'
|
|
}
|
|
},
|
|
|
|
},
|
|
baseOption: {
|
|
animation: true,
|
|
animationDuration: 1000,
|
|
animationEasing: 'cubicInOut',
|
|
animationDurationUpdate: 1000,
|
|
animationEasingUpdate: 'cubicInOut',
|
|
grid: {
|
|
right: '1%',
|
|
top: '15%',
|
|
bottom: '10%',
|
|
width: '25%'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis', // hover触发器
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
|
|
shadowStyle: {
|
|
color: 'rgba(150,150,150,0.1)' //hover颜色
|
|
}
|
|
}
|
|
},
|
|
geo: {
|
|
show: true,
|
|
map: 'shanghai',
|
|
roam: true,
|
|
zoom: 1,
|
|
center: mapDisplayCenter,
|
|
label: {
|
|
emphasis: {
|
|
show: false
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
borderColor: 'rgba(147, 235, 248, 1)',
|
|
borderWidth: 1,
|
|
areaColor: {
|
|
type: 'radial',
|
|
x: 0.5,
|
|
y: 0.5,
|
|
r: 0.8,
|
|
colorStops: [{
|
|
offset: 0,
|
|
color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
|
|
}, {
|
|
offset: 1,
|
|
color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
|
|
}],
|
|
globalCoord: false // 缺省为 false
|
|
},
|
|
shadowColor: 'rgba(128, 217, 248, 1)',
|
|
// shadowColor: 'rgba(255, 255, 255, 1)',
|
|
shadowOffsetX: -2,
|
|
shadowOffsetY: 2,
|
|
shadowBlur: 10
|
|
},
|
|
emphasis: {
|
|
areaColor: '#389BB7',
|
|
borderWidth: 0
|
|
}
|
|
}
|
|
},
|
|
},
|
|
options: []
|
|
};
|
|
for (var n = 0; n < year.length; n++) {
|
|
optionXyMap01.options.push({
|
|
backgroundColor: '#051b4a',
|
|
title: [{
|
|
//text: showMapTip,
|
|
text: '上海市各区食品安全风险监测结果统计',
|
|
subtext: '',
|
|
left: '40%',
|
|
top: '5%',
|
|
fontSize: '50px',
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
{
|
|
id: 'statistic',
|
|
//text: year[n] + "年数据统计情况",
|
|
text: '',
|
|
left: '60%',
|
|
top: '8%',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 24
|
|
}
|
|
}
|
|
],
|
|
xAxis: {
|
|
|
|
type: 'value',
|
|
scale: true,
|
|
position: 'top',
|
|
min: 0,
|
|
boundaryGap: false,
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
margin: 2,
|
|
textStyle: {
|
|
color: '#aaa'
|
|
}
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
name: showMapTip + (numStr==2?"(%)":"") , //轴上的文本内容?????
|
|
// name: showMapTip,
|
|
// name: 'TOP 20',
|
|
nameGap: 16,
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#ddd'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: '#ddd'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
textStyle: {
|
|
color: '#ddd'
|
|
}
|
|
},
|
|
data: categoryData[n]
|
|
},
|
|
|
|
series: [
|
|
//未知作用,明显是控制气泡的
|
|
{
|
|
//文字和标志
|
|
name: 'light',
|
|
type: 'scatter',
|
|
coordinateSystem: 'geo',
|
|
data: convertData(barData[n]),
|
|
symbol: 'pin', //气泡
|
|
symbolSize: function (val) {
|
|
return 40;
|
|
},
|
|
label: {
|
|
normal: {
|
|
formatter:(numStr==2)?'{@[2]}%':'{@[2]}',
|
|
// position: 'right',
|
|
color: '#fff',
|
|
fontSize: 9,
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
show: true
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#F62157'
|
|
// color: colors[colorIndex][n]
|
|
}
|
|
}
|
|
},
|
|
//地图？
|
|
{
|
|
type: 'map',
|
|
map: 'shanghai',
|
|
geoIndex: 0,
|
|
aspectScale: 0.75, //长宽比
|
|
showLegendSymbol: false, // 存在legend时显示
|
|
label: {
|
|
normal: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
},
|
|
roam: true,
|
|
itemStyle: {
|
|
normal: {
|
|
areaColor: '#031525',
|
|
borderColor: '#FFFFFF',
|
|
},
|
|
emphasis: {
|
|
areaColor: '#2B91B7'
|
|
}
|
|
},
|
|
animation: false,
|
|
data: mapData
|
|
},
|
|
//地图点的动画效果
|
|
{
|
|
// name: 'Top 5',
|
|
type: 'effectScatter',
|
|
coordinateSystem: 'geo',
|
|
data: convertData(barData[n]),
|
|
symbolSize: function (val) {
|
|
return 10;
|
|
},
|
|
showEffectOn: 'render',
|
|
rippleEffect: {
|
|
brushType: 'stroke'
|
|
},
|
|
hoverAnimation: true,
|
|
label: {
|
|
normal: {
|
|
formatter: '{b}',
|
|
position: 'right',
|
|
show: true
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: colors[colorIndex][n],
|
|
shadowBlur: 10,
|
|
shadowColor: colors[colorIndex][n]
|
|
}
|
|
},
|
|
zlevel: 1
|
|
},
|
|
//柱状图
|
|
{
|
|
zlevel: 1.5,
|
|
type: 'bar',
|
|
symbol: 'none',
|
|
itemStyle: {
|
|
normal: {
|
|
color: colors[colorIndex][n],
|
|
formatter: '{c}%!!'//百分比显示
|
|
}
|
|
},
|
|
data: barData[n]
|
|
}
|
|
]
|
|
})
|
|
}
|
|
myChart.clear();
|
|
myChart.setOption(optionXyMap01);
|
|
numStr = 0;
|
|
};
|
|
////////////////////////////////////////////////////
|
|
//小数点保留
|
|
var formatDecimal = function (num, decimal) {
|
|
//if()
|
|
num = num.toString()
|
|
//console.log("num1:", num);
|
|
let index = num.indexOf('.')
|
|
if (index !== -1) {
|
|
num = num.substring(0, decimal + index + 1)
|
|
return parseFloat(num).toFixed(decimal)
|
|
} else {
|
|
num = num.substring(0)
|
|
return parseFloat(num)
|
|
}
|
|
//console.log("num2:", num);
|
|
|
|
}
|
|
|
|
//var formatDecimal = function (num, decimal) {
|
|
// var num1 = new Number(num);
|
|
// return (num1.toFixed(decimal)).toString()
|
|
//}
|
|
|
|
|
|
//散点图的被抽样单位名称
|
|
let BCYDWMCstr = [];
|
|
|
|
|
|
|
|
//散点图形计算
|
|
var scatterAdd = function () {
|
|
//echarts.registerMap('shanghai', geoJson);
|
|
//echarts.regi
|
|
|
|
geoCoordMapScatter = geoCoordMapScatter2;
|
|
displayDataScatter = displayDataScatter2;
|
|
|
|
var convertData = function (data) {
|
|
var res = [];
|
|
for (var i = 0; i < data.length; i++) {
|
|
var geoCoord = geoCoordMapScatter[data[i].name];
|
|
if (geoCoord) {
|
|
res.push({
|
|
name: data[i].name,
|
|
value: geoCoord.concat(data[i].value)
|
|
});
|
|
}
|
|
}
|
|
console.log('res',res)
|
|
return res;
|
|
};
|
|
|
|
var convertedData = [
|
|
convertData(displayDataScatter),
|
|
convertData(displayDataScatter.sort(function (a, b) {
|
|
return 10;
|
|
}).slice(0, 6))
|
|
];
|
|
|
|
|
|
var dt = [];
|
|
var convertedData2 = [];
|
|
var convertDT = convertedData[0];
|
|
for (var i = 0; i < convertDT.length; i++) {
|
|
dt = [];
|
|
var nameStr = convertDT[i].name;
|
|
|
|
var nameStr2 = "";
|
|
var str = "";
|
|
dt = Enumerable.From(SanDianTuData).Where(function (x) {
|
|
str = nameStr.substring(nameStr.indexOf("区") + 1, nameStr.length)
|
|
nameStr2 = x.name;
|
|
return nameStr2.indexOf(str) > 0
|
|
}).ToArray();
|
|
if (dt.length > 0 && str.length > 2) {
|
|
convertedData2.push(convertDT[i]);
|
|
}
|
|
}
|
|
if (SanDianTuData.length > 0) {
|
|
convertedData[0] = [];
|
|
convertedData[0] = convertedData2;
|
|
}
|
|
|
|
var dTvalue = [];
|
|
var dTname = [];
|
|
for (var key in geoCoordMap) {
|
|
dTname.push(key);
|
|
}
|
|
for (var g = 0; g < SanDianTuDataDT[0].length; g++) {
|
|
for (var k = 0; k < dTname.length; k++) {
|
|
if (dTname[k] == SanDianTuDataDT[0][g].name) {
|
|
dTvalue.push({
|
|
"name": SanDianTuDataDT[0][g].name,
|
|
"value": SanDianTuDataDT[0][g].value,
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
console.log('sandiandatabase', dTvalue);
|
|
|
|
//该部分是动态排序
|
|
if (isBarSort) {
|
|
dTvalue.sort(function sortNumber(a, b) {
|
|
return a.value - b.value
|
|
});
|
|
|
|
}
|
|
dTname = [];
|
|
for (var g = 0; g < dTvalue.length; g++) {
|
|
dTname.push(dTvalue[g].name)
|
|
}
|
|
let option2 = {
|
|
//backgroundColor: '#404a59',
|
|
animation: true,
|
|
animationDuration: 1000,
|
|
animationEasing: 'cubicInOut',
|
|
animationDurationUpdate: 1000,
|
|
animationEasingUpdate: 'cubicInOut',
|
|
title: [
|
|
{
|
|
text: '被抽样单位分布散点图',
|
|
subtext: '',
|
|
left: 'center',
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
{
|
|
id: 'statistic',
|
|
right: 120,
|
|
top: 40,
|
|
width: 100,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 16
|
|
}
|
|
}
|
|
],
|
|
toolbox: {
|
|
iconStyle: {
|
|
normal: {
|
|
borderColor: '#fff'
|
|
},
|
|
emphasis: {
|
|
borderColor: '#b1e4ff'
|
|
}
|
|
},
|
|
feature: {
|
|
dataZoom: {},
|
|
brush: {
|
|
type: ['rect', 'polygon', 'clear']
|
|
},
|
|
saveAsImage: { show: true }
|
|
}
|
|
},
|
|
//brush: {
|
|
// outOfBrush: {
|
|
// color: '#abc'
|
|
// },
|
|
// brushStyle: {
|
|
// borderWidth: 2,
|
|
// color: 'rgba(0,0,0,0.2)',
|
|
// borderColor: 'rgba(0,0,0,0.5)',
|
|
// },
|
|
// seriesIndex: [0, 1],
|
|
// throttleType: 'debounce',
|
|
// throttleDelay: 300,
|
|
// geoIndex: 0
|
|
//},
|
|
geo: {
|
|
map: 'shanghai',
|
|
//left: '10',
|
|
//right: '35%',
|
|
center: mapDisplayCenter,
|
|
zoom: 1,
|
|
label: {
|
|
emphasis: {
|
|
show: false
|
|
}
|
|
},
|
|
roam: true,
|
|
itemStyle: {
|
|
normal: {
|
|
areaColor: '#323c48',
|
|
borderColor: '#111'
|
|
},
|
|
emphasis: {
|
|
areaColor: '#2a333d'
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: function (param, ticket, callback) {
|
|
var value = param.name;
|
|
for (var g = 0; g < SanDianTuDataDT[0].length; g++) {
|
|
if (value == SanDianTuDataDT[0][g].name) {
|
|
return SanDianTuDataDT[0][g].value;
|
|
}
|
|
}
|
|
$.getJSON("../map/BCYDWMC.json", function (data) {
|
|
var strAddr = "";
|
|
var arrRes = Enumerable.From(data).Where(function (x) { return x.name.indexOf(value) >= 0 }).Distinct("x=>x.value").ToArray();
|
|
console.log('BCYDWMCvalue' + value)
|
|
for (var i = 0; i < arrRes.length; i++) {
|
|
strAddr = strAddr + arrRes[i].value + "<br />";
|
|
}
|
|
BCYDWMCstr = '<div> 地址：<br />'
|
|
+ value +
|
|
'<br />单位：<br />'
|
|
+ strAddr +
|
|
'</div>';
|
|
callback(ticket, BCYDWMCstr);
|
|
})
|
|
//return BCYDWMCstr;
|
|
//callback(ticket,BCYDWMCstr)
|
|
return 'Loading....';
|
|
}
|
|
},
|
|
grid: {
|
|
right: 40,
|
|
top: 100,
|
|
bottom: 40,
|
|
width: '30%'
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
scale: true,
|
|
position: 'top',
|
|
boundaryGap: false,
|
|
splitLine: { show: false },
|
|
axisLine: { show: false },
|
|
axisTick: { show: false },
|
|
axisLabel: { margin: 2, textStyle: { color: '#aaa' } },
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
name: '',
|
|
nameGap: 16,
|
|
axisLine: { show: true, lineStyle: { color: '#ddd' } },
|
|
axisTick: { show: false, lineStyle: { color: '#ddd' } },
|
|
axisLabel: { interval: 0, textStyle: { color: '#ddd' } },
|
|
data: dTname
|
|
},
|
|
series: [
|
|
{
|
|
name: '数量',
|
|
type: 'scatter',
|
|
coordinateSystem: 'geo',
|
|
data: convertedData[0],
|
|
symbolSize: 3,
|
|
itemStyle: {
|
|
normal: {
|
|
//color: '#ddb926'
|
|
}
|
|
}
|
|
},
|
|
//柱状图
|
|
{
|
|
zlevel: 1.5,
|
|
type: 'bar',
|
|
symbol: 'none',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#ddb926'
|
|
}
|
|
},
|
|
data: dTvalue
|
|
}
|
|
|
|
]
|
|
};
|
|
|
|
myChart.clear();
|
|
myChart.setOption(option2);
|
|
}
|
|
|
|
|
|
|
|
|
|
var geoGpsMap = [121.4648, 31.2891];
|
|
var t = 1;//流入流出控制
|
|
var r = 1;//右侧流入流出文字控制
|
|
var geoCoordMap2 = {
|
|
"江苏省": [118.8062, 31.9208],
|
|
'黑龙江省': [127.9688, 45.368],
|
|
'内蒙古自治区': [110.3467, 41.4899],
|
|
"吉林省": [125.8154, 44.2584],
|
|
'北京市': [116.4551, 40.2539],
|
|
"辽宁省": [123.1238, 42.1216],
|
|
"河北省": [114.4995, 38.1006],
|
|
"天津市": [117.4219, 39.4189],
|
|
"山西省": [112.3352, 37.9413],
|
|
"陕西省": [109.1162, 34.2004],
|
|
"甘肃省": [103.5901, 36.3043],
|
|
"宁夏回族自治区": [106.3586, 38.1775],
|
|
"青海省": [101.4038, 36.8207],
|
|
"新疆维吾尔自治区": [87.9236, 43.5883],
|
|
"四川省": [103.9526, 30.7617],
|
|
"重庆市": [108.384366, 30.439702],
|
|
"山东省": [117.1582, 36.8701],
|
|
"河南省": [113.4668, 34.6234],
|
|
"安徽省": [117.29, 32.0581],
|
|
"湖北省": [114.3896, 30.6628],
|
|
"浙江省": [119.5313, 29.8773],
|
|
"福建省": [119.4543, 25.9222],
|
|
"江西省": [116.0046, 28.6633],
|
|
"湖南省": [113.0823, 28.2568],
|
|
"贵州省": [106.6992, 26.7682],
|
|
"云南省": [102.9199, 25.4663],
|
|
"广东省": [113.12244, 23.009505],
|
|
"广西壮族自治区": [108.479, 23.1152],
|
|
"海南省": [110.3893, 19.8516],
|
|
// '上海市': [121.4648, 31.2891]
|
|
//"西藏": [91.11, 29.97]
|
|
};
|
|
|
|
|
|
//全国迁徙图
|
|
var qianxiAdd = function () {
|
|
var _this = this; //this指向vue
|
|
var year = ["2020"];
|
|
mapData = [
|
|
[],
|
|
[],
|
|
];
|
|
/*柱子Y名称*/
|
|
var categoryData = [];
|
|
var barData = [];
|
|
for (var key in geoCoordMap2) {
|
|
mapData[0].push({
|
|
"year": '2020',
|
|
"name": key,
|
|
"value": _this.d1[key],
|
|
"value1": _this.d1[key],
|
|
});
|
|
}
|
|
|
|
for (var i = 0; i < mapData.length; i++) {
|
|
mapData[i].sort(function sortNumber(a, b) { return a.value - b.value });
|
|
barData.push([]);
|
|
categoryData.push([]);
|
|
for (var j = 0; j < mapData[i].length; j++) {
|
|
barData[i].push(mapData[i][j].value1);
|
|
categoryData[i].push(mapData[i][j].name);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
echarts.registerMap('china', _this.geoJson);
|
|
var convertData = function (data) {
|
|
var res = [];
|
|
for (var i = 0; i < data.length; i++) {
|
|
var geoCoord = geoCoordMap2[data[i].name];
|
|
if (geoCoord) {
|
|
res.push({
|
|
name: data[i].name,
|
|
value: geoCoord.concat(data[i].value)
|
|
});
|
|
}
|
|
}
|
|
return res;
|
|
};
|
|
|
|
var convertToLineData = function (data, gps) {
|
|
var res = [];
|
|
for (var i = 0; i < data.length; i++) {
|
|
var dataItem = data[i];
|
|
var toCoord = geoCoordMap2[dataItem.name];
|
|
var fromCoord = gps; //郑州
|
|
// var toCoord = geoGps[Math.random()*3];
|
|
if (fromCoord && toCoord) {
|
|
if (t == 1) {
|
|
res.push([{
|
|
coord: toCoord,
|
|
}, {
|
|
coord: fromCoord,
|
|
value: dataItem.value
|
|
}]);
|
|
} else {
|
|
res.push([{
|
|
coord: fromCoord,
|
|
value: dataItem.value
|
|
}, {
|
|
coord: toCoord,
|
|
}]);
|
|
}
|
|
|
|
}
|
|
}
|
|
if (t == 0) {
|
|
t = 1;
|
|
} else {
|
|
t = 1;
|
|
}
|
|
return res;
|
|
};
|
|
|
|
optionXyMap01 = {
|
|
timeline: {
|
|
data: year,
|
|
axisType: 'category',
|
|
autoPlay: false,
|
|
playInterval: 5000,
|
|
left: '10%',
|
|
right: '10%',
|
|
bottom: '3%',
|
|
width: '80%',
|
|
//height: null,
|
|
//设定现实不现实时间轴的参数
|
|
show: false,
|
|
label: {
|
|
normal: {
|
|
textStyle: {
|
|
color: '#ddd'
|
|
}
|
|
},
|
|
emphasis: {
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
},
|
|
|
|
symbolSize: 10,
|
|
lineStyle: {
|
|
color: '#555'
|
|
},
|
|
checkpointStyle: {
|
|
borderColor: '#777',
|
|
borderWidth: 2
|
|
},
|
|
controlStyle: {
|
|
showNextBtn: true,
|
|
showPrevBtn: true,
|
|
normal: {
|
|
color: '#666',
|
|
borderColor: '#666'
|
|
},
|
|
emphasis: {
|
|
color: '#aaa',
|
|
borderColor: '#aaa'
|
|
}
|
|
},
|
|
|
|
},
|
|
baseOption: {
|
|
|
|
animation: true,
|
|
animationDuration: 1000,
|
|
animationEasing: 'cubicInOut',
|
|
animationDurationUpdate: 1000,
|
|
animationEasingUpdate: 'cubicInOut',
|
|
grid: {
|
|
right: '2%',
|
|
top: '12%',
|
|
bottom: '12%',
|
|
width: '18%'
|
|
},
|
|
backgroundColor: '#2c343c',
|
|
tooltip: {
|
|
trigger: 'axis', // hover触发器
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
|
|
shadowStyle: {
|
|
color: 'rgba(150,150,150,0.1)' //hover颜色
|
|
}
|
|
}
|
|
},
|
|
visualMap: {
|
|
min: 0,
|
|
max: 150,
|
|
left: 'left',
|
|
top: 'bottom',
|
|
text: ['高', '低'],
|
|
textStyle: {
|
|
color: 'white'
|
|
},
|
|
calculable: true,
|
|
colorLightness: [0.8, 100],
|
|
color: ['#c05050', '#e5cf0d', '#5ab1ef'],
|
|
dimension: 0,
|
|
|
|
|
|
},
|
|
geo: {
|
|
show: true,
|
|
map: 'china',
|
|
roam: true,
|
|
zoom: 1,
|
|
center: [113.83531246, 34.0267395887],
|
|
label: {
|
|
emphasis: {
|
|
show: true
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
borderColor: 'rgba(147, 235, 248, 1)',
|
|
borderWidth: 1,
|
|
areaColor: {
|
|
type: 'radial',
|
|
x: 0.5,
|
|
y: 0.5,
|
|
r: 0.8,
|
|
colorStops: [{
|
|
offset: 0,
|
|
color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
|
|
}, {
|
|
offset: 1,
|
|
color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
|
|
}],
|
|
globalCoord: false // 缺省为 false
|
|
},
|
|
shadowColor: 'rgba(128, 217, 248, 1)',
|
|
// shadowColor: 'rgba(255, 255, 255, 1)',
|
|
shadowOffsetX: -2,
|
|
shadowOffsetY: 2,
|
|
shadowBlur: 10
|
|
},
|
|
emphasis: {
|
|
areaColor: '#389BB7',
|
|
borderWidth: 0
|
|
}
|
|
}
|
|
},
|
|
},
|
|
options: []
|
|
|
|
};
|
|
|
|
for (var n = 0; n < year.length; n++) {
|
|
var statistic_name = "各省" + "数量";
|
|
optionXyMap01.options.push({
|
|
title:
|
|
[{
|
|
text: '总采样数据流向图',
|
|
//subtext: ' ',
|
|
left: '11%',
|
|
top: '1%',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 25
|
|
}
|
|
},
|
|
{
|
|
id: 'statistic',
|
|
text: statistic_name,
|
|
left: '75%',
|
|
top: '3%',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 16
|
|
}
|
|
}
|
|
],
|
|
xAxis: {
|
|
type: 'value',
|
|
scale: true,
|
|
position: 'top',
|
|
min: 0,
|
|
boundaryGap: false,
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
margin: 1,
|
|
textStyle: {
|
|
color: '#aaa'
|
|
}
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
// name: 'TOP 20',
|
|
nameGap: 16,
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#ddd'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: '#ddd'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
textStyle: {
|
|
color: '#ddd'
|
|
}
|
|
},
|
|
data: categoryData[n]
|
|
},
|
|
|
|
series: [
|
|
//未知作用
|
|
{
|
|
//文字和标志
|
|
name: 'light',
|
|
type: 'scatter',
|
|
coordinateSystem: 'geo',
|
|
data: convertData(mapData[n]),
|
|
symbolSize: function (val) {
|
|
return 6;
|
|
},
|
|
label: {
|
|
normal: {
|
|
formatter: '{b}',
|
|
position: 'right',
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
show: true
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: colors[n]
|
|
}
|
|
}
|
|
},
|
|
//地图？
|
|
{
|
|
type: 'map',
|
|
map: 'china',
|
|
geoIndex: 0,
|
|
aspectScale: 1, //长宽比
|
|
showLegendSymbol: false, // 存在legend时显示
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
},
|
|
emphasis: {
|
|
show: false,
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
},
|
|
roam: true,
|
|
itemStyle: {
|
|
normal: {
|
|
areaColor: '#031525',
|
|
borderColor: '#FFFFFF',
|
|
},
|
|
emphasis: {
|
|
areaColor: '#2B91B7'
|
|
}
|
|
},
|
|
animation: false,
|
|
data: mapData
|
|
},
|
|
//地图点的动画效果
|
|
{
|
|
// name: 'Top 5',
|
|
type: 'effectScatter',
|
|
coordinateSystem: 'geo',
|
|
data: convertData(mapData[n].sort(function (a, b) {
|
|
return b.value - a.value;
|
|
}).slice(0, 20)),
|
|
symbolSize: function (val) {
|
|
return 5;
|
|
},
|
|
showEffectOn: 'render',
|
|
rippleEffect: {
|
|
brushType: 'stroke'
|
|
},
|
|
hoverAnimation: true,
|
|
label: {
|
|
normal: {
|
|
formatter: '{b}',
|
|
position: 'right',
|
|
show: true
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: colors[colorIndex][n],
|
|
shadowBlur: 10,
|
|
shadowColor: colors[colorIndex][n]
|
|
}
|
|
},
|
|
zlevel: 1
|
|
},
|
|
//地图线的动画效果
|
|
{
|
|
type: 'lines',
|
|
zlevel: 2,
|
|
effect: {
|
|
show: true,
|
|
period: 5, //箭头指向速度，值越小速度越快
|
|
trailLength: 0.2, //特效尾迹长度[0,1]值越大，尾迹越长重
|
|
symbol: 'arrow', //箭头图标
|
|
symbolSize: 6, //图标大小
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
color: colors[colorIndex][n],
|
|
width: 1, //尾迹线条宽度
|
|
opacity: 0.2, //尾迹线条透明度
|
|
curveness: .3 //尾迹线条曲直度
|
|
}
|
|
},
|
|
data: convertToLineData(mapData[n], geoGpsMap)
|
|
},
|
|
//柱状图
|
|
{
|
|
zlevel: 1.5,
|
|
type: 'bar',
|
|
barMaxWidth: 8,
|
|
symbol: 'none',
|
|
itemStyle: {
|
|
normal: {
|
|
color: colors[colorIndex][n],
|
|
barBorderRadius: [0, 30, 30, 0]
|
|
}
|
|
},
|
|
data: barData[n]
|
|
}
|
|
]
|
|
});
|
|
if (r == 0) {
|
|
r = 1;
|
|
} else {
|
|
r = 0;
|
|
}
|
|
}
|
|
myChart.setOption(optionXyMap01);
|
|
}
|
|
|
|
|
|
</script>
|
|
|