379 lines
14 KiB
HTML
379 lines
14 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/echarts/echarts.min.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/index2.15.9v.js"></script>
|
||
<script src="./lib/linq.js/Content/Scripts/linq.min.js"></script>
|
||
<script src="Scripts/jinqjs.js"></script>
|
||
<link href="./lib/elementui/index2.15.9v.css" rel="stylesheet" />
|
||
<script src="map/shanghai.js"></script>
|
||
|
||
</head>
|
||
<body style="background-color: #50647a;">
|
||
<div id="app" style="background-color: #50647a;">
|
||
<el-container v-loading="loading" v-loading.fullscreen.lock="false" :element-loading-text="showLoadingTip"
|
||
element-loading-spinner="el-icon-loading" element-loading-background="#50647a">
|
||
|
||
<el-header style="margin-top: 30px;">
|
||
<el-row>
|
||
<el-col :span="22">
|
||
<div class="grid-content">
|
||
年份选择:
|
||
<el-select v-model="selYear" multiple collapse-tags placeholder="请选择年份">
|
||
<el-option v-for="(item,index) in [2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020,2021,2022]"
|
||
:key="index"
|
||
:label="item"
|
||
:value="item">
|
||
</el-option>
|
||
</el-select>
|
||
|
||
检测项目:
|
||
<el-select v-model="selProject"
|
||
filterable
|
||
remote
|
||
reserve-keyword
|
||
placeholder="请输入关键词"
|
||
:remote-method="remoteMethod"
|
||
:loading="loading">
|
||
<el-option v-for="item in options"
|
||
:key="item.JCXM"
|
||
:label="item.JCXM"
|
||
:value="item.JCXM">
|
||
</el-option>
|
||
</el-select>
|
||
<el-button primary @click="readDataWithJCXM">加载数据</el-button>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-header>
|
||
<el-main>
|
||
<!--左边显示的详细情况按钮，此时暂时隐藏的方式-->
|
||
<el-popover placement="right" width="400" trigger="click" style="visibility:hidden">
|
||
<div style="width:400px;">
|
||
<span v-if="jcxm_value!=''">检测项目：{{jcxm_value}}</span>
|
||
</div>
|
||
|
||
<el-button slot="reference" icon="el-icon-arrow-right" circle
|
||
style="position:absolute;top:50%;z-index:2"></el-button>
|
||
</el-popover>
|
||
|
||
|
||
|
||
<div id="main" v-show="mapShow==true" style="width: 100%; height: 580px;">
|
||
</div>
|
||
</el-main>
|
||
</el-container>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|
||
|
||
<script>
|
||
|
||
///////////////////////////////////////////////////
|
||
//该部分是Vue应用封装
|
||
var app = new Vue({
|
||
el: '#app',
|
||
data() {
|
||
return {
|
||
taa:'',
|
||
mapShow: true,
|
||
//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',
|
||
loading: false,
|
||
condition: '',
|
||
//showMapTip: ' 食品实时监管统计数据展示',
|
||
showLoadingTip: '正在进行海量实时数据计算,请等待...',
|
||
jcxm_value: '2铅', //检测项目查询字段
|
||
options: ['铅', '镉'],//监测项目
|
||
pageProjects: [], //页面上面动态的下拉菜单
|
||
selYear: [2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022],
|
||
selProject:'铅',//当前选择的项目名称
|
||
arrBaoLuLiang: [], //保留字段，为了后期更好的展示数据
|
||
bigTitle: '主标题',
|
||
subTitle:'子标题'
|
||
}
|
||
},
|
||
mounted() {
|
||
|
||
this.loading = true;
|
||
Vue.prototype.$loading = this.loading
|
||
|
||
//设置默认全局的地图数据
|
||
window.dataList = [];
|
||
////获取当前页面的可以下拉的缓存数据
|
||
//this.readCacheList();
|
||
////获取默认的地图数据
|
||
//this.readPageCache();
|
||
//this.nullFunction();
|
||
this.remoteMethod('');
|
||
this.readDataWithJCXM(this.selProject);
|
||
},
|
||
methods: {
|
||
//清空查询
|
||
nullFunction() {
|
||
var _this = this; //this指向vue
|
||
_this.loading = true;
|
||
_this.jcxm_value = "";
|
||
let str = "jcxm=0";
|
||
_this.loading = false;
|
||
},
|
||
//新的方法实时读取
|
||
//直接动态读取页面缓存数据
|
||
readDataWithJCXM(e) {
|
||
console.log('查看项目名称', this.selProject)
|
||
console.log('查看选择年份', "'" + this.selYear.join("','") + "'");
|
||
//if (e != null) {
|
||
// this.selProject = e;
|
||
//}
|
||
var _this = this; //this指向vue
|
||
var pubProject = this.selProject;
|
||
var pubYears = JSON.stringify( this.selYear)
|
||
_this.loading = true;
|
||
window.dataList = [];
|
||
axios.get('PageCache/GetDanWeiFromXFL?name=' + _this.selProject).then(res => {
|
||
console.log('danweires', res)
|
||
option.title.text = '食品小类风险评估-' + _this.selProject + '(' + res.data.data + ")";
|
||
//var curYears = "'" + this.selYear.join("','") + "'";
|
||
//console.log('curYears', curYears)
|
||
console.log('_this.selProject', _this.selProject);
|
||
axios.get('./FengXianPingGu/GetSearchQXMapResult?strJCXM=' + pubProject + '&strYears=' + pubYears + "&strField=DZ_QX").then((res) => {
|
||
_this.bigTitle = '食品小类风险评估-' + pubProject;
|
||
console.log('全量查询返回值', res.data);
|
||
let dRes = res.data.data;
|
||
dRes.forEach(function (element) {
|
||
window.dataList.push(element);
|
||
});
|
||
|
||
//'食品小类风险评估-铅', + _this.selProject
|
||
console.log(window.dataList);
|
||
myChart.clear();
|
||
option.series[0].data = window.dataList;
|
||
|
||
let curMax = Enumerable.From(window.dataList).Select('$.value').Max();
|
||
let curMin = Enumerable.From(window.dataList).Select('$.value').Min();
|
||
console.log('max_min_text', curMax, curMin)
|
||
|
||
option.visualMap = {
|
||
seriesIndex: 0,
|
||
min: curMin,
|
||
max: curMax,
|
||
left: "left",
|
||
top: "bottom",
|
||
text: ['高', '低'], // 文本，默认为数值文本
|
||
calculable: true,
|
||
precision: 6,
|
||
textStyle: { color: 'white' },
|
||
}
|
||
|
||
myChart.setOption(option);
|
||
setTimeout(function () {
|
||
_this.loading = false;
|
||
}, 1000)
|
||
|
||
})
|
||
})
|
||
},
|
||
remoteMethod(query) {
|
||
var _this = this;
|
||
if (query !== '') {
|
||
this.loading = true;
|
||
|
||
//编写从服务器获取数据的方法
|
||
axios.get('./PageCache/GetDynamicSearchList?str=' + query).then((res) => {
|
||
console.log('res', res.data.data[0].JXCM)
|
||
_this.options = res.data.data;
|
||
|
||
_this.loading = false;
|
||
});
|
||
} else {
|
||
this.options = [];
|
||
}
|
||
},
|
||
//查询窗体关闭的响应动作
|
||
handleClose(done) {
|
||
done();
|
||
},
|
||
|
||
//设置标题的类名字
|
||
setTitle(e) { console.log(e) }
|
||
|
||
}
|
||
})
|
||
|
||
//初始化界面地图层
|
||
var myChart = echarts.init(document.getElementById('main'));
|
||
echarts.registerMap('shanghai', geoJson);
|
||
let option = {
|
||
title: {
|
||
//text: '食品小类风险评估-铅',
|
||
//这块文本显示先隐藏不需要的
|
||
text: '',
|
||
textStyle: {
|
||
fontSize: 20,
|
||
color: '#fff'
|
||
},
|
||
x: 'center',
|
||
y:25
|
||
},
|
||
tooltip: {
|
||
show: true,
|
||
//triggerOn: "click",
|
||
formatter: function (e, t, n) {
|
||
return .5 == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.value
|
||
}
|
||
},
|
||
//设置显示的颜色
|
||
visualMap: {
|
||
//type: 'continuous',
|
||
min: 0,
|
||
max: 1000,
|
||
left: 26,
|
||
bottom: 40,
|
||
showLabel: !0,
|
||
text: ["高", "低"],
|
||
textStyle: {
|
||
fontSize: 10,
|
||
color: '#fff'
|
||
},
|
||
pieces: [{
|
||
gt: 0.0003,
|
||
label: "> 0.0003",
|
||
color: "#7f1100"
|
||
}, {
|
||
gte: 0.0002,
|
||
lte: 0.0003,
|
||
label: "0.0002 - 0.0003",
|
||
color: "#ff5428"
|
||
}, {
|
||
gte: 0.0001,
|
||
lt: 0.0002,
|
||
label: "0.0001 - 0.0002",
|
||
color: "#ff8c71"
|
||
}, {
|
||
gt: 0,
|
||
lt: 0.0001,
|
||
label: "0-0.0001",
|
||
color: "#ffd768"
|
||
}, {
|
||
value: 0,
|
||
color: "#ffffff"
|
||
}],
|
||
show: !0
|
||
},
|
||
geo: {
|
||
map: "shanghai", //设定使用什么地图
|
||
roam: true, //是否可以拖拉
|
||
//left: 'center',
|
||
//right: '300',
|
||
//layoutSize: '80%',
|
||
scaleLimit: {
|
||
min: 1,
|
||
max: 20
|
||
},
|
||
zoom: 1,
|
||
top: 70, //顶部距离上部的距离
|
||
//地图名字的文字设置,如普陀区,黄浦区等
|
||
label: {
|
||
normal: {
|
||
show: !0,
|
||
fontSize: "10",
|
||
color: "rgba(0,0,0,1.7)"
|
||
}
|
||
},
|
||
//鼠标移动到上方的时候的效果
|
||
itemStyle: {
|
||
//正常情况恢复的效果
|
||
normal: {
|
||
//shadowBlur: 50,
|
||
//shadowColor: 'rgba(0, 0, 0, 0.2)',
|
||
//borderColor: "rgba(0, 0, 0, 0.2)",
|
||
borderColor: '#00ffff', //每个区的边框颜色
|
||
borderWidth: 0.5, //区的边框线的粗细
|
||
shadowColor: '#00ffff', //区的边框线阴影的颜色
|
||
shadowOffsetX: 0, //区的边框线阴影偏离效果X轴
|
||
shadowOffsetY: 2, //区的边框线阴影偏离效果Y轴
|
||
shadowBlur: 5, //区的边框线阴影模糊效果
|
||
},
|
||
//鼠标移动到的时候的效果
|
||
emphasis: {
|
||
areaColor: "#f2d5ad",
|
||
shadowOffsetX: 2,
|
||
shadowOffsetY: 0,
|
||
borderWidth: 0
|
||
}
|
||
}
|
||
},
|
||
//点击显示的信息
|
||
series: [{
|
||
name: "暴露量总值",
|
||
type: "map",
|
||
geoIndex: 0,
|
||
data: window.dataList,
|
||
zoom: 2,
|
||
roam: true, //支持拖拽缩放
|
||
scaleLimit: {
|
||
//滚轮缩放的极限控制
|
||
min: 0.5, //缩放最小大小
|
||
max: 6, //缩放最大大小
|
||
},
|
||
}]
|
||
};
|
||
|
||
/*myChart.clear();*/
|
||
//设定值应用到界面显示地图
|
||
/*myChart.setOption(option);*/
|
||
</script>
|
||
|
||
<!--//设置抽屉组件的高度-->
|
||
<style>
|
||
html{
|
||
height:100%;
|
||
display:table;
|
||
}
|
||
body{
|
||
display: table-cell;
|
||
height: 100%
|
||
}
|
||
.el-drawer {
|
||
height: 300px;
|
||
}
|
||
.grid-content{
|
||
text-align:center;
|
||
font-size:24px;
|
||
color:white;
|
||
}
|
||
.subTitle {
|
||
text-align: center;
|
||
font-size: 12px;
|
||
color: white;
|
||
}
|
||
.el-dropdown-link {
|
||
cursor: pointer;
|
||
color: #50647a;
|
||
/*background-color: #50647a;*/
|
||
width: 6px;
|
||
}
|
||
|
||
.el-icon-arrow-down {
|
||
font-size: 12px;
|
||
}
|
||
|
||
</style> |