summaryrefslogtreecommitdiff
path: root/src/views/menuMBGZ/module/indexDQ2.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/views/menuMBGZ/module/indexDQ2.vue')
-rw-r--r--src/views/menuMBGZ/module/indexDQ2.vue624
1 files changed, 624 insertions, 0 deletions
diff --git a/src/views/menuMBGZ/module/indexDQ2.vue b/src/views/menuMBGZ/module/indexDQ2.vue
new file mode 100644
index 0000000..103054d
--- /dev/null
+++ b/src/views/menuMBGZ/module/indexDQ2.vue
@@ -0,0 +1,624 @@
+<template>
+ <div class='wrapper'>
+ <div class='chart' id='chart' >
+ </div>
+ </div>
+</template>
+
+<script>
+ import axios from 'axios'
+ export default {
+ props:['ip','isp','cou','protocol'],
+ watch:{
+ ip(newValue,oldValue){
+ console.log("TTTTTTTTTTTTTTTTTT1")
+ console.log("新:"+newValue +"旧:"+oldValue)
+ console.log("TTTTTTTTTTTTTTTTTT1")
+ this.ip=newValue;
+ this.handleChange();
+ },
+ isp(newValue,oldValue){
+ console.log("TTTTTTTTTTTTTTTTTT2")
+ console.log("新:"+newValue +"旧:"+oldValue)
+ console.log("TTTTTTTTTTTTTTTTTT2")
+ this.isp=newValue;
+ this.handleChange();
+ },
+ protocol(newValue,oldValue){
+ console.log("TTTTTTTTTTTTTTTTTT3")
+ console.log("新:"+newValue +"旧:"+oldValue)
+ console.log("TTTTTTTTTTTTTTTTTT3")
+ this.protocol=newValue;
+ this.handleChange();
+ },
+ cou(newValue,oldValue){
+ console.log("TTTTTTTTTTTTTTTTTT4")
+ console.log("新:"+newValue +"旧:"+oldValue)
+ console.log("TTTTTTTTTTTTTTTTTT4")
+ this.cou=newValue;
+ this.handleChange();
+ }
+
+ },
+ name: "indexDQ2",
+ data () {
+ return {
+ // ip:"",
+ // isp:"",
+ // cou:"",
+ // protocol:null,
+ switchLanguage:"",//用于页面中英文切换
+ // countryEnJson:"",//用于储存国家英文字典
+ maxValue:0,
+ newestInfo:"",
+ ws: null,
+ // listAdd:[],
+ chart:undefined,
+ // res :[],
+ ddaattaa:""
+ }
+ },
+ created() {
+ this.handleChange0();
+ },
+ mounted () {
+ this.handleChange()
+ // this.getWorld()
+ // 模拟初始数据获取
+ // 模拟数据更新
+ // setInterval(() => {
+ // this.getData();
+ // }, 3000);
+ },
+ methods: {
+ handleChange0(){
+ /****************************************************************************/
+ let data = {
+ }
+ this.$axios.get(this.$http.api.targetMap,data).then(res=> {
+ console.log("地图访问成功")
+ if(res.code=='200'){
+ console.log("地图访问成功OK")
+ this.ddaattaa=res.dataObject.earthAddTitle;
+ this.getWorld()
+ }
+ })
+ /*********************************************************************************/
+ // this.ddaattaa="{\"dataObject\":{\"newestCountry\":\"墨西哥\",\"maxValue\":8593,\"newestInfo\":\"墨西哥484\",\"earthAddTitle\":[{\"name\":\"美国\"" +
+ // ",\"title\":\"RECRUITMENTOFPERSONNELINMEXICOANDLATINAMERICA\",\"value\":893},{\"name\":\"印度\",\"title\":\"印度ixigo数据1700万\"," +
+ // "\"value\":1982},{\"name\":\"法国\",\"title\":\"France124K | NICEQUALITY\",\"value\":1645},{\"name\":\"英国\",\"title\":" +
+ // "\"100XAccountsHotmailUnitedKingdomFresh & FullAccess ⚡️Capture ⚡️PrivateAccs\",\"value\":1576},{\"name\":\"俄罗斯\"," +
+ // "\"title\":\"LeadershipoftheAirborneTroopsandothersofRussia\",\"value\":1279},{\"name\":\"德国\",\"title\":" +
+ // "\"1MGermanyUHQcombolist\",\"value\":1231},{\"name\":\"中国\",\"title\":\"900 - 山东 - 务工人员信息明细统计表\",\"value\":4275}," +
+ // "{\"name\":\"墨西哥\",\"title\":\"墨西哥务工人员信息明细统计表\",\"value\":8593}]}," +
+ // "\"code\":\"earth\"}"
+ // this.getWorld()
+
+ },
+ handleChange(){
+ /****************************************************************************/
+ let data = {
+ "ip":this.ip,
+ "isp":this.isp,
+ "cou":this.cou,
+ }
+ let data2 = {
+ "ip":this.ip,
+ "isp":this.isp,
+ "cou":this.cou,
+ "protocol":this.protocol,
+ }
+ this.$axios.get(this.$http.api.targetMap,this.protocol===null?data:data2).then(res=> {
+ console.log("地图访问成功")
+ if(res.code=='200'){
+ console.log("地图访问成功OK")
+ this.ddaattaa=res.dataObject.earthAddTitle;
+ this.getWorld()
+ }
+ })
+ /*********************************************************************************/
+ // this.ddaattaa="{\"dataObject\":{\"newestCountry\":\"墨西哥\",\"maxValue\":8593,\"newestInfo\":\"墨西哥484\",\"earthAddTitle\":[{\"name\":\"美国\"" +
+ // ",\"title\":\"RECRUITMENTOFPERSONNELINMEXICOANDLATINAMERICA\",\"value\":893},{\"name\":\"印度\",\"title\":\"印度ixigo数据1700万\"," +
+ // "\"value\":1982},{\"name\":\"法国\",\"title\":\"France124K | NICEQUALITY\",\"value\":1645},{\"name\":\"英国\",\"title\":" +
+ // "\"100XAccountsHotmailUnitedKingdomFresh & FullAccess ⚡️Capture ⚡️PrivateAccs\",\"value\":1576},{\"name\":\"俄罗斯\"," +
+ // "\"title\":\"LeadershipoftheAirborneTroopsandothersofRussia\",\"value\":1279},{\"name\":\"德国\",\"title\":" +
+ // "\"1MGermanyUHQcombolist\",\"value\":1231},{\"name\":\"中国\",\"title\":\"900 - 山东 - 务工人员信息明细统计表\",\"value\":4275}," +
+ // "{\"name\":\"墨西哥\",\"title\":\"墨西哥务工人员信息明细统计表\",\"value\":8593}]}," +
+ // "\"code\":\"earth\"}"
+ // this.getWorld()
+
+ },
+ showTitleView(newestInfo,newestCountry){
+ // console.log(newestInfo)
+ // let new_cname = dataArr[0]['name']+dataArr[0]['value']
+ let new_cname = newestInfo //中国44
+ // console.log("判断最后一条数据是否有变化")
+ // console.log("this.Cname:"+this.newestInfo)
+ // console.log("new_cname:"+new_cname)
+ if (this.newestInfo != new_cname){
+ console.log("RRRRRRRRRRRRR进来了啊")
+ this.newestInfo = new_cname;
+ // this.showTooltip(-1);
+ this.showTooltip(newestCountry);
+ // this.showWireframe(-1)
+ this.showWireframe(newestCountry)
+ setTimeout(this.hideTooltip,10000);
+ }
+
+
+ },
+ showWireframe(newestCountry) {
+ // // 取消高亮指定的数据图形
+ // this.chart.dispatchAction({
+ // type: 'downplay',
+ // seriesIndex: 0,
+ // dataIndex: index
+ // })
+ // 高亮指定的数据图形
+ this.chart.dispatchAction({
+ type: 'highlight',
+ seriesIndex: 0,
+ name: newestCountry
+ // dataIndex: index + 1
+ })
+ },
+ hideTooltip(){
+ this.chart.dispatchAction({
+ type: 'hideTip',
+ seriesIndex: 0,
+ dataIndex: -1
+ })
+ },
+ // showTooltip(index) {
+ showTooltip(newestCountry) {
+ // // 隐藏提示框
+ // this.chart.dispatchAction({
+ // type: 'hideTip',
+ // seriesIndex: 0,
+ // dataIndex: index
+ // })
+ // 显示提示框
+ this.chart.dispatchAction({
+ type: 'showTip',
+ seriesIndex: 0,
+ name:newestCountry
+ // dataIndex: index + 1
+ })
+ },
+ getWorld () { //ddaattaa
+ /****************************************************************************/
+ var json = require('/src/api/world.json');
+ let namemap = json.namemap;
+ let dataArr=[];
+ // this.maxValue=JSON.parse(this.ddaattaa).dataObject.maxValue
+ this.maxValue=20000
+ // dataArr = JSON.parse(this.ddaattaa).dataObject.earthAddTitle
+ dataArr = this.ddaattaa
+ this.drawChart(namemap, dataArr);
+ // this.showTitleView(
+ // JSON.parse(this.ddaattaa).dataObject.newestInfo,
+ // JSON.parse(this.ddaattaa).dataObject.newestCountry
+ // );
+
+
+ },
+ drawChart (namemap, dataArr) {
+ let maxValue=this.maxValue
+ // 基于准备好的dom，初始化echarts实例
+ let chart = this.$echarts.init(document.getElementById('chart'))
+ // 监听屏幕变化自动缩放图表
+ window.addEventListener('resize', function () {
+ chart.resize()
+ })
+
+ ///////////////////////////
+ //用于存储地图数据
+ var json = require('/src/api/world.json');
+ var pointMap =json.trapeze;
+ var geoCoordMap = pointMap;
+ var countryEnJson=json.country_en;
+ var zh_en=this.switchLanguage;
+
+ var max = 480,
+ min = 9; // todo
+ var maxSize4Pin = 50,
+ minSize4Pin = 20;
+
+ var convertData = function (dataD) {
+ var res = [];
+ if(dataD){
+ for (var i = 0; i < dataD.length; i++) {
+ var geoCoord = geoCoordMap[dataD[i].name];
+ if (geoCoord) {
+ res.push({
+ name: dataD[i].name,
+ name_en: countryEnJson[dataD[i].name],
+ zh_en:zh_en,
+ value: geoCoord.concat(dataD[i].value),
+ // value: geoCoord,
+ // size:dataD[i].value,
+ title: dataD[i].title,
+ });
+ }
+ }
+ }
+ return res;
+ };
+ // var convertDataA = function (dataD) {
+ // var res = [];
+ // if(dataD){
+ // for (var i = 0; i < dataD.length; i++) {
+ // var geoCoord = geoCoordMap[dataD[i].name];
+ // if (geoCoord) {
+ // res.push({
+ // name: dataD[i].name,
+ // value: geoCoord.concat(dataD[i].value),
+ // // value: geoCoord,
+ // title: dataD[i].title,
+ // num:dataD[i].value,
+ // });
+ // }
+ // }
+ // }
+ // return res;
+ // };
+ // 绘制图表
+ chart.setOption({
+
+ // 图表主标题
+ // title: {
+ // // text: '数据泄露分布地图', // 主标题文本，支持使用 \n 换行
+ // top: 20, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
+ // left: 'center', // 值: 'left', 'center', 'right' 同上
+ // textStyle: { // 文本样式
+ // fontSize: 24,
+ // fontWeight: 600,
+ // color: '#fff'
+ // }
+ // },
+ // 提示框组件
+ tooltip: {
+ trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
+ // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
+ // 使用函数模板 传入的数据值 -> value: number | Array
+ formatter: function (val) {
+ var text = '';
+ text += '<div style="display:flex;flex-direction:row;">'+
+ '<div style="background-color:#03D16D;height:auto;width:10px;margin-right:5px;"></div>'+
+ '<div style="display:flex;flex-direction:column;">'+
+ '<span>'+ val.data.name+'</span>'+
+ '<span >'+'分类信息:'+'</span>'+
+ '<span display:width="60px">'+ val.data.title+'</span>'+
+ '</div>'+
+ '</div>'
+ return text;
+ }
+ },
+ // visualMap: {
+ // type: 'continuous',
+ // min: 0,
+ // max: 100,
+ // range: [1, 10],
+ // center: [104.114129, 37.550339],
+ // },
+ // visualMap: {
+ // show: false,
+ // min: 0,
+ // max: 600,
+ // left: 'left',
+ // top: 'bottom',
+ // text: ['高', '低'], // 文本，默认为数值文本
+ // calculable: true,
+ // seriesIndex: [1],
+ // //控制地图颜色的显示区间
+ // inRange: {
+ // // color: ['#3B5077', '#031525'] // 蓝黑
+ // // color: ['#ffc0cb', '#800080'] // 红紫
+ // // color: ['#3C3B3F', '#605C3C'] // 黑绿
+ // // color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
+ // // color: ['#23074d', '#cc5333'] // 紫红
+ // // color: ['#00467F', '#A5CC82'] // 蓝绿
+ // // color: ['#1488CC', '#2B32B2'] // 浅蓝
+ // // color: ['#00467F', '#A5CC82', '#ffc0cb'] // 蓝绿红
+ // // color: ['#00467F', '#A5CC82'] // 蓝绿
+ // // color: ['#00467F', '#A5CC82'] // 蓝绿
+ // // color: ['#00467F', '#A5CC82'] // 蓝绿
+ // color: ['#22e5e8', '#0035f9', '#22e5e8'] // 蓝绿
+ //
+ // }
+ // },
+ geo: {
+ //地图的初始配置
+ // show: true,
+ map: 'world',
+ projection:'geoMercator', //使用墨卡托投影
+ // mapProjection: {
+ // // 使用等经纬度投影
+ // type: 'equidistantly'
+ // },
+ // zoom:1,
+ // label: {
+ // normal: {
+ // show: false
+ // },
+ // emphasis: {
+ // show: false
+ // }
+ // },
+ roam:false,
+ // center:undefined,
+///////////////////////////////////////////////////////1/2
+ // 图形上的文本标签
+ label: {
+ show: false// 是否显示对应地名
+ },
+ // 地图区域的多边形 图形样式
+ itemStyle: {
+ // areaColor: '#3ca3e6', // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用
+ areaColor: '#0d1b4a', // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用
+ borderWidth: 0.5, // 描边线宽 为 0 时无描边
+ borderColor: '#00F1FF', // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数
+ borderType: 'solid' // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
+ },
+ // 高亮状态下的多边形和标签样式
+ emphasis: {
+ label: {
+ show: false, // 是否显示标签
+ color: '#fff' // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色
+ },
+ itemStyle: {
+ areaColor: '#3742ff' // 地图区域的颜色
+ }
+ },
+ ////////////////////////////////////////////////1/2
+ // 自定义地区的名称映射
+ nameMap: namemap,
+
+
+
+ },
+ series: [
+ {
+ // type: 'map', // 类型
+ type: 'scatter', // 使用墨卡托投影
+ coordinateSystem:'geo', //使用地理坐标系
+ // 系列名称，用于tooltip的显示，legend 的图例筛选 在 setOption 更新数据和配置项时用于指定对应的系列
+ name: '数据泄露分布地图',
+ // mapType: 'world', // 地图类型
+ // // 是否开启鼠标缩放和平移漫游 默认不开启 如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move' 设置成 true 为都开启
+ // roam: false,
+
+ ///////////////////////////////////////////////////////1/2
+ // 图形上的文本标签
+ // label: {
+ // show: false// 是否显示对应地名
+ // },
+ // // 地图区域的多边形 图形样式
+ // itemStyle: {
+ // // areaColor: '#3ca3e6', // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用
+ // areaColor: '#0d1b4a', // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用
+ // borderWidth: 0.5, // 描边线宽 为 0 时无描边
+ // borderColor: '#00F1FF', // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数
+ // borderType: 'solid' // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
+ // },
+ // // 高亮状态下的多边形和标签样式
+ // emphasis: {
+ // label: {
+ // show: false, // 是否显示标签
+ // color: '#fff' // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色
+ // },
+ // itemStyle: {
+ // areaColor: '#3742ff' // 地图区域的颜色
+ // }
+ // },
+ ////////////////////////////////////////////////1/2
+ geoIndex:0,
+ // // 自定义地区的名称映射
+ // nameMap: namemap,
+ // 地图系列中的数据内容数组 数组项可以为单个数值
+ // data: dataArr,
+ data: convertData(dataArr),
+ },
+ // {
+ // type: 'map',
+ // map: 'world',
+ // geoIndex: 0,
+ // aspectScale: 0.75, //长宽比
+ // showLegendSymbol: false, // 存在legend时显示
+ // label: {
+ // show: false,
+ // // normal: {
+ // // show: true
+ // // },
+ // // emphasis: {
+ // // show: false,
+ // // textStyle: {
+ // // color: '#fff'
+ // // }
+ // // }
+ // },
+ // // roam: true,
+ // // itemStyle: {
+ // // normal: {
+ // // areaColor: '#031525',
+ // // borderColor: '#3B5077',
+ // // },
+ // // emphasis: {
+ // // areaColor: '#2B91B7'
+ // // }
+ // // },
+ // // 地图区域的多边形 图形样式
+ // itemStyle: {
+ // // areaColor: '#3ca3e6', // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用
+ // areaColor: '#0d1b4a', // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用
+ // borderWidth: 0.5, // 描边线宽 为 0 时无描边
+ // borderColor: '#00F1FF', // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数
+ // borderType: 'solid' // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
+ // },
+ // // animation: true,
+ // namemap:namemap,
+ // data: dataArr
+ // // data: convertData(data)
+ // },
+ {
+ name: '点',
+ type: 'scatter',
+ coordinateSystem: 'geo',
+ symbol: 'pin', //气泡
+ symbolSize: function (size,val) {
+ var a = (maxSize4Pin - minSize4Pin) / (max - min);
+ var b = minSize4Pin - a * min;
+ // b = maxSize4Pin - a * max;
+ return a * val[2]*100 + b;
+ },
+ label: {
+ normal: {
+ show: false,
+ formatter: function (params) {
+ return params.value[2]
+ },
+ textStyle: {
+ color: '#fff',
+ fontSize: 9,
+ }
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: 'rgba(255,255,0,0)', //标志颜色
+ }
+ },
+ zlevel: 1,
+ data: convertData(dataArr),
+ },
+ {
+ name: 'Top 500',//用于显示最高的前五个数据
+ type: 'effectScatter',
+ coordinateSystem: 'geo',
+ // data: convertData(data.sort(function (a, b) {
+ // return a.value - b.value;
+ // }).slice(0, 500)), namemap, dataArr
+ symbolSize: function (val) {
+ // return val[2] / 2.3;
+ return val[2] / (maxValue*0.03);
+ },
+ showEffectOn: 'render',
+ rippleEffect: {
+ brushType: 'stroke'
+ },
+ hoverAnimation: true,
+ label: {
+ normal: {
+ formatter: '{b}',
+ position: 'right',
+ show: false
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: 'rgba(255,9,14,0.8)',
+ shadowBlur: 10,
+ shadowColor: '#05C3F9'
+ }
+ },
+ zlevel: 1,
+ data: convertData(dataArr),
+ },
+
+
+ ]
+ })
+ // 定时显示提示框和高亮效果
+ this.chart = chart;
+ // let index = -1
+ // let indexK = -1
+ // setInterval(function () {
+ // // 隐藏提示框
+ // chart.dispatchAction({
+ // type: 'hideTip',
+ // seriesIndex: 0,
+ // dataIndex: indexK
+ // })
+ // // 显示提示框
+ // chart.dispatchAction({
+ // type: 'showTip',
+ // seriesIndex: 0,
+ // dataIndex: indexK + 1
+ // })
+ // index=index+10000
+ // // if (index > data.length - 1) {
+ // // index = -1
+ // // }
+ // },3000)
+ // setInterval(function () {
+ // // 隐藏提示框
+ // chart.dispatchAction({
+ // type: 'hideTip',
+ // seriesIndex: 0,
+ // dataIndex: index
+ // })
+ // // 显示提示框
+ // chart.dispatchAction({
+ // type: 'showTip',
+ // seriesIndex: 0,
+ // dataIndex: index + 1
+ // })
+ // // 取消高亮指定的数据图形
+ // chart.dispatchAction({
+ // type: 'downplay',
+ // seriesIndex: 0,
+ // dataIndex: index
+ // })
+ // // 高亮指定的数据图形
+ // chart.dispatchAction({
+ // type: 'highlight',
+ // seriesIndex: 0,
+ // dataIndex: index + 1
+ // })
+ // // index++
+ // // if (index > data.length - 1) {
+ // // index = -1
+ // // }
+ // }, 1000)
+ }
+ }
+ }
+</script>
+
+<style scoped>
+ .wrapper {
+ /*margin-top: -80px;*/
+ /*width: 100%;*/
+ /*margin-left: -120px;*/
+ /*margin-top: -10%;*/
+ /*width: 100%;*/
+ /*height: 100%;*/
+ /*width: calc(100vw);*/
+ /*height: calc(100vh);*/
+ width: calc(100%);
+ height: calc(100%);
+ margin-left: -12%;
+ }
+ .wrapper .chart {
+ /*width: 120%;*/
+ /*height: 780px;*/
+ /*margin: 1px 2px 0;*/
+ /*!*border: 1px solid #0d1b4d;*!*/
+ /*!*background: url(../../../public/bg.jpg) no-repeat; #0d1b4d *!*/
+ /*background-size: 100% 100%;*/
+
+ width: 100%;
+ height: 100%;
+ /*margin: 0.2% 0.2% 0;*/
+ margin-top: 2%;
+ margin-left: 10%;
+ /*border: 1px solid #0d1b4d;*/
+ /*background: url(../../../public/bg.jpg) no-repeat; #0d1b4d */
+ background-size: 100% 100%;
+ z-index: 9;
+ /*position: absolute;*/
+ position: relative;
+ }
+</style>
+
+
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-30 17:13:56 +0000