企业紧急加班

src/browerPatch.ts

@@ -0,0 +1,14 @@
+// @ts-ignore
+;(function () {
+    if (typeof EventTarget !== 'undefined') {
+        const func = EventTarget.prototype.addEventListener
+        EventTarget.prototype.addEventListener = function (type, fn, capture) {
+            ;(this as any).func = func
+            if (typeof capture !== 'boolean') {
+                capture = capture || {}
+                capture.passive = false
+            }
+            ;(this as any).func(type, fn, capture)
+        }
+    }
+})()

src/main.ts

@@ -13,6 +13,7 @@ import repeatFileValid from '@/plugins/repeatFileValid'
 import initDirect from '@/plugins/initDirect'
 import 'default-passive-events'
 import gitInfo from '@/out/git_info.json'
+import './browerPatch'
 
 repeatFileValid()
 await initMainRouter()  //  路由挂载前初始化路由表

src/style/cus.scss

@@ -346,3 +346,55 @@
     color: #108DF3;
   }
 }
+
+.__gis-overlay_table-v2 {
+  background-color: transparent;
+  $b: 1px solid #00C6FC;
+  .el-table-v2__table {
+    background-color: transparent;
+    .el-table-v2__header-wrapper {
+      background-color: transparent;
+      .el-table-v2__header {
+        background-color: transparent;
+        .el-table-v2__header-row {
+          border: none;
+          background-color: transparent;
+          .el-table-v2__header-cell {
+            background-color: #2860CE;
+            border-top: $b;
+            border-bottom: $b;
+            border-left: $b;
+            font-size: 12px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #B4D5FA;
+            &:last-child {
+              border-right: $b;
+            }
+          }
+        }
+      }
+    }
+    .el-table-v2__body {
+      .el-virtual-scrollbar {
+        width: 4px !important;
+      }
+      .el-table-v2__row {
+        border: none;
+        background-color: transparent;
+        .el-table-v2__row-cell {
+          background-color: #1174db;
+          border-bottom: $b;
+          border-left: $b;
+          font-size: 12px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #FFFFFF;
+          &:last-child {
+            border-right: $b;
+          }
+        }
+      }
+    }
+  }
+}

src/style/index.scss

@@ -8,6 +8,8 @@
   -webkit-user-drag: none;
   line-height: 1;
   box-sizing: border-box;
+  touch-action: none;
+
 }
 
 html, body {

src/views/gis/layout/index.vue

@@ -50,8 +50,71 @@
     <div class="gis-content">
       <RouterViewCom/>
     </div>
-    <div ref="ref_qyDom" class="qy-info">
-      {{qyParams.qyInfo.name}}
+    <div ref="ref_qyDom" class="qy-info" :class="`qy--info-${qyParams.qyInfo.tab}`">
+      <div class="qy-bg-icon qy-bg-icon-1"/>
+      <div class="qy-bg-icon qy-bg-icon-2"/>
+      <div class="qy-bg-icon qy-bg-icon-3"/>
+      <div class="qy-bg-icon qy-bg-icon-4"/>
+      <div class="qy-main">
+        <div class="qy-main-head">
+          <div class="qy-main-head-tips">【企业】</div>
+          <div class="qy-main-head-name">{{ qyParams.qyInfo.name }}</div>
+          <SvgIcon class="__hover" name="tips" size="14" color="#8FFFFF" @click="onCloseQy"/>
+        </div>
+        <div class="qy-main-tab">
+          <template v-for="item in [
+              {label: '基本信息', value: '1', disabled: false},
+              {label: '税收信息', value: '2', disabled: true},
+              {label: '运输车辆', value: '3', disabled: true},
+              {label: '能耗消息', value: '4', disabled: true},
+              {label: '周边设备', value: '5', disabled: false},
+          ]">
+            <div class="qy-main-tab-item __hover" :class="{active: item.value === qyParams.qyInfo.tab, disabled: item.disabled}" @click="item.disabled ? undefined : qyParams.qyInfo.tab = item.value">{{item.label}}</div>
+          </template>
+        </div>
+        <div v-if="qyParams.qyInfo.tab === '1'" class="qy-main-content-1">
+          <div>企业名称:{{qyParams.qyInfo[qyParams.qyInfo.tab].name}}</div>
+          <div>企业法人:{{qyParams.qyInfo[qyParams.qyInfo.tab].people}}</div>
+          <div>统一社会信用代码:{{qyParams.qyInfo[qyParams.qyInfo.tab].number}}</div>
+          <div>经营地址:{{qyParams.qyInfo[qyParams.qyInfo.tab].address}}</div>
+        </div>
+        <div v-else-if="qyParams.qyInfo.tab === '5'" class="qy-main-content-5">
+          <div class="qy-main-content-5-radius">
+            周边范围：
+            <div class="radius-min __hover" @click="qyParams.qyInfo[qyParams.qyInfo.tab].radius > 1 ? (qyParams.qyInfo[qyParams.qyInfo.tab].radius--) : undefined">-</div>
+            <CusFormColumn
+                link="number"
+                label=""
+                :min="1"
+                :max="30"
+                :clearable="false"
+                v-model:param="qyParams.qyInfo[qyParams.qyInfo.tab].radius"
+                @blur="handleRangeBlur"/>
+            <div class="radius-max __hover" @click="qyParams.qyInfo[qyParams.qyInfo.tab].radius < 30 ? (qyParams.qyInfo[qyParams.qyInfo.tab].radius++) : undefined">+</div>
+            km
+            <div class="submit __hover" @click="onRadiusSubmit">确定</div>
+            <div class="reset __hover">重置</div>
+          </div>
+          <div class="qy-main-content-5-table" :style="`height: ${25 + (qyParams.qyInfo[qyParams.qyInfo.tab].tableData.length > 5 ? 5 * 25 : qyParams.qyInfo[qyParams.qyInfo.tab].tableData.length * 25)}px;`">
+            <el-auto-resizer>
+              <template #default="{ height, width }">
+                <el-table-v2
+                    class="__gis-overlay_table-v2"
+                    :columns="qyParams.qyInfo[qyParams.qyInfo.tab].tableHead"
+                    :data="qyParams.qyInfo[qyParams.qyInfo.tab].tableData"
+                    :width="width"
+                    :height="height"
+                    fixed
+                    :row-height="25"
+                    :header-height="25"
+                >
+                  <template #empty></template>
+                </el-table-v2>
+              </template>
+            </el-auto-resizer>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -86,9 +149,13 @@ import * as layer from "ol/layer";
 import * as style from "ol/style";
 import * as format from "ol/format";
 import QyStyle from '../map-info/style/qy'
