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/echarts490rc/echarts490rc.min.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>
|
|
<link href="./lib/elementui/index2.15.9v.css" rel="stylesheet" />
|
|
<!--<script src="map/shanghai.js"></script>-->
|
|
<script src="component/layui/layui.js"></script>
|
|
<script src="Scripts/jinqjs.js"></script>
|
|
<script src="Scripts/linq.min.js"></script>
|
|
|
|
</head>
|
|
<body style="background-color: #0D2753;">
|
|
|
|
<div id="app" style="background-color: #0D2753;">
|
|
<el-container v-loading="loading" v-loading.fullscreen.lock="false" :element-loading-text="showLoadingTip"
|
|
element-loading-spinner="el-icon-loading" element-loading-background="#0D2753">
|
|
|
|
<el-header style="margin-top: 30px;">
|
|
<el-row>
|
|
<el-col :span="24" style="padding-bottom:15px">
|
|
<div class="grid-content">
|
|
年份风险评估展示
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<!--这块写入相关的选择框-->
|
|
<!--<el-divider></el-divider>-->
|
|
|
|
<el-row>
|
|
<el-form :inline="true" class="demo-form-inline">
|
|
<el-form-item label="食品大类">
|
|
<el-select v-model="selDaLei"
|
|
filterable
|
|
placeholder="请选择食品大类">
|
|
<el-option v-for="item in selDaLeis"
|
|
:key="item"
|
|
:label="item"
|
|
:value="item">
|
|
</el-option>
|
|
</el-select>
|
|
|
|
</el-form-item>
|
|
<el-form-item label="检测项目">
|
|
|
|
<el-select v-model="selProject"
|
|
filterable
|
|
remote
|
|
reserve-keyword
|
|
placeholder="请输入关键词"
|
|
:remote-method="remoteMethod"
|
|
:loading="loading">
|
|
<el-option v-for="item in selProjects"
|
|
:key="item.JCXM"
|
|
:label="item.JCXM"
|
|
:value="item.JCXM">
|
|
</el-option>
|
|
</el-select>
|
|
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button style="width: 100px;display: block;margin-left: auto;margin-right: auto;margin-top: 0px;margin-bottom: 100px;"
|
|
@click="getSearch">查询数据</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-row>
|
|
</el-header>
|
|
<el-main>
|
|
<div id="main" style="width: 100%;height:500px;">
|
|
</div>
|
|
</el-main>
|
|
</el-container>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|
|
<script>
|
|
|
|
///////////////////////////////////////////////////
|
|
//该部分是Vue应用封装
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
showLoadingTip: '正在进行海量实时数据计算,请等待...',
|
|
selYears: ['2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022'],
|
|
selYear: '',
|
|
|
|
selDaLeis: [],
|
|
selDaLei:'',
|
|
|
|
selProjects: [], //页面上面动态的下拉菜单
|
|
selProject: '铅',//当前选择的项目名称
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
Vue.prototype.$loading = this.loading
|
|
this.loading = true;
|
|
//设置默认全局的地图数据
|
|
//this.getSearch();
|
|
this.GetDistinctDaLei();
|
|
this.getSearch();
|
|
this.loading = false;
|
|
},
|
|
methods: {
|
|
//第一步的获取大类的下拉菜单的数据
|
|
GetDistinctDaLei() {
|
|
_this = this;
|
|
this.loading = true;
|
|
axios({
|
|
url: "./Classify/GetDistinctDaLei"
|
|
}).then((res) => {
|
|
console.log('GetDistinctDaLei', res.data.data)
|
|
//全部结果
|
|
_this.selDaLeis = [];
|
|
_this.selDaLeis = res.data.data;
|
|
console.log(' _this.selDaLeis', _this.selDaLeis);
|
|
_this.loading = false;
|
|
});
|
|
},
|
|
remoteMethod(query) {
|
|
var _this = this;
|
|
|
|
|
|
|
|
if (query !== '') {
|
|
_this.loading = true;
|
|
|
|
//编写从服务器获取数据的方法
|
|
axios.get('./PageCache/GetDynamicSearchList?str=' + query).then((res) => {
|
|
console.log('res', res.data.data)
|
|
_this.selProjects = res.data.data;
|
|
|
|
_this.loading = false;
|
|
});
|
|
} else {
|
|
this.options = [];
|
|
}
|
|
},
|
|
//读取页面的表格数据
|
|
getSearch() {
|
|
var _this = this;
|
|
|
|
//if (_this.selDaLei == '') {
|
|
// layer.msg('请选择检测大类')
|
|
// return;
|
|
//}
|
|
if (_this.selProject == '') {
|
|
layer.msg('请选择检测项目')
|
|
}
|
|
_this.loading = true;
|
|
|
|
//let mainUrl = 'http://172.28.3.128/home/GetJiance5?wherestr=[{"lianjietype":"","CXTJPY":"SP_DL","CXTJ":"食品大类","CXLX":"等于","CXLXid":1,"CXNR":"{{SPDL}}"},{"lianjietype":"and","CXTJPY":"JCXM","CXTJ":"检测项目","CXLX":"等于","CXLXid":1,"CXNR":"{{JCXM}}"}]&wherestr2=[]&num=2';
|
|
|
|
//let mainUrl = 'http://172.28.3.128/home/GetJiance5?wherestr=[';
|
|
//这里保留了两个参数,可以传递tring wherestr, string FenLei="SPXL",int YearStart=2005,int YearEnd=2021,开始时间和结束时间,直接能够解决以后的时间轴长度的事情,也可以直接后端修改默认配置即可
|
|
let mainUrl = '../FengXianPingGu/GetNianFenBaoLuLiang?wherestr=[';
|
|
|
|
if (this.selDaLei != '') {
|
|
mainUrl = mainUrl + '{"lianjietype":"","CXTJPY":"SP_DL","CXTJ":"食品大类","CXLX":"等于","CXLXid":1,"CXNR":"{{SPDL}}"},';
|
|
}
|
|
|
|
//mainUrl = mainUrl + '{"lianjietype":"and","CXTJPY":"JCXM","CXTJ":"检测项目","CXLX":"等于","CXLXid":1,"CXNR":"{{JCXM}}"}]&wherestr2=[]&num=2';
|
|
mainUrl = mainUrl + '{"lianjietype":"and","CXTJPY":"JCXM","CXTJ":"检测项目","CXLX":"等于","CXLXid":1,"CXNR":"{{JCXM}}"}]';
|
|
|
|
|
|
console.log('展示查询信息', mainUrl.replace('{{SPDL}}', this.selDaLei).replace('{{JCXM}}', this.selProject))
|
|
|
|
axios.get('PageCache/GetDanWeiFromXFL?name=' + _this.selProject).then(res => {
|
|
console.log('danweires', res)
|
|
/* option.title.text = '食品小类风险评估-' + _this.selProject + '(' + res.data.data + ")";*/
|
|
option.yAxis[0].name = res.data.data;
|
|
|
|
axios.get(mainUrl.replace('{{SPDL}}', this.selDaLei).replace('{{JCXM}}', this.selProject)).then((res) => {
|
|
|
|
|
|
|
|
var dataX = Enumerable.From(res.data.data).Select("$.name").Take(1000).ToArray();
|
|
var dataY = Enumerable.From(res.data.data).Select("$.value").Take(1000).ToArray();
|
|
console.log('dataX', dataX);
|
|
console.log('dataY', dataY);
|
|
for (var i = 0; i < dataY.length; i++) {
|
|
dataY[i] = parseFloat(dataY[i]).toFixed(6)
|
|
}
|
|
window.dataX = dataX;
|
|
window.dataY = dataY;
|
|
option.xAxis[0].data = dataX;
|
|
option.series[0].data = dataY;
|
|
myChart.setOption(option);
|
|
|
|
_this.loading = false;
|
|
|
|
});
|
|
})
|
|
},
|
|
|
|
}
|
|
})
|
|
|
|
var changeRowData_bll_avg = function (row) {
|
|
return (row.bll_avg == null ? 0 : row.bll_avg.toFixed(6));
|
|
}
|
|
|
|
|
|
//初始化界面地图层
|
|
var myChart = echarts.init(document.getElementById('main'));
|
|
|
|
|
|
let zoomShow = false;
|
|
//if (dataY.length > 14) {
|
|
// zoomShow = true;
|
|
//} else {
|
|
// zoomShow = false;
|
|
//}
|
|
var option = {
|
|
backgroundColor: "#0D2753",
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
},
|
|
grid: {
|
|
top: "10%",
|
|
right: "5%",
|
|
left: "5%",
|
|
bottom: "10%",
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
data: window.dataX,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "rgba(66, 192, 255, .3)",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
margin: 10,
|
|
color: "#05D5FF",
|
|
textStyle: {
|
|
fontSize: 11,
|
|
},
|
|
rotate: "45",
|
|
},
|
|
axisTick: {
|
|
//刻度
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
name:'我测试的',
|
|
axisLabel: {
|
|
padding: [3, 0, 0, 0],
|
|
formatter: "{value}",
|
|
color: "rgba(95, 187, 235, 1)",
|
|
textStyle: {
|
|
fontSize: 11,
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: true,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "rgba(66, 192, 255, .3)",
|
|
},
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "rgba(255,255,255,0)",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
dataZoom: [
|
|
//滚动条
|
|
{
|
|
show: zoomShow,
|
|
type: "slider",
|
|
realtime: true,
|
|
startValue: 0,
|
|
endValue: 20,
|
|
xAxisIndex: [0],
|
|
bottom: "10",
|
|
left: "30",
|
|
height: 10,
|
|
borderColor: "rgba(0,0,0,0)",
|
|
textStyle: {
|
|
color: "#05D5FF",
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
type: "bar",
|
|
data: window.dataY,
|
|
barWidth: "10",
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "rgba(5, 213, 255, 1)", // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 0.98,
|
|
color: "rgba(5, 213, 255, 0)", // 100% 处的颜色
|
|
},
|
|
],
|
|
false
|
|
),
|
|
shadowColor: "rgba(5, 213, 255, 1)",
|
|
shadowBlur: 4,
|
|
},
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
lineHeight: 10,
|
|
formatter: "{c}",
|
|
position: "top",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 10,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
|
|
|
|
|
|
/*myChart.clear();*/
|
|
//设定值应用到界面显示地图
|
|
/*myChart.setOption(option);*/
|
|
</script>
|
|
|
|
<!--//设置抽屉组件的高度-->
|
|
<style>
|
|
html{
|
|
height:100%;
|
|
display:table;
|
|
}
|
|
body{
|
|
display: table-cell;
|
|
height: 100%
|
|
}
|
|
.grid-content {
|
|
text-align: center;
|
|
font-size: 24px;
|
|
color: white;
|
|
}
|
|
|
|
</style> |