app人员分布、电销费用修改

src/http/moudules/letter.js

@@ -1242,10 +1242,11 @@ export const getOrderList = (data) => {
     data
   })
 }
-export const telemarketingEdit = (subOrderNo) => {
+export const telemarketingEdit = (data) => {
   return axios({
-    url: '/insurance/telemarketing/queryExpenses/'+subOrderNo,
-    method: 'get',
+    url: '/insurance/telemarketing/queryExpenses',
+    method: 'post',
+    data
   })
 }
 export const telemarketingSubmitAudit = (subOrderNo) => {

src/http/moudules/user.js

@@ -533,3 +533,17 @@ export const separationReinstatement = (data) => {
     method: 'get',
   })
 }
+// app人员分布
+export const queryPosition = (data) => {
+  return axios({
+    url: '/geography/queryPosition',
+    method: 'get',
+  })
+}
+export const queryPositionList = (data) => {
+  return axios({
+    url: '/geography/queryPositionList',
+    method: 'post',
+    data
+  })
+}

src/router/index.js

@@ -80,6 +80,7 @@ const router = new Router({
       component: Signature,
       meta: { requiresAuth: true }
     },
+  
   ]
 })
 router.beforeEach((to, from, next) => {

src/views/Letter/ElectricSalescost.vue

@@ -6,10 +6,10 @@
         </templateTable>
         <el-dialog v-dialogDrag title="修改" :visible.sync="dialogVisible" width="1200px" @close="closeVisible">
             <div>
-                <div v-if="rowForm.auditStatus=='5'">
+                <div v-if="rowForm.auditStatus=='5'" >
                     费用计算规则：
-                    <el-radio-group v-model="formDeduction.state">
-                        <el-radio v-for="val in telemarketing_ruleoptions" :label="Number(val.value) " :key="val.value">{{ val.label }}</el-radio>
+                    <el-radio-group v-model="formDeduction.state" @input="radioChange">
+                        <el-radio v-for="val in telemarketing_ruleoptions" :label="Number(val.value) " :key="val.value" >{{ val.label }}</el-radio>
                     </el-radio-group>
                      <!-- <el-select size="small" v-model="formDeduction.state" placeholder="请选择">
                         <el-option v-for="item in [
@@ -1259,18 +1259,35 @@ export default {
         modifyFun(row) {
             this.rowForm=row
             this.formDeduction={
-                state:0
+                state:1,
             }
             this.$api.letter
-                .telemarketingEdit(row.id)
+                .telemarketingEdit({subOrderId:row.id,state:row.auditStatus=='5'?'2':'1'})
                 .then(res => {
                     if (res.code == 200) {
                         this.dialogVisible = true;
                         this.formData = res.data.exportFee
                     }
+                    else{
+                        this.$message.error(res.msg)
+                    }
                 });
 
         },
+        radioChange(e){
+            // if(e=='1'){
+                this.$api.letter
+                .telemarketingEdit({subOrderId:this.rowForm.id,state:e=='0'?'1':'2'})
+                .then(res => {
+                    if (res.code == 200) {
+                        this.formData = res.data.exportFee
+                    }
+                    else{
+                        this.$message.error(res.msg)
+                    }
+                });
+            // }
+        },
         closeVisible() {
             this.dialogVisible = false;
         },

src/views/PeopleManage/UserMap.vue

@@ -0,0 +1,260 @@
+<template>
+    <div>
+        <div id="container" style="width: 100%; height: 100vh" v-loading="loading" element-loading-text="数据量较大，正在为您加载......"
+            element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"></div>
+        <div v-if="infoWindowVisible" class="info-window">
+            <p class="close flex j-s">
+                <span>详情内容</span>
+                <span style="color: #c3c3c3;font-size:18px" @click="infoWindowVisible = false"> ×</span>
+            </p>
+            <el-table :data="tableData" border style="width: 100%; height: 50vh; overflow: auto;margin-bottom:40px"
+                :header-cell-style="{
+                    background: '#F2F7FC',
+                    fontWeight: '700',
+                    color: '#606266',
+                }">
+                <el-table-column prop="userId" label="工号" width="170">
+                </el-table-column>
+                <el-table-column prop="userName" label="姓名" width="100">
+                </el-table-column>
+                <el-table-column prop="address" label="地址">
+                </el-table-column>
+            </el-table>
+            <div class="bottomFixed">
+                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
+                    :page-sizes="[10, 20, 30, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next"
+                    :total="totalSum">
+                </el-pagination>
+            </div>
+        </div>
+    </div>
+</template>
+   
+<script>
+import axios from 'axios';
+import AMapLoader from '@amap/amap-jsapi-loader';
+export default {
+    data() {
+        return {
+            pageNum: 1, //当前页面
+            pageSize: 10, //每页显示条数
+            totalSum: 0, //全部的数据条数
+            tableData: [],
+            marker: null,
+            infoWindowVisible: false, // 控制信息窗口的显示
+            loading: false,
+            map: null,
+            infoWindow: null, //信息窗口
+            positionData: [],
+            rowId: ''
+
+        };
+    },
+    mounted() {
+        this.initMap();
+    },
+    created() {
+        //标注文字上的点击事件
+        window.handleDetail = (id) => {
+            this.rowId = id
+            this.detail()
+        }
+    },
+    destroyed() {
+        // 销毁地图，并清空地图容器.该方法执行后，地图对象被注销，内存释放，地图容器被清空。
+        this.map.destroy();
+    },
+    methods: {
+        handleClose() {
+            this.infoWindowVisible = false
+        },
+        detail() {
+            this.$api.user.queryPositionList({
+                    id: this.rowId,
+                    pageSize: this.pageSize,
+                    pageNum: this.pageNum,
+                }).then(res => {
+                    if (res.code == 200) {
+                        this.infoWindowVisible = true
+                        this.pageNum = res.data.pageNum
+                        this.pageSize = res.data.pageSize
+                        this.totalSum = res.data.totalSize
+                        this.tableData = res.data.content
+                    }
+                });
+        },
+        // 每页条数发生改变
+        handleSizeChange(val) {
+            this.pageSize = val
+            this.detail()
+        },
+        // 当前页发生改变
+        handleCurrentChange(val) {
+            this.pageNum = val
+            this.detail()
+        },
+        initMap() {
+
+            var _this = this;
+            // https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png
+            AMapLoader.load({
+                key: "262c17c813cdaab1bf93bfeb9873a6c8",             // 申请好的Web端开发者Key，首次调用 load 时必填
+                version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+                plugins: ['AMap.LineSearch'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+            }).then((AMap) => {
+                _this.map = new AMap.Map("container", {  //设置地图容器id
+                    viewMode: "3D",    //是否为3D地图模式
+                    zoom: 8,           //初始化地图级别
+                    expandZoomRange: true, //支持可以扩展最大缩放级别
+                    // center: ['116.441504', '40.031386'], //初始化地图中心点位置
+                    center: ['112.34988', '37.827066'],
+                    // mapStyle: 'amap://styles/blue',
+                    mapStyle: 'amap://styles/normal', //地图样式，彩色
+
+                });
+
+                _this.map.on('complete', () => {
+                    _this.$api.user.queryPosition().then(res => {
+                            if (res.code == 200 && res.data.length) {
+                                //处理后台返回要用到的数据
+                                // _this.positionData = res.data.data
+                                _this.positionData = res.data.map(item => ({
+                                    "userName": item.userName,
+                                    "id": item.id,
+                                    "address": item.address,
+                                    "onlineImg": item.status ? "Frame-1(2).png" : "Frame(2).png",
+                                    "status": item.status ?'在线':'离线',
+                                    "positionArr": [item.longitude, item.latitude]
+                                }));
+                                _this.mapPoint();
+
+                            } else {
+                                _this.loading = false;
+                            }
+                        })
+
+                });
+            })
+            //放大/缩小的工具条----地图右下角的 + 和 - 按钮
+            _this.map.plugin(["AMap.ToolBar"], function () {
+                _this.map.addControl(new AMap.ToolBar());
+            });
+            const bounds = new AMap.Bounds([
+                [112.058286, 35.243683], // 左下角坐标
+                [114.464586, 39.099962]  // 右上角坐标
+            ]);
+            _this.map.limitBounds(bounds);
+            if (location.href.indexOf('&guide=1') !== -1) {
+                _this.map.setStatus({ scrollWheel: false })
+            }
+    },
+
+    mapPoint() {
+        var _this = this;
+        /* 1.创建 LabelMarker，
+        2.创建 LabelsLayer，将已创建的 LabelMarker 添加到 LabelsLayer 上
+        3. 将 LabelsLayer 添加到地图实例 */
+        var labelsLayer = new AMap.LabelsLayer({
+            zooms: [3, 20],
+            zIndex: 1000,
+            // 该层内标注是否避让
+            collision: true,
+            // 设置 allowCollision：true，可以让标注避让用户的标注
+            allowCollision: true,
+        });
+        //将 LabelsLayer 添加到地图实例
+        _this.map.add(labelsLayer);
+
+
+        _this.infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -4) });//信息窗口
+        var position = JSON.parse(JSON.stringify(_this.positionData));
+        for (var i = 0; i < position.length; i++) {
+            var labelMarker = new AMap.LabelMarker({
+                position: position[i].positionArr
+                // position:  [position[i].longitude,position[i].latitude]
+
+            });
+            //标注信息
+            var normalMarker = new AMap.Marker({
+                position: position[i].positionArr,
+                map: _this.map,
+                icon: require("@/assets/" + position[i].onlineImg)
+                // icon: require("@/assets/api.png")
+            });
+            normalMarker.content = position[i].status=='在线'? '<div style="font-weight: 700;padding:20px 20px 6px 20px">员工姓名：' + position[i].userName + '</div>' +
+                '<div  style="padding:6px 20px">员工工号：' + position[i].id + '</div>' +
+                '<div style="color: #DA3B0F;padding:6px 20px"><span style="color: rgba(0,0,0,0.85);">在线状态：</span>' + position[i].status + '</div>' +
+                '<div style="padding:6px 20px 20px 20px">地址：' + position[i].address + '</div>' +
+                '<div style="height: 32px;line-height:30px;text-align: center;background: rgba(218,59,15,0.15);color: #DA3B0F;cursor:pointer;" onclick="handleDetail(\'' + position[i].id + '\')">查看详情</div>'
+                :
+                '<div style="font-weight: 700;padding:20px 20px 6px 20px">员工姓名：' + position[i].userName + '</div>' +
+                '<div  style="padding:6px 20px">员工工号：' + position[i].id + '</div>' +
+                '<div style="color: #009900;padding:6px 20px"><span style="color: rgba(0,0,0,0.85);">在线状态：</span>' + position[i].status + '</div>' +
+                '<div style="padding:6px 20px 20px 20px">地址：' + position[i].address + '</div>' +
+                '<div style="height: 32px;line-height:30px;text-align: center;background: rgba(0,153,0,0.15);color: #009900;cursor:pointer;" onclick="handleDetail(\'' + position[i].id + '\')">查看详情</div>'
+            normalMarker.on('click', _this.markerClick);
+            normalMarker.setExtData({ id: position[i].id }); //给标注添加信息，点击时可以获取
+        }
+        // 一次性将海量点添加到图层
+        labelsLayer.add(labelMarker);
+        this.loading = false; //地图加载完成
+    },
+    markerClick(e) {
+        //这个只是标注的点击事件
+        // this.map.setZoomAndCenter(8,e.target.getPosition()); //点击标点放大地图-缺点，不管放大/缩小多少倍，点击标点都会被缩放到8倍
+        this.infoWindow.setContent(e.target.content);
+        this.infoWindow.open(this.map, e.target.getPosition());
+    },
+
+},
+};
+</script>
+   
+<style scoped lang="scss">
+.info-window {
+    position: fixed;
+    top: 20%;
+    right: 10px;
+    z-index: 100;
+    background-color: white;
+    padding: 10px;
+    width: 30vw;
+    box-shadow: 0px 5px 10px #ddd
+}
+
+.bottomFixed {
+    height: 50px;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    background: #fff;
+    margin-top: 10px;
+}
+
+.close {
+    color: #333;
+    cursor: pointer;
+    font-size: 15px;
+    font-weight: bold;
+}
+
+/deep/{
+    .amap-info-contentContainer{
+        border-radius: 8px 8px 8px 8px;
+    box-shadow: 0px 1px 8px #ddd;
+    padding-bottom:0;
+    font-size: 14px;
+    color: rgba(0,0,0,0.85);
+    width:310px
+    }
+    .amap-info-content{
+        padding:0
+    }
+    .bottom-center .amap-info-sharp{
+        display: none;
+    }
+//     .el-pager li.active{
+//     color: #000;
+// }
+}
+</style>