数据统计页面添加

Surpriseplus

2023-02-21 b3a47bd65a345355f6685cfcc8da59478cdd2352

数据统计页面添加

 src/api/api.js

@@ -797,7 +797,7 @@
}
//模板管理=>删除多条数据
export function report_deletes(params) {
  return request.get('/report/deletes',{ params: params });
  return request.get('/report/deletes', { params: params });
}
//模板管理=>插入一条数据
export function report_insert(params) {
@@ -809,8 +809,21 @@
}
//签名管理=>插入操作日志
export function sign_insertOpLog(params) {
  return request.get('/sign/insertOpLog',{ params: params });
  return request.get('/sign/insertOpLog', { params: params });
}
//数据统计=>分页查询并返回记录数
export function dataCount_selectByPageAndCount(params) {
  return request.get('/dataCount/selectByPageAndCount', { params: params });
}
//数据统计=>查询用户流量统计
export function dataCount_selectCountOperates(params) {
  return request.get('/dataCount/selectCountOperates', { params: params });
}






//请求站场点内容
export function querySitePoint(size, index, name) {

 src/assets/css/config.css

@@ -477,7 +477,7 @@
    background: url("../../assets/img/synthesis/椭圆 3 æ‹·è´ 23.png") no-repeat center;
}

.twoMenu_imge85 {
.Black_theme .twoMenu_imge85 {
    background: url("../../assets/img/synthesis/导入.png") no-repeat center;
}


 src/components/mapsdk.vue

@@ -62,10 +62,7 @@
        v-if="showCoordLocalBoxDialog"
      >
        <el-card class="box-card">
          <div
            slot="header"
           
          >
          <div slot="header">
            <span>坐标定位</span>
            <div style="float: right; cursor: pointer">
              <i
@@ -166,10 +163,7 @@
              >
              </el-table-column>
            </el-table>
            <div
              style="margin-top: 10px"
              class="pagination_box"
            >
            <div class="pagination_box">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
@@ -358,7 +352,9 @@
      pathStart: null,
      pathEnd: null,
      pathData: null,

      layer1: null,
      layer2: null,
      layer3: null,
      isActive: false,
      isMenuLayer: true,
      selFrom: {},
@@ -401,18 +397,18 @@
        destination: Cesium.Cartesian3.fromDegrees(110, 33, 8000000),

      });
      Viewer.imageryLayers.addImageryProvider(
      this.layer1 = Viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: gaoDeBaseUrl[0].url,
        })
      )

      Viewer.imageryLayers.addImageryProvider(
      this.layer2 = Viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: gaoDeBaseUrl[1].url,
        })
      )
      Viewer.imageryLayers.addImageryProvider(
      this.layer3 = Viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: gaoDeBaseUrl[2].url,
        })
@@ -437,7 +433,8 @@
      //比例尺
      window.sgworld.navControl("scale", false)
      //开启深度检测
      sgworld.Analysis.depthTestAgainstTerrain(true)
      // sgworld.Analysis.depthTestAgainstTerrain(true)
      Viewer.scene.globe.depthTestAgainstTerrain = true;
      //影像对比设置
      // var base = {
      //   url: 'https://a.tile.openstreetmap.org/',
@@ -453,15 +450,15 @@
      // );
      // openStreetMap.item.show = false;

      Viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
        url: demLayer,
      })
      // var option = {
      //   url: window.sceneConfig.SGUrl,
      //   layerName: window.sceneConfig.mptName,
      //   requestVertexNormals: true
      // }
      // sgworld.Creator.sfsterrainprovider("", option, "", true, "");
      // Viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
      //   url: demLayer,
      // })
      var option = {
        url: window.sceneConfig.SGUrl,
        layerName: window.sceneConfig.mptName,
        requestVertexNormals: true
      }
      sgworld.Creator.sfsterrainprovider("", option, "", true, "");

      window.elevationTool = new SmartEarth.ElevationTool(window.sgworld)
      elevationTool.setContourColor("#F1D487")
