You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
315 lines
13 KiB
315 lines
13 KiB
function base64_encode(val) {
|
|
var str = CryptoJS.enc.Utf8.parse(val);
|
|
var base64 = CryptoJS.enc.Base64.stringify(str);
|
|
return base64
|
|
}
|
|
|
|
var map;
|
|
|
|
const App = {
|
|
data() {
|
|
return {
|
|
list: [
|
|
{
|
|
num: 1, schoolName: '长春市第一实验小学',
|
|
projectList:
|
|
[{ projectName: '年度项目', projectCount: 8 }, { projectName: '招标采购', projectCount: 5 }, { projectName: '实施验收', projectCount: 1 }, { projectName: '项目拨付', projectCount: 2 }],
|
|
completionRate: 100
|
|
},
|
|
{
|
|
num: 2, schoolName: '长春市十一高中',
|
|
projectList:
|
|
[{ projectName: '年度项目', projectCount: 8 }, { projectName: '招标采购', projectCount: 4 }, { projectName: '实施验收', projectCount: 2 }, { projectName: '项目拨付', projectCount: 4 }],
|
|
completionRate: 98
|
|
},
|
|
{
|
|
num: 3, schoolName: '长春市第一实验小学',
|
|
projectList:
|
|
[{ projectName: '年度项目', projectCount: 8 }, { projectName: '招标采购', projectCount: 3 }, { projectName: '实施验收', projectCount: 3 }, { projectName: '项目拨付', projectCount: 5 }],
|
|
completionRate: 90
|
|
},
|
|
{
|
|
num: 4, schoolName: '长春市十一高中',
|
|
projectList:
|
|
[{ projectName: '年度项目', projectCount: 8 }, { projectName: '招标采购', projectCount: 2 }, { projectName: '实施验收', projectCount: 4 }, { projectName: '项目拨付', projectCount: 3 }],
|
|
completionRate: 88
|
|
},
|
|
{
|
|
num: 5, schoolName: '长春市第六中学',
|
|
projectList:
|
|
[{ projectName: '年度项目', projectCount: 8 }, { projectName: '招标采购', projectCount: 1 }, { projectName: '实施验收', projectCount: 5 }, { projectName: '项目拨付', projectCount: 2 }],
|
|
completionRate: 79
|
|
}
|
|
],
|
|
tabTitle: ['完成率', '项目立项', '招标采购', '实施验收', '项目拨付', '项目结束'],
|
|
cur: 0,
|
|
a: 5,
|
|
b: 5
|
|
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getWnfb();
|
|
this.initMap();
|
|
this.toggle();
|
|
this.timer();
|
|
},
|
|
methods: {
|
|
timer() {
|
|
$('#timer').pietimer({
|
|
timerSeconds: 8,
|
|
color: '#02F9FC',
|
|
fill: false,
|
|
showPercentage: false
|
|
});
|
|
},
|
|
toggle() {
|
|
map.clearOverlays();
|
|
|
|
var falg = this.a % this.b;
|
|
|
|
if (falg == 2) {
|
|
this.b = 5;
|
|
} else {
|
|
this.b--;
|
|
}
|
|
|
|
if (falg === 0) {
|
|
|
|
$("#xmwcqk").css("visibility", "visible");
|
|
$("#xmycqk").css("visibility", "hidden");
|
|
$("#xmgbqk").css("visibility", "hidden");
|
|
|
|
for (var i = 0; i < points.length; i++) {
|
|
|
|
var point = points[i].point;
|
|
|
|
var myIcon = new BMap.Icon("./images/s1_4.png", new BMap.Size(32, 32));
|
|
var myColor = "#0D47A1";
|
|
|
|
if (i % 3 === 0) {
|
|
myIcon = new BMap.Icon("./images/s1_3.png", new BMap.Size(32, 32));
|
|
myColor = "#0288D1";
|
|
}
|
|
if (i % 5 === 0) {
|
|
myIcon = new BMap.Icon("./images/s1_2.png", new BMap.Size(32, 32));
|
|
myColor = "#2196F3";
|
|
}
|
|
if (i % 7 === 0) {
|
|
myIcon = new BMap.Icon("./images/s1_1.png", new BMap.Size(32, 32));
|
|
myColor = "#4FC3F7";
|
|
}
|
|
|
|
var marker = new BMap.Marker(point, {
|
|
icon: myIcon
|
|
});
|
|
var label = new BMap.Label(points[i].name, { offset: new BMap.Size(35, 3) });
|
|
label.setStyle({
|
|
color: myColor,
|
|
borderRadius: '5px',
|
|
borderColor: myColor,
|
|
padding: '5px',
|
|
fontSize: '12px',
|
|
fontFamily: '微软雅黑',
|
|
fontWeight: 'bolder'
|
|
});
|
|
marker.setLabel(label);
|
|
// 禁止覆盖物在map.clearOverlays方法中被清除
|
|
// marker.disableMassClear();
|
|
map.addOverlay(marker);
|
|
|
|
marker.addEventListener('click', function (e) {
|
|
console.log(e.target.K.label.content);
|
|
window.open("./child.html?schoolName=" + BASE64.encode(e.target.K.label.content));
|
|
});
|
|
|
|
}
|
|
}
|
|
else if (falg === 1) {
|
|
$("#xmwcqk").css("visibility", "hidden");
|
|
$("#xmycqk").css("visibility", "visible");
|
|
$("#xmgbqk").css("visibility", "hidden");
|
|
for (var i = 0; i < points.length; i++) {
|
|
|
|
var point = points[i].point;
|
|
|
|
var myIcon = new BMap.Icon("./images/s2_4.png", new BMap.Size(32, 32));
|
|
var myColor = "#FF6F00";
|
|
|
|
if (i % 3 === 0) {
|
|
myIcon = new BMap.Icon("./images/s2_3.png", new BMap.Size(32, 32));
|
|
myColor = "#FFA000";
|
|
}
|
|
if (i % 5 === 0) {
|
|
myIcon = new BMap.Icon("./images/s2_2.png", new BMap.Size(32, 32));
|
|
myColor = "#FFC107";
|
|
}
|
|
if (i % 7 === 0) {
|
|
myIcon = new BMap.Icon("./images/s2_1.png", new BMap.Size(32, 32));
|
|
myColor = "#FFD54F";
|
|
}
|
|
|
|
|
|
var marker = new BMap.Marker(point, {
|
|
icon: myIcon
|
|
});
|
|
var label = new BMap.Label(points[i].name, { offset: new BMap.Size(35, 3) });
|
|
label.setStyle({
|
|
color: myColor,
|
|
borderRadius: '5px',
|
|
borderColor: myColor,
|
|
padding: '5px',
|
|
fontSize: '12px',
|
|
fontFamily: '微软雅黑',
|
|
fontWeight: 'bolder'
|
|
});
|
|
marker.setLabel(label);
|
|
// 禁止覆盖物在map.clearOverlays方法中被清除
|
|
// marker.disableMassClear();
|
|
map.addOverlay(marker);
|
|
|
|
marker.addEventListener('click', function (e) {
|
|
console.log(e.target.K.label.content);
|
|
window.open("./child.html?schoolName=" + BASE64.encode(e.target.K.label.content));
|
|
});
|
|
|
|
}
|
|
}
|
|
else {
|
|
$("#xmwcqk").css("visibility", "hidden");
|
|
$("#xmycqk").css("visibility", "hidden");
|
|
$("#xmgbqk").css("visibility", "visible");
|
|
for (var i = 0; i < points.length; i++) {
|
|
|
|
var point = points[i].point;
|
|
|
|
var myIcon = new BMap.Icon("./images/s3_4.png", new BMap.Size(32, 32));
|
|
var myColor = "#B71C1C";
|
|
|
|
if (i % 3 === 0) {
|
|
myIcon = new BMap.Icon("./images/s3_3.png", new BMap.Size(32, 32));
|
|
myColor = "#C2185B";
|
|
}
|
|
if (i % 5 === 0) {
|
|
myIcon = new BMap.Icon("./images/s3_2.png", new BMap.Size(32, 32));
|
|
myColor = "#F44336";
|
|
}
|
|
if (i % 7 === 0) {
|
|
myIcon = new BMap.Icon("./images/s3_1.png", new BMap.Size(32, 32));
|
|
myColor = "#F06292";
|
|
}
|
|
|
|
var marker = new BMap.Marker(point, {
|
|
icon: myIcon
|
|
});
|
|
var label = new BMap.Label(points[i].name, { offset: new BMap.Size(35, 3) });
|
|
label.setStyle({
|
|
color: myColor,
|
|
borderRadius: '5px',
|
|
borderColor: myColor,
|
|
padding: '5px',
|
|
fontSize: '12px',
|
|
fontFamily: '微软雅黑',
|
|
fontWeight: 'bolder'
|
|
});
|
|
marker.setLabel(label);
|
|
// 禁止覆盖物在map.clearOverlays方法中被清除
|
|
// marker.disableMassClear();
|
|
map.addOverlay(marker);
|
|
|
|
marker.addEventListener('click', function (e) {
|
|
console.log(e.target.K.label.content);
|
|
window.open("./child.html?schoolName=" + BASE64.encode(e.target.K.label.content));
|
|
});
|
|
}
|
|
|
|
}
|
|
setTimeout(() => {
|
|
this.toggle();
|
|
$('#timer').pietimer('start');
|
|
}, 8000);
|
|
},
|
|
getWnfb() {
|
|
let wnfbDiv = echarts.init(document.getElementById('wnfb'), 'white', { renderer: 'canvas' });
|
|
wnfbDiv.clear();
|
|
wnfbDiv.setOption(wnfbData);
|
|
wnfbDiv.resize();
|
|
},
|
|
tabClick: function (index) {
|
|
this.cur = index;
|
|
},
|
|
wnfbTabClick: function (id) {
|
|
let wnfbDiv = echarts.init(document.getElementById('wnfb'), 'white', { renderer: 'canvas' });
|
|
if (id === 'wnfbZl') {
|
|
$("#wnfbYs").css("color", "#AAAAAA");
|
|
$("#wnfbZl").css("color", "#3CD5FF");
|
|
wnfbDiv.clear();
|
|
wnfbDiv.setOption(wnfbData);
|
|
} else {
|
|
$("#wnfbZl").css("color", "#AAAAAA");
|
|
$("#wnfbYs").css("color", "#3CD5FF");
|
|
wnfbDiv.clear();
|
|
wnfbDiv.setOption(wnfbYsData);
|
|
}
|
|
},
|
|
initMap() {
|
|
map = new BMap.Map("baiduMap"); // 创建Map实例
|
|
map.centerAndZoom(new BMap.Point(125.331176, 43.89292), 13); // 初始化地图,设置中心点坐标和地图级别
|
|
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
|
|
map.setMapStyle({ style: 'bluish' }); //样式
|
|
map.setCurrentCity("长春");
|
|
|
|
var myIcon = new BMap.Icon("./images/s11.png", new BMap.Size(32, 32));
|
|
|
|
|
|
// var pt1 = new BMapGL.Point(125.341956, 43.873375);
|
|
// var marker1 = new BMapGL.Marker(pt1, {
|
|
// icon: myIcon
|
|
// });
|
|
// // 将标注添加到地图
|
|
// map.addOverlay(marker1);
|
|
/*
|
|
for (var i = 0; i < points.length; i++) {
|
|
|
|
var point = points[i].point;
|
|
|
|
if(points[i].orgType == 1){
|
|
myIcon = new BMap.Icon("./images/s12.png", new BMap.Size(32, 32));
|
|
}
|
|
|
|
var marker = new BMap.Marker(point, {
|
|
icon: myIcon
|
|
});
|
|
var label = new BMap.Label(points[i].name, { offset: new BMap.Size(35, 3) });
|
|
label.setStyle({
|
|
color: '#12db3c',
|
|
borderRadius: '5px',
|
|
borderColor: '#12db3c',
|
|
padding: '5px',
|
|
fontSize: '12px',
|
|
fontFamily: '微软雅黑',
|
|
fontWeight: 'bolder'
|
|
});
|
|
marker.setLabel(label);
|
|
// 禁止覆盖物在map.clearOverlays方法中被清除
|
|
marker.disableMassClear();
|
|
map.addOverlay(marker);
|
|
|
|
marker.addEventListener('click', function (e) {
|
|
console.log(e.target.K.label.content);
|
|
window.open("./child.html?schoolName=" + BASE64.encode(e.target.K.label.content));
|
|
});
|
|
|
|
}
|
|
*/
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
const app = Vue.createApp(App);
|
|
app.use(ElementPlus);
|
|
app.component('Vue3SeamlessScroll', Vue3SeamlessScroll.Vue3SeamlessScroll);
|
|
app.mount("#app");
|
|
|