manage-client 3.2.48 → 3.2.49

package/src/components/ManageHomeCS/Home/YulinMap.vue

@@ -1,424 +1,424 @@
-
-<template>
-
-  <div>
-  <div style="width: 100%;height: 120%">
-    <!--<div  style="height: 40px;"><span v-for="i in list"  @click="selmap(i)">{{i}}———></span></div>-->
-    <div :id="idname"  style="text-align: left"></div>
-  </div>
-  </div>
-</template>
-
-<script>
-
-  import '../../../stores/yulin.js';
-
-
-  export default {
-    name: 'echart-map',
-    props: {
-      mode: String,
-      idname: String,
-    },
-    data() {
-      return {
-        mapdata:[
-          {name:'榆林市',value:require('../../../../static/yulin.json')}
-          // {name:'咸阳市',value:require('../../../static/xianyangshi.json')},
-          // {name:'西安市',value:require('../../../static/xianshi.json')}
-        ],
-        list:[],
-        xc:'',
-        timer:'',
-      }
-    },
-
-    mounted() {
-      this.drawChinaMap();
-    },
-    methods: {
-      drawChinaMap(mapjson) {
-        var oroptionmapjsonr_charts =this.$echarts.init(document.getElementById(this.idname));
-        this.xc=oroptionmapjsonr_charts
-        var scale=this.$parent.$parent.$parent.scale
-        var geoCoordMap = {};
-        this.$echarts.registerMap(mapjson.name, mapjson.value);
-        oroptionmapjsonr_charts.showLoading();
-        var mapFeatures = this.$echarts.getMap(mapjson.name).geoJson.features;
-        oroptionmapjsonr_charts.hideLoading();
-        mapFeatures.forEach(function(v) {
-          // 地区名称
-          var name = v.properties.name;
-          // 地区经纬度
-          geoCoordMap[name] = v.properties.cp;
-
-        });
-        var 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),
-              });
-            }
-          }
-          return res;
-        };
-        var colormode=''
-        if(this.mode=='0'){colormode="#e7c83c"}
-        if(this.mode=='1'){colormode="#66f2de"}
-        var data = [
-          {name:"榆林市",value:80,sellgas:'80'}
-        ];
-        var  col=['#2a4096']
-        let colors=[]
-        for(var i =0;i<data.length;i++){
-          var jo={
-            name: data[i].name,
-            itemStyle: {
-              areaColor: col[i] ,
-              // color: '#02363f'
-              color:  col[i]
-            }
-          }
-          colors.push(jo)
-        }
-        var option= {
-          title : {
-            text: '',
-            subtext: '',
-            x:'center'
-          },
-          tooltip: {
-            show: true,
-            alwaysShowContent:false,
-            backgroundColor:'rgba(2, 59, 63, 0.7)',
-            borderColor :'rgba(98, 194, 186, 0.45)',
-            borderWidth:1,
-              padding:10*scale,
-              textStyle:{
-                  fontSize:18*scale
-              },
-            hideDelay:100*scale,
-            triggerOn:'mousemove',
-            enterable:true,
-            position: function(point, params, dom, rect, size) {
-              //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
-              var x = point[0]; //
-              var y = point[1];
-              var viewWidth = size.viewSize[0];
-              var viewHeight = size.viewSize[1];
-              var boxWidth = size.contentSize[0];
-              var boxHeight = size.contentSize[1];
-              var posX = 0; //x坐标位置
-              var posY = 0; //y坐标位置
-
-              if (x < boxWidth) { //左边放不开
-                posX = 5;
-              } else { //左边放的下
-                posX = x - boxWidth;
-              }
-
-              if (y < boxHeight) { //上边放不开
-                posY = 5;
-              } else { //上边放得下
-                posY = y - boxHeight;
-              }
-
-              return [posX-10, posY-10];
-
-            },
-            extraCssText:'width: auto;height:auto;',
-            formatter:function(params, ticket, callback){
-              return ''
-              // return '<div style=\'text-align: center;height: 1px;margin-bottom: 5px;font-weight: normal\'>'+data[params.dataIndex].name+'</div><br/><span>'
-              //   +'<span style="font-weight: normal">年售气量 &nbsp;&nbsp;</span><span style="color:#e1e52a;font-weight: bolder">'+data[params.dataIndex].sellgas+'w</span><br/>'+'<span style="font-weight: normal">购&nbsp;气&nbsp;&nbsp;量  &nbsp;&nbsp;</span><span style="color:#e1e52a; font-weight: bolder">100w</span>'+'</span>';
-            }
-          },
-          dataRange:{
-            min: 0,
-            max: 2500,
-            left: 'left',
-            top: 'bottom',
-            text: ['高', '低'],
-            calculable: true,
-            show:false,
-            inRange: {
-              color: [
-                // "#1DE9B6", "#F46E36", "#04B9FF", "#5DBD32", "#FFC809", "#FB95D5", "#BDA29A", "#6E7074", "#546570", "#C4CCD3"
-                // "#ff002d"
-                // "#ffc188",
-                // "#479fd2",
-                // "#fba853",
-                // "#48c7c0",
-                // "#fa8737",
-                // "#4bbdd6",
-                // "#ff6f5b",
-                // "#F4D5B1",
-                // "#ADE1E3",
-                // "#F4B387",
-                // "#F0F3F4"
-              ]
-            },
-          },
-
-          series : [
-            {
-              type: 'map',
-              map: '陕西',
-              geoIndex: 0,
-              aspectScale: 0.75, //长宽比
-              showLegendSymbol: false, // 存在legend时显示
-              roam: true,
-              animation: false,
-              data: data
-            },
-            {  //涟漪点设置
-              //文字和标志
-              // name: 'light',
-              type: 'effectScatter',
-              coordinateSystem: 'geo',
-              data: convertData(data.sort(function(a, b) {
-                return b.value - a.value;
-              }).slice(0, 10)),
-              symbolSize: function(val) {
-                return val[2]/8 ;
-              },
-              emphasis: {   //高亮区域样式
-                label: {
-                  show: true
-                },
-                itemStyle: {
-                  color:'#e8f218',
-                  shadowBlur: 10*scale,
-                  shadowColor: '#4b5cf2'
-                },
-              },
-              showEffectOn: 'render',
-              rippleEffect: {
-                brushType: 'stroke'
-              },
-              hoverAnimation: true,
-              label: {
-                normal: {
-                  formatter: '{b}',
-                  position: 'top',
-                  fontSize:10*scale,
-                  color:'#ffffff',
-                  show: true
-                },
-              },
-              itemStyle: {
-                normal: {
-                  show:true,
-                  color:'#66f2de',
-                  shadowBlur: 10*scale,
-                  shadowColor: '#66f2de'
-                }
-              },
-
-              zlevel: 1
-            },
-          ]
-        }
-        if(this.mode=='0'){option.geo={  //地图设置
-          show: true,
-          map: mapjson.name,
-          label: {
-            show: false
-          },
-          selectedMode: 'single',
-          roam: false,
-
-          emphasis: {   //高亮区域样式
-            label: {
-              show: false
-            },
-            itemStyle: {
-              areaColor: '#ffff2c'
-            },
-          },
-          itemStyle: {
-            normal: {
-              borderColor: '#666666',
-              borderWidth: 1,
-              areaColor: {
-                type: 'radial',
-                x: 0.5,
-                y: 0.5,
-                r: 0.8,
-                colorStops: [{
-                  offset: 0,
-                  offset: 0,
-                  color: '#02363f' // 0% 处的颜色
-                }, {
-                  offset: 1,
-                  color: '#02363f'
-                }],
-                globalCoord: false // 缺省为 false
-              },
-              shadowBlur: 0
-            },
-          },
-          regions: colors
-        } }
-        if(this.mode=='1'){option.geo={  //地图设置
-          show: true,
-          map: mapjson.name,
-          label: {
-            show: false
-          },
-          selectedMode: 'single',
-          roam: false,
-
-          emphasis: {   //高亮区域样式
-            label: {
-              show: false
-            },
-            itemStyle: {
-              areaColor: '#62fff7'
-            },
-          },
-          // itemStyle: {
-          //   normal: {
-          //     borderWidth:0
-          //   }
-          //   },
-          itemStyle: {
-            normal: {
-              borderColor: '#21e3dc',
-              borderWidth: 1,
-              areaColor: {
-                type: 'radial',
-                x: 0.5,
-                y: 0.5,
-                r: 0.8,
-                colorStops: [{
-                  offset: 0,
-                  offset: 0,
-                  color: '#02363f' // 0% 处的颜色
-                }, {
-                  offset: 1,
-                  color: '#02363f'
-                }],
-                globalCoord: false // 缺省为 false
-              },
-              // shadowColor: '#21e3dc',
-              // // shadowColor: 'rgba(255, 255, 255, 1)',
-              // shadowOffsetX: -1,
-              // shadowOffsetY: 1,
-              shadowBlur: 0
-            },
-            // emphasis: {
-            //   areaColor: '#389BB7',
-            //   borderWidth: 0
-            // }
-          },
-          // regions: colors
-        }}
-
-        // console.log(this.$shanxi,'测试')
-        oroptionmapjsonr_charts.setOption(option)
-        oroptionmapjsonr_charts.on("click", this.eConsole)
-        var app = {
-          currentIndex: 0,
-        };
-        // oroptionmapjsonr_charts.dispatchAction({
-        //   type: 'highlight',
-        //   seriesIndex: 0,
-        //   dataIndex: app.currentIndex,
-        // });
-        var self=this
-        this.timer= setInterval(function () {
-          var dataLen = option.series[0].data.length;
-          // 取消之前高亮的图形
-          oroptionmapjsonr_charts.dispatchAction({
-            type: 'downplay',
-            seriesIndex: 1,
-            dataIndex: app.currentIndex
-          });
-
-          self.$parent.indexflag=false
-          self.$parent.index0=app.currentIndex
-          app.currentIndex = (app.currentIndex + 1) % dataLen;
-          self.$parent.index=app.currentIndex
-          //console.log(app.currentIndex);
-          // 高亮当前图形
-          oroptionmapjsonr_charts.dispatchAction({
-            type: 'highlight',
-            seriesIndex: 1,
-            dataIndex: app.currentIndex,
-          });
-          // 显示 tooltip
-          oroptionmapjsonr_charts.dispatchAction({
-            type: 'showTip',
-            seriesIndex: 1,
-            dataIndex: app.currentIndex
-          });
-        }, 3000);
-        // var highindex=0
-        // oroptionmapjsonr_charts.on("mouseover", function (param) {
-        //   self.$parent.indexflag=true
-        //   oroptionmapjsonr_charts.dispatchAction({
-        //     type: 'downplay',
-        //     seriesIndex: 0,
-        //     dataIndex: app.currentIndex
-        //   });
-        //   self.$parent.index=param.dataIndex
-        //   // 高亮当前图形
-        if(this.$parent.$parent.dataindex>=0){
-          oroptionmapjsonr_charts.dispatchAction({
-            type: 'highlight',
-            seriesIndex: 0,
-            dataIndex: this.$parent.$parent.dataindex,
-          });
-        }
-
-        //   // 显示 tooltip
-        //   oroptionmapjsonr_charts.dispatchAction({
-        //     type: 'showTip',
-        //     seriesIndex: 1,
-        //     dataIndex:param.dataIndex
-        //   });
-        //   highindex=param.dataIndex
-        // })
-
-
-      },
-      eConsole(data){
-        this.$parent.$parent.f_filiale=data.name
-        this.$parent.$parent.dataindex=data.dataIndex
-      },
-      selmapdata(name){
-        for(var i=0;i<this.mapdata.length;i++){
-          if(name==this.mapdata[i].name){
-            this.drawChinaMap(this.mapdata[i])
-            this.list.push(this.mapdata[i].name)
-            break
-          }
-        }
-      },
-      selmap(name){
-        for(var i=0;i<this.list.length;i++){
-          if(i==this.list.length-1){
-            break
-          }
-          if(name==this.list[i]){
-            this.list.splice(0,i)
-            this.selmapdata(name)
-          }
-        }
-      }
-    },
-    beforeDestroy() {
-      //清除定时器
-      clearInterval(this.timer);
-    },
-    ready(){
-      this.list.push(this.mapdata[0].name)
-      this.drawChinaMap(this.mapdata[0]);
-    }
-  };
-</script>
+
+<template>
+
+  <div>
+  <div style="width: 100%;height: 120%">
+    <!--<div  style="height: 40px;"><span v-for="i in list"  @click="selmap(i)">{{i}}———></span></div>-->
+    <div :id="idname"  style="text-align: left"></div>
+  </div>
+  </div>
+</template>
+
+<script>
+
+  import '../../../stores/yulin.js';
+
+
+  export default {
+    name: 'echart-map',
+    props: {
+      mode: String,
+      idname: String,
+    },
+    data() {
+      return {
+        mapdata:[
+          {name:'榆林市',value:require('../../../../static/yulin.json')}
+          // {name:'咸阳市',value:require('../../../static/xianyangshi.json')},
+          // {name:'西安市',value:require('../../../static/xianshi.json')}
+        ],
+        list:[],
+        xc:'',
+        timer:'',
+      }
+    },
+
+    mounted() {
+      this.drawChinaMap();
+    },
+    methods: {
+      drawChinaMap(mapjson) {
+        var oroptionmapjsonr_charts =this.$echarts.init(document.getElementById(this.idname));
+        this.xc=oroptionmapjsonr_charts
+        var scale=this.$parent.$parent.$parent.scale
+        var geoCoordMap = {};
+        this.$echarts.registerMap(mapjson.name, mapjson.value);
+        oroptionmapjsonr_charts.showLoading();
+        var mapFeatures = this.$echarts.getMap(mapjson.name).geoJson.features;
+        oroptionmapjsonr_charts.hideLoading();
+        mapFeatures.forEach(function(v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.cp;
+
+        });
+        var 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),
+              });
+            }
+          }
+          return res;
+        };
+        var colormode=''
+        if(this.mode=='0'){colormode="#e7c83c"}
+        if(this.mode=='1'){colormode="#66f2de"}
+        var data = [
+          {name:"榆林市",value:80,sellgas:'80'}
+        ];
+        var  col=['#2a4096']
+        let colors=[]
+        for(var i =0;i<data.length;i++){
+          var jo={
+            name: data[i].name,
+            itemStyle: {
+              areaColor: col[i] ,
+              // color: '#02363f'
+              color:  col[i]
+            }
+          }
+          colors.push(jo)
+        }
+        var option= {
+          title : {
+            text: '',
+            subtext: '',
+            x:'center'
+          },
+          tooltip: {
+            show: true,
+            alwaysShowContent:false,
+            backgroundColor:'rgba(2, 59, 63, 0.7)',
+            borderColor :'rgba(98, 194, 186, 0.45)',
+            borderWidth:1,
+              padding:10*scale,
+              textStyle:{
+                  fontSize:18*scale
+              },
+            hideDelay:100*scale,
+            triggerOn:'mousemove',
+            enterable:true,
+            position: function(point, params, dom, rect, size) {
+              //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
+              var x = point[0]; //
+              var y = point[1];
+              var viewWidth = size.viewSize[0];
+              var viewHeight = size.viewSize[1];
+              var boxWidth = size.contentSize[0];
+              var boxHeight = size.contentSize[1];
+              var posX = 0; //x坐标位置
+              var posY = 0; //y坐标位置
+
+              if (x < boxWidth) { //左边放不开
+                posX = 5;
+              } else { //左边放的下
+                posX = x - boxWidth;
+              }
+
+              if (y < boxHeight) { //上边放不开
+                posY = 5;
+              } else { //上边放得下
+                posY = y - boxHeight;
+              }
+
+              return [posX-10, posY-10];
+
+            },
+            extraCssText:'width: auto;height:auto;',
+            formatter:function(params, ticket, callback){
+              return ''
+              // return '<div style=\'text-align: center;height: 1px;margin-bottom: 5px;font-weight: normal\'>'+data[params.dataIndex].name+'</div><br/><span>'
+              //   +'<span style="font-weight: normal">年售气量 &nbsp;&nbsp;</span><span style="color:#e1e52a;font-weight: bolder">'+data[params.dataIndex].sellgas+'w</span><br/>'+'<span style="font-weight: normal">购&nbsp;气&nbsp;&nbsp;量  &nbsp;&nbsp;</span><span style="color:#e1e52a; font-weight: bolder">100w</span>'+'</span>';
+            }
+          },
+          dataRange:{
+            min: 0,
+            max: 2500,
+            left: 'left',
+            top: 'bottom',
+            text: ['高', '低'],
+            calculable: true,
+            show:false,
+            inRange: {
+              color: [
+                // "#1DE9B6", "#F46E36", "#04B9FF", "#5DBD32", "#FFC809", "#FB95D5", "#BDA29A", "#6E7074", "#546570", "#C4CCD3"
+                // "#ff002d"
+                // "#ffc188",
+                // "#479fd2",
+                // "#fba853",
+                // "#48c7c0",
+                // "#fa8737",
+                // "#4bbdd6",
+                // "#ff6f5b",
+                // "#F4D5B1",
+                // "#ADE1E3",
+                // "#F4B387",
+                // "#F0F3F4"
+              ]
+            },
+          },
+
+          series : [
+            {
+              type: 'map',
+              map: '陕西',
+              geoIndex: 0,
+              aspectScale: 0.75, //长宽比
+              showLegendSymbol: false, // 存在legend时显示
+              roam: true,
+              animation: false,
+              data: data
+            },
+            {  //涟漪点设置
+              //文字和标志
+              // name: 'light',
+              type: 'effectScatter',
+              coordinateSystem: 'geo',
+              data: convertData(data.sort(function(a, b) {
+                return b.value - a.value;
+              }).slice(0, 10)),
+              symbolSize: function(val) {
+                return val[2]/8 ;
+              },
+              emphasis: {   //高亮区域样式
+                label: {
+                  show: true
+                },
+                itemStyle: {
+                  color:'#e8f218',
+                  shadowBlur: 10*scale,
+                  shadowColor: '#4b5cf2'
+                },
+              },
+              showEffectOn: 'render',
+              rippleEffect: {
+                brushType: 'stroke'
+              },
+              hoverAnimation: true,
+              label: {
+                normal: {
+                  formatter: '{b}',
+                  position: 'top',
+                  fontSize:10*scale,
+                  color:'#ffffff',
+                  show: true
+                },
+              },
+              itemStyle: {
+                normal: {
+                  show:true,
+                  color:'#66f2de',
+                  shadowBlur: 10*scale,
+                  shadowColor: '#66f2de'
+                }
+              },
+
+              zlevel: 1
+            },
+          ]
+        }
+        if(this.mode=='0'){option.geo={  //地图设置
+          show: true,
+          map: mapjson.name,
+          label: {
+            show: false
+          },
+          selectedMode: 'single',
+          roam: false,
+
+          emphasis: {   //高亮区域样式
+            label: {
+              show: false
+            },
+            itemStyle: {
+              areaColor: '#ffff2c'
+            },
+          },
+          itemStyle: {
+            normal: {
+              borderColor: '#666666',
+              borderWidth: 1,
+              areaColor: {
+                type: 'radial',
+                x: 0.5,
+                y: 0.5,
+                r: 0.8,
+                colorStops: [{
+                  offset: 0,
+                  offset: 0,
+                  color: '#02363f' // 0% 处的颜色
+                }, {
+                  offset: 1,
+                  color: '#02363f'
+                }],
+                globalCoord: false // 缺省为 false
+              },
+              shadowBlur: 0
+            },
+          },
+          regions: colors
+        } }
+        if(this.mode=='1'){option.geo={  //地图设置
+          show: true,
+          map: mapjson.name,
+          label: {
+            show: false
+          },
+          selectedMode: 'single',
+          roam: false,
+
+          emphasis: {   //高亮区域样式
+            label: {
+              show: false
+            },
+            itemStyle: {
+              areaColor: '#62fff7'
+            },
+          },
+          // itemStyle: {
+          //   normal: {
+          //     borderWidth:0
+          //   }
+          //   },
+          itemStyle: {
+            normal: {
+              borderColor: '#21e3dc',
+              borderWidth: 1,
+              areaColor: {
+                type: 'radial',
+                x: 0.5,
+                y: 0.5,
+                r: 0.8,
+                colorStops: [{
+                  offset: 0,
+                  offset: 0,
+                  color: '#02363f' // 0% 处的颜色
+                }, {
+                  offset: 1,
+                  color: '#02363f'
+                }],
+                globalCoord: false // 缺省为 false
+              },
+              // shadowColor: '#21e3dc',
+              // // shadowColor: 'rgba(255, 255, 255, 1)',
+              // shadowOffsetX: -1,
+              // shadowOffsetY: 1,
+              shadowBlur: 0
+            },
+            // emphasis: {
+            //   areaColor: '#389BB7',
+            //   borderWidth: 0
+            // }
+          },
+          // regions: colors
+        }}
+
+        // console.log(this.$shanxi,'测试')
+        oroptionmapjsonr_charts.setOption(option)
+        oroptionmapjsonr_charts.on("click", this.eConsole)
+        var app = {
+          currentIndex: 0,
+        };
+        // oroptionmapjsonr_charts.dispatchAction({
+        //   type: 'highlight',
+        //   seriesIndex: 0,
+        //   dataIndex: app.currentIndex,
+        // });
+        var self=this
+        this.timer= setInterval(function () {
+          var dataLen = option.series[0].data.length;
+          // 取消之前高亮的图形
+          oroptionmapjsonr_charts.dispatchAction({
+            type: 'downplay',
+            seriesIndex: 1,
+            dataIndex: app.currentIndex
+          });
+
+          self.$parent.indexflag=false
+          self.$parent.index0=app.currentIndex
+          app.currentIndex = (app.currentIndex + 1) % dataLen;
+          self.$parent.index=app.currentIndex
+          //console.log(app.currentIndex);
+          // 高亮当前图形
+          oroptionmapjsonr_charts.dispatchAction({
+            type: 'highlight',
+            seriesIndex: 1,
+            dataIndex: app.currentIndex,
+          });
+          // 显示 tooltip
+          oroptionmapjsonr_charts.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 1,
+            dataIndex: app.currentIndex
+          });
+        }, 3000);
+        // var highindex=0
+        // oroptionmapjsonr_charts.on("mouseover", function (param) {
+        //   self.$parent.indexflag=true
+        //   oroptionmapjsonr_charts.dispatchAction({
+        //     type: 'downplay',
+        //     seriesIndex: 0,
+        //     dataIndex: app.currentIndex
+        //   });
+        //   self.$parent.index=param.dataIndex
+        //   // 高亮当前图形
+        if(this.$parent.$parent.dataindex>=0){
+          oroptionmapjsonr_charts.dispatchAction({
+            type: 'highlight',
+            seriesIndex: 0,
+            dataIndex: this.$parent.$parent.dataindex,
+          });
+        }
+
+        //   // 显示 tooltip
+        //   oroptionmapjsonr_charts.dispatchAction({
+        //     type: 'showTip',
+        //     seriesIndex: 1,
+        //     dataIndex:param.dataIndex
+        //   });
+        //   highindex=param.dataIndex
+        // })
+
+
+      },
+      eConsole(data){
+        this.$parent.$parent.f_filiale=data.name
+        this.$parent.$parent.dataindex=data.dataIndex
+      },
+      selmapdata(name){
+        for(var i=0;i<this.mapdata.length;i++){
+          if(name==this.mapdata[i].name){
+            this.drawChinaMap(this.mapdata[i])
+            this.list.push(this.mapdata[i].name)
+            break
+          }
+        }
+      },
+      selmap(name){
+        for(var i=0;i<this.list.length;i++){
+          if(i==this.list.length-1){
+            break
+          }
+          if(name==this.list[i]){
+            this.list.splice(0,i)
+            this.selmapdata(name)
+          }
+        }
+      }
+    },
+    beforeDestroy() {
+      //清除定时器
+      clearInterval(this.timer);
+    },
+    ready(){
+      this.list.push(this.mapdata[0].name)
+      this.drawChinaMap(this.mapdata[0]);
+    }
+  };
+</script>