2557 lines
107 KiB
HTML
2557 lines
107 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 v-if="PopDestShow==0">
|
||
<!--自由搜索开始块-->
|
||
<div style="width:400px">
|
||
<span>暂无查询条件设置</span>
|
||
</div>
|
||
</div>
|
||
<div v-if="PopDestShow==1">
|
||
<!--精确搜索开始块-->
|
||
<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>
|
||
</div> <!--精确搜索结束块-->
|
||
<div v-if="PopDestShow==2">
|
||
<!--自由搜索开始块-->
|
||
<div style="width:400px">
|
||
<span>自由查询：</span>
|
||
<!-- {{ruleData}} -->
|
||
<el-table :data="ruleData"
|
||
height="250"
|
||
border
|
||
style="width: 400px">
|
||
<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>
|
||
</div>
|
||
</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;
|
||
}
|
||
</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: [],
|
||
//显示查询弹出气泡的内容
|
||
PopDestShow: 0,
|
||
}
|
||
},
|
||
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/data-qianxi.json'),
|
||
//axios.get("../data/year.json"),
|
||
// axios.get("../map/geoCoordMapjson2020_1.json"),
|
||
// axios.get("../map/datajson2020_1.json")
|
||
]
|
||
// ,resScattergeoCoordMap, resScatterdisplayData
|
||
axios.all(sendArr).then(axios.spread(function (res1, res2, res3, res4, res5, res6, res8, res9, resGeo) {
|
||
//浅笑写的下来菜单的内容,重新封装
|
||
_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 = "项次数"
|
||
}));
|
||
//window.getBCYDWMCfunction = this.getBCYDWMCfunction;
|
||
|
||
// let sendArr2 = [
|
||
// axios.get('../map/shmapall.json'),
|
||
// axios.get('../map/geoCoordMapjson2020_1.json'),
|
||
// axios.get('../map/datajson2020_1.json')
|
||
// ]
|
||
|
||
// axios.get('./home/JCZDWjson').then(function (res){
|
||
// console.log(res.data);
|
||
// });
|
||
// axios.all(sendArr2).then(axios.spread(function (res1, res2,res3) {
|
||
// _this.geoJsonScatter = res1.data
|
||
// _this.geoCoordMapScatter = res2.data
|
||
// _this.displayDataScatter = res3.data
|
||
// _this.scatterMap()
|
||
// }));
|
||
},
|
||
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
|
||
//将左边的气泡显示为内容提示
|
||
this.PopDestShow = 0
|
||
switch (e) {
|
||
case "项次数":
|
||
this.getXiangCiShu()
|
||
showMapTip = e
|
||
this.num = 0
|
||
bigTitle="上海市食品安全风险监测结果统计"
|
||
break;
|
||
case "项次数不合格率":
|
||
this.getXiangCiShuHeGeLv()
|
||
showMapTip = e
|
||
this.num = 1
|
||
numStr = 2;
|
||
bigTitle="上海市食品安全风险监测结果统计"
|
||
break;
|
||
case "件数":
|
||
this.getZongJianShu()
|
||
showMapTip = e
|
||
this.num = 2
|
||
bigTitle="上海市食品安全风险监测结果统计"
|
||
break;
|
||
case "件数不合格率":
|
||
this.getZongJianShuHeGeLv()
|
||
showMapTip = e
|
||
this.num = 3
|
||
numStr = 2;
|
||
bigTitle="上海市食品安全风险监测结果统计"
|
||
break;
|
||
case "覆盖率":
|
||
this.getFuGaiLv()
|
||
showMapTip = "覆盖率（件/千人）"
|
||
this.num = 4
|
||
numStr = 3;
|
||
bigTitle="上海市食品安全风险监测结果统计"
|
||
break;
|
||
case "平均值":
|
||
this.getPingJunZhi()
|
||
showMapTip = e
|
||
this.num = 5
|
||
bigTitle="上海市食品安全风险监测结果统计"
|
||
break;
|
||
case "生产企业":
|
||
// this.mapShow = false
|
||
// this.mapShow2 = true
|
||
this.num = 6
|
||
showMapTip = e
|
||
//SahDianTuData = []
|
||
this.getSanDianTu();
|
||
bigTitle="生产企业数量"
|
||
|
||
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";
|
||
|
||
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:
|
||
SahDianTuData = []
|
||
_this.getSanDianTu();
|
||
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 = "";
|
||
|
||
this.PopDestShow = val + 1; //传进来的值是0和1，精准和自由两种，加上1就正好是1和2
|
||
|
||
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;
|
||
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);
|
||
}
|
||
let n = _this.num;
|
||
if (n == 0) {
|
||
axios.get('./home/tongji?sqlname=XiangCiShu&condition=' + replaceCondition(this.condition) + '&multisearch=' + JSON.stringify(this.multisearch) + '&strDZ=china').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=' + replaceCondition(this.condition) + '&multisearch=' + JSON.stringify(this.multisearch) + '&strDZ=china').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=' + replaceCondition(this.condition) + '&multisearch=' + JSON.stringify(this.multisearch) + '&strDZ=china').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=' + replaceCondition(this.condition) + '&multisearch=' + JSON.stringify(this.multisearch) + '&strDZ=china').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=' + replaceCondition(this.condition) + '&multisearch=' + JSON.stringify(this.multisearch) + '&strDZ=china').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=' + replaceCondition(this.condition) + '&multisearch=' + JSON.stringify(this.multisearch) + '&strDZ=china').then(function (res) {
|
||
mapData = res.data.mapdata;
|
||
year = res.data.year;
|
||
refreshMap();
|
||
_this.loading = false;
|
||
})
|
||
}
|
||
if (n == 6) {
|
||
//_this.getSanDianTuBase();
|
||
axios.get('./home/tongji?sqlname=SanDianTu&condition=' + replaceCondition(this.condition) + '&multisearch=' + JSON.stringify(this.multisearch) + '&strDZ=china').then(function (res) {
|
||
mapData = res.data.mapdata;
|
||
year = res.data.year;
|
||
refreshMap();
|
||
_this.loading = false;
|
||
});
|
||
}
|
||
if (n == 7) {
|
||
axios.get('./home/SearchQianXi?condition=' + replaceCondition(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=china').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=china').then(function (res) {
|
||
mapData = []
|
||
mapData = res.data;
|
||
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=china').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=china').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=china').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=china').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/SanDianTuChinaAndGlobal?strDZ=china').then(function (res) {
|
||
mapData = []
|
||
mapData = res.data;
|
||
year = _this.selYear;
|
||
refreshMap();
|
||
_this.loading = false;
|
||
});
|
||
},
|
||
//散点图抓状图Data
|
||
getSanDianTuDT() {
|
||
var _this = this; //this指向vue
|
||
_this.loading = true;
|
||
_this.num = 6;
|
||
axios.get('./home/SanDianTuBase?condition=' + replaceCondition(this.condition) + '&strDZ=china').then(function (res) {
|
||
//SahDianTuData = res.data
|
||
SahDianTuDataDT = 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 || n == 6) {
|
||
numStr = 2
|
||
}
|
||
if (n == 66) {
|
||
//scatterAdd();
|
||
|
||
axios.get('./home/SanDianTuBase?condition=' + replaceCondition(this.condition) + '&multisearch=' + JSON.stringify(this.multisearch)).then(function (res) {
|
||
SanDianTuDataDT = res.data;
|
||
scatterAdd();
|
||
_this.loading = false;
|
||
});
|
||
|
||
} 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 bigTitle="上海市食品安全风险监测结果统计"; //定义动态的标题显示内容
|
||
|
||
//地图上每个区县的热点位置
|
||
var geoCoordMap = {
|
||
"安徽省": [117.29, 32.0581],
|
||
"北京市": [116.4551, 40.2539],
|
||
"福建省": [119.4543, 25.9222],
|
||
"甘肃省": [103.5901, 36.3043],
|
||
"广东省": [113.12244, 23.009505],
|
||
"广西壮族自治区": [108.479, 23.1152],
|
||
"贵州省": [106.6992, 26.7682],
|
||
"海南省": [110.3893, 19.8516],
|
||
"河北省": [114.4995, 38.1006],
|
||
"河南省": [113.4668, 34.6234],
|
||
"黑龙江省": [127.9688, 45.368],
|
||
"湖北省": [114.3896, 30.6628],
|
||
"湖南省": [113.0823, 28.2568],
|
||
"吉林省": [125.8154, 44.2584],
|
||
"江苏省": [118.8062, 31.9208],
|
||
"江西省": [116.0046, 28.6633],
|
||
"辽宁省": [123.1238, 42.1216],
|
||
"内蒙古自治区": [110.3467, 41.4899],
|
||
"宁夏回族自治区": [106.3586, 38.1775],
|
||
"青海省": [101.4038, 36.8207],
|
||
"山东省": [117.1582, 36.8701],
|
||
"山西省": [112.3352, 37.9413],
|
||
"陕西省": [109.1162, 34.2004],
|
||
"上海市": [121.4648, 31.2891],
|
||
"四川省": [103.9526, 30.7617],
|
||
"天津市": [117.4219, 39.4189],
|
||
"西藏自治区": [91.11, 29.97],
|
||
"新疆维吾尔自治区": [87.9236, 43.5883],
|
||
"云南省": [102.9199, 25.4663],
|
||
"浙江省": [119.5313, 29.8773],
|
||
"重庆市": [108.384366, 30.439702],
|
||
'台湾省': [121.5135, 25.0308],
|
||
'香港特别行政区':[114.10000,22.44400],
|
||
'澳门特别行政区':[113.56600,22.20000],
|
||
};
|
||
|
||
//颜色设定数组
|
||
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 SahDianTuData = [];
|
||
var SahDianTuDataDT = [];//散点图柱状图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,
|
||
})
|
||
}
|
||
|
||
}
|
||
}
|
||
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": formatDecimal(mapDt[k].value, 2)
|
||
})
|
||
} else if (numStr == 3) {
|
||
barData[i].push({
|
||
"name": mapDt[k].name,
|
||
"value": formatDecimal(mapDt[k].value, 2)
|
||
})
|
||
//console.log(numStr, mapDt[k].value);
|
||
} else {
|
||
barData[i].push({
|
||
"name": mapDt[k].name,
|
||
"value": mapDt[k].value
|
||
})
|
||
}
|
||
categoryData[i].push(mapDt[k].name)
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
//该部分是动态排序
|
||
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)
|
||
}
|
||
}
|
||
//console.log(categoryData[i]);
|
||
}
|
||
|
||
echarts.registerMap('china', 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(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: 'china',
|
||
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: bigTitle,
|
||
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: 'china',
|
||
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: barData
|
||
},
|
||
//地图点的动画效果
|
||
{
|
||
// 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
|
||
},
|
||
//柱状图
|
||
{ text:'dsfsdffds',
|
||
zlevel: 1.5,
|
||
type: 'bar',
|
||
symbol: 'none',
|
||
itemStyle: {
|
||
normal: {
|
||
color: colors[colorIndex][n]
|
||
}
|
||
},
|
||
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 replaceCondition = function (str) {
|
||
var curStr = str.replace(/\+/g, "%2b")
|
||
return curStr
|
||
}
|
||
|
||
|
||
|
||
//散点图的被抽样单位名称
|
||
let BCYDWMCstr = [];
|
||
|
||
|
||
|
||
//散点图形计算 现在不用了
|
||
var scatterAdd = function () {
|
||
//echarts.registerMap('china', 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)
|
||
});
|
||
}
|
||
}
|
||
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(SahDianTuData).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 (SahDianTuData.length > 0) {
|
||
convertedData[0] = [];
|
||
convertedData[0] = convertedData2;
|
||
}
|
||
|
||
var dTvalue = [];
|
||
var dTname = [];
|
||
for (var key in geoCoordMap) {
|
||
dTname.push(key);
|
||
}
|
||
for (var g = 0; g < SahDianTuDataDT[0].length; g++) {
|
||
for (var k = 0; k < dTname.length; k++) {
|
||
if (dTname[k] == SahDianTuDataDT[0][g].name) {
|
||
dTvalue.push({
|
||
"name": SahDianTuDataDT[0][g].name,
|
||
"value": SahDianTuDataDT[0][g].value,
|
||
})
|
||
}
|
||
}
|
||
}
|
||
//该部分是动态排序
|
||
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: 'china',
|
||
//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 < SahDianTuDataDT[0].length; g++) {
|
||
if (value == SahDianTuDataDT[0][g].name) {
|
||
return SahDianTuDataDT[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();
|
||
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>
|
||
|
||
|
||
<style>
|
||
.el-drawer {
|
||
height: 500px;
|
||
}
|
||
</style> |