<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
<title>省级挂网进展</title>
|
</head>
|
|
<body>
|
<style type="text/css">
|
h1 {
|
margin: 0;
|
padding: 0;
|
}
|
li {
|
list-style: none;
|
}
|
</style>
|
<div v-cloak id="hbody" class="h_body" style="margin: 0;padding: 0;">
|
<div ref="ref_header" class="v_header">
|
</div>
|
<div ref="ref_main" class="v_main" style="padding: 0px 36px;">
|
<h1 style="font-weight: 600;color: #3A63A6;text-align: center;">省级挂网进展</h1>
|
<div style="display: flex;justify-content: center;margin-top: 15px;">
|
<el-radio-group v-model="radio1" size="large" @change="change">
|
<el-radio-button label="产品1"></el-radio-button>
|
<el-radio-button label="产品2"></el-radio-button>
|
<el-radio-button label="产品3"></el-radio-button>
|
<el-radio-button label="产品4"></el-radio-button>
|
</el-radio-group>
|
</div>
|
<div class="block" style="margin-top: 15px;margin-left: 20px;">
|
<span class="demonstration">切换年份</span>
|
<el-date-picker
|
v-model="value3"
|
type="year"
|
@change="changeyear"
|
placeholder="选择年">
|
</el-date-picker>
|
</div>
|
<div v-show="radio1 == '产品1'" style="width: 100%;height: 100%;display: flex;justify-content: center;margin-top: 20px;">
|
<div ref="csyb" style="width: 80%;height:80%;overflow: hidden;">
|
<div id = "spread1" style="width: 100%;height: 100%;"></div>
|
</div>
|
</div>
|
<div v-show="radio1 == '产品2'" style="width: 100%;height: 100%;display: flex;justify-content: center;margin-top: 20px;">
|
<div style="width: 80%;height: 80%;overflow: hidden;">
|
<div id = "spread2" :style="{width: ewidth, height: eheight}"></div>
|
</div>
|
</div>
|
|
<div v-show="radio1 == '产品3'" style="width: 100%;height: 100%;display: flex;justify-content: center;margin-top: 20px;">
|
<div style="width: 80%;height: 80%;overflow: hidden;">
|
<div id = "spread3" :style="{width: ewidth, height: eheight}"></div>
|
</div>
|
</div>
|
<div v-show="radio1 == '产品4'" style="width: 100%;height: 100%;display: flex;justify-content: center;margin-top: 20px;">
|
<div style="width: 80%;height: 80%;overflow: hidden;">
|
<div id = "spread4" :style="{width: ewidth, height: eheight}"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<script type="text/javascript">
|
function loadJsCss(callback) {
|
var jscss_urls = [
|
{id: "js6", type: "js", url: "root/js/echarts.js"},
|
{id: "js6", type: "js", url: "root/js/China.js"},
|
];
|
window.top.initJsCss(document, jscss_urls, callback);
|
}
|
|
function initVue() {
|
new BasicsVue({
|
el: "#hbody",
|
data: {
|
value3:"2022",
|
radio1: '产品1',
|
cardtablist: [
|
// {id: "6-5-2-2-1", type: "cardtab", name: "新增协会智库", icon:"", img: "../../img/page/associationLibraryList.png", enname:"", url: "../../page/flow_manage/addAssociationLibraryList.html", parentid: "1", opentype: "add"},
|
// {id: "2-1-2", type: "cardtab", name: "中央专家库", icon:"", img: "../../img/page/icon_open@2x.png", enname:"", url: "../../page/flow_manage/centralfileList.html", parentid: "2", opentype: "add"},
|
],
|
page_url: "",
|
rowkey: "id",
|
dataname: "",
|
module_title: "",
|
tableHeight: 500,
|
filterAttr: {
|
columnnumber: 4,
|
labelwidth: "100px",
|
labelposition: "left",//"left",//"right",
|
size: "medium",
|
borderleft: "0px solid #c6c6c600",
|
bordertop: "8px solid #c6c6c600",
|
borderright: "0px solid #c6c6c600",
|
borderbottom: "0px solid #c6c6c600",
|
border: "3px solid #c6c6c600"
|
},
|
formButton: {
|
query: true,
|
empty: true,
|
add: false,
|
import: false,
|
export: false
|
},
|
filterObj: {},
|
filterFieldsObj: {},
|
filterFields: [
|
{isshow: "T",fieldname: "province", field: "province", name: "省份", type: "select"},
|
{isshow: "T", fieldname: "city",field: "city",name: "城市", type: "select"},
|
// {isshow: "T", field: "field1", name: "客户编号", type: "select"},
|
// {isshow: "T", field: "name", fieldname: "name", name: "客户名称", fieldtype: "like", type: "select"},
|
// {isshow: "T", field: "creator_name", fieldname: "creator_name", name: "客户属性", fieldtype: "like"},
|
// {isshow: "T", field: "createtime", name: "是否启用",fieldtype: "inScopeInclude"},
|
],
|
|
//Tab项
|
activeName: "code1",
|
wrapStyle: "",
|
viewStyle: "",
|
|
tabList: [
|
{code: "code1", name: "列表"},
|
],
|
tabsObj: {
|
code1: true,
|
},
|
|
isRefresh: true,
|
pagesize: 10,
|
pagenum: 0,
|
total: 0,
|
orderby:"createtime desc",
|
ewidth:"",
|
eheight:"",
|
year:"2022",
|
dataarr:[
|
{ name: '北京', value: '已挂网' },
|
{ name: '天津', value: '已挂网' },
|
{ name: '上海', value: '已挂网' },
|
{ name: '重庆', value: '已挂网' },
|
{ name: '西藏', value: '已挂网' },
|
{ name: '宁夏', value: '已挂网' },
|
{ name: '新疆', value: '进行中' },
|
{ name: '香港', value: '进行中' },
|
{ name: '澳门', value: '弃落标' },
|
{ name: '河北', value: '进行中' },
|
{ name: '山西', value: '进行中' },
|
{ name: '辽宁', value: '进行中' },
|
{ name: '吉林', value: '进行中' },
|
{ name: '黑龙江', value: '待申报' },
|
{ name: '江苏', value: '待申报' },
|
{ name: '浙江', value: '待申报' },
|
{ name: '安徽', value: '待申报' },
|
{ name: '福建', value: '待申报' },
|
{ name: '江西', value: '待申报' },
|
{ name: '山东', value: '待申报' },
|
{ name: '河南', value: '待申报' },
|
{ name: '湖北', value: '待申报'},
|
{ name: '湖南', value: '待申报' },
|
{ name: '广东', value: '待申报' },
|
{ name: '海南', value: '待申报' },
|
{ name: '四川', value: '弃落标' },
|
{ name: '贵州', value: '弃落标' },
|
{ name: '云南', value: '弃落标' },
|
{ name: '陕西', value: '弃落标' },
|
{ name: '甘肃', value: '弃落标' },
|
{ name: '青海', value: '弃落标' },
|
{ name: '内蒙古', value: '已挂网' },
|
{ name: '广西', value: '待申报' },
|
],
|
dataarrt:[
|
{ name: '北京', value: '已挂网' },
|
{ name: '天津', value: '已挂网' },
|
{ name: '上海', value: '弃落标' },
|
{ name: '重庆', value: '已挂网' },
|
{ name: '西藏', value: '弃落标' },
|
{ name: '宁夏', value: '已挂网' },
|
{ name: '新疆', value: '进行中' },
|
{ name: '香港', value: '进行中' },
|
{ name: '澳门', value: '弃落标' },
|
{ name: '河北', value: '进行中' },
|
{ name: '山西', value: '弃落标' },
|
{ name: '辽宁', value: '进行中' },
|
{ name: '吉林', value: '进行中' },
|
{ name: '黑龙江', value: '待申报' },
|
{ name: '江苏', value: '已挂网' },
|
{ name: '浙江', value: '待申报' },
|
{ name: '安徽', value: '待申报' },
|
{ name: '福建', value: '已挂网' },
|
{ name: '江西', value: '已挂网' },
|
{ name: '山东', value: '待申报' },
|
{ name: '河南', value: '待申报' },
|
{ name: '湖北', value: '待申报'},
|
{ name: '湖南', value: '已挂网' },
|
{ name: '广东', value: '待申报' },
|
{ name: '海南', value: '待申报' },
|
{ name: '四川', value: '弃落标' },
|
{ name: '贵州', value: '进行中' },
|
{ name: '云南', value: '弃落标' },
|
{ name: '陕西', value: '进行中' },
|
{ name: '甘肃', value: '弃落标' },
|
{ name: '青海', value: '弃落标' },
|
{ name: '内蒙古', value: '已挂网' },
|
{ name: '广西', value: '待申报' },
|
],
|
dataarre:[
|
{ name: '北京', value: '已挂网' },
|
{ name: '天津', value: '已挂网' },
|
{ name: '上海', value: '已挂网' },
|
{ name: '重庆', value: '待申报' },
|
{ name: '西藏', value: '待申报' },
|
{ name: '宁夏', value: '已挂网' },
|
{ name: '新疆', value: '待申报' },
|
{ name: '香港', value: '进行中' },
|
{ name: '澳门', value: '待申报' },
|
{ name: '河北', value: '进行中' },
|
{ name: '山西', value: '待申报' },
|
{ name: '辽宁', value: '进行中' },
|
{ name: '吉林', value: '进行中' },
|
{ name: '黑龙江', value: '待申报' },
|
{ name: '江苏', value: '进行中' },
|
{ name: '浙江', value: '进行中' },
|
{ name: '安徽', value: '待申报' },
|
{ name: '福建', value: '进行中' },
|
{ name: '江西', value: '待申报' },
|
{ name: '山东', value: '待申报' },
|
{ name: '河南', value: '待申报' },
|
{ name: '湖北', value: '已挂网'},
|
{ name: '湖南', value: '待申报' },
|
{ name: '广东', value: '待申报' },
|
{ name: '海南', value: '待申报' },
|
{ name: '四川', value: '已挂网' },
|
{ name: '贵州', value: '已挂网' },
|
{ name: '云南', value: '已挂网' },
|
{ name: '陕西', value: '弃落标' },
|
{ name: '甘肃', value: '已挂网' },
|
{ name: '青海', value: '弃落标' },
|
{ name: '内蒙古', value: '已挂网' },
|
{ name: '广西', value: '待申报' },
|
],
|
dataarrf:[
|
{ name: '北京', value: '已挂网' },
|
{ name: '天津', value: '已挂网' },
|
{ name: '上海', value: '进行中' },
|
{ name: '重庆', value: '进行中' },
|
{ name: '西藏', value: '已挂网' },
|
{ name: '宁夏', value: '已挂网' },
|
{ name: '新疆', value: '进行中' },
|
{ name: '香港', value: '进行中' },
|
{ name: '澳门', value: '弃落标' },
|
{ name: '河北', value: '进行中' },
|
{ name: '山西', value: '进行中' },
|
{ name: '辽宁', value: '进行中' },
|
{ name: '吉林', value: '进行中' },
|
{ name: '黑龙江', value: '待申报' },
|
{ name: '江苏', value: '进行中' },
|
{ name: '浙江', value: '已挂网' },
|
{ name: '安徽', value: '进行中' },
|
{ name: '福建', value: '待申报' },
|
{ name: '江西', value: '已挂网' },
|
{ name: '山东', value: '进行中' },
|
{ name: '河南', value: '待申报' },
|
{ name: '湖北', value: '已挂网'},
|
{ name: '湖南', value: '待申报' },
|
{ name: '广东', value: '待申报' },
|
{ name: '海南', value: '待申报' },
|
{ name: '四川', value: '已挂网' },
|
{ name: '贵州', value: '待申报' },
|
{ name: '云南', value: '待申报' },
|
{ name: '陕西', value: '待申报' },
|
{ name: '甘肃', value: '弃落标' },
|
{ name: '青海', value: '弃落标' },
|
{ name: '内蒙古', value: '已挂网' },
|
{ name: '广西', value: '待申报' },
|
],
|
dataarr1:[
|
{ name: '北京', value: '已挂网' },
|
{ name: '天津', value: '进行中' },
|
{ name: '上海', value: '进行中' },
|
{ name: '重庆', value: '已挂网' },
|
{ name: '西藏', value: '已挂网' },
|
{ name: '宁夏', value: '已挂网' },
|
{ name: '新疆', value: '进行中' },
|
{ name: '香港', value: '进行中' },
|
{ name: '澳门', value: '弃落标' },
|
{ name: '河北', value: '进行中' },
|
{ name: '山西', value: '进行中' },
|
{ name: '辽宁', value: '进行中' },
|
{ name: '吉林', value: '进行中' },
|
{ name: '黑龙江', value: '待申报' },
|
{ name: '江苏', value: '待申报' },
|
{ name: '浙江', value: '弃落标' },
|
{ name: '安徽', value: '弃落标' },
|
{ name: '福建', value: '弃落标' },
|
{ name: '江西', value: '待申报' },
|
{ name: '山东', value: '待申报' },
|
{ name: '河南', value: '待申报' },
|
{ name: '湖北', value: '待申报'},
|
{ name: '湖南', value: '待申报' },
|
{ name: '广东', value: '待申报' },
|
{ name: '海南', value: '待申报' },
|
{ name: '四川', value: '弃落标' },
|
{ name: '贵州', value: '弃落标' },
|
{ name: '云南', value: '待申报' },
|
{ name: '陕西', value: '待申报' },
|
{ name: '甘肃', value: '待申报' },
|
{ name: '青海', value: '弃落标' },
|
{ name: '内蒙古', value: '已挂网' },
|
{ name: '广西', value: '待申报' },
|
],
|
dataarr2:[
|
{ name: '北京', value: '已挂网' },
|
{ name: '天津', value: '已挂网' },
|
{ name: '上海', value: '已挂网' },
|
{ name: '重庆', value: '已挂网' },
|
{ name: '西藏', value: '已挂网' },
|
{ name: '宁夏', value: '进行中' },
|
{ name: '新疆', value: '进行中' },
|
{ name: '香港', value: '弃落标' },
|
{ name: '澳门', value: '弃落标' },
|
{ name: '河北', value: '进行中' },
|
{ name: '山西', value: '进行中' },
|
{ name: '辽宁', value: '进行中' },
|
{ name: '吉林', value: '进行中' },
|
{ name: '黑龙江', value: '待申报' },
|
{ name: '江苏', value: '待申报' },
|
{ name: '浙江', value: '已挂网' },
|
{ name: '安徽', value: '弃落标' },
|
{ name: '福建', value: '待申报' },
|
{ name: '江西', value: '待申报' },
|
{ name: '山东', value: '已挂网' },
|
{ name: '河南', value: '待申报' },
|
{ name: '湖北', value: '弃落标'},
|
{ name: '湖南', value: '待申报' },
|
{ name: '广东', value: '已挂网' },
|
{ name: '海南', value: '待申报' },
|
{ name: '四川', value: '弃落标' },
|
{ name: '贵州', value: '弃落标' },
|
{ name: '云南', value: '弃落标' },
|
{ name: '陕西', value: '进行中' },
|
{ name: '甘肃', value: '弃落标' },
|
{ name: '青海', value: '进行中' },
|
{ name: '内蒙古', value: '已挂网' },
|
{ name: '广西', value: '待申报' },
|
],
|
dataarr3:[
|
{ name: '北京', value: '已挂网' },
|
{ name: '天津', value: '已挂网' },
|
{ name: '上海', value: '进行中' },
|
{ name: '重庆', value: '已挂网' },
|
{ name: '西藏', value: '已挂网' },
|
{ name: '宁夏', value: '已挂网' },
|
{ name: '新疆', value: '已挂网' },
|
{ name: '香港', value: '进行中' },
|
{ name: '澳门', value: '弃落标' },
|
{ name: '河北', value: '进行中' },
|
{ name: '山西', value: '待申报' },
|
{ name: '辽宁', value: '进行中' },
|
{ name: '吉林', value: '弃落标' },
|
{ name: '黑龙江', value: '待申报' },
|
{ name: '江苏', value: '进行中' },
|
{ name: '浙江', value: '待申报' },
|
{ name: '安徽', value: '进行中' },
|
{ name: '福建', value: '进行中' },
|
{ name: '江西', value: '待申报' },
|
{ name: '山东', value: '进行中' },
|
{ name: '河南', value: '待申报' },
|
{ name: '湖北', value: '待申报'},
|
{ name: '湖南', value: '待申报' },
|
{ name: '广东', value: '待申报' },
|
{ name: '海南', value: '进行中' },
|
{ name: '四川', value: '弃落标' },
|
{ name: '贵州', value: '弃落标' },
|
{ name: '云南', value: '待申报' },
|
{ name: '陕西', value: '待申报' },
|
{ name: '甘肃', value: '弃落标' },
|
{ name: '青海', value: '弃落标' },
|
{ name: '内蒙古', value: '已挂网' },
|
{ name: '广西', value: '待申报' },
|
],
|
dataarr4:[
|
{ name: '北京', value: '弃落标' },
|
{ name: '天津', value: '已挂网' },
|
{ name: '上海', value: '弃落标' },
|
{ name: '重庆', value: '已挂网' },
|
{ name: '西藏', value: '已挂网' },
|
{ name: '宁夏', value: '已挂网' },
|
{ name: '新疆', value: '弃落标' },
|
{ name: '香港', value: '进行中' },
|
{ name: '澳门', value: '弃落标' },
|
{ name: '河北', value: '进行中' },
|
{ name: '山西', value: '进行中' },
|
{ name: '辽宁', value: '弃落标' },
|
{ name: '吉林', value: '进行中' },
|
{ name: '黑龙江', value: '待申报' },
|
{ name: '江苏', value: '待申报' },
|
{ name: '浙江', value: '已挂网' },
|
{ name: '安徽', value: '待申报' },
|
{ name: '福建', value: '待申报' },
|
{ name: '江西', value: '已挂网' },
|
{ name: '山东', value: '待申报' },
|
{ name: '河南', value: '已挂网' },
|
{ name: '湖北', value: '待申报'},
|
{ name: '湖南', value: '已挂网' },
|
{ name: '广东', value: '待申报' },
|
{ name: '海南', value: '待申报' },
|
{ name: '四川', value: '弃落标' },
|
{ name: '贵州', value: '弃落标' },
|
{ name: '云南', value: '已挂网' },
|
{ name: '陕西', value: '弃落标' },
|
{ name: '甘肃', value: '已挂网' },
|
{ name: '青海', value: '弃落标' },
|
{ name: '内蒙古', value: '已挂网' },
|
{ name: '广西', value: '待申报' },
|
],
|
dataarr5:[
|
{ name: '北京', value: '已挂网' },
|
{ name: '天津', value: '已挂网' },
|
{ name: '上海', value: '待申报' },
|
{ name: '重庆', value: '已挂网' },
|
{ name: '西藏', value: '待申报' },
|
{ name: '宁夏', value: '已挂网' },
|
{ name: '新疆', value: '已挂网' },
|
{ name: '香港', value: '已挂网' },
|
{ name: '澳门', value: '弃落标' },
|
{ name: '河北', value: '已挂网' },
|
{ name: '山西', value: '进行中' },
|
{ name: '辽宁', value: '已挂网' },
|
{ name: '吉林', value: '已挂网' },
|
{ name: '黑龙江', value: '待申报' },
|
{ name: '江苏', value: '待申报' },
|
{ name: '浙江', value: '待申报' },
|
{ name: '安徽', value: '待申报' },
|
{ name: '福建', value: '待申报' },
|
{ name: '江西', value: '待申报' },
|
{ name: '山东', value: '待申报' },
|
{ name: '河南', value: '进行中' },
|
{ name: '湖北', value: '待申报'},
|
{ name: '湖南', value: '进行中' },
|
{ name: '广东', value: '待申报' },
|
{ name: '海南', value: '待申报' },
|
{ name: '四川', value: '弃落标' },
|
{ name: '贵州', value: '进行中' },
|
{ name: '云南', value: '弃落标' },
|
{ name: '陕西', value: '弃落标' },
|
{ name: '甘肃', value: '进行中' },
|
{ name: '青海', value: '弃落标' },
|
{ name: '内蒙古', value: '已挂网'},
|
{ name: '广西', value: '待申报' },
|
],
|
},
|
created() {
|
var me = this;
|
this.popupParames = clone(Root.popupParames);
|
|
},
|
|
mounted() {
|
var me = this;
|
// this.initData();
|
this.$nextTick(function() {
|
let w_ = this.$refs.ref_header.offsetWidth;
|
let h_ = this.$refs.ref_header.offsetHeight;
|
//let h_ = 0;
|
let clientHeight = document.documentElement.clientHeight;
|
var m_h = clientHeight - h_ - 10;
|
this.tableHeight = clientHeight - h_ - 252;
|
|
this.wrapStyle = "overflow-y: auto; width: 100%; height: " + (m_h - 50) + "px";
|
this.viewStyle = "max-height: " + (m_h - 50) + "px";
|
this.$refs.ref_main.style.height = m_h + "px";
|
me.ewidth = this.$refs.csyb.clientWidth + "px";
|
me.eheight = this.$refs.csyb.clientHeight + "px";
|
//this.$refs.ref_v_body.style.height = m_h + "px";
|
})
|
setTimeout(function(){
|
me.spread1();
|
},200);
|
setTimeout(function(){
|
me.spread2();
|
me.spread3();
|
me.spread4();
|
},500);
|
},
|
methods: {
|
GMTToStr(time){
|
let date = new Date(time)
|
let Str=date.getFullYear()
|
return Str
|
},
|
changeyear(){
|
var me = this;
|
var year = me.value3;
|
year = this.GMTToStr(year)
|
if(year == "2022"){
|
me.dataarr = me.dataarr;
|
me.dataarrt = me.dataarrt;
|
me.dataarre = me.dataarre;
|
me.dataarrf = me.dataarrf;
|
}else if(year == "2021"){
|
me.dataarr = me.dataarr1;
|
me.dataarrt = me.dataarr1;
|
me.dataarre = me.dataarr1;
|
me.dataarrf = me.dataarr1;
|
}else if(year == "2020"){
|
me.dataarr = me.dataarr2;
|
me.dataarrt = me.dataarr2;
|
me.dataarre = me.dataarr2;
|
me.dataarrf = me.dataarr2;
|
}else if(year == "2019" || year == "2018" || year == "2017"){
|
me.dataarr = me.dataarr3;
|
me.dataarrt = me.dataarr3;
|
me.dataarre = me.dataarr3;
|
me.dataarrf = me.dataarr3;
|
}else if(year == "2016" || year == "2015" || year == "2014"){
|
me.dataarr = me.dataarr4;
|
me.dataarrt = me.dataarr4;
|
me.dataarre = me.dataarr4;
|
me.dataarrf = me.dataarr4;
|
}else if(year == "2013" || year == "2012" || year == "2011"){
|
me.dataarr = me.dataarr5;
|
me.dataarrt = me.dataarr5;
|
me.dataarre = me.dataarr5;
|
me.dataarrf = me.dataarr5;
|
}else if(year == "2010" || year == "2009" || year == "2008"){
|
me.dataarr = me.dataarr2;
|
me.dataarrt = me.dataarr2;
|
me.dataarre = me.dataarr2;
|
me.dataarrf = me.dataarr2;
|
}
|
this.spread1();
|
this.spread2();
|
this.spread3();
|
this.spread4();
|
},
|
change() {
|
// console.log('123')
|
},
|
spread1(){
|
var spreadDom1 = document.getElementById('spread1');
|
var spreadChart1 = echarts.init(spreadDom1);
|
var me = this;
|
const data = me.dataarr;
|
|
//取各省份的中心坐标存到geoCoordMap中
|
let geoCoordMap = {};
|
const getGeo = function(areaName){
|
for (let i = 0; i < areaName.features.length; i++) {
|
geoCoordMap[areaName.features[i].properties.name] = areaName.features[i].properties.center;
|
}
|
return geoCoordMap;
|
}
|
getGeo(China);
|
|
const 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)
|
});
|
}
|
// console.log(res)
|
}
|
return res;
|
};
|
var spreadOption1 = {
|
// 背景颜色
|
backgroundColor: "",
|
// 提示浮窗样式
|
tooltip: {
|
show: true,
|
formatter:function(params){
|
// console.log(params)
|
return params.name+' : '+params.data.value[2]
|
},
|
trigger: "item",
|
alwaysShowContent: false,
|
backgroundColor: "#0C121C",
|
borderColor: "rgba(0, 0, 0, 0.16);",
|
hideDelay: 100,
|
triggerOn: "mousemove",
|
enterable: true,
|
textStyle: {
|
color: "#DADADA",
|
fontSize: "12",
|
width: 20,
|
height: 30,
|
overflow: "break",
|
},
|
showDelay: 100,
|
},
|
visualMap: {
|
label:{
|
// show:false
|
},
|
show:true,
|
type:'piecewise',
|
// dimension:2,
|
categories:['已挂网','进行中','待申报','弃落标'],
|
inRange: {
|
color: ['ForestGreen', 'Gold', 'LightSalmon','Red']
|
}
|
},
|
series:[
|
{
|
name:'省级挂网进展',
|
type:'map',
|
mapType:'china',
|
geoIndex:0,
|
data:convertData(data),
|
}
|
],
|
geo: {
|
map: "china",
|
// left:"40px",
|
// right:"40px",
|
top:'30%',
|
zoom:1.6,
|
label: {
|
// 通常状态下的样式
|
normal: {
|
show: true,
|
textStyle: {
|
color: "white",
|
fontWeight:'bold',
|
fontSize:10
|
},
|
},
|
// 鼠标放上去的样式
|
emphasis: {
|
// show:false,
|
textStyle: {
|
color: "#fff",
|
},
|
},
|
},
|
// 地图区域的样式设置
|
itemStyle: {
|
normal: {
|
borderColor: "rgba(32,178,170, 0.5)",
|
borderWidth: 1,
|
areaColor: '#f0e68c',
|
},
|
// 鼠标放上去高亮的样式
|
emphasis: {
|
areaColor: "MediumAquamarine",
|
borderWidth: 0,
|
}
|
},
|
},
|
};
|
|
// 地图注册，第一个参数的名字必须和option.geo.map一致
|
echarts.registerMap("china",China)
|
spreadChart1.setOption(spreadOption1);
|
},
|
spread2(){
|
var spreadDom2 = document.getElementById('spread2');
|
var spreadChart2 = echarts.init(spreadDom2);
|
var me = this;
|
const data = me.dataarrt;
|
|
//取各省份的中心坐标存到geoCoordMap中
|
let geoCoordMap = {};
|
const getGeo = function(areaName){
|
for (let i = 0; i < areaName.features.length; i++) {
|
geoCoordMap[areaName.features[i].properties.name] = areaName.features[i].properties.center;
|
}
|
return geoCoordMap;
|
}
|
getGeo(China);
|
|
const 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)
|
});
|
}
|
// console.log(res)
|
}
|
return res;
|
};
|
var spreadOption2 = {
|
// 背景颜色
|
backgroundColor: "",
|
// 提示浮窗样式
|
tooltip: {
|
show: true,
|
formatter:function(params){
|
// console.log(params)
|
return params.name+' : '+params.data.value[2]
|
},
|
trigger: "item",
|
alwaysShowContent: false,
|
backgroundColor: "#0C121C",
|
borderColor: "rgba(0, 0, 0, 0.16);",
|
hideDelay: 100,
|
triggerOn: "mousemove",
|
enterable: true,
|
textStyle: {
|
color: "#DADADA",
|
fontSize: "12",
|
width: 20,
|
height: 30,
|
overflow: "break",
|
},
|
showDelay: 100,
|
},
|
visualMap: {
|
label:{
|
// show:false
|
},
|
show:true,
|
type:'piecewise',
|
// dimension:2,
|
categories:['已挂网','进行中','待申报','弃落标'],
|
inRange: {
|
color: ['ForestGreen', 'Gold', 'LightSalmon','Red']
|
}
|
},
|
series:[
|
{
|
name:'省级挂网进展',
|
type:'map',
|
mapType:'china',
|
geoIndex:0,
|
data:convertData(data),
|
}
|
],
|
geo: {
|
map: "china",
|
// left:"40px",
|
// right:"40px",
|
top:'30%',
|
zoom:1.6,
|
label: {
|
// 通常状态下的样式
|
normal: {
|
show: true,
|
textStyle: {
|
color: "white",
|
fontWeight:'bold',
|
fontSize:10
|
},
|
},
|
// 鼠标放上去的样式
|
emphasis: {
|
// show:false,
|
textStyle: {
|
color: "#fff",
|
},
|
},
|
},
|
// 地图区域的样式设置
|
itemStyle: {
|
normal: {
|
borderColor: "rgba(32,178,170, 0.5)",
|
borderWidth: 1,
|
areaColor: '#f0e68c',
|
},
|
// 鼠标放上去高亮的样式
|
emphasis: {
|
areaColor: "MediumAquamarine",
|
borderWidth: 0,
|
}
|
},
|
},
|
};
|
|
// 地图注册，第一个参数的名字必须和option.geo.map一致
|
echarts.registerMap("china",China)
|
spreadChart2.setOption(spreadOption2);
|
},
|
spread3(){
|
var spreadDom3 = document.getElementById('spread3');
|
var spreadChart3 = echarts.init(spreadDom3);
|
var me = this;
|
const data = me.dataarre;
|
|
//取各省份的中心坐标存到geoCoordMap中
|
let geoCoordMap = {};
|
const getGeo = function(areaName){
|
for (let i = 0; i < areaName.features.length; i++) {
|
geoCoordMap[areaName.features[i].properties.name] = areaName.features[i].properties.center;
|
}
|
return geoCoordMap;
|
}
|
getGeo(China);
|
|
const 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)
|
});
|
}
|
// console.log(res)
|
}
|
return res;
|
};
|
var spreadOption3 = {
|
// 背景颜色
|
backgroundColor: "",
|
// 提示浮窗样式
|
tooltip: {
|
show: true,
|
formatter:function(params){
|
// console.log(params)
|
return params.name+' : '+params.data.value[2]
|
},
|
trigger: "item",
|
alwaysShowContent: false,
|
backgroundColor: "#0C121C",
|
borderColor: "rgba(0, 0, 0, 0.16);",
|
hideDelay: 100,
|
triggerOn: "mousemove",
|
enterable: true,
|
textStyle: {
|
color: "#DADADA",
|
fontSize: "12",
|
width: 20,
|
height: 30,
|
overflow: "break",
|
},
|
showDelay: 100,
|
},
|
visualMap: {
|
label:{
|
// show:false
|
},
|
show:true,
|
type:'piecewise',
|
// dimension:2,
|
categories:['已挂网','进行中','待申报','弃落标'],
|
inRange: {
|
color: ['ForestGreen', 'Gold', 'LightSalmon','Red']
|
}
|
},
|
series:[
|
{
|
name:'省级挂网进展',
|
type:'map',
|
mapType:'china',
|
geoIndex:0,
|
data:convertData(data),
|
}
|
],
|
geo: {
|
map: "china",
|
// left:"40px",
|
// right:"40px",
|
top:'30%',
|
zoom:1.6,
|
label: {
|
// 通常状态下的样式
|
normal: {
|
show: true,
|
textStyle: {
|
color: "white",
|
fontWeight:'bold',
|
fontSize:10
|
},
|
},
|
// 鼠标放上去的样式
|
emphasis: {
|
// show:false,
|
textStyle: {
|
color: "#fff",
|
},
|
},
|
},
|
// 地图区域的样式设置
|
itemStyle: {
|
normal: {
|
borderColor: "rgba(32,178,170, 0.5)",
|
borderWidth: 1,
|
areaColor: '#f0e68c',
|
},
|
// 鼠标放上去高亮的样式
|
emphasis: {
|
areaColor: "MediumAquamarine",
|
borderWidth: 0,
|
}
|
},
|
},
|
};
|
|
// 地图注册，第一个参数的名字必须和option.geo.map一致
|
echarts.registerMap("china",China)
|
spreadChart3.setOption(spreadOption3);
|
},
|
spread4(){
|
var spreadDom4 = document.getElementById('spread4');
|
var spreadChart4 = echarts.init(spreadDom4);
|
var me = this;
|
const data = me.dataarrf;
|
|
//取各省份的中心坐标存到geoCoordMap中
|
let geoCoordMap = {};
|
const getGeo = function(areaName){
|
for (let i = 0; i < areaName.features.length; i++) {
|
geoCoordMap[areaName.features[i].properties.name] = areaName.features[i].properties.center;
|
}
|
return geoCoordMap;
|
}
|
getGeo(China);
|
|
const 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)
|
});
|
}
|
// console.log(res)
|
}
|
return res;
|
};
|
var spreadOption4 = {
|
// 背景颜色
|
backgroundColor: "",
|
// 提示浮窗样式
|
tooltip: {
|
show: true,
|
formatter:function(params){
|
// console.log(params)
|
return params.name+' : '+params.data.value[2]
|
},
|
trigger: "item",
|
alwaysShowContent: false,
|
backgroundColor: "#0C121C",
|
borderColor: "rgba(0, 0, 0, 0.16);",
|
hideDelay: 100,
|
triggerOn: "mousemove",
|
enterable: true,
|
textStyle: {
|
color: "#DADADA",
|
fontSize: "12",
|
width: 20,
|
height: 30,
|
overflow: "break",
|
},
|
showDelay: 100,
|
},
|
visualMap: {
|
label:{
|
// show:false
|
},
|
show:true,
|
type:'piecewise',
|
// dimension:2,
|
categories:['已挂网','进行中','待申报','弃落标'],
|
inRange: {
|
color: ['ForestGreen', 'Gold', 'LightSalmon','Red']
|
}
|
},
|
series:[
|
{
|
name:'省级挂网进展',
|
type:'map',
|
mapType:'china',
|
geoIndex:0,
|
data:convertData(data),
|
}
|
],
|
geo: {
|
map: "china",
|
// left:"40px",
|
// right:"40px",
|
top:'30%',
|
zoom:1.6,
|
label: {
|
// 通常状态下的样式
|
normal: {
|
show: true,
|
textStyle: {
|
color: "white",
|
fontWeight:'bold',
|
fontSize:10
|
},
|
},
|
// 鼠标放上去的样式
|
emphasis: {
|
// show:false,
|
textStyle: {
|
color: "#fff",
|
},
|
},
|
},
|
// 地图区域的样式设置
|
itemStyle: {
|
normal: {
|
borderColor: "rgba(32,178,170, 0.5)",
|
borderWidth: 1,
|
areaColor: '#f0e68c',
|
},
|
// 鼠标放上去高亮的样式
|
emphasis: {
|
areaColor: "MediumAquamarine",
|
borderWidth: 0,
|
}
|
},
|
},
|
};
|
|
// 地图注册，第一个参数的名字必须和option.geo.map一致
|
echarts.registerMap("china",China)
|
spreadChart4.setOption(spreadOption4);
|
},
|
initData() {
|
var me = this;
|
let param_ = {
|
isClientMode: false,
|
dataname: this.dataname,
|
page: {
|
pageno: this.pagenum,
|
pagesize: this.pagesize
|
},
|
}
|
Server.call("root/data/getEntitySet", param_, function(result) {
|
me.total = 0;
|
me.tableData = [];
|
if (result && result.data) {
|
me.total = result.data.page.recordcount;
|
var data_ = result.data.entityset;
|
// console.log(data_)
|
me.tableData = data_;
|
}
|
});
|
},
|
showFilterPopup() {
|
|
},
|
onInitFilter() {
|
this.filterObj = {}
|
this.onQuery();
|
},
|
onEditFilter() {
|
|
},
|
getData(page) {
|
this.pagesize = page.pagesize;
|
this.pagenum = page.pagenum;
|
this.doQuery();
|
},
|
handleClick(tab) {
|
this.AnchorLinkTo(tab.name);
|
},
|
formSelectChange(obj) {
|
var me = this;
|
var fieldObj = obj.fieldobj;
|
var filterFieldsData = clone(me.filterFields);
|
|
if (fieldObj.field == "province") {
|
var filterObj_ = clone(me.filterObj);
|
filterObj_.city = null;
|
me.filterObj = filterObj_;
|
let param_ = {
|
isClientMode: false,
|
dataname: "md_province",
|
filter: [
|
{field: "name", value:obj.data.province}
|
]
|
}
|
Server.call("root/data/getEntitySet", param_, function(result) {
|
if (result && result.data) {
|
let param_ = {
|
isClientMode: false,
|
dataname: "md_vip_area",
|
filter:[
|
{"field": "province_id", "value":result.data.entityset[0].id}
|
]
|
}
|
Server.call("root/data/getEntitySet", param_, function(result) {
|
if (result && result.data) {
|
var options_ = result.data.entityset;
|
for(var i=0; i<options_.length;i++) {
|
options_[i].label = options_[i].name;
|
options_[i].value = options_[i].name;
|
|
}
|
filterFieldsData.map(e=>{
|
if(e.field == "city") {
|
e.options = options_;
|
}
|
})
|
}
|
me.filterFields = filterFieldsData;
|
});
|
}
|
});
|
}
|
},
|
|
//动态加载下拉项
|
cellVisibleChange(obj, row) {
|
let me = this;
|
var filterFieldsData = clone(me.filterFields);
|
if (obj.field == "province") {
|
var filterFieldsData = clone(me.filterFields);
|
let param_ = {
|
isClientMode: false,
|
dataname: "md_province",
|
}
|
Server.call("root/data/getEntitySet", param_, function(result) {
|
if (result && result.data) {
|
var options_ = result.data.entityset;
|
for(var i=0; i<options_.length;i++) {
|
options_[i].label = options_[i].name;
|
options_[i].value = options_[i].name;
|
}
|
filterFieldsData.map(e=>{
|
if(e.field == "province") {
|
e.options = options_;
|
}
|
})
|
}
|
me.filterFields = filterFieldsData;
|
});
|
}
|
},
|
|
onFormButtonByCode(code) {
|
if (code == "add") {//添加
|
// let me = this;
|
// var config = {
|
// totab: true,
|
// title: "客户主数据新增",
|
// url: "../home/masterDataAdd.html",
|
// data: {},
|
// delta: {},
|
// opentype: "add",
|
// sceneCode: "add",
|
// width: 780,
|
// height: 420,
|
// callback: function(obj, callback) {
|
// me.onQuery();
|
// if (callback) {
|
// callback();
|
// }
|
// }
|
// };
|
// Root.showPopup(config);
|
// this.tabCardClick(config);
|
}
|
else if (code == "import") {//导入
|
|
}
|
else if (code == "export") {//导出
|
|
}
|
},
|
cellClick(obj) {//单元格点击
|
var field = obj.column.property;
|
var row = obj.row;
|
var tableField = obj.tableField;
|
// if(tableField.field == "field2") {
|
// var to_page = {
|
// totab: true,
|
// title: "客户明细(主数据)",
|
// url: "../home/masterDataCustomerDetails.html",
|
// data: {},
|
// delta: {},
|
// opentype: "add",
|
// sceneCode: "add",
|
// width: 1100,
|
// height: 550,
|
// callback: function(obj, callback) {
|
// me.onQuery();
|
// if (callback) {
|
// callback();
|
// }
|
// }
|
// };
|
// Root.showPopup(to_page);
|
// }
|
},
|
queryData(row) {
|
let me = this;
|
|
// var config = {
|
// width: 1000,
|
// height: 550,
|
// title: "查看协会智库档案",
|
// url: "../flow_manage/addAssociationLibraryList.html",
|
// totab: true,
|
// sceneCode: "query",
|
// opentype: "add",
|
// data: row,
|
// delta: {},
|
// callback: function(obj, callback) {
|
// if (callback) {
|
// callback();
|
// }
|
// }
|
// };
|
// // this.doPopup(config);
|
// this.tabCardClick(config);
|
},
|
cellButtonClick(obj) {
|
var type_ = obj.column.property;
|
var row = obj.row;
|
var field = "name";
|
var tips = "";
|
|
if(type_ == "delete"){
|
this.delData(row,field,tips);
|
} else if (type_ == "update"){
|
this.editData(obj);
|
} else if (type_ == "query"){
|
this.queryData(row);
|
}
|
},
|
//修改数据事件
|
onEditData(config, scope) {
|
var me = this;
|
var row = scope.row;
|
// var config = {
|
// width: 1000,
|
// height: 550,
|
// title: "编辑客户主数据",
|
// url: "../home/masterDataAdd.html",
|
// totab: true,
|
// sceneCode: "edit",
|
// opentype: "add",
|
// data: row,
|
// delta: {},
|
// callback: function(obj, callback) {
|
// me.initData();
|
// if (callback) {
|
// callback();
|
// }
|
// }
|
// };
|
// this.doPopup(config);
|
},
|
|
|
|
//滚动事件
|
myFunction(e) {
|
var isToBottom_ = this.isToBottom(e);
|
if (isToBottom_) {
|
this.org_footer = true;
|
}
|
else {
|
this.org_footer = false;
|
}
|
},
|
|
isToBottom(e) {
|
var bo_ = false;
|
if(e.srcElement.scrollTop + e.srcElement.offsetHeight >= e.srcElement.scrollHeight){
|
//已经到最底部了
|
bo_ = true;
|
}
|
return bo_;
|
},
|
|
}
|
});
|
}
|
|
loadJsCss(function() {
|
initVue();
|
});
|
</script>
|
|
<style>
|
[v-cloak] {
|
display: none !important;
|
}
|
|
.v_header .v_header_query{
|
padding: 0px 36px;
|
box-sizing: border-box;
|
}
|
</style>
|
</body>
|
</html>
|
