路线图更新静态数据解析

report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-map.js

@@ -1,61 +1,254 @@
 /*
  * @Descripttion: 中国地图 json
- * @version: 
+ * @version:
  * @Author: qianlishi
  * @Date: 2021-08-29 07:31:21
  * @LastEditors: qianlishi
  * @LastEditTime: 2021-09-28 14:17:20
  */
 export const widgetMap = {
-    code: 'widget-map',
-    type: 'chart',
-    label: '中国地图',
-    icon: 'iconzhongguoditu',
-    options: {
-      setup: [
+  code: 'widget-map',
+  type: 'chart',
+  label: '中国地图',
+  icon: 'iconzhongguoditu',
+  options: {
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '路线图',
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        required: false,
+        placeholder: '',
+        value: ''
+      },
+      [
         {
-          type: 'el-input-text',
-          label: '图层名称',
-          name: 'layerName',
-          required: false,
-          placeholder: '',
-          value: '迁徙图',
-        },
-      ],
-      data: [],
-      position: [
-        {
-          type: 'el-input-number',
-          label: '左边距',
-          name: 'left',
-          required: false,
-          placeholder: '',
-          value: 0,
-        },
-        {
-          type: 'el-input-number',
-          label: '上边距',
-          name: 'top',
-          required: false,
-          placeholder: '',
-          value: 0,
-        },
-        {
-          type: 'el-input-number',
-          label: '宽度',
-          name: 'width',
-          required: false,
-          placeholder: '该容器在1920px大屏中的宽度',
-          value: 600,
-        },
-        {
-          type: 'el-input-number',
-          label: '高度',
-          name: 'height',
-          required: false,
-          placeholder: '该容器在1080px大屏中的高度',
-          value: 400,
+          name: '标题设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '标题',
+              name: 'isNoTitle',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'el-input-text',
+              label: '标题',
+              name: 'titleText',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'textColor',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'textFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'textFontSize',
+              required: false,
+              placeholder: '',
+              value: 20
+            },
+            {
+              type: 'el-select',
+              label: '字体位置',
+              name: 'textAlign',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'center', name: '居中'},
+                {code: 'left', name: '左对齐'},
+                {code: 'right', name: '右对齐'},
+              ],
+              value: 'center'
+            },
+            {
+              type: 'el-input-text',
+              label: '副标题',
+              name: 'subText',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'subTextColor',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'subTextFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'subTextFontSize',
+              required: false,
+              placeholder: '',
+              value: 12
+            },
+          ],
         },
       ]
-    }
+    ],
+    data: [
+      {
+        type: 'el-radio-group',
+        label: '数据类型',
+        name: 'dataType',
+        require: false,
+        placeholder: '',
+        selectValue: true,
+        selectOptions: [
+          {
+            code: 'staticData',
+            name: '静态数据',
+          },
+          {
+            code: 'dynamicData',
+            name: '动态数据',
+          },
+        ],
+        value: 'staticData',
+      },
+      {
+        type: 'el-input-number',
+        label: '刷新时间(毫秒)',
+        name: 'refreshTime',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'dynamicData',
+        value: 5000
+      },
+      {
+        type: 'el-button',
+        label: '静态数据',
+        name: 'staticData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'staticData',
+        value: [
+          {source: '北京', target: '上海', value: 95},
+          {source: '北京', target: '广州', value: 90},
+          {source: '北京', target: '大连', value: 80},
+          {source: '北京', target: '南宁', value: 70},
+          {source: '北京', target: '南昌', value: 60},
+          {source: '北京', target: '拉萨', value: 50},
+          {source: '北京', target: '长春', value: 40},
+          {source: '北京', target: '包头', value: 30},
+          {source: '北京', target: '重庆', value: 20},
+          {source: '北京', target: '常州', value: 10},
+          {source: '上海', target: '包头', value: 95},
+          {source: '上海', target: '昆明', value: 90},
+          {source: '上海', target: '广州', value: 80},
+          {source: '上海', target: '郑州', value: 70},
+          {source: '上海', target: '长春', value: 60},
+          {source: '上海', target: '重庆', value: 50},
+          {source: '上海', target: '长沙', value: 40},
+          {source: '上海', target: '北京', value: 30},
+          {source: '上海', target: '丹东', value: 20},
+          {source: '上海', target: '大连', value: 10},
+          {source: '广州', target: '福州', value: 95},
+          {source: '广州', target: '太原', value: 90},
+          {source: '广州', target: '长春', value: 80},
+          {source: '广州', target: '重庆', value: 70},
+          {source: '广州', target: '西安', value: 60},
+          {source: '广州', target: '成都', value: 50},
+          {source: '广州', target: '常州', value: 40},
+          {source: '广州', target: '北京', value: 30},
+          {source: '广州', target: '北海', value: 20},
+          {source: '广州', target: '海口', value: 10},
+        ],
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        chartType: 'widget-piechart',
+        dictKey: 'MAP_PROPERTIES',
+        relactiveDomValue: 'dynamicData',
+        value: '',
+      },
+    ],
+    position: [
+      {
+        type: 'el-input-number',
+        label: '左边距',
+        name: 'left',
+        required: false,
+        placeholder: '',
+        value: 0,
+      },
+      {
+        type: 'el-input-number',
+        label: '上边距',
+        name: 'top',
+        required: false,
+        placeholder: '',
+        value: 0,
+      },
+      {
+        type: 'el-input-number',
+        label: '宽度',
+        name: 'width',
+        required: false,
+        placeholder: '该容器在1920px大屏中的宽度',
+        value: 600,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 400,
+      },
+    ]
   }