@@ -484,13 +481,21 @@
    },
    setLayerVisible() {
      if (this.isActive == true) {
        Viewer.imageryLayers._layers[1].show = true
        Viewer.imageryLayers._layers[2].show = false
        Viewer.imageryLayers._layers[3].show = false
        // Viewer.imageryLayers._layers[1].show = true
        // Viewer.imageryLayers._layers[2].show = false
        // Viewer.imageryLayers._layers[3].show = false

        Viewer.imageryLayers.lower(this.layer2);
        Viewer.imageryLayers.lower(this.layer3);

      } else {
        Viewer.imageryLayers._layers[1].show = false
        Viewer.imageryLayers._layers[2].show = true
        Viewer.imageryLayers._layers[3].show = true

        Viewer.imageryLayers.raise(this.layer3);
        Viewer.imageryLayers.raise(this.layer2);
     
        // Viewer.imageryLayers._layers[1].show = false
        // Viewer.imageryLayers._layers[2].show = true
        // Viewer.imageryLayers._layers[3].show = true
      }
    },
    //显示弹窗
@@ -665,7 +670,7 @@
            return false
          }
        })
       this.clearPathAll(3)
        this.clearPathAll(3)
        var start = this.pathFrom.lon.split(",")
        var end = this.pathFrom.lat.split(",")
        var startData = {
@@ -674,7 +679,7 @@
          x2: parseFloat(end[0]),
          y2: parseFloat(end[1]),
        }
       

        const data = await comprehensive_selectRoute(startData)
        if (data.code != 200) {
          return this.$message.error("数据请求失败")
@@ -896,15 +901,12 @@
      right: 1%;
      bottom: 1%;
    }
    

    .box-card {
      
      opacity: 0.85;
      border: 1px solid rgba(32, 160, 255, 0.6);
 
    }
    .menu_Top {
      
      opacity: 0.85;
      width: 100%;
      padding: 1%;

 src/views/Archive/dataApplication.vue

@@ -156,7 +156,7 @@
      </el-table>

      <div
        style="margin-top: 40px"
 
        class="pagination_box"
      >
        <el-pagination

 src/views/datamanage/addStyle.vue

@@ -164,7 +164,7 @@
    </div>
    <div
      class="pagination_box"
      style="margin-top: 20px; margin-left: 400px"
      style=" margin-left: 400px"
    >
      <el-pagination
        @size-change="handleSizeChange"

 src/views/datamanage/dataController.vue

@@ -33,6 +33,7 @@
        <data-loader v-if="setMenuFlag == 'dataLoader'"></data-loader>
        <down-loader v-if="setMenuFlag == 'downLoader'"></down-loader>
        <project-manage v-if="setMenuFlag == 'projectManage'"></project-manage>
        <data-statistics v-if="setMenuFlag == 'dataStatistics'"></data-statistics>
      </div>
    </div>

@@ -54,6 +55,8 @@
import dataLoader from '@/views/datamanage/dataLoader.vue'; //数据管理-数据入库
import downLoader from '@/views/datamanage/downLoader.vue'; //数据管理-数据下载
import projectManage from '@/views/datamanage/projectManage.vue'; //项目管理
import dataStatistics from  '@/views/datamanage/dataStatistics.vue'; //数据统计
 
export default {
  components: {
    customElMenu,
@@ -68,6 +71,8 @@
    dataLoader,
    downLoader,
    projectManage,
    dataStatistics,
 
  },
  data() {
    return {

 src/views/datamanage/dataStatistics.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,295 @@
<template>
  <div class="dataStatistics">
    <My-bread :list="[
        `${$t('dataManage.dataManage')}`,
        `${$t('dataManage.projectManage')}`,
      ]"></My-bread>
    <el-divider />
    <div class="contentBox ">
      <div class="content_Left subpage_Div">
        <el-tree
          :data="treeData"
          @node-click="handleNodeClick"
          node-key="id"
          ref="tree"
          highlight-current
          :props="defaultProps"
        >
        </el-tree>
      </div>
      <div class="content_Right subpage_Div">
        <div>
          <el-button
            icon="el-icon-c-scale-to-original"
            @click="setCountFlagChange(1)"
          ></el-button>
          <el-button
            icon="el-icon-pie-chart"
            @click="setCountFlagChange(2)"
          ></el-button>
          <el-divider />
        </div>
        <div
          class="contentTable"
           v-show="setCountFlag"
        >
          <el-table
            :data="tableData"
            style="width: 100%"
            height="calc(100% - 50px)"
          >
            <el-table-column
              prop="m1"
              label="一级模块"
            >
            </el-table-column>
            <el-table-column
              prop="m2"
              label="二级模块"
            >
            </el-table-column>
            <el-table-column
              prop="count"
              label="统计数量"
            >
            </el-table-column>
          </el-table>
          <!-- <div class="pagination_box">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="listData.pageIndex"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="listData.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="listData.count"
            >
            </el-pagination>
          </div> -->
        </div>
        <div
      
          class="contentTable"
          v-show="!setCountFlag"
        >
      <div id="countEchart" style = "width:100%;height:100%;border:1px solid red">

      </div>
        
        
        
        </div>

      </div>

    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import MyBread from "../../components/MyBread.vue";
import { dataCount_selectByPageAndCount, dataCount_selectCountOperates } from '../../api/api.js'
export default {
  name: "DataStatistics",
  components: { MyBread },
  data() {
    return {
      treeData: [{
        id: 1,
        label: '服务调用量统计',
        value: 'countServices',
        children: []
      }, {
        id: 2,
        label: '数据量统计',
        value: 'countSizes',
        children: []
      }, {
        id: 3,
        label: '用户流量统计',
        value: 'countOperates',
        children: []
      }],

      defaultProps: {
        children: 'children',
        label: 'label'
      },
      listData: {
        pageIndex: 1,
        pageSize: 10,
        code: '',
        name: '',
        count: 0,
      },
      tableData: [],
      queryData: null,
      setCountFlag: true,

    }
  },
  mounted() {
    this.setStartDataCount();
  },
  methods: {
    //Echart图表显示
    showCountEchart(){
  
      var chartDom = document.getElementById('countEchart');
var myChart = echarts.init(chartDom);
var option;
      var dataAxis=[];
      var data=[];
      var yMax =0;
      let dataShadow = [];
      for(var i  in this.tableData){
        if( this.tableData[i].count >yMax){
          yMax=  this.tableData[i].count
        }
        data.push(this.tableData[i].count)
      }
      yMax = yMax+100;
for (let i = 0; i < data.length; i++) {
  dataShadow.push(yMax);
}
option = {
 
  xAxis: {
    data: dataAxis,
    axisLabel: {
      color: '#000000'
    },
 
    axisLine: {
      show: true
    },
    z: 10
  },
  yAxis: {
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: '#999'
    }
  },
  dataZoom: [
    {
      type: 'inside'
    }
  ],
  series: [
    {
      type: 'bar',
      showBackground: true,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' }
        ])
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#2378f7' },
            { offset: 0.7, color: '#2378f7' },
            { offset: 1, color: '#83bff6' }
          ])
        }
      },
      data: data
    }
  ]
};
// Enable data zoom when user click bar.
const zoomSize = 6;
myChart.on('click', function (params) {
  
  myChart.dispatchAction({
    type: 'dataZoom',
    startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
    endValue:
      dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
  });
});

    },
    //统计切换
    setCountFlagChange(res) {
      switch (res) {
        case 1:
          this.setCountFlag = true;
          break;
        case 2:
          this.setCountFlag = false;
          this.showCountEchart();
            break;
      }
    },
    //系统初始化
    setStartDataCount() {
      this.queryData = this.treeData[0];
      this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(this.queryData.id) // é»˜è®¤é€‰ä¸­èŠ‚点第一个
      });
      this.listData.code = this.queryData.value;
      this.setQueryCountData();
    },
    //树点击事件
    handleNodeClick(data, node, prop) {
      this.setCountFlag = true;
      this.queryData = data;
      this.listData.code = data.value;
      this.listData.pageIndex = 1;
      this.listData.pageSize = 10;
      this.setQueryCountData();
    },
    //查询统计信息
    async setQueryCountData() {
      const data = await dataCount_selectCountOperates();
      if (data.code != 200) {
        return
      }
      this.tableData = data.result;
      this.listData.count = data.count

    },

  }
}
</script>

<style lang="less" scoped>
.dataStatistics {
  height: 98%;
  width: 98%;
  padding: 1%;
  .contentBox {
    height: calc(98% - 63px);
    width: 100%;
    display: flex;
    justify-content: space-around;
    .content_Left {
      width: 18%;
      height: calc(95% - 2px);
      border-radius: 5px;
      padding: 1%;
    }
    .content_Right {
      width: 77%;
      height: calc(95% - 2px);
      border-radius: 5px;
      padding: 1%;
      .contentTable {
        width: 100%;
        height: 88%;
      }
    }
  }
}
</style>

 src/views/userManage/userAuditing.vue

@@ -59,7 +59,6 @@
    <div class="table_box">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        height="99%"
        @selection-change="handleSelectionChange"

 src/views/userManage/userInfoManage.vue

@@ -85,7 +85,6 @@
    <div class="table_box">
      <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%"
        height="99%"