+import SbStyle from '../map-info/style/sb'
 import CommonStyle from '../map-info/style/common'
 import * as ol from "ol";
 import { v4 } from "uuid";
+import * as proj from "ol/proj";
+import * as turf from '@turf/turf'
+import * as geom from 'ol/geom';
 
 
 export default defineComponent({
@@ -124,7 +191,10 @@ export default defineComponent({
         source: <any>null,
         tempFeature: <any>null,
         overlay: <any>null,
-        qyInfo: {}
+        qyInfo: <any>{},
+        analysisLayer: <any>null,
+        analysisSource: <any>null,
+        analysisCircle: <any>null
       }
     })
     const ToolsMapper = [
@@ -148,11 +218,7 @@ export default defineComponent({
             flag = true
             //  恢复上一个要素的样式
             if (state.qyParams.tempFeature) {
-              if (state.qyParams.tempFeature.get('isAnalysis')) {
-                state.qyParams.tempFeature.setStyle(state.qyParams.tempFeature.get('analysisStyle'))
-              } else {
-                state.qyParams.tempFeature.setStyle(state.qyParams.tempFeature.get('defaultStyle'))
-              }
+              state.qyParams.tempFeature.get('resetStyle')()
             }
             //  新的要素
             if (f.get('isAnalysis')) {
@@ -234,7 +300,44 @@ export default defineComponent({
         feat.set('analysisStyle', [...CommonStyle.analysisStyle(), ...QyStyle.qyStyle(v.type)])
         feat.set('analysisActiveStyle', [...CommonStyle.activeStyle(), ...CommonStyle.analysisStyle(), ...QyStyle.qyStyle(v.type)])
         feat.set('isAnalysis', false)
-        feat.set('info', v)
+        feat.set('resetStyle', () => {
+          if (feat.get('isAnalysis')) {
+            feat.setStyle(feat.get('analysisStyle'))
+          } else {
+            feat.setStyle(feat.get('defaultStyle'))
+          }
+        })
+        const obj = {
+          coordinates: feat.getGeometry().getCoordinates(),
+          tab: '1',
+          name: v.name,
+          1: {
+            name: v.name,
+            people: '张三',
+            number: '4812346556asfas',
+            address: '海南省海口市海口区海口镇哈哈哈'
+          },
+          2: {},
+          3: {},
+          4: {},
+          5: {
+            radius: 10,
+            tableHead: [
+              {width: 1, title: '序号', align: 'center', cellRenderer: ({ rowIndex }) => `${rowIndex + 1}`},
+              {width: 1, title: '名称', dataKey: 'name'},
+              {width: 1, title: '状态', align: 'center', cellRenderer: ({rowData}) => rowData.status === '0' ? '在线' : '离线'},
+              {width: 1, title: '类型', align: 'center', dataKey: 'typeName'},
+              {width: 1, title: '距离', align: 'right', cellRenderer: ({rowData}) => {
+                  const start = feat.getGeometry().getCoordinates()
+                  const end = that.$easyMap.formatPosition.wptTcpt(rowData.wkt)
+                  return turf.distance(start, end, {units: 'kilometers'}).toFixed(1) + 'km';
+                }
+              },
+            ],
+            tableData: []
+          },
+        }
+        feat.set('info', obj)
         feat.setStyle(feat.get('defaultStyle'))
         return feat
       })
@@ -261,9 +364,92 @@ export default defineComponent({
       })
       state.map.addOverlay(state.qyParams.overlay)
     }
+    const onCloseQy = () => {
+      state.qyParams.overlay.setPosition(undefined)
+      state.qyParams.tempFeature.get('resetStyle')()
+      state.qyParams.tempFeature = null
+    }
+    const handleRangeBlur = () => {
+      if (!state.qyParams.qyInfo['5'].radius) {
+        state.qyParams.qyInfo['5'].radius = 10
+      }
+      setCircle()
+    }
+    const setCircle = () => {
+      const transformProjection = (arr, EPSG, EPSG2) => {
+        try {
+          if (EPSG2 && EPSG) {
+            if (arr && arr.length === 4) {
+              return proj.transformExtent(arr, EPSG, EPSG2);
+            } else {
+              return proj.transform(arr, EPSG, EPSG2);
+            }
+          }
+          return undefined;
+        } catch (e) {
+          console.error(e);
+        }
+      }
+      state.qyParams.analysisCircle.getGeometry().setRadius(transformProjection([state.qyParams.qyInfo['5'].radius * 1000, 0], 'EPSG:3857', 'EPSG:4326')[0] - transformProjection([0, 0], 'EPSG:3857', 'EPSG:4326')[0],'XY')
+    }
+    const onRadiusSubmit = () => {
+      if (!state.qyParams.analysisLayer) {
+        state.qyParams.analysisSource = new source.Vector()
+        state.qyParams.analysisLayer = new layer.Vector({
+          zIndex: 9,
+          source: state.qyParams.analysisSource,
+          style: [
+            new style.Style({
+              stroke: new style.Stroke({
+                color: '#2860F1',
+                width: 2,
+                lineDash: [10, 10]
+              }),
+              fill: new style.Fill({
+                color: 'rgba(20, 129, 241, 0.3)',
+              }),
+            })
+          ]
+        });
+        state.qyParams.analysisCircle = new ol.Feature({
+          geometry: new geom.Circle(state.qyParams.qyInfo.coordinates, 0),
+
+        })
+        state.qyParams.analysisSource.addFeature(state.qyParams.analysisCircle)
+        setCircle()
+        state.map.addLayer(state.qyParams.analysisLayer)
+      }
+      state.qyParams.qyInfo['5'].tableData = []
+      for (let i = 0; i < 5000; i++) {
+        state.qyParams.qyInfo['5'].tableData.push({
+          name: '505县道新安村路口1-枪机-0110580_' + i,
+          status: i % 3 === 0 ? '1' : '0',
+          typeName: '公安类',
+          type: i % 3 === 0 ? 'galsb' : (i % 3 === 1 ? 'shlsb' : 'mylsb'),
+          wkt: `POINT(${that.$util.randomNum(108.738329, 110.912130, 6)} ${that.$util.randomNum(18.154784, 20, 6)})`
+        })
+      }
+      state.qyParams.analysisSource.clear()
+      state.qyParams.analysisSource.addFeature(state.qyParams.analysisCircle)
+      state.qyParams.analysisSource.addFeatures(state.qyParams.qyInfo['5'].tableData.map(v => {
+        const feat: any = new format.WKT().readFeature(v.wkt)
+        feat.set('defaultStyle', SbStyle.sbStyle(v.type))
+        feat.set('activeStyle', [...CommonStyle.activeStyle(), ...SbStyle.sbStyle(v.type)])
+        feat.set('analysisStyle', [...CommonStyle.analysisStyle(), ...SbStyle.sbStyle(v.type)])
+        feat.set('analysisActiveStyle', [...CommonStyle.activeStyle(), ...CommonStyle.analysisStyle(), ...SbStyle.sbStyle(v.type)])
+        feat.set('isAnalysis', true)
+        feat.set('resetStyle', () => {
+          if (feat.get('isAnalysis')) {
+            feat.setStyle(feat.get('analysisStyle'))
+          } else {
+            feat.setStyle(feat.get('defaultStyle'))
+          }
+        })
+        feat.setStyle(feat.get('analysisStyle'))
+        return feat
+      }))
+    }
     onMounted(() => {
-      // state.toolsCom = AnalysisCom
-      // state.toolsType = 'analysis'
     })
     return {
       ...toRefs(state),
@@ -275,6 +461,10 @@ export default defineComponent({
       searchToMapLocation,
       toolsHandleClick,
       ref_qyDom,
+      onCloseQy,
+      handleRangeBlur,
+      setCircle,
+      onRadiusSubmit
     }
   },
 })
@@ -458,20 +648,228 @@ export default defineComponent({
   }
   .qy-info {
     $bgColor: #2860CE;
-    width: 315px;
-    height: 158px;
+    $footH: 10px;
+    min-width: 315px;
+    min-height: 168px - $footH;
     background-color: $bgColor;
     position: relative;
     display: flex;
-    align-items: center;
     justify-content: center;
     &:after {
       content: '';
       position: absolute;
-      bottom: -10px;
-      border-top: 10px solid $bgColor;
-      border-left: 10px solid transparent;
-      border-right: 10px solid transparent;
+      bottom: -$footH;
+      border-top: $footH solid $bgColor;
+      border-left: $footH solid transparent;
+      border-right: $footH solid transparent;
+    }
+    .qy-bg-icon {
+      width: 16px;
+      height: 16px;
+      background-image: url("@/views/gis/map-info/qy-dom-icon1.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      z-index: 1;
+      &.qy-bg-icon-1 {
+        left: 0;
+        top: 0;
+      }
+      &.qy-bg-icon-2 {
+        right: 0;
+        top: 0;
+        transform: rotate(90deg);
+      }
+      &.qy-bg-icon-3 {
+        right: 0;
+        bottom: 0;
+        transform: rotate(180deg);
+      }
+      &.qy-bg-icon-4 {
+        left: 0;
+        bottom: 0;
+        transform: rotate(270deg);
+      }
+    }
+    .qy-main {
+      width: 100%;
+      height: auto;
+      z-index: 2;
+      padding: 12px;
+      .qy-main-head {
+        display: flex;
+        align-items: center;
+        position: relative;
+        &:after {
+          content: '';
+          position: absolute;
+          width: 100%;
+          height: 4px;
+          background: red;
+          bottom: -9px;
+        }
+        .qy-main-head-tips {
+          font-size: 10px;
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          color: #8FFFFF;
+        }
+        .qy-main-head-name {
+          font-size: 14px;
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          color: #FFFFFF;
+        }
+        .svg-icon {
+          margin-left: auto;
+        }
+      }
+      .qy-main-tab {
+        margin: 20px 0 10px 0;
+        display: flex;
+        align-items: center;
+        .qy-main-tab-item {
+          font-size: 12px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #CEE6FF;
+          height: 16px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0 4px;
+          border-radius: 2px;
+          background-color: rgba(255, 255, 255, 0.2);
+          &.active {
+            background-color: #1280F1;
+            color: #61FFFF;
+          }
+          &.disabled {
+            cursor: not-allowed;
+            opacity: 0.7;
+          }
+          &:not(:last-child) {
+            margin-right: 2px;
+          }
+        }
+      }
+      .qy-main-content-1 {
+        font-size: 12px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #FFFFFF;
+        >div {
+          line-height: 18px;
+        }
+      }
+      .qy-main-content-5 {
+        .qy-main-content-5-radius {
+          display: flex;
+          align-items: center;
+          font-size: 12px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #FFFFFF;
+          .radius-min, .radius-max {
+            margin: 0 3px;
+            &:hover {
+              color: #409EFF;
+            }
+          }
+          :deep(.cus-form-column) {
+            max-width: unset;
+            width: 44px;
+            flex: unset;
+            .el-form-item {
+              margin: 0;
+              .el-form-item__content {
+                height: 18px;
+                .el-input {
+                  .el-input__wrapper {
+                    padding: 0;
+                    border-radius: 5px;
+                    background-color: transparent;
+                    .el-input__inner {
+                      color: #FFFFFF;
+                      background-color: transparent;
+                      height: 100%;
+                      text-align: center;
+                      border: 1px solid #ffffff;
+                      border-radius: 5px;
+                      &::placeholder {
+                        font-size: 12px;
+                        font-family: Microsoft YaHei;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+          .submit {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 36px;
+            height: 18px;
+            background: #8FFFFF;
+            border-radius: 4px;
+            font-size: 12px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #1174DB;
+            margin-left: 10px;
+          }
+          .reset {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 36px;
+            height: 18px;
+            border: 1px solid #8FFFFF;
+            border-radius: 4px;
+            font-size: 12px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #8FFFFF;
+            margin-left: 8px;
+          }
+        }
+        .qy-main-content-5-table {
+          margin-top: 10px;
+          width: 440px;
+          :deep(.__gis-overlay_table-v2) {
+            .el-table-v2__header-cell{
+              justify-content: center;
+              &:nth-child(2) {
+                color: #00C6FC;
+              }
+            }
+            .el-table-v2__header-cell, .el-table-v2__row-cell {
+              width: 60px !important;
+              $w1: 60px;
+              $w3: 60px;
+              $w4: 60px;
+              $w5: 60px;
+              &:nth-child(1) {
+                width: $w1 !important;
+              }
+              &:nth-child(2) {
+                width: calc(100% - #{$w1} - #{$w3} - #{$w4} - #{$w5} - 6px) !important;
+              }
+              &:nth-child(3) {
+                width: $w3 !important;
+              }
+              &:nth-child(4) {
+                width: $w4 !important;
+              }
+              &:nth-child(5) {
+                width: $w5 !important;
+              }
+            }
+          }
+        }
+      }
     }
   }
 }

src/views/gis/map-info/style/common.ts

@@ -9,7 +9,9 @@ import * as extent from "ol/extent";
 import * as format from "ol/format";
 import { Coordinate } from 'ol/coordinate'
 import * as turf from '@turf/turf'
+//  @ts-ignore
 import GisActiveIcon from './gis-active-icon.png'
+//  @ts-ignore
 import GisAnalysisIcon from './gis-analysis-icon.png'
 const activeStyle = () => {
     const _style: any = []

src/views/gis/map-info/style/qy.ts

@@ -9,8 +9,11 @@ import * as extent from "ol/extent";
 import * as format from "ol/format";
 import { Coordinate } from 'ol/coordinate'
 import * as turf from '@turf/turf'
+//  @ts-ignore
 import lgszyjkscsbImg from '@/assets/images/gis-layout/gis-layout-tools_example-lgszyjkscsb.png'
+//  @ts-ignore
 import jgzzmgsImg from '@/assets/images/gis-layout/gis-layout-tools_example-jgzzmgs.png'
+//  @ts-ignore
 import lgsjkyflImg from '@/assets/images/gis-layout/gis-layout-tools_example-lgsjkyfl.png'
 const qyStyle = (type) => {
     const _style: any = []

src/views/gis/map-info/style/sb.ts

@@ -0,0 +1,47 @@
+import * as ol from 'ol'
+import * as style from 'ol/style'
+import * as layer from 'ol/layer'
+import * as source from 'ol/source'
+import * as geom from 'ol/geom'
+import * as proj from 'ol/proj'
+import * as interaction from 'ol/interaction'
+import * as extent from "ol/extent";
+import * as format from "ol/format";
+import { Coordinate } from 'ol/coordinate'
+import * as turf from '@turf/turf'
+//  @ts-ignore
+import galsbImg from '@/assets/images/gis-layout/gis-layout-tools_example-galsb.png'
+//  @ts-ignore
+import shlsbImg from '@/assets/images/gis-layout/gis-layout-tools_example-shlsb.png'
+//  @ts-ignore
+import mylsbImg from '@/assets/images/gis-layout/gis-layout-tools_example-mylsb.png'
+const sbStyle = (type) => {
+    const _style: any = []
+    let img
+    if (type === 'galsb') {
+        img = galsbImg
+    } else if (type === 'shlsb') {
+        img = shlsbImg
+    } else if (type === 'mylsb') {
+        img = mylsbImg
+    }
+    _style.push(new style.Style({
+        image: new style.Icon({
+            src: img,
+            scale: 26 / 40,
+            displacement: [0, 30]
+        }),
+    }))
+    // _style.push(new style.Style({
+    //     image: new style.Circle({
+    //         radius: 5,
+    //         fill: new style.Fill({
+    //             color: '#e810dd',
+    //         }),
+    //     }),
+    // }))
+    return _style
+}
+export default {
+    sbStyle,
+}