+}

report-ui/src/views/bigscreenDesigner/designer/widget/widgetMap.vue

@@ -6,98 +6,6 @@
 <script>
 import "../../../../../node_modules/echarts/map/js/china.js";
 
-let GZData = [
-  [
-    {
-      name: "广州"
-    },
-    {
-      name: "福州",
-      value: 95
-    }
-  ],
-  [
-    {
-      name: "上海"
-    },
-    {
-      name: "太原",
-      value: 90
-    }
-  ],
-  [
-    {
-      name: "上海"
-    },
-    {
-      name: "长春",
-      value: 80
-    }
-  ],
-  [
-    {
-      name: "广州"
-    },
-    {
-      name: "重庆",
-      value: 70
-    }
-  ],
-  [
-    {
-      name: "广州"
-    },
-    {
-      name: "西安",
-      value: 60
-    }
-  ],
-  [
-    {
-      name: "广州"
-    },
-    {
-      name: "成都",
-      value: 50
-    }
-  ],
-  [
-    {
-      name: "广州"
-    },
-    {
-      name: "常州",
-      value: 40
-    }
-  ],
-  [
-    {
-      name: "广州"
-    },
-    {
-      name: "北京",
-      value: 30
-    }
-  ],
-  [
-    {
-      name: "广州"
-    },
-    {
-      name: "北海",
-      value: 20
-    }
-  ],
-  [
-    {
-      name: "广州"
-    },
-    {
-      name: "海口",
-      value: 10
-    }
-  ]
-];
 let geoCoordMap = {
   上海: [121.4648, 31.2891],
   东莞: [113.8953, 22.901],
@@ -325,7 +233,75 @@ export default {
             }
           }
         },
-        series: []
+        series: [
+          {
+            //name: tempData[0],
+            type: "lines",
+            zlevel: 1,
+            effect: {
+              show: true,
+              period: 6,
+              trailLength: 0.7,
+              color: "#fff",
+              symbolSize: 3
+            },
+            lineStyle: {
+              normal: {
+                color: '#a6c84c',
+                width: 0,
+                curveness: 0.2
+              }
+            },
+            data: [],
+          },
+          {
+            type: "lines",
+            zlevel: 2,
+            symbol: ['none', 'arrow'],
+            symbolSize: 10,
+            effect: {
+              show: true,
+              period: 6,
+              trailLength: 0,
+              symbol: planePath,
+              symbolSize: 15
+            },
+            lineStyle: {
+              normal: {
+                color: '#ffa022',
+                width: 1,
+                opacity: 0.4,
+                curveness: 0.2
+              }
+            },
+            data: [],
+          },
+          {
+            //name: tempData[0],
+            type: 'effectScatter',
+            coordinateSystem: 'geo',
+            zlevel: 2,
+            rippleEffect: {
+              brushType: 'stroke'
+            },
+            label: {
+              normal: {
+                show: true,
+                position: 'right',
+                formatter: '{b}'
+              }
+            },
+            symbolSize: function (val) {
+              return val[2] / 8;
+            },
+            itemStyle: {
+              normal: {
+                color: '#46bee9'
+              }
+            },
+            data: [],
+          }
+        ]
       },
       optionsSetup: {}
     };
@@ -359,148 +335,37 @@ export default {
     this.optionsSetup = this.value.setup;
   },
   mounted() {
-    this.initData2();
     this.editorOptions();
   },
   methods: {
-    initData() {
-      const options = this.options;
-      options.series.push(
-        {
-          //name: tempData[0],
-          type: "lines",
-          zlevel: 1,
-          effect: {
-            show: true,
-            period: 6,
-            trailLength: 0.7,
-            color: "#fff",
-            symbolSize: 3
-          },
-          lineStyle: {
-            normal: {
-              color: color[0],
-              width: 0,
-              curveness: 0.2
-            }
-          },
-          data: this.convertData(tempData[1])
-        },
-        {
-          name: tempData[0],
-          type: "lines",
-          zlevel: 2,
-          effect: {
-            show: true,
-            period: 6,
-            trailLength: 0,
-            symbol: planePath,
-            symbolSize: 15
-          },
-          lineStyle: {
-            normal: {
-              color: color[0],
-              width: 1,
-              opacity: 0.4,
-              curveness: 0.2
-            }
-          },
-          data: this.convertData(tempData[1])
-        },
-        {
-          name: tempData[0],
-          type: "effectScatter",
-          coordinateSystem: "geo",
-          zlevel: 2,
-          rippleEffect: {
-            brushType: "stroke"
-          },
-          label: {
-            normal: {
-              show: true,
-              position: "right",
-              formatter: "{b}"
-            }
-          },
-          symbolSize: function (val) {
-            return val[2] / 8;
-          },
-          itemStyle: {
-            normal: {
-              color: color[0]
-            }
-          },
-          data: tempData[1].map(function (dataItem) {
-            return {
-              name: dataItem[1].name,
-              value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
-            };
-          })
-        }
-      );
-      this.options = options;
-    },
-    initData2() {
-      const optins = this.options;
-      optins.series.push({
-          type: 'lines',
-          zlevel: 1,
-          effect: {
-            show: true,
-            period: 6,
-            trailLength: 0.7,
-            color: '#fff',
-            symbolSize: 3
-          },
-          lineStyle: {
-            normal: {
-              color: '#a6c84c',
-              width: 0,
-              curveness: 0.2
-            }
-          },
-          data: convertData(GZData)
-        },);
-    },
-
-    /*    convertData(data) {
-          let res = [];
-          for (let i = 0; i < data.length; i++) {
-            let dataItem = data[i];
-            let fromCoord = geoCoordMap[dataItem[0].name];
-            let toCoord = geoCoordMap[dataItem[1].name];
-            if ("流入" == type) {
-              fromCoord = geoCoordMap[dataItem[1].name];
-              toCoord = geoCoordMap[dataItem[0].name];
-            }
-            if (fromCoord && toCoord) {
-              res.push({
-                fromName: dataItem[0].name,
-                toName: dataItem[1].name,
-                coords: [fromCoord, toCoord],
-                value: dataItem[1].value
-              });
-            }
-          }
-          return res;
-        },*/
-    convertData2(data) {
+    convertData(data) {
       let res = [];
       for (let i = 0; i < data.length; i++) {
         let dataItem = data[i];
-        let fromCoord = geoCoordMap[dataItem[0].name];
-        let toCoord = geoCoordMap[dataItem[1].name];
-        if (fromCoord && toCoord) {
+        let sourceCoord = geoCoordMap[dataItem.source]
+        let targetCoord = geoCoordMap[dataItem.target]
+        if (sourceCoord && targetCoord) {
           res.push({
-            fromName: dataItem[0].name,
-            toName: dataItem[1].name,
-            coords: [fromCoord, toCoord],
-            value: dataItem[1].value
-          });
+              fromName: dataItem.source,
+              toName: dataItem.target,
+              coords: [sourceCoord, targetCoord],
+              value: dataItem.value
+            }
+          )
         }
       }
       return res;
     },
+    transData(data) {
+      let res = [];
+      for (let i = 0; i < data.length; i++) {
+        res.push({
+          name: data[i].target,
+          value: data[i].value,
+        })
+      }
+      return res;
+    },
     editorOptions() {
       this.setOptionsTitle();
       this.setOptionsData();
@@ -533,28 +398,17 @@ export default {
         : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
     },
     staticDataFn(val) {
-      this.options.series[0]["data"] = val;
       const optionsSetup = this.optionsSetup;
-      const label = this.options.series[1]["label"];
-      /*const normal = {
-        show: true,
-        color: "#fff",
-        fontWeight: "bold",
-        position: "inside",
-        formatter: function(para) {
-          return "{cnNum|" + para.data.value[2] + "}";
-        },
-        rich: {
-          cnNum: {
-            fontSize: optionsSetup.fontDataSize,
-            color: optionsSetup.fontDataColor,
-            fontWeight: optionsSetup.fontDataWeight
-          }
+      const series = this.options.series;
+      series[0]["data"] = this.convertData(val)
+      series[1]["data"] = this.convertData(val)
+      series[2]["data"] = val.map(function (dataItem) {
+        return {
+          name: dataItem.target,
+          value: geoCoordMap[dataItem.target].concat([dataItem.value])
         }
-      };
-      const data = convertData(val);
-      this.options.series[1]["data"] = data;
-      label["normal"] = normal;*/
+      }),
+        console.log(series)
     },
     dynamicDataFn(val, refreshTime) {
       if (!val) return;
@@ -574,28 +428,6 @@ export default {
       });
     },
     renderingFn(val) {
-      this.options.series[0]["data"] = val;
-      const optionsSetup = this.optionsSetup;
-      const label = this.options.series[1]["label"];
-      const normal = {
-        show: true,
-        color: "#fff",
-        fontWeight: "bold",
-        position: "inside",
-        formatter: function (para) {
-          return "{cnNum|" + para.data.value[2] + "}";
-        },
-        rich: {
-          cnNum: {
-            fontSize: optionsSetup.fontDataSize,
-            color: optionsSetup.fontDataColor,
-            fontWeight: optionsSetup.fontDataWeight
-          }
-        }
-      };
-      const data = convertData(val);
-      this.options.series[1]["data"] = data;
-      label["normal"] = normal;
     }
   }
 };