南昌市物联网技防平台-前端
liuyg
2021-04-10 d2b874b010d680c608452bde684ed2efb506d881
Merge branch 'master' of http://192.168.0.105:10010/r/jfpt-Vue
5 files modified
403 ■■■■ changed files
public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js 35 ●●●● patch | view | raw | blame | history
src/page/index/top/top-menu.vue 6 ●●●● patch | view | raw | blame | history
src/styles/alarmAnalysis/alarmAnalysis.scss 349 ●●●● patch | view | raw | blame | history
src/views/alarmManagement/alarmAnalysis.vue 9 ●●●●● patch | view | raw | blame | history
vue.config.js 4 ●●●● patch | view | raw | blame | history
public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js
@@ -35,7 +35,7 @@
    constructor: function (options) {
      /* options description:
        spatialReference: default 102100. A SpatialReference object using the wkid of that data.
        preClustered (boolean) : default false. Whether the data is pre-clustered or not. If true the addPreClusteredData method should be used to add data.
        preClustered (boolean) : default false. Whether the data is pre-clustered or not. If true the addPreClusteredData method should be used to add data.
                                  If false use addData method and clusters will be calculated within the layer.
        clusterRatio (number): default 75. When not pre clustered this is the ratio to divide the width and height of the map by which is used to draw up a grid to represent cluster areas. Experiment based on your data.
        displaySubTypeFlares (boolean): default false. Whether to dipslay flares for sub types (ie the count of a property). If this is true, then subTypeFlareProperty must also be set
@@ -46,8 +46,8 @@
        singleFlareTooltipProperty (string): default null. Property name to get the values for display in a single point flares tooltips.
        textSymbol (esri/symbols/TextSymbol): default set below. The text symbol to use in clusters
        flareShowMode (string): default 'mouse'. Must be 'mouse' or 'tap'. On a mouse enabled device whether to show the flares on mouse enter and hide on mouse leave, or on tap / click. Devices with no mouse will behave like 'tap' anyway.
        clusteringBegin (function): default null. A basic callback function that get's fired when clustering is beginning.
        clusteringComplete (function): default null. A basic callback function that get's fired when clustering is complete.
        clusteringBegin (function): default null. A basic callback function that get's fired when clustering is beginning.
        clusteringComplete (function): default null. A basic callback function that get's fired when clustering is complete.
        clusterAreaDisplay (string): default null. Can be either 'always' or 'hover'. 'always' will constantly display the cluster area, 'hover' will only display it on hover of cluster object
                                                   The cluster area is a ploygon of the total area covered by the points in a cluster. If using preClustered data, each cluster object must contain a property called 'points' which is an array of points for every point in the cluster. example: cluster.points = [[x1, y1], [x2, y2], [x3, y3]];
        clusterAreaRenderer (Renderer): default null. This is required if clusterAreaDisplay is set. This can be set in options constructor object or by calling setRenderer as the second argument.
@@ -55,7 +55,6 @@
        yPropertyName (string): default 'y'.  This is the name of the field in the dataset that represents the y coordinate.
        idPropertyName (string): default null. This is the name of the field in the dataset that represents a unique id which can be used to identify the flare.  This is usefull when you may have multiple points with the same lat/long.
      */
      //set options from constructor parameter or set defaults
      options = options || {};
      this.spatialRef = options.spatialReference || new SpatialReference({
@@ -76,11 +75,11 @@
        .setAlign(Font.ALIGN_START)
        .setFont(new Font("10pt").setWeight(Font.WEIGHT_BOLD).setFamily("calibri"))
        .setVerticalAlignment("middle");
      defaultTextSymbol.font.size = 14;
      defaultTextSymbol.font.size = 30;
      this.textSymbol = options.textSymbol || defaultTextSymbol;
      this.flareShowMode = options.flareShowMode || "mouse";
      //a couple of callbacks - could make them into events on the layer, and/or have the clustering return deferreds.
      //a couple of callbacks - could make them into events on the layer, and/or have the clustering return deferreds.
      this.clusteringBegin = options.clusteringBegin;
      this.clusteringComplete = options.clusteringComplete;
@@ -117,7 +116,7 @@
    },
    //#region override some GraphicsLayer methods
    //#region override some GraphicsLayer methods
    //add an extra argument to setRenderer. It is an optional renderer for displaying the cluster areas. The clusterAreaRenderer can also be set in constructor.
    setRenderer: function (renderer, clusterAreaRenderer) {
@@ -226,7 +225,7 @@
    },
    //Add a data point to be clustered.
    //Each object passed in must contain an x and y property.
    //Each object passed in must contain an x and y property.
    //Data should also contain whatever property is set in singleFlareTooltipProperty, so the flare tooltip has something to display for summary flares if needed
    add: function (p) {
@@ -238,7 +237,7 @@
      }
      //if we got here, then we're adding a single object
      //NOTE: Use this sparingly - better to use addData (or even better addPreClusteredData).
      //NOTE: Use this sparingly - better to use addData (or even better addPreClusteredData).
      //If using add() to add a large amount of objects (eg: in a long loop), clusters and their elements will be removed and recreated when changes are applied to them,this can be expensive
      //If you use addData and pass in an array clusters will only be created in the DOM once they have been fully calculated
@@ -459,7 +458,7 @@
    addPreClusteredData: function (data) {
      /*
          Add data that is preclustered - (ie clustered server side).
          Data is an array, clusters must contain an x and y property as well as a clusterCount property. subTypeCounts is optional.
          Data is an array, clusters must contain an x and y property as well as a clusterCount property. subTypeCounts is optional.
          Clusters that have a count less than the this.displaySingleFlaresAtCount option must all contain the data for the single points in an array called singles
         Singles should also be in the array, they only need to contain an x and y property. Singles should also contain whatever property is set in singleFlareTooltipProperty, so the flare tooltip has something to display for summary flares if needed
      */
@@ -489,7 +488,7 @@
    addData: function (data) {
      /*
          Add data to be clustered.
          Data is an array of objects. Each object passed in must contain an x and y property.
          Data is an array of objects. Each object passed in must contain an x and y property.
          Data should also contain whatever property is set in singleFlareTooltipProperty if one is set, so the flare tooltip has something to display for summary flares if needed
          This will also clear all data first. add() can be used to add single objects at any time.
      */
@@ -611,7 +610,7 @@
    _createClusterGrid: function (webExtent) {
      //get the total amount of grid spaces based on the height and width of the map (divide it by clusterRatio) - then get the degrees for x and y
      //get the total amount of grid spaces based on the height and width of the map (divide it by clusterRatio) - then get the degrees for x and y
      var xCount = Math.round(this.map.width / this.clusterRatio);
      var yCount = Math.round(this.map.height / this.clusterRatio);
@@ -772,7 +771,7 @@
      cluster.textShape = textShape;
      var anims = [];
      //animate drawing of the cluster.
      //animate drawing of the cluster.
      var create = fx.animateTransform({
        duration: 200,
        shape: groupShape,
@@ -922,7 +921,7 @@
        }
      }
      //if there are more flare objects to create that the maxFlareCount and this is a one of those - create a summary flare that contains '...' as the text and make this one part of it
      //if there are more flare objects to create that the maxFlareCount and this is a one of those - create a summary flare that contains '...' as the text and make this one part of it
      var willContainSummaryFlare = this.flareObjects.length > this.maxFlareCount;
      var flareCount = willContainSummaryFlare ? this.maxFlareCount : this.flareObjects.length;
@@ -985,7 +984,7 @@
        //ScreenPoint needs to be relative to the top-left corner of the map control.
        //The matrixTransform on pt gives us a point based on the screen coordinate system.
        //Therefore if the map has a top offset applied to it the fo object will appear in
        //Therefore if the map has a top offset applied to it the fo object will appear in
        //an incorrect spot on the map.  We must apply the offset to both the x and y points
        //to ensure the point is relative to the map control.
        //As of v3.18 also apply need to apply the surface translate values that may have been created by the api during panning.
@@ -1004,7 +1003,7 @@
        flareGroup.rawNode.appendChild(flareCircle.rawNode);
        if (fo.flareText) {
          //if displaying text in the flare,
          //if displaying text in the flare,
          flareGroup.flareText = {
            location: {
              x: fo.center.x,
@@ -1244,7 +1243,7 @@
    //#endregion
    //#region helper methods
    //#region helper methods
    _getGraphicFromObject: function (obj) {
      //return the graphic from the obj which could be a single or cluster object
@@ -1327,7 +1326,7 @@
    _animationEnd: function (layer) {
      //scope: 'this' is the animation that triggered the event, 'layer' is the flare cluster layer object instance
      //IE10 and below Fix - have to manually set transform back to 1 on elements. They don't seem to appear all of the time again after beign animated back to
      //IE10 and below Fix - have to manually set transform back to 1 on elements. They don't seem to appear all of the time again after beign animated back to
      //a scale of 1. IE sucks.
      dojo.query("> *", this.shape.rawNode).forEach(function (elem) {
        if (!elem.__gfxObject__) return;
src/page/index/top/top-menu.vue
@@ -3,17 +3,17 @@
    <el-menu :default-active="activeIndex" mode="horizontal" text-color="#333">
      <el-menu-item index="0" @click.native="openHome(dataItem)" key="0">
        <template slot="title">
          <i :class="dataItem.source" :title="dataItem.name"></i>
          <i style="font-size: 20px!important;" :class="dataItem.source" :title="dataItem.name"></i>
        </template>
      </el-menu-item>
      <el-menu-item index="1" @click.native="openHome(mapItem)" key="0">
        <template slot="title">
          <i :class="mapItem.source" :title="mapItem.name"></i>
          <i style="font-size: 20px!important;"  :class="mapItem.source" :title="mapItem.name"></i>
        </template>
      </el-menu-item>
      <el-menu-item index="2" @click.native="openHome(cardItem)" key="0">
        <template slot="title">
          <i :class="cardItem.source" :title="cardItem.name"></i>
          <i style="font-size: 20px!important;"  :class="cardItem.source" :title="cardItem.name"></i>
        </template>
      </el-menu-item>
      <!--      <el-menu-item index="0" @click.native="openHomes(ZHAJ)" key="0">-->
src/styles/alarmAnalysis/alarmAnalysis.scss
@@ -1,329 +1,330 @@
.alarm_title {
    width: 100%;
    height: 3%;
  width: 100%;
  height: 3%;
}
.alarm_title span {
    font-size: 12px;
    color: #7B91B4;
    left: 1%;
    top: 30%;
    position: relative;
  font-size: 12px;
  color: #7B91B4;
  left: 1%;
  top: 30%;
  position: relative;
}
.timeSearchBtn {
    width: 100%;
    height: 4%;
  width: 100%;
  height: 4%;
}
.timeSearchBtn .timeBtn {
    position: relative;
    left: 0.8%;
    top: 40%;
  position: relative;
  left: 0.8%;
  top: 40%;
}
.timeSearchBtn .timeSearch {
    position: relative;
    left: 1.2%;
    top: 42.6%;
  position: relative;
  left: 1.2%;
  top: 42.6%;
}
//预警总数统计
.statisTotal {
    position: relative;
    left: 0.3%;
    top: 3%;
    width: 100%;
    height: 10%;
  position: relative;
  left: 0.3%;
  top: 3%;
  width: 100%;
  height: 10%;
}
.statisTotalAvueDataBox .el-row {
    width: 99.7% !important;
  width: 99.7% !important;
}
.statisTotal .el-col-md-6 {
    width: 20%;
  width: 20%;
}
//预警数量统计
.alarmStatis {
    background-color: #ffffff;
    width: 98.6%;
    height: 550px;
    position: relative;
    left: 0.8%;
    top: 7%;
  background-color: #ffffff;
  width: 98.6%;
  height: 550px;
  position: relative;
  left: 0.8%;
  top: 7%;
}
#alarmNumberStatis {
    width: 75%;
    height: 550px;
    position: relative;
    left: 1%;
  width: 75%;
  height: 550px;
  position: relative;
  left: 1%;
}
.alarmClassifyStatis {
    width: 25%;
    height: 550px;
    position: relative;
    left: 75%;
    top: -85%;
  width: 25%;
  height: 550px;
  position: relative;
  left: 75%;
  top: -85%;
}
.alarmClassifyStatis .avue-data-cardtext {
    width: 100%;
    height: 90%;
  width: 100%;
  height: 90%;
}
.avue-data-cardText .item {
    -webkit-box-shadow: 0px 0px 0px 0px #ccc;
    box-shadow: 0px 0px 0px #ccc;
  -webkit-box-shadow: 0px 0px 0px 0px #ccc;
  box-shadow: 0px 0px 0px #ccc;
}
.avue-data-cardtext .el-row {
    width: 250px !important;
    height: 50px !important;
    position: relative !important;
    top: 30px !important;
  width: 250px !important;
  height: 50px !important;
  position: relative !important;
  top: 30px !important;
}
.alarmClassifyStatis .el-col {
    float: inherit !important;
    width: 100% !important;
    height: 100px !important;
  float: inherit !important;
  width: 100% !important;
  height: 100px !important;
}
.avue-data-cardText .item-header a {
    font-size: 14px;
    margin-left: 2px;
    position: absolute;
    bottom: 1px;
  font-size: 14px;
  margin-left: 2px;
  position: absolute;
  bottom: 1px;
}
.avue-data-cardText .item-header i {
    font-size: 14px;
  font-size: 14px;
}
.avue-data-cardText .item-footer span:nth-child(2) {
    color: red;
  color: red;
}
//预警类型占比
.alarmTypePro {
    background-color: #ffffff;
    width: 98.6%;
    height: 450px;
    position: relative;
    left: 0.8%;
    top: 9.5%;
  background-color: #ffffff;
  width: 98.6%;
  height: 450px;
  position: relative;
  left: 0.8%;
  top: 9.5%;
}
#alarmTypeProEcharts {
    width: 30%;
    height: 450px;
    position: relative;
    left: 1%;
  width: 30%;
  height: 450px;
  position: relative;
  left: 1%;
}
.alarmTypeTotal {
    //background-color: antiquewhite;
    width: 10%;
    height: 100px;
    position: relative;
    left: 9.37%;
    top: -58%;
  //background-color: antiquewhite;
  width: 10%;
  height: 100px;
  position: relative;
  left: 9.37%;
  top: -58%;
}
.numAlarmType {
    text-align: center;
    position: relative;
    top: 15%;
  text-align: center;
  position: relative;
  top: 15%;
}
.numAlarmType span {
    font-size: 28px;
    color: #4B4B4B;
  font-size: 28px;
  color: #4B4B4B;
}
.textAlarmType {
    text-align: center;
    position: relative;
    top: 20%;
  text-align: center;
  position: relative;
  top: 20%;
}
.textAlarmType span {
    font-size: 14px;
    color: #757575;
  font-size: 14px;
  color: #757575;
}
.alarmTypeProStatis {
    //background-color: aqua;
    width: 50%;
    height: 100%;
    position: relative;
    top: -100%;
    left: 30%;
  //background-color: aqua;
  width: 50%;
  height: 100%;
  position: relative;
  top: -100%;
  left: 30%;
}
.alarmTypeProStatis .el-row {
    position: relative;
    top: 24px;
  position: relative;
  top: 24px;
}
//预警设备类型占比
.alarmEquipmentPro {
    background-color: #ffffff;
    width: 98.6%;
    height: 450px;
    position: relative;
    left: 0.8%;
    top: 11%;
  background-color: #ffffff;
  width: 98.6%;
  height: 450px;
  position: relative;
  left: 0.8%;
  top: 11%;
}
#alarmEquipmentProEcharts {
    width: 30%;
    height: 450px;
    position: relative;
    left: 1%;
  width: 30%;
  height: 450px;
  position: relative;
  left: 1%;
}
.alarmEquipmentProStatis {
    //background-color: aqua;
    width: 35%;
    height: 100%;
    position: relative;
    left: 30%;
    top: -100%;
  //background-color: aqua;
  width: 35%;
  height: 100%;
  position: relative;
  left: 30%;
  top: -100%;
}
.alarmEquipmentProStatis .avue-crud {
    position: relative;
    top: 20%;
  position: relative;
  top: 20%;
}
.alarmEquipmentProStatis .avue-crud__menu {
    display: none;
  display: none;
}
//确认时间占比
.confirmTimePro {
    background-color: #ffffff;
    width: 61.6%;
    height: 450px;
    position: relative;
    left: 0.8%;
    top: 11.8%;
  background-color: #ffffff;
  width: 61.6%;
  height: 450px;
  position: relative;
  left: 0.8%;
  top: 11.8%;
}
#confirmTimeProEcharts {
    width: 40%;
    height: 450px;
    position: relative;
    left: 1%;
  width: 40%;
  height: 450px;
  position: relative;
  left: 1%;
}
.confirmTimeTotal {
    //background-color: antiquewhite;
    width: 12%;
    height: 100px;
    position: relative;
    left: 12.87%;
    top: -58%;
  //background-color: antiquewhite;
  width: 12%;
  height: 100px;
  position: relative;
  left: 12.87%;
  top: -58%;
}
.numConfirmTime {
    text-align: center;
    position: relative;
    top: 15%;
  text-align: center;
  position: relative;
  top: 15%;
}
.numConfirmTime span {
    font-size: 28px;
    color: #4B4B4B;
  font-size: 28px;
  color: #4B4B4B;
}
.textConfirmTime {
    text-align: center;
    position: relative;
    top: 20%;
  text-align: center;
  position: relative;
  top: 20%;
}
.textConfirmTime span {
    font-size: 14px;
    color: #757575;
  font-size: 14px;
  color: #757575;
}
.confirmTimeProStatis {
    //background-color: aqua;
    width: 60%;
    height: 100%;
    position: relative;
    top: -100%;
    left: 40%;
  //background-color: aqua;
  width: 60%;
  height: 100%;
  position: relative;
  top: -100%;
  left: 40%;
}
.confirmTimeProStatis .el-row {
    position: relative;
    top: 24px;
  position: relative;
  top: 24px;
}
//预警平均确认速度排行
.confirmAverageSpeed {
    background-color: #ffffff;
    width: 35%;
    height: 450px;
    position: relative;
    top: -40.5%;
    left: 64.4%;
  background-color: #ffffff;
  width: 35%;
  height: 450px;
  position: relative;
  top: -40.5%;
  left: 64.4%;
}
.confirmAverageSpeedTitle span {
    position: relative;
    left: 5%;
    top: 20px;
  position: relative;
  left: 5%;
  top: 20px;
}
.confirmAverageSpeed .avue-crud {
    width: 90%;
    position: relative;
    top: 10%;
  width: 90%;
  position: absolute;
  top: 12%;
  left: 4%;
}
.confirmAverageSpeed .avue-crud__menu {
    display: none;
  display: none;
}
//预警时间分布
.alarmTimeDis {
    background-color: #ffffff;
    width: 98.6%;
    height: 450px;
    position: relative;
    left: 0.8%;
    top: -38%;
  background-color: #ffffff;
  width: 98.6%;
  height: 450px;
  position: relative;
  left: 0.8%;
  top: -38%;
}
#alarmTimeDisEchars {
    width: 100%;
    height: 450px;
    position: relative;
    left: 1%;
  width: 100%;
  height: 450px;
  position: relative;
  left: 1%;
}
//底部
.low {
    background-color: F0F2F5;
    width: 100%;
    height: 50px;
    position: relative;
    left: 0.8%;
    top: -38%;
  background-color: F0F2F5;
  width: 100%;
  height: 50px;
  position: relative;
  left: 0.8%;
  top: -38%;
}
.el-button .btn-color {
    color: rgb(255, 255, 255);
    background-color: #29C093;
    border-color: #29C093;
  color: rgb(255, 255, 255);
  background-color: #29C093;
  border-color: #29C093;
}
// .el-icon-bell:before {
@@ -333,4 +334,4 @@
//     //background-color: #F34A4A;
//     display: inline-block;
//     content: '';
// }
// }
src/views/alarmManagement/alarmAnalysis.vue
@@ -1062,7 +1062,8 @@
              legend: {
                  data: ['一键求助', '违禁品', '红色健康码', '体温异常'],
                  top:'10%',
                  right:'6%'
                  right:'6%',
                  icon:'circle'
              },
              grid: {
                  left: '1%',
@@ -1072,19 +1073,21 @@
                  containLabel: true
              },
              xAxis: {
                  name:'时段',
                  type: 'category',
                  boundaryGap: true,
                  axisLine: {
                  axisLine: {
                      lineStyle:{
                        type:'dashed'
                      }
                  },
                  axisTick: {
                  axisTick: {
                    show:false
                  },
                  data: ['0-2', '2-4', '4-6', '6-8', '8-10', '10-12', '12-14','14-16','16-18','18-20','20-22','22-24']
              },
              yAxis: {
                  name:'个/次',
                  type: 'value',
                  splitLine: {
                    show: true,
vue.config.js
@@ -34,7 +34,7 @@
        proxy: {
            '/api': {
                //本地服务接口地址
                // target: 'http://192.168.0.111:82/',
              // target: 'http://localhost:82/',
                target: 'https://web.byisf.com/api/',
                //远程演示服务地址,可用于直接启动项目
                //target: 'https://saber.bladex.vip/api',
@@ -45,4 +45,4 @@
            }
        }
    }
};
};