内容提交

longyvfengyun

2023-03-10 c7434b5aa8f01fb2cc83287f79706bb3f2dfd70b

内容提交

 src/assets/js/tools/getPageMenu.js

@@ -178,18 +178,18 @@
          ord: 1,
          level: 2,
        },
        // {
        //   label: "站点信息管理",
        //   name: "totalStation",
        //   src: "/dataMager/totalStation",
        //   permitName: 'batttest_data_query_permit',
        //   closable: true,
        //   id: 3003,
        //   menuId: 3,
        //   enableduse: true,
        //   ord: 3,
        //   level: 2,
        // },
        {
          label: "站点信息管理",
          name: "totalStation",
          src: "/dataMager/totalStation",
          permitName: 'batttest_data_query_permit',
          closable: true,
          id: 3003,
          menuId: 3,
          enableduse: true,
          ord: 3,
          level: 2,
        },
        {
          label: "电池信息管理",
          name: "battGroupMager",

 src/components/myCharts/MapChart.vue

@@ -4,109 +4,69 @@
export default {
  name: "MapChart",
  extends: BaseChart,
  props: {
    name: {
      type: String,
      default: "zhongguo"
    }
  },
  data() {
    return {}
  },
  methods: {
    setData() {
      let option = this.getOption();
    setData(data) {
      let option = this.getOption(data);
      this.setOption(option);
    },
    getOption() {
      let myChart = this.$options.chart;
      let mapName = 'zhongguo';
    getOption(list) {
      let mapName = this.name;
      let data = [
        {name:"北京市",value:199},
        {name:"天津市",value:42},
        {name:"河北省",value:102},
        {name:"山西省",value:81},
        {name:"内蒙古自治区",value:47},
        {name:"辽宁",value:67},
        {name:"吉林",value:82},
        {name:"黑龙江",value:123},
        {name:"上海",value:24},
        {name:"江苏",value:92},
        {name:"浙江",value:114},
        {name:"安徽",value:109},
        {name:"福建",value:116},
        {name:"江西",value:91},
        {name:"山东",value:119},
        {name:"河南",value:137},
        {name:"湖北",value:116},
        {name:"湖南",value:114},
        {name:"重庆",value:91},
        {name:"四川",value:125},
        {name:"贵州",value:62},
        {name:"云南",value:83},
        {name:"西藏",value:9},
        {name:"陕西",value:80},
        {name:"甘肃",value:56},
        {name:"青海",value:10},
        {name:"宁夏",value:18},
        {name:"新疆",value:180},
        {name:"广东",value:123},
        {name:"广西",value:59},
        {name:"海南",value:14},
        {
          name: "节",
          value: 100,
          color: "#0081FF",
          fontColor: "#FFFFFF",
          points: [121.4648,31.2891],
        },
        {
          name: "",
          value: 50,
          color: "#FF6B6C",
          fontColor: "#FFFFFF",
          points: [117.7831, 40.0204]
        },
        {
          name: "节",
          value: 8,
          color: "#66F842",
          fontColor: "#000000",
          points: [117.3065, 39.0887]
        },
      ];
      let geoCoordMap = {};
      let toolTipData = [
        {name:"北京",value:[{name:"科技人才总数",value:95},{name:"理科",value:82}]},
        {name:"天津",value:[{name:"文科",value:22},{name:"理科",value:20}]},
        {name:"河北",value:[{name:"文科",value:60},{name:"理科",value:42}]},
        {name:"山西",value:[{name:"文科",value:40},{name:"理科",value:41}]},
        {name:"内蒙古",value:[{name:"文科",value:23},{name:"理科",value:24}]},
        {name:"辽宁",value:[{name:"文科",value:39},{name:"理科",value:28}]},
        {name:"吉林",value:[{name:"文科",value:41},{name:"理科",value:41}]},
        {name:"黑龙江",value:[{name:"文科",value:35},{name:"理科",value:31}]},
        {name:"上海",value:[{name:"文科",value:12},{name:"理科",value:12}]},
        {name:"江苏",value:[{name:"文科",value:47},{name:"理科",value:45}]},
        {name:"浙江",value:[{name:"文科",value:57},{name:"理科",value:57}]},
        {name:"安徽",value:[{name:"文科",value:57},{name:"理科",value:52}]},
        {name:"福建",value:[{name:"文科",value:59},{name:"理科",value:57}]},
        {name:"江西",value:[{name:"文科",value:49},{name:"理科",value:42}]},
        {name:"山东",value:[{name:"文科",value:67},{name:"理科",value:52}]},
        {name:"河南",value:[{name:"文科",value:69},{name:"理科",value:68}]},
        {name:"湖北",value:[{name:"文科",value:60},{name:"理科",value:56}]},
        {name:"湖南",value:[{name:"文科",value:62},{name:"理科",value:52}]},
        {name:"重庆",value:[{name:"文科",value:47},{name:"理科",value:44}]},
        {name:"四川",value:[{name:"文科",value:65},{name:"理科",value:60}]},
        {name:"贵州",value:[{name:"文科",value:32},{name:"理科",value:30}]},
        {name:"云南",value:[{name:"文科",value:42},{name:"理科",value:41}]},
        {name:"西藏",value:[{name:"文科",value:5},{name:"理科",value:4}]},
        {name:"陕西",value:[{name:"文科",value:38},{name:"理科",value:42}]},
        {name:"甘肃",value:[{name:"文科",value:28},{name:"理科",value:28}]},
        {name:"青海",value:[{name:"文科",value:5},{name:"理科",value:5}]},
        {name:"宁夏",value:[{name:"文科",value:10},{name:"理科",value:8}]},
        {name:"新疆",value:[{name:"文科",value:36},{name:"理科",value:31}]},
        {name:"广东",value:[{name:"文科",value:63},{name:"理科",value:60}]},
        {name:"广西",value:[{name:"文科",value:29},{name:"理科",value:30}]},
        {name:"海南",value:[{name:"文科",value:8},{name:"理科",value:6}]},
      ];
      myChart.showLoading();
      let geoJson = require(`../../../public/mapJson/zhongguo.json`);
      echarts.registerMap("map", geoJson);
      let mapFeatures = geoJson.features;
      myChart.hideLoading();
      console.log(mapFeatures);
      mapFeatures.forEach(function(v) {
        // 地区名称
        let name = v.properties.name;
        // 地区经纬度
        geoCoordMap[name] = v.properties.center;
      data = list;
      let geoJson = require(`../../../public/mapJson/${mapName}.json`);
      echarts.registerMap(mapName, geoJson);

      let areaList = geoJson.features || [];
      let data0 = [];
      areaList.forEach((v) => {
        data0.push({
          name: v.properties.name,
          value: Math.floor(Math.random() * 3) * 50
        });
      });

      let convertData = function(data) {
        let res = [];
        for (let i = 0; i < data.length; i++) {
          let geoCoord = geoCoordMap[data[i].name];
          console.log(data[i].name);
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
            });
          }
          let item = data[i];
          res.push({
            name: item.name,
            color: item.color,
            fontColor: item.fontColor,
            value: item.points.concat(data[i].value),
            data: item
          });
        }
        return res;
      };
@@ -114,9 +74,22 @@
        tooltip: {
          show: false,
        },
        visualMap: {
          show: false,
          type: "continuous",
          text: ["", ""],
          showLabel: true,
          left: "50",
          min: 0,
          max: 100,
          inRange: {
            color: ['#025483', '#116493', '#3A8EBE']
          },
          seriesIndex: [1]
        },
        geo: {
          show: true,
          map: "map",
          map: mapName,
          label: {
            normal: {
              show: false
@@ -128,38 +101,63 @@
          roam: true,
          itemStyle: {
            normal: {
              areaColor: '#023677',
              borderColor: '#1180c7',
              borderColor: "rgba(147, 235, 248, 1)",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              shadowColor: "rgba(128, 217, 248, 1)",
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
            emphasis: {
              areaColor: '#4499d0',
            }
              areaColor: "#1ecee5",
              borderWidth: 0,
              label: {
                show: false,
              },
            },
          }
        },
        series: [{
          name: '散点',
          type: 'scatter',
          coordinateSystem: 'geo',
          data: convertData(data),
          symbolSize: function(val) {
            return val[2] / 10;
          },
          label: {
            normal: {
        series: [
          {
            name: '散点',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            rippleEffect: {
              scale: 3,
            },
            symbolSize: 20,
            data: convertData(data),
            label:{
              formatter: '{b}',
              position: 'right',
              show: true
              position: 'inside',
              show: true,
              color: "#FFFFFF",
              fontWeight: "bold"
            },
            emphasis: {
              show: true
            }
            itemStyle: {
              color(params) {
               return params.data.color;
              }
            },
            zlevel: 7
          },
          itemStyle: {
            normal: {
              color: '#fff'
            }
          }
        },
          {
            type: 'map',
            map: mapName,
@@ -168,72 +166,28 @@
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: true
                show: true,
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff'
                  color: '#FF0000'
                }
              }
            },
            itemStyle: {
              areaColor: "#FF0000"
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: '#031525',
                borderColor: '#3B5077',
              },
              emphasis: {
                areaColor: '#2B91B7'
              }
            },
            animation: false,
            data: data
            data: data0
          },
          {
            name: '点',
            type: 'scatter',
            coordinateSystem: 'geo',
            zlevel: 6,
          },
          {
            name: 'Top 5',
            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] / 10;
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: '{b}',
                position: 'left',
                show: false
              }
            },
            itemStyle: {
              normal: {
                color: 'yellow',
                shadowBlur: 10,
                shadowColor: 'yellow'
              }
            },
            zlevel: 1
          },

        ]
      };
    }
  },
  mounted() {
    this.setData();
    this.setData([]);
  }
}
</script>

 src/layout/components/Navbar.vue

@@ -124,7 +124,7 @@
                :state="1"
                content="大屏展示"
                @handleClick="showBigScreen"
                v-if="false"
                v-if="true"
              ></progress-state>
            </div>
            <!--            <weather-component-->

 src/views/dataMager/js/station.js

@@ -40,7 +40,7 @@
/**
 * 查询未添加物理信息的机房
 * BattMap_informationAction!serchNotInBattMapByUid  // 旧
 * @returns 
 * @returns
 */
export const searchNotInBattMap = () => {
  return axios({
@@ -88,4 +88,22 @@
    url: "A059StationInf/importBatt",
    data
  });
};
};

/**
 * 查询说有的站点
 * @param pageCurr 查询页
 * @param pageSize 每页信息数
 * @returns {AxiosPromise}
 */
export const searchStationAll = (pageCurr, pageSize)=> {
  return axios({
    method: "GET",
    url: "StationInf/searchStationAll",
    params: {
      pageCurr,
      pageSize
    },
  });

}

 src/views/dataMager/totalStation.vue

@@ -1,5 +1,60 @@
<template>
  <flex-layout>
    <div class="table-layout filter-box-table" slot="header">
      <div class="table-row">
        <div class="table-cell text-right">省：</div>
        <div class="table-cell">
          <el-select
            v-model="filters.values.province"
            @change="searchCity"
            size="small"
            placeholder="请选择省"
          >
            <el-option
              v-for="item in filters.data.province"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="table-cell text-right">市：</div>
        <div class="table-cell">
          <el-select
            v-model="filters.values.city"
            @change="searchCounty"
            size="small"
            placeholder="请选择市"
          >
            <el-option
              v-for="item in filters.data.city"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="table-cell text-right">区/县/班组：</div>
        <div class="table-cell">
          <el-select
            v-model="filters.values.county"
            @change="searchHome"
            size="small"
            placeholder="请选择区/县/班组"
          >
            <el-option
              v-for="item in filters.data.county"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="flex-page-content">
      <el-table
        stripe
@@ -38,10 +93,28 @@
</template>

<script>
import {searchStationAll} from "./js/station";
import {searchCity, searchCounty, searchProvince} from "@/assets/js/api";

export default {
  name: "totalStation",
  data() {
    return {
      loading: false,
      filters: {
        values: {
          province: "",
          city: "",
          county: "",
          home: "",
        },
        data: {
          province: [],
          city: [],
          county: [],
          home: [],
        },
      },
      headers: [
        {
          prop: 'stationId',
@@ -54,27 +127,27 @@
          minWidth: 360,
        },
        {
          prop: 'stationId',
          prop: 'nodeStationText',
          label: '站点类型',
          minWidth: 150
        },
        {
          prop: 'stationId',
          prop: 'stationType',
          label: '电压等级',
          minWidth: 150
        },
        {
          prop: "longitude",
          prop: "stationLongitude",
          label: "经度",
          minWidth: 180,
        },
        {
          prop: "latitude",
          prop: "stationLatitude",
          label: "纬度",
          minWidth: 180,
        },
        {
          prop: "address",
          prop: "stationAddr",
          label: "地址",
          minWidth: 360,
        },
@@ -88,6 +161,95 @@
    };
  },
  methods: {
    searchProvince() {
      // 查询省
      this.loading = this.$layer.loading(1);
      searchProvince().then((res) => {
        res = res.data;
        var data = [];
        if (res.code) {
          data = res.data.map((v) => {
            return {
              label: v,
              value: v,
            };
          });
        }
        let len = data.length;
        // 设置第一笔数据
        data.unshift({
          label: "全部（共" + len + "种)",
          value: "",
        });
        // 设置省
        this.filters.data.province = data;
        // 查询市
        this.searchCity();
      });
    },
    searchCity() {
      // 查询市
      // 重置值
      this.filters.values.city = "";
      this.filters.values.county = "";
      this.filters.values.home = "";
      // 构造查询条件
      let stationName1 = this.filters.values.province;
      // 请求后台
      searchCity(stationName1).then((res) => {
        res = res.data;
        var data = [];
        if (res.code) {
          data = res.data.map((v) => {
            return {
              label: v,
              value: v,
            };
          });
        }
        let len = data.length;
        // 设置第一笔数据
        data.unshift({
          label: "全部（共" + len + "种)",
          value: "",
        });
        // 设置市
        this.filters.data.city = data;
        // 查询区县
        this.searchCounty();
      });
    },
    searchCounty() {
      // 重置值
      this.filters.values.county = "";
      this.filters.values.home = "";
      // 构造查询条件
      let StationName1 = this.filters.values.province,
        StationName2 = this.filters.values.city;
      // 请求后台
      searchCounty(StationName1, StationName2).then((res) => {
        res = res.data;
        var data = [];
        if (res.code) {
          data = res.data.map((v) => {
            return {
              label: v,
              value: v,
            };
          });
        }
        let len = data.length;
        // 设置第一笔数据
        data.unshift({
          label: "全部（共" + len + "种)",
          value: "",
        });
        // 设置区县
        this.filters.data.county = data;
        // 查询机房
        this.searchData();
      });
    },
    currentChange(value) {
      this.page.pageCurr = value;
      this.searchData();
@@ -97,10 +259,31 @@
      this.page.pageSize = value;
      this.searchData();
    },
    searchData() {},
    searchData() {
      let pageCurr = this.page.pageCurr;
      let pageSize = this.page.pageSize;
      searchStationAll(pageCurr, pageSize).then(res=>{
        this.$layer.close(this.loading);
        let rs = res.data;
        let data = [];
        if(rs.code == 1 && rs.data) {
          let data2 = rs.data2;
          data = data2.list.map(item=>{
            item.nodeStationText = item.nodeStation?"节点站":"非节点站";
            return item;
          });
          this.page.pageAll = data2.total;
        }
        this.tableData = data;
      }).catch(error=>{
        this.$layer.close(this.loading);
        this.tableData = [];
        console.log(error);
      });
    },
  },
  mounted() {

    this.searchProvince();
  }
}
</script>