1162 lines
55 KiB
HTML
1162 lines
55 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<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>
|
|
<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 style="overflow-y: auto;">
|
|
<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-button
|
|
style="width: 100px; display: block; margin-left: auto; margin-right: auto; margin-top: 50px;"
|
|
@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" style="overflow:auto; height: 90%;">
|
|
<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>
|
|
</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;"
|
|
@click="search(1)">查询</el-button>
|
|
|
|
|
|
</div>
|
|
</el-drawer>
|
|
|
|
|
|
<el-radio-group v-model="radioModel" size="medium" @change="selectModel">
|
|
<el-radio-button @click="getXiangCiShu" label="项次数对比值"></el-radio-button>
|
|
<el-radio-button @click="getXiangCiShuHeGeLv" label="项次数合格率"></el-radio-button>
|
|
<el-radio-button @click="getZongJianShu" label="总件数对比值"></el-radio-button>
|
|
<el-radio-button @click="getZongJianShuHeGeLv" label="总件数合格率"></el-radio-button>
|
|
<el-radio-button label="覆盖率对比值"></el-radio-button>
|
|
</el-radio-group>
|
|
</el-header>
|
|
|
|
<el-main>
|
|
<div id="main" style="width: 100%;height:700px;">
|
|
</div>
|
|
</el-main>
|
|
</el-container>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|
|
|
|
<script>
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
shanxi: {},
|
|
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
|
|
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.all(sendArr).then(axios.spread(function (res1, res2, res3, res4, res5, res6, res8, res9) {
|
|
for (var i = 0; i < res1.data.data.length; i++) {
|
|
_this.options.push({ label: res1.data.data[i], value: res1.data.data[i] })
|
|
}
|
|
|
|
for (var i = 0; i < res2.data.data.length; i++) {
|
|
_this.options2.push({ label: res2.data.data[i], value: res2.data.data[i] })
|
|
}
|
|
|
|
for (var i = 0; i < res3.data.data.length; i++) {
|
|
_this.options3.push({ label: res3.data.data[i], value: res3.data.data[i] })
|
|
}
|
|
|
|
for (var i = 0; i < res4.data.data.length; i++) {
|
|
_this.options4.push({ label: res4.data.data[i], value: res4.data.data[i] })
|
|
}
|
|
|
|
for (var i = 0; i < res5.data.data.length; i++) {
|
|
_this.options5.push({ label: res5.data.data[i], value: res5.data.data[i] })
|
|
}
|
|
|
|
for (var i = 0; i < res6.data.data.length; i++) {
|
|
_this.options6.push({ label: res6.data.data[i], value: res6.data.data[i] })
|
|
}
|
|
for (var i = 0; i < res8.data.data.length; i++) {
|
|
_this.options8.push({ label: res8.data.data[i], value: res8.data.data[i] })
|
|
}
|
|
|
|
for (var i = 0; i < res9.data.data.length; i++) {
|
|
_this.options9.push({ label: res9.data.data[i], value: res9.data.data[i] })
|
|
}
|
|
}));
|
|
_this.getXiangCiShu();
|
|
this.showMapTip = "项次数对比值"
|
|
},
|
|
methods: {
|
|
handleClose(done) {
|
|
done();
|
|
//this.$confirm('确认关闭？')
|
|
// .then(_ => {
|
|
// done();
|
|
// })
|
|
// .catch(_ => { });
|
|
},
|
|
//radio切换的相关设置
|
|
selectModel(e) {
|
|
//alert(e)
|
|
switch (e) {
|
|
case "项次数对比值":
|
|
this.getXiangCiShu()
|
|
this.showMapTip = e
|
|
this.num = 0
|
|
break;
|
|
case "项次数合格率":
|
|
this.getXiangCiShuHeGeLv()
|
|
this.showMapTip = e
|
|
this.num = 1
|
|
break;
|
|
case "总件数对比值":
|
|
this.getZongJianShu()
|
|
this.showMapTip = e
|
|
this.num = 2
|
|
break;
|
|
case "总件数合格率":
|
|
this.getZongJianShuHeGeLv()
|
|
this.showMapTip = e
|
|
this.num = 3
|
|
break;
|
|
case "覆盖率对比值":
|
|
this.getFuGaiLv()
|
|
this.showMapTip = e
|
|
this.num = 4
|
|
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";
|
|
let n = _this.num;
|
|
|
|
if (n == 0) {
|
|
axios.get('./home/XiangCiShuNew').then(function (res) {
|
|
_this.mapData1 = res;
|
|
_this.refreshMap();
|
|
})
|
|
}
|
|
if (n == 1) {
|
|
axios.get('./home/XiangCiShuHeGeLvNew').then(function (res) {
|
|
_this.mapData1 = res;
|
|
_this.refreshMap();
|
|
})
|
|
}
|
|
if (n == 2) {
|
|
axios.get('./home/ZongJianShuNew').then(function (res) {
|
|
_this.mapData1 = res;
|
|
_this.refreshMap();
|
|
})
|
|
}
|
|
if (n == 3) {
|
|
axios.get('./home/ZongJianShuHeGeLVNew').then(function (res) {
|
|
_this.mapData1 = res;
|
|
_this.refreshMap();
|
|
})
|
|
}
|
|
if (n == 4) {
|
|
axios.get('./home/FuGaiLvNew').then(function (res) {
|
|
_this.mapData1 = res;
|
|
_this.refreshMap();
|
|
})
|
|
}
|
|
},
|
|
//查询 亚类 品种 细类
|
|
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.loading = true;
|
|
this.condition = "";
|
|
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;
|
|
var HaveWhere = false
|
|
let sqlstr = "";
|
|
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 += lianjieleixing + " \"" + shuxingmingE + "\" like '%" + tiaojianzhi + "%' ";
|
|
break;
|
|
case "不包含":
|
|
sqlstr += lianjieleixing + " \"" + shuxingmingE + "\" not like '%" + tiaojianzhi + "%' ";
|
|
break;
|
|
case "等于":
|
|
if (shuxingmingE != "jcz") {
|
|
sqlstr += lianjieleixing + " \"" + shuxingmingE + "\" = '" + tiaojianzhi + "' ";
|
|
}
|
|
else {
|
|
sqlstr += lianjieleixing + " \"" + shuxingmingE + "\" = " + tiaojianzhi + " ";
|
|
}
|
|
break;
|
|
case "不等于":
|
|
if (shuxingmingE != "jcz") {
|
|
sqlstr += lianjieleixing + " \"" + shuxingmingE + "\" <> '" + tiaojianzhi + "' ";
|
|
}
|
|
else {
|
|
sqlstr += lianjieleixing + " \"" + shuxingmingE + "\" <> " + tiaojianzhi + " ";
|
|
}
|
|
break;
|
|
case "大于":
|
|
if (shuxingmingE != "jcz") {
|
|
sqlstr += lianjieleixing + " \"" + shuxingmingE + "\" > '" + tiaojianzhi + "' ";
|
|
}
|
|
else {
|
|
sqlstr += lianjieleixing + " \"" + shuxingmingE + "\" > " + tiaojianzhi + " ";
|
|
}
|
|
break;
|
|
case "小于":
|
|
if (shuxingmingE != "jcz") {
|
|
sqlstr += lianjieleixing + " \"" + shuxingmingE + "\" < '" + tiaojianzhi + "' ";
|
|
}
|
|
else {
|
|
sqlstr += lianjieleixing + " \"" + shuxingmingE + "\" < " + tiaojianzhi + " ";
|
|
}
|
|
break;
|
|
case "大于等于":
|
|
if (shuxingmingE != "jcz") {
|
|
sqlstr += lianjieleixing + " \"" + shuxingmingE + "\" >= '" + tiaojianzhi + "' ";
|
|
}
|
|
else {
|
|
sqlstr += lianjieleixing + " \"" + shuxingmingE + "\" >= " + tiaojianzhi + " ";
|
|
}
|
|
break;
|
|
case "小于等于":
|
|
if (shuxingmingE != "jcz") {
|
|
sqlstr += lianjieleixing + " \"" + shuxingmingE + "\" <= '" + tiaojianzhi + "' ";
|
|
}
|
|
else {
|
|
sqlstr += lianjieleixing + " \"\"" + shuxingmingE + "\"\" <= " + tiaojianzhi + " ";
|
|
}
|
|
break;
|
|
}
|
|
|
|
|
|
})
|
|
|
|
this.condition = sqlstr;
|
|
}
|
|
let n = _this.num;
|
|
|
|
//let n = 5;
|
|
//console.log(this.condition);
|
|
if (n == 0) {
|
|
axios.get('./home/tongji?sqlname=XiangCiShu&condition=' + this.condition).then(function (res) {
|
|
_this.mapData1 = res;
|
|
_this.refreshMap();
|
|
})
|
|
}
|
|
if (n == 1) {
|
|
//console.log('./home/tongji?sqlname=XiangCiShu_HeGeLv&condition=' + this.condition)
|
|
axios.get('./home/tongji?sqlname=XiangCiShu_HeGeLv&condition=' + this.condition).then(function (res) {
|
|
_this.mapData1 = res;
|
|
_this.refreshMap();
|
|
})
|
|
}
|
|
if (n == 2) {
|
|
axios.get('./home/tongji?sqlname=ZongJianShu&condition=' + this.condition).then(function (res) {
|
|
_this.mapData1 = res;
|
|
_this.refreshMap();
|
|
})
|
|
}
|
|
if (n == 3) {
|
|
axios.get('./home/tongji?sqlname=ZongJianShu_HeGeLv&condition=' + this.condition).then(function (res) {
|
|
_this.mapData1 = res;
|
|
_this.refreshMap();
|
|
})
|
|
}
|
|
if (n == 4) {
|
|
axios.get('./home/FuGaiLvNew?condition=' + this.condition).then(function (res) {
|
|
_this.mapData1 = res;
|
|
_this.refreshMap();
|
|
})
|
|
}
|
|
|
|
},
|
|
|
|
//图形计算
|
|
refreshMap() {
|
|
|
|
var _this = this; //this指向vue
|
|
var year = ["2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019", "2020"];
|
|
var mapData = [
|
|
[],
|
|
[],
|
|
[],
|
|
[],
|
|
[],
|
|
[],
|
|
[],
|
|
[],
|
|
[],
|
|
[],
|
|
[],
|
|
[],
|
|
[],
|
|
[],
|
|
[],
|
|
[]
|
|
];
|
|
mapData = this.mapData1.data;
|
|
console.log('xsmapdata', mapData);
|
|
var dYearData = [];
|
|
/*柱子Y名称*/
|
|
var categoryData = [];
|
|
var barData = [];
|
|
if (_this.num != 0) {
|
|
_this.numBer = 100
|
|
}
|
|
if (_this.num == 0) {
|
|
_this.numBer = 1000
|
|
}
|
|
if (_this.num == 1) {
|
|
_this.numBer = 10
|
|
}
|
|
if (_this.num == 2) {
|
|
_this.numBer = 1000
|
|
}
|
|
if (_this.num == 4) {
|
|
_this.numBer = 0.1
|
|
}
|
|
|
|
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].value);
|
|
categoryData[i].push(mapData[i][j].name);
|
|
}
|
|
}
|
|
$.getJSON(uploadedDataURL, function (geoJson) {
|
|
|
|
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) {
|
|
res.push({
|
|
name: data[i].name,
|
|
value: geoCoord.concat(data[i].value)
|
|
});
|
|
}
|
|
}
|
|
return res;
|
|
console.log(JSON.stringify(mapData));
|
|
};
|
|
|
|
optionXyMap01 = {
|
|
timeline: {
|
|
data: year,
|
|
axisType: 'category',
|
|
autoPlay: true,
|
|
playInterval: 3000,
|
|
left: '10%',
|
|
right: '10%',
|
|
bottom: '3%',
|
|
width: '80%',
|
|
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: '20%'
|
|
},
|
|
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: 10,
|
|
center: [121.4648, 31.2891],
|
|
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: 0,
|
|
// color: 'rgba(248, 235, 248, 0)' // 50% 处的颜色
|
|
// },
|
|
// {
|
|
// offset: 1,
|
|
// color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
|
|
// }],
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(248, 235, 248, 0)' // 50% 处的颜色
|
|
},
|
|
{
|
|
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: '#013954',
|
|
title: [{
|
|
text: _this.showMapTip,
|
|
left: '25%',
|
|
top: '7%',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 25
|
|
}
|
|
},
|
|
{
|
|
id: 'statistic',
|
|
text: year[n] + "检查统计情况",
|
|
left: '75%',
|
|
top: '8%',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 25
|
|
}
|
|
}
|
|
],
|
|
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: '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: [
|
|
//地图
|
|
{
|
|
type: 'map',
|
|
map: 'china',
|
|
geoIndex: 0,
|
|
aspectScale: 0.75, //长宽比
|
|
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: this.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 val[2] / _this.numBer;
|
|
},
|
|
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]
|
|
}
|
|
},
|
|
data: barData[n]
|
|
}
|
|
]
|
|
})
|
|
}
|
|
myChart.setOption(optionXyMap01);
|
|
|
|
//console.log(JSON.stringify(optionXyMap01));
|
|
|
|
});
|
|
_this.loading = false;
|
|
},
|
|
|
|
//项次数
|
|
getXiangCiShu() {
|
|
var _this = this; //this指向vue
|
|
_this.loading = true;
|
|
_this.num = 0;
|
|
axios.get('./home/XiangCiShuNew').then(function (res) {
|
|
_this.mapData1 = [];
|
|
_this.mapData1 = res;
|
|
_this.refreshMap();
|
|
_this.loading = false;
|
|
});
|
|
},
|
|
//项次数合格率
|
|
getXiangCiShuHeGeLv() {
|
|
var _this = this; //this指向vue
|
|
_this.loading = true;
|
|
_this.num = 1;
|
|
axios.get('./home/XiangCiShuHeGeLvnew').then(function (res) {
|
|
_this.mapData1 = []
|
|
_this.mapData1 = res;
|
|
_this.refreshMap();
|
|
});
|
|
},
|
|
//总件数
|
|
getZongJianShu() {
|
|
|
|
var _this = this; //this指向vue
|
|
_this.loading = true;
|
|
_this.num = 2;
|
|
axios.get('./home/zongjianshunew').then(function (res) {
|
|
_this.mapData1 = []
|
|
_this.mapData1 = res;
|
|
_this.refreshMap();
|
|
});
|
|
},
|
|
//总件数合格率
|
|
getZongJianShuHeGeLv() {
|
|
var _this = this; //this指向vue
|
|
_this.loading = true;
|
|
_this.num = 3;
|
|
axios.get('./home/zongJianShuHeGeLvnew').then(function (res) {
|
|
_this.mapData1 = []
|
|
_this.mapData1 = res;
|
|
_this.refreshMap();
|
|
});
|
|
},
|
|
//覆盖率
|
|
getFuGaiLv() {
|
|
|
|
var _this = this; //this指向vue
|
|
_this.loading = true;
|
|
_this.num = 4;
|
|
axios.get('./home/fuGaiLvnew').then(function (res) {
|
|
_this.mapData1 = []
|
|
_this.mapData1 = res;
|
|
_this.refreshMap();
|
|
});
|
|
},
|
|
//组合查询条件
|
|
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);
|
|
//console.log(this.ruleData);
|
|
},
|
|
//删除组合查询
|
|
deleteFunction(a) {
|
|
var aa =this.ruleData.indexOf(a);
|
|
this.ruleData.splice(aa, 1);
|
|
},
|
|
}
|
|
})
|
|
|
|
|
|
var myChart = echarts.init(document.getElementById('main'));
|
|
|
|
var uploadedDataURL = "../map/shmapall.json";
|
|
var uploadedDataOffsetURL = "../map/shmapoffsetedit.json";
|
|
|
|
|
|
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", "#6E7074", "#546570", "#C4CCD3"],
|
|
["#37A2DA", "#67E0E3", "#32C5E9", "#9FE6B8", "#FFDB5C", "#FF9F7F", "#FB7293", "#E062AE", "#E690D1", "#E7BCF3", "#9D96F5", "#8378EA", "#C4CCD3", "#FB95D5", "#BDA29A", "#6E7074"],
|
|
["#DD6B66", "#759AA0", "#E69D87", "#8DC1A9", "#EA7E53", "#EEDD78", "#73A373", "#73B9BC", "#7289AB", "#91CA8C", "#F49F42"],
|
|
];
|
|
|
|
var colorIndex = 1;
|
|
|
|
$(function () {
|
|
|
|
|
|
});
|
|
|
|
</script>
|
|
<style>
|
|
.el-drawer {
|
|
height: 500px;
|
|
}
|
|
</style> |