Merge branch 'dev' of http://www.baoxianzhanggui.com:8090/sxzgd/vue-insagent-pc into dev

config/dev.env.js

@@ -5,10 +5,10 @@ const prodEnv = require('./prod.env')
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
   ENV_CONFIG: '"dev"',
-  // BASE_URL: '"https://test.baoxianzhanggui.com/web-api"',//测试服务器
+  BASE_URL: '"https://test.baoxianzhanggui.com/web-api"',//测试服务器
   // BASE_URL:'"https://sxzgkj.baoxianzhanggui.com/web-api"',//正式服务器
   // BASE_URL:'"https://sxzgkj.baoxianzhanggui.com/web-api"'//正式服务器
-  BASE_URL: '"http://192.168.0.115:8080/"', //凯森
+  // BASE_URL: '"http://192.168.0.115:8080/"', //凯森
   // BASE_URL: '"http://192.168.0.106:8080/"',//屈晨
   // BASE_URL: '"http://192.168.0.253:8080/"',//田智
   // BASE_URL: '"http:///192.168.0.42:8080/"',//武鸿鹏
@@ -21,8 +21,8 @@ module.exports = merge(prodEnv, {
   // BASE_URL: '"http:///192.168.0.55:8080/"',//蔡雅茹
   CONSOLE_BASE_URL: '"http://localhost:8080/"', //控制台测试服务器
   // CONSOLE_BASE_URL: '"https://test.baoxianzhanggui.com/console-api"' //控制台正式服务器
-
   APP_BASE_URL: '"https://pre.baoxianzhanggui.com/web-api"',    // app打包上传地址
+  SOCKET_Url: '"ws://192.168.0.52:8080/"',
 
 })
 

config/pre.env.js

@@ -9,5 +9,6 @@ module.exports = merge(prodEnv, {
   // BASE_URL: '"http:///192.168.0.103:8080/web-api"',//测试服务器
   CONSOLE_BASE_URL: '"https://pre.baoxianzhanggui.com/console-api"', //控制台测试服务器
   APP_BASE_URL: '"https://pre.baoxianzhanggui.com/web-api"',    // app打包上传地址
+  SOCKET_Url: '"wss://pre.baoxianzhanggui.com/web-api/websocket"',
 
 })

config/prod.env.js

@@ -5,6 +5,6 @@ module.exports = {
   BASE_URL: '"https://sxzgkj.baoxianzhanggui.com/web-api"',
   CONSOLE_BASE_URL: '"https://sxzgkj.baoxianzhanggui.com/console-api"', //控制台测试服务器
   APP_BASE_URL: '"https://pre.baoxianzhanggui.com/web-api"',    // app打包上传地址
-
+  SOCKET_Url: '"wss://sxzgkj.baoxianzhanggui.com/web-api/"',
 
 }

config/test.env.js

@@ -9,5 +9,8 @@ module.exports = merge(prodEnv, {
   BASE_URL: '"https://test.baoxianzhanggui.com/web-api"',//测试服务器
   // BASE_URL: '"http://192.168.0.115:8080"',
   APP_BASE_URL: '"https://test.baoxianzhanggui.com/web-api"',    // app打包上传地址
-  CONSOLE_BASE_URL: '"https://test.baoxianzhanggui.com/console-api"' //控制台测试服务器
+  CONSOLE_BASE_URL: '"https://test.baoxianzhanggui.com/console-api"', //控制台测试服务器
+  SOCKET_Url: '"wss://test.baoxianzhanggui.com/web-api/"',
+
+
 })

package-lock.json

@@ -2688,7 +2688,7 @@
     },
     "crypto-js": {
       "version": "4.2.0",
-      "resolved": "https://registry.npmmirror.com/crypto-js/-/crypto-js-4.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
       "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
     },
     "css-color-names": {
@@ -3062,7 +3062,7 @@
     },
     "decimal.js": {
       "version": "10.4.3",
-      "resolved": "https://registry.npmmirror.com/decimal.js/-/decimal.js-10.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
       "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
     },
     "decode-uri-component": {

src/http/moudules/user.js

@@ -606,3 +606,26 @@ export const queryGeographyInfo = (data) => {
     data
   })
 }
+export const ipAddrLocations = (data) => {
+  return axios({
+    url: '/sys/ipAddr/locations',
+    method: 'post',
+    data
+  })
+}
+
+
+export const ipAddrGetPcAddress = (params) => {
+  return axios({
+    url: '/sys/ipAddr/getPcAddress',
+    method: 'get',
+    params
+  })
+}
+export const getGeographyPosition = (params) => {
+  return axios({
+    url: '/geography/getGeographyPosition',
+    method: 'get',
+    params
+  })
+}

src/utils/websocket.js

@@ -0,0 +1,112 @@
+import { Message } from 'element-ui'
+// import { getToken } from '@/utils/authToken' // 与后端的协商，websocket请求需要带上token参数
+let websock = null
+let messageCallback = null
+let errorCallback = null
+let wsUrl = process.env.SOCKET_Url
+let tryTime = 0
+ 
+// 接收ws后端返回的数据
+function websocketonmessage (e) { 
+  messageCallback(JSON.parse(e.data))
+}
+ 
+/**
+ * 发起websocket连接
+ * @param {Object} agentData 需要向后台传递的参数数据
+ */
+function websocketSend (agentData) {
+  // 加延迟是为了尽量让ws连接状态变为OPEN   
+  setTimeout(() => { 
+    // 添加状态判断，当为OPEN时，发送消息
+    if (websock.readyState === websock.OPEN) { // websock.OPEN = 1 
+      // 发给后端的数据需要字符串化
+      websock.send(JSON.stringify(agentData))
+    }
+    if (websock.readyState === websock.CLOSED) { // websock.CLOSED = 3 
+      console.log('websock.readyState=3')
+      Message.error('ws连接异常，请稍候重试')
+      errorCallback()
+    }
+  }, 500)
+}
+ 
+// 关闭ws连接
+function websocketclose (e) {  
+  // e.code === 1000  表示正常关闭。 无论为何目的而创建, 该链接都已成功完成任务。
+  // e.code !== 1000  表示非正常关闭。
+  if (e && e.code !== 1000) {
+    Message.error('ws连接异常，请稍候重试')
+    errorCallback()
+    // // 如果需要设置异常重连则可替换为下面的代码，自行进行测试
+    // if (tryTime < 10) {
+    //   setTimeout(function() {
+    //    websock = null
+    //    tryTime++
+    //    initWebSocket()
+    //    console.log(`第${tryTime}次重连`)
+    //  }, 3 * 1000)
+    //} else {
+    //  Message.error('重连失败！请稍后重试')
+    //}
+  }
+}
+// 建立ws连接
+function websocketOpen (e) {
+  // console.log('ws连接成功')
+}
+ 
+// 初始化weosocket
+function initWebSocket () { 
+  if (typeof (WebSocket) === 'undefined') {
+    Message.error('您的浏览器不支持WebSocket，无法获取数据')
+    return false
+  }
+  
+  // const token = Cookies.get('token')
+  // // ws请求完整地址
+  // const requstWsUrl = wsUrl + '?' + token
+  // websock = new WebSocket(requstWsUrl)
+  websock = new WebSocket(wsUrl)
+ 
+  websock.onmessage = function (e) {
+    websocketonmessage(e)
+  } 
+  websock.onopen = function () {
+    websocketOpen()
+  }
+  websock.onerror = function () {
+    Message.error('ws连接异常，请稍候重试')
+    errorCallback()
+  }
+  websock.onclose = function (e) {
+    websocketclose(e)
+  } 
+}
+ 
+/**
+ * 发起websocket请求函数
+ * @param {string} url ws连接地址
+ * @param {Object} agentData 传给后台的参数
+ * @param {function} successCallback 接收到ws数据，对数据进行处理的回调函数
+ * @param {function} errCallback ws连接错误的回调函数
+ */
+export function sendWebsocket (url, agentData, successCallback, errCallback) { 
+
+  wsUrl+=url
+  initWebSocket()
+  messageCallback = successCallback
+  errorCallback = errCallback
+  websocketSend(agentData)
+}
+ 
+/**
+ * 关闭websocket函数
+ */
+export function closeWebsocket () {
+  if (websock) {
+    websock.close() // 关闭websocket
+    websock.onclose() // 关闭websocket
+  }
+}
+ 

src/views/Core/PersonalPanel.vue

@@ -75,6 +75,7 @@ import Psdreset from "@/views/Psdreset/Psdreset"
 import Recruiting from "@/views/Sys/Recruiting"
 import MessagePanel from "@/views/Core/MessagePanel"
 import TemplateForm from "@/components/TemplateForm/index"
+import { closeWebsocket  } from '@/utils/websocket.js'
 
 export default {
   name: "qrCode",
@@ -227,6 +228,7 @@ export default {
       })
         .then(() => {
           localStorage.clear()
+          closeWebsocket()
           sessionStorage.removeItem("user")
           this.deleteCookie("token")
           this.deleteCookie("user")

src/views/Core/components/detailsDialog.vue

@@ -89,54 +89,54 @@
             <span slot="title">投保信息</span>
             <div slot="boby">
               <div class="m-btn-10">保险公司：{{ orderInfo.inscompany }}</div>
-              <div class="  quotation-style">
+              <div :class="orderInfo.feeDisplay?'quotation-style':'quotation-style1'">
                 <b>险种</b>
                 <b>起保日期</b>
                 <b>终保日期</b>
                 <b>保费金额</b>
-
-                <b>优惠比例</b>
-                <b>优惠金额</b>
+                <b v-if="orderInfo.feeDisplay">优惠比例</b>
+                <b v-if="orderInfo.feeDisplay">{{orderInfo.feeView?'掌柜科技币':'优惠金额'}}</b>
                 <span>交强险</span>
                 <span>{{ orderInfo.jqstartdate ? orderInfo.jqstartdate : '-' }}</span>
                 <span>{{ orderInfo.jqenddate ? orderInfo.jqenddate : '-' }}</span>
                 <span>{{ orderInfo.jqpremium ? '￥' + orderInfo.jqpremium : '-' }}</span>
 
-                <span>{{ orderInfo.jqpremium && orderInfo.feeOrderNewVo && orderInfo.feeOrderNewVo.exportFee ?
+                <span v-if="orderInfo.feeDisplay">{{ orderInfo.jqpremium && orderInfo.feeOrderNewVo && orderInfo.feeOrderNewVo.exportFee ?
                   orderInfo.feeOrderNewVo.exportFee[0].totalProportion + '%' : '-' }}</span>
-                <span>{{ orderInfo.jqpremium && orderInfo.feeOrderNewVo && orderInfo.feeOrderNewVo.exportFee
-                  ? '￥' + orderInfo.feeOrderNewVo.exportFee[0].totalAmount : '-' }}</span>
+
+                <span v-if="orderInfo.feeDisplay">{{ orderInfo.jqpremium && orderInfo.feeOrderNewVo && orderInfo.feeOrderNewVo.exportFee
+                  ? (orderInfo.feeView ? '&nbsp;' : '￥') + orderInfo.feeOrderNewVo.exportFee[0].totalAmount : '-' }}</span>
                 <span>商业险</span>
                 <span>{{ orderInfo.systartdate ? orderInfo.systartdate : '-' }}</span>
                 <span>{{ orderInfo.syenddate ? orderInfo.syenddate : '-' }}</span>
                 <span>{{ orderInfo.sypremium ? '￥' + orderInfo.sypremium : '-' }}</span>
 
-                <span>{{ orderInfo.sypremium && orderInfo.feeOrderNewVo && orderInfo.feeOrderNewVo.exportFee ?
+                <span v-if="orderInfo.feeDisplay">{{ orderInfo.sypremium && orderInfo.feeOrderNewVo && orderInfo.feeOrderNewVo.exportFee ?
                   orderInfo.feeOrderNewVo.exportFee[1].totalProportion + '%' : '-' }}</span>
-                <span>{{ orderInfo.sypremium && orderInfo.feeOrderNewVo && orderInfo.feeOrderNewVo.exportFee
-                  ? '￥' + orderInfo.feeOrderNewVo.exportFee[1].totalAmount : '-' }}</span>
+                <span v-if="orderInfo.feeDisplay">{{ orderInfo.sypremium && orderInfo.feeOrderNewVo && orderInfo.feeOrderNewVo.exportFee
+                  ? (orderInfo.feeView ? '&nbsp;' : '￥') + orderInfo.feeOrderNewVo.exportFee[1].totalAmount : '-' }}</span>
                 <span>车船税</span>
                 <span>-</span>
                 <span>-</span>
                 <span>￥{{ orderInfo.taxamount }}</span>
 
-                <span>-</span>
-                <span>-</span>
+                <span v-if="orderInfo.feeDisplay">-</span>
+                <span v-if="orderInfo.feeDisplay">-</span>
                 <span>驾意险</span>
                 <span>-</span>
                 <span>-</span>
                 <span>{{ orderInfo.jypremium ? '￥' + orderInfo.jypremium : '-' }}</span>
 
-                <span>{{ orderInfo.jypremium && orderInfo.feeOrderNewVo && orderInfo.feeOrderNewVo.exportFee ?
+                <span v-if="orderInfo.feeDisplay">{{ orderInfo.jypremium && orderInfo.feeOrderNewVo && orderInfo.feeOrderNewVo.exportFee ?
                   orderInfo.feeOrderNewVo.exportFee[2].totalProportion + '%' : '-' }}</span>
-                <span>{{ orderInfo.jypremium && orderInfo.feeOrderNewVo && orderInfo.feeOrderNewVo.exportFee
-                  ? '￥' + orderInfo.feeOrderNewVo.exportFee[2].totalAmount : '-' }}</span>
+                <span v-if="orderInfo.feeDisplay">{{ orderInfo.jypremium && orderInfo.feeOrderNewVo && orderInfo.feeOrderNewVo.exportFee
+                  ? (orderInfo.feeView ? '&nbsp;' : '￥') + orderInfo.feeOrderNewVo.exportFee[2].totalAmount : '-' }}</span>
                 <span>总计</span>
                 <span>-</span>
                 <span>-</span>
                 <span class="themeColor" style="font-weight: bold;">￥{{ orderInfo.sumpremium }}</span>
-                <span>-</span>
-                <span class="themeColor" style="font-weight: bold;">￥{{ orderInfo.sumFee ? orderInfo.sumFee : 0
+                <span v-if="orderInfo.feeDisplay">-</span>
+                <span v-if="orderInfo.feeDisplay" class="themeColor" style="font-weight: bold;">{{orderInfo.feeView ? '&nbsp;' : '￥'}}{{ orderInfo.sumFee ? orderInfo.sumFee : 0
                 }}</span>
               </div>
             </div>
@@ -1557,7 +1557,25 @@ export default {
     font-size: 14px;
   }
 }
+.quotation-style1 {
+  font-size: 0;
+
+  b {
+    background: #F7F7F9;
+    font-size: 14px;
+  }
 
+  b,
+  span {
+    display: inline-block;
+    box-sizing: border-box;
+    width: 25%;
+    text-align: center;
+    line-height: 40px;
+    border: 1px solid #EEF1F6;
+    font-size: 14px;
+  }
+}
 .premium-style {
   div {
     padding: 5px 0;

src/views/FinancialManagement/CarInsurance/CompanySettlement/CarInsurance/InvoicingUnsettled.vue

@@ -141,23 +141,23 @@
         <el-table
           :data="form.insuranceHandlingList"
           border
-          style="width: 600px;margin-bottom: 20px;"
+          style="width: 600px; margin-bottom: 20px"
         >
-            <el-table-column prop="incomeSigningTime" label="月份"> </el-table-column>
-            <el-table-column prop="remainingAmount" label="未结算金额">
-            </el-table-column>
-            <el-table-column prop="settlementAmount" label="进账金额">
-              <template slot-scope="scope">
-                <el-input v-model="scope.row.settlementAmount"  @input='amountChange(scope.row)'></el-input>
-              </template>
-            </el-table-column>
+          <el-table-column prop="incomeSigningTime" label="月份">
+          </el-table-column>
+          <el-table-column prop="remainingAmount" label="未结算金额">
+          </el-table-column>
+          <el-table-column prop="settlementAmount" label="进账金额">
+            <template slot-scope="scope">
+              <el-input
+                v-model="scope.row.settlementAmount"
+                @input="amountChange(scope.row)"
+              ></el-input>
+            </template>
+          </el-table-column>
         </el-table>
-          <el-form-item label="进账总金额：">
-          <el-input
-            v-model="total"
-            style="width: 220px"
-            readonly
-          ></el-input>
+        <el-form-item label="进账总金额：">
+          <el-input v-model="total" style="width: 220px" readonly></el-input>
         </el-form-item>
         <el-form-item label="进账日期：">
           <el-date-picker
@@ -168,7 +168,7 @@
           >
           </el-date-picker>
         </el-form-item>
-          <el-form-item label="上传凭证：">
+        <el-form-item label="上传凭证：">
           <el-upload
             action="#"
             class="upload-demo"
@@ -184,9 +184,7 @@
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
-        <el-button size="small" @click="cancelSumbit"
-          >取消</el-button
-        >
+        <el-button size="small" @click="cancelSumbit">取消</el-button>
         <el-button type="primary" size="small" @click="balanceSumbit"
           >确实</el-button
         >
@@ -198,7 +196,7 @@
 import templateTable from "@/components/TemplateTable/index.vue";
 import { mapState } from "vuex";
 import yearMonthYay from "../../PlatformSettlement/yearMonthYay.vue";
-import { Decimal } from 'decimal.js'
+import { Decimal } from "decimal.js";
 export default {
   name: "InvoicingUnsettled",
   components: { templateTable, yearMonthYay },
@@ -306,9 +304,9 @@ export default {
       fileList: [],
       dialogVisiblebalance: false,
       form: {
-        insuranceHandlingList:[],
-        settlementAmount:"",
-        settlementTime:"",
+        insuranceHandlingList: [],
+        settlementAmount: "",
+        settlementTime: "",
       },
       formTableData: [],
       tableConfigDetail: {
@@ -512,21 +510,30 @@ export default {
   },
   computed: {
     total() {
-            var sum =0;
-            if(this.form.insuranceHandlingList.length>0){
-                this.form.insuranceHandlingList.forEach(item => {
-                     sum = new Decimal(sum).plus((item.settlementAmount==''||item.settlementAmount==null)?new Decimal(0): new Decimal(item.settlementAmount)).toString();
-                });
-                return  Object.is(Number(sum), NaN)?0:sum;
-            }
-            return sum;
-    }
+      var sum = 0;
+      if (this.form.insuranceHandlingList.length > 0) {
+        this.form.insuranceHandlingList.forEach((item) => {
+          sum = new Decimal(sum)
+            .plus(
+              item.settlementAmount == "" || item.settlementAmount == null
+                ? new Decimal(0)
+                : new Decimal(item.settlementAmount)
+            )
+            .toString();
+        });
+        return Object.is(Number(sum), NaN) ? 0 : sum;
+      }
+      return sum;
+    },
   },
   methods: {
     //改变事件
-    amountChange(row){
-      if(row.settlementAmount>0 && row.settlementAmount>row.remainingAmount){
-         this.$message.error("进账金额不能大于未结算金额");
+    amountChange(row) {
+      if (
+        row.settlementAmount > 0 &&
+        row.settlementAmount > row.remainingAmount
+      ) {
+        this.$message.error("进账金额不能大于未结算金额");
       }
     },
     // 记录
@@ -704,40 +711,43 @@ export default {
       this.dialogVisible = false;
     },
     //取消结算
-    cancelSumbit(){
-      this.dialogVisiblebalance = false
+    cancelSumbit() {
+      this.dialogVisiblebalance = false;
       //清空数据
-      this.form= {
-        insuranceHandlingList:[],
-        settlementAmount:"",
-        settlementTime:"",
-      }
-      this.batchData.id=null;
+      this.form = {
+        insuranceHandlingList: [],
+        settlementAmount: "",
+        settlementTime: "",
+      };
+      this.batchData.id = null;
     },
     balanceSumbit() {
-      var flag=0;
-      var count=0;
-      if(this.form.insuranceHandlingList){
-        this.form.insuranceHandlingList.forEach(e => {  
-          if(e.settlementAmount>0 && e.settlementAmount>e.remainingAmount){
+      var flag = 0;
+      var count = 0;
+      if (this.form.insuranceHandlingList) {
+        this.form.insuranceHandlingList.forEach((e) => {
+          if (
+            e.settlementAmount > 0 &&
+            e.settlementAmount > e.remainingAmount
+          ) {
             this.$message.error("进账金额不能大于未结算金额");
-            flag+=1;
+            flag += 1;
           }
-          if(e.settlementAmount>0){
-            count+=1;
+          if (e.settlementAmount > 0) {
+            count += 1;
           }
-        })
+        });
       }
-      if (count==0) {
+      if (count == 0) {
         this.$message.error("未填写金额！！");
         return;
       }
-      if (flag>0) {
+      if (flag > 0) {
         this.$message.error("金额输入错误！！");
         return;
       }
-      
-      this.form.settlementAmount=this.total;
+
+      this.form.settlementAmount = this.total;
       this.$api.task
         .batchBxBalance({
           ...this.openBalanceDetail,
@@ -766,17 +776,30 @@ export default {
       this.dialogVisiblebalance = false;
     },
     handVoid(row) {
-      this.$api.task.yaidlnvoicing({ id: row.id }).then((res) => {
-        if (res.code == 200) {
-          this.dialogVisible = false;
+      this.$confirm("是否确认作废?", "提示", {
+        confirmButtonText: "提交",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$api.task.yaidlnvoicing({ id: row.id }).then((res) => {
+            if (res.code == 200) {
+              this.dialogVisible = false;
+              this.$message({
+                message: res.msg || "操作成功",
+                type: "success",
+              });
+            } else {
+              this.$message.error(res.msg);
+            }
+          });
+        })
+        .catch(() => {
           this.$message({
-            message: res.msg || "操作成功",
-            type: "success",
+            type: "info",
+            message: "已取消作废",
           });
-        } else {
-          this.$message.error(res.msg);
-        }
-      });
+        });
     },
     // 结算
     balanceFun(row) {
@@ -784,21 +807,21 @@ export default {
       this.fileList = [];
       this.getSettlementList(row);
       this.dialogVisiblebalance = true;
-
     },
     //通过结算数据id查询需要结算的数据
-    getSettlementList(row){
-      this.$api.settlement.queryListByTaskIdAndCompanyId(
-        { 
+    getSettlementList(row) {
+      this.$api.settlement
+        .queryListByTaskIdAndCompanyId({
           taskId: row.taskId,
-          partnerCompaniesId:row.partnerCompaniesId,
-          isNotCar:"0",
-          isNotDocumentary:"0"
-        }).then((res) => {
-        if (res.code == 200) {
-           this.form.insuranceHandlingList =res.data; 
-        } 
-      }); 
+          partnerCompaniesId: row.partnerCompaniesId,
+          isNotCar: "0",
+          isNotDocumentary: "0",
+        })
+        .then((res) => {
+          if (res.code == 200) {
+            this.form.insuranceHandlingList = res.data;
+          }
+        });
     },
     tablePageChange(val) {
       this.pageData.pageSize = val;

src/views/FinancialManagement/CarInsurance/CompanySettlement/NoCarInsurance/InvoicingUnsettled.vue

@@ -1,694 +1,822 @@
 <template>
-    <!--布局容器-->
-    <div class="InvoicedAndSettled" style="width: 99%; margin-top: 0px">
-        <templateTable :formList="formList" :searchData.sync="searchData" :tableConfig="tableConfig" :data="tableData"
-            @findPage="findPage" @handleSearchList="handleSearchList" @resetForm="resetForm" :pagination="pageData"
-            @getList="getList">
-            <template slot="data">
-                <yearMonthYay ref="yearMonthYay" @getYearData="getYearData" @getMonthData="getMonthData"
-                    @getDayData="getDayData"></yearMonthYay>
+  <!--布局容器-->
+  <div class="InvoicedAndSettled" style="width: 99%; margin-top: 0px">
+    <templateTable
+      :formList="formList"
+      :searchData.sync="searchData"
+      :tableConfig="tableConfig"
+      :data="tableData"
+      @findPage="findPage"
+      @handleSearchList="handleSearchList"
+      @resetForm="resetForm"
+      :pagination="pageData"
+      @getList="getList"
+    >
+      <template slot="data">
+        <yearMonthYay
+          ref="yearMonthYay"
+          @getYearData="getYearData"
+          @getMonthData="getMonthData"
+          @getDayData="getDayData"
+        ></yearMonthYay>
+      </template>
+      <template slot="保司机构">
+        <el-cascader
+          v-model="pageData.partnerCompaniesIdList"
+          size="small"
+          :show-all-levels="false"
+          ize="small"
+          :options="ztreeNodes"
+          :props="{
+            checkStrictly: true,
+            value: 'id',
+            label: 'name',
+            children: 'children',
+          }"
+          clearable
+          filterable
+        ></el-cascader>
+      </template>
+    </templateTable>
+    <el-dialog
+      title="详情"
+      :visible.sync="dialogVisible"
+      width="80%"
+      :before-close="handleClose"
+    >
+      <templateTable
+        ref="templateTable"
+        :formList="formList1"
+        @handleSearchList="handleSearchList1"
+        :tableConfig="tableConfigDetail"
+        :data="formTableData"
+        @findPage="findPageDetail"
+      >
+        <template slot="开票方式" slot-scope="scope">
+          <span>{{
+            scope.row.invoicingMethod == 0
+              ? "保司开票"
+              : scope.row.invoicingMethod == 1
+              ? "掌柜开票"
+              : scope.row.invoicingMethod
+          }}</span>
+        </template>
+        <template slot="结算状态" slot-scope="scope">
+          <span>{{
+            scope.row.completionStatus == 0
+              ? "开票未结算"
+              : scope.row.completionStatus == 1
+              ? "开票已结算"
+              : scope.row.completionStatus == 2
+              ? "开票结算清"
+              : scope.row.completionStatus
+          }}</span>
+        </template>
+      </templateTable>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="dialogVisible = false">取消</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog
+      title="结算"
+      :visible.sync="dialogVisiblebalance"
+      width="30%"
+      :before-close="handleClosebalance"
+    >
+      <el-form ref="form" :model="form" label-width="200px">
+        <el-table
+          :data="form.insuranceHandlingList"
+          border
+          style="width: 600px; margin-bottom: 20px"
+        >
+          <el-table-column prop="incomeSigningTime" label="月份">
+          </el-table-column>
+          <el-table-column prop="remainingAmount" label="未结算金额">
+          </el-table-column>
+          <el-table-column prop="settlementAmount" label="进账金额">
+            <template slot-scope="scope">
+              <el-input
+                v-model="scope.row.settlementAmount"
+                @input="amountChange(scope.row)"
+              ></el-input>
             </template>
-            <template slot="保司机构">
-                <el-cascader v-model="pageData.partnerCompaniesIdList" size="small" :show-all-levels="false" ize="small"
-                    :options="ztreeNodes" :props='{
-                        checkStrictly: true,
-                        value: "id",
-                        label: "name",
-                        children: "children",
-                    }' clearable filterable></el-cascader>
-            </template>
-        </templateTable>
-        <el-dialog title="详情" :visible.sync="dialogVisible" width="80%" :before-close="handleClose">
-            <templateTable ref="templateTable" :formList="formList1" @handleSearchList="handleSearchList1"
-                :tableConfig="tableConfigDetail" :data="formTableData" @findPage="findPageDetail">
-                <template slot="开票方式" slot-scope="scope">
-                <span>{{ scope.row.invoicingMethod == 0 ? '保司开票' : scope.row.invoicingMethod == 1 ? '掌柜开票' : scope.row.invoicingMethod }}</span>
-              </template>
-              <template slot="结算状态" slot-scope="scope">
-                <span>{{ scope.row.completionStatus == 0 ? '开票未结算' : scope.row.completionStatus == 1 ? '开票已结算' : scope.row.completionStatus == 2 ? '开票结算清' : scope.row.completionStatus }}</span>
-              </template>
-            </templateTable>
-            <span slot="footer" class="dialog-footer">
-                <el-button size="small" @click="dialogVisible = false">取消</el-button>
-            </span>
-        </el-dialog>
-        <el-dialog title="结算" :visible.sync="dialogVisiblebalance" width="30%" :before-close="handleClosebalance">
-            
-            <el-form ref="form" :model="form" label-width="200px">
-                <el-table
-                :data="form.insuranceHandlingList"
-                border
-                style="width: 600px;margin-bottom: 20px;"
-                >
-                    <el-table-column prop="incomeSigningTime" label="月份"> </el-table-column>
-                    <el-table-column prop="remainingAmount" label="未结算金额">
-                    </el-table-column>
-                    <el-table-column prop="settlementAmount" label="进账金额">
-                    <template slot-scope="scope">
-                        <el-input v-model="scope.row.settlementAmount"  @input='amountChange(scope.row)'></el-input>
-                    </template>
-                    </el-table-column>
-                </el-table>
-                    <el-form-item label="进账总金额：">
-                        <el-input v-model="total" style="width:220px"></el-input>
-                    </el-form-item>
-                    <el-form-item label="进账日期：">
-                        <el-date-picker v-model="form.settlementTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
-                        </el-date-picker>
-                    </el-form-item>
-                    <el-form-item label="上传凭证：">
-                        <el-upload action="#" class="upload-demo" :limit="1" :auto-upload="false" :on-change="drivingupload"
-                            ref="upload3" accept=".png, .jpg, .jpeg" :file-list="fileList">
-                            <el-button size="small" type="primary">点击上传</el-button>
-                        </el-upload>
-                    </el-form-item>
-                </el-form>
-            <span slot="footer" class="dialog-footer">
-                <el-button size="small" @click="cancelSumbit">取消</el-button>
-                <el-button type="primary" size="small" @click="balanceSumbit">确定</el-button>
-            </span>
-        </el-dialog>
-        <!-- 记录 明细 -->
-        <el-dialog title="记录" :visible.sync="dialogVisiblerecord" width="30%" :before-close="handleCloserecord">
-            <templateTable ref="templateTable1"   :pagination="pageDatarecord" @getList="getListrecord"
-                :tableConfig="tableConfigDetailrecord" :data="formTableDatarecord" @findPage="findPageDetailrecord">
-                <template slot="imageUrl" slot-scope="scope">
-                    <img v-if="scope.row.imageUrl" :src='scope.row.imageUrl' class="imageclass"  @click.stop="showViewer=true;ProViewImg=scope.row.imageUrl" />
-                </template>
-            </templateTable>
-            <span slot="footer" class="dialog-footer">
-                <el-button size="small" @click="dialogVisiblerecord = false">取消</el-button>
-            </span>
-        </el-dialog>
-        <el-dialog title="明细" :visible.sync="dialogVisiblerecordDetail" width="50%" :before-close="handleCloserecorddetail">
-            <templateTable ref="templateTable1"   :pagination="pageDatarecorddetail" @getList="getListrecorddetail"
-                :tableConfig="tableConfigDetailrecorddetail" :data="recordDetailData" @findPage="findPageDetailrecorddatail">
-            </templateTable>
-
-            <span slot="footer" class="dialog-footer">
-                <el-button size="small" @click="dialogVisiblerecordDetail = false">取消</el-button>
-            </span>
-        </el-dialog>
+          </el-table-column>
+        </el-table>
+        <el-form-item label="进账总金额：">
+          <el-input v-model="total" style="width: 220px"></el-input>
+        </el-form-item>
+        <el-form-item label="进账日期：">
+          <el-date-picker
+            v-model="form.settlementTime"
+            type="date"
+            placeholder="选择日期"
+            value-format="yyyy-MM-dd"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="上传凭证：">
+          <el-upload
+            action="#"
+            class="upload-demo"
+            :limit="1"
+            :auto-upload="false"
+            :on-change="drivingupload"
+            ref="upload3"
+            accept=".png, .jpg, .jpeg"
+            :file-list="fileList"
+          >
+            <el-button size="small" type="primary">点击上传</el-button>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="cancelSumbit">取消</el-button>
+        <el-button type="primary" size="small" @click="balanceSumbit"
+          >确定</el-button
+        >
+      </span>
+    </el-dialog>
+    <!-- 记录 明细 -->
+    <el-dialog
+      title="记录"
+      :visible.sync="dialogVisiblerecord"
+      width="30%"
+      :before-close="handleCloserecord"
+    >
+      <templateTable
+        ref="templateTable1"
+        :pagination="pageDatarecord"
+        @getList="getListrecord"
+        :tableConfig="tableConfigDetailrecord"
+        :data="formTableDatarecord"
+        @findPage="findPageDetailrecord"
+      >
+        <template slot="imageUrl" slot-scope="scope">
+          <img
+            v-if="scope.row.imageUrl"
+            :src="scope.row.imageUrl"
+            class="imageclass"
+            @click.stop="
+              showViewer = true;
+              ProViewImg = scope.row.imageUrl;
+            "
+          />
+        </template>
+      </templateTable>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="dialogVisiblerecord = false"
+          >取消</el-button
+        >
+      </span>
+    </el-dialog>
+    <el-dialog
+      title="明细"
+      :visible.sync="dialogVisiblerecordDetail"
+      width="50%"
+      :before-close="handleCloserecorddetail"
+    >
+      <templateTable
+        ref="templateTable1"
+        :pagination="pageDatarecorddetail"
+        @getList="getListrecorddetail"
+        :tableConfig="tableConfigDetailrecorddetail"
+        :data="recordDetailData"
+        @findPage="findPageDetailrecorddatail"
+      >
+      </templateTable>
 
-    </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="dialogVisiblerecordDetail = false"
+          >取消</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
 </template>
 <script>
-import templateTable from '@/components/TemplateTable/index.vue'
-import { mapState } from 'vuex'
-import yearMonthYay from '../../PlatformSettlement/yearMonthYay.vue'
-import { Decimal } from 'decimal.js'
+import templateTable from "@/components/TemplateTable/index.vue";
+import { mapState } from "vuex";
+import yearMonthYay from "../../PlatformSettlement/yearMonthYay.vue";
+import { Decimal } from "decimal.js";
 export default {
-    name: "baosi",
-    components: { templateTable, yearMonthYay },
-    created() {
-    },
-    computed: {
-        ...mapState({
-            perms: state => state.user.perms
-        })
-    },
-    data() {
-        return {
-            // 记录 明细
-          dialogVisiblerecord: false,
-          dialogVisiblerecordDetail: false,
-          formTableDatarecord:[],
-          recordDetailData:[],
-          pageDatarecord: {
-                pageNum: 1,
-                pageSize: 20,
-                totalSize:0
+  name: "baosi",
+  components: { templateTable, yearMonthYay },
+  created() {},
+  computed: {
+    ...mapState({
+      perms: (state) => state.user.perms,
+    }),
+  },
+  data() {
+    return {
+      // 记录 明细
+      dialogVisiblerecord: false,
+      dialogVisiblerecordDetail: false,
+      formTableDatarecord: [],
+      recordDetailData: [],
+      pageDatarecord: {
+        pageNum: 1,
+        pageSize: 20,
+        totalSize: 0,
+      },
+      pageDatarecorddetail: {
+        pageNum: 1,
+        pageSize: 20,
+        totalSize: 0,
+      },
+      tableConfigDetailrecord: {
+        columns: [
+          {
+            prop: "settlementTime",
+            label: "进账日期",
+            type: "text",
+          },
+          {
+            prop: "settlementAmount",
+            label: "进帐金额",
+            type: "text",
+          },
+          {
+            name: "imageUrl",
+            label: "凭证",
+            type: "slot",
+          },
+        ],
+        loading: true,
+        isPaginationShow: true,
+      },
+      tableConfigDetailrecorddetail: {
+        columns: [
+          {
+            prop: "noPolicyno",
+            label: "非车保单号",
+            type: "text",
+          },
+          {
+            prop: "licenseno",
+            label: "车牌号",
+            type: "text",
+          },
+          {
+            prop: "insuredName",
+            label: "被保人",
+            type: "text",
+          },
+          {
+            prop: "noPremium",
+            label: "非车保费",
+            type: "text",
+          },
+          {
+            prop: "noSuperviseCostsPremiums",
+            label: "非车手续费",
+            type: "text",
+          },
+          {
+            prop: "noSuperviseCostsProportion",
+            label: "非车手续费比例",
+            type: "text",
+          },
+        ],
+        loading: true,
+        isPaginationShow: true,
+      },
+      ztreeNodes: [],
+      fileList: [],
+      dialogVisiblebalance: false,
+      form: {
+        insuranceHandlingList: [],
+        settlementAmount: "",
+        settlementTime: null,
+      },
+      formTableData: [],
+      dialogVisible: false,
+      tableConfigDetail: {
+        columns: [
+          {
+            prop: "invoicId",
+            label: "开票号",
+            type: "text",
+          },
+          {
+            prop: "invoicingMethod",
+            label: "开票方式",
+            // type: "text"
+            name: "开票方式",
+            type: "slot",
+          },
+          {
+            prop: "invoicCommissionFeevalue",
+            label: "开票金额",
+            type: "text",
+          },
+          {
+            prop: "invoicedSettledAmount",
+            label: "已开票已结算金额",
+            type: "text",
+          },
+          {
+            prop: "invoicedNotSettledAmount",
+            label: "已开票未结算金额",
+            type: "text",
+          },
+          {
+            prop: "completionStatus",
+            label: "结算状态",
+            name: "结算状态",
+            type: "slot",
+          },
+        ],
+        loading: true,
+        isShowIndex: true,
+        operationWidth: 150,
+        tableHeight: "auto",
+        optBtns: [
+          {
+            type: "primary",
+            label: "结算",
+            hide: (row) => {
+              return row.completionStatus != "2";
             },
-            pageDatarecorddetail: {
-                pageNum: 1,
-                pageSize: 20,
-                totalSize:0
+            click: (row, index) => {
+              return this.balanceFun(row);
             },
-            tableConfigDetailrecord: {
-                columns: [
-                    {
-                        prop: "settlementTime",
-                        label: "进账日期",
-                        type: "text"
-                    },
-                    {
-                        prop: "settlementAmount",
-                        label: "进帐金额",
-                        type: "text"
-                    },
-                    {
-                        name: "imageUrl",
-                        label: "凭证",
-                        type: "slot"
-                    },
-                ],
-                loading: true,
-                isPaginationShow:true
+          },
+          {
+            type: "primary",
+            label: "作废",
+            hide: (row) => {
+              return row.completionStatus == "0";
             },
-            tableConfigDetailrecorddetail: {
-                columns: [
-                    {
-                        prop: "noPolicyno",
-                        label: "非车保单号",
-                        type: "text"
-                    },
-                    {
-                        prop: "licenseno",
-                        label: "车牌号",
-                        type: "text"
-                    },
-                    {
-                        prop: "insuredName",
-                        label: "被保人",
-                        type: "text"
-                    },
-                    {
-                        prop: "noPremium",
-                        label: "非车保费",
-                        type: "text"
-                    },
-                    {
-                        prop: "noSuperviseCostsPremiums",
-                        label: "非车手续费",
-                        type: "text"
-                    },
-                    {
-                        prop: "noSuperviseCostsProportion",
-                        label: "非车手续费比例",
-                        type: "text"
-                    },
-                ],
-                loading: true,
-                isPaginationShow:true
+            click: (row, index) => {
+              return this.handVoid(row);
             },
-            ztreeNodes: [],
-            fileList: [],
-            dialogVisiblebalance: false,
-            form: {
-                insuranceHandlingList:[],
-                settlementAmount:"",
-                settlementTime:null, 
+          },
+          {
+            type: "primary",
+            label: "记录",
+            hide: (row) => {
+              return row.completionStatus != "0";
             },
-            formTableData: [],
-            dialogVisible: false,
-            tableConfigDetail: {
-                columns: [
-                    {
-                        prop: "invoicId",
-                        label: "开票号",
-                        type: "text"
-                    },
-                    {
-                        prop: "invoicingMethod",
-                        label: "开票方式",
-                        // type: "text"
-                        name: '开票方式',
-                        type: 'slot'
-                    },
-                    {
-                        prop: "invoicCommissionFeevalue",
-                        label: "开票金额",
-                        type: "text"
-                    },
-                    {
-                        prop: "invoicedSettledAmount",
-                        label: "已开票已结算金额",
-                        type: "text"
-                    },
-                    {
-                        prop: "invoicedNotSettledAmount",
-                        label: "已开票未结算金额",
-                        type: "text"
-                    },
-                    {
-                        prop: "completionStatus",
-                        label: "结算状态",
-                        name: "结算状态",
-                        type: "slot"
-                    }
-
-                ],
-                loading: true,
-                isShowIndex: true,
-                operationWidth: 150,
-                tableHeight:'auto',
-                optBtns: [
-                    {
-                        type: 'primary',
-                        label: '结算',
-                        hide: (row) => {
-                            return row.completionStatus != '2'
-                        },
-                        click: (row, index) => { return this.balanceFun(row) },
-                    },
-                    {
-                        type: 'primary',
-                        label: '作废',
-                        hide: (row) => {
-                            return row.completionStatus == '0'
-                        },
-                        click: (row, index) => { return this.handVoid(row) },
-                    },
-                    {
-                    type:'primary',
-                    label:'记录',
-                    hide: (row) => {
-                    return row.completionStatus != '0'
-                    },
-                    click:(row, index) => {return this.haldRecord(row)},
-                },
-                {
-                    type:'primary',
-                    label:'明细',
-                    hide: (row) => {
-                    return row.completionStatus != '0'
-                    },
-                    click:(row, index) => {return this.haldRecordDetail(row)},
-                },
-                ]
+            click: (row, index) => {
+              return this.haldRecord(row);
             },
-            searchData: {},
-            formList: [
-                {
-                    label: "保险公司",
-                    prop: "companyName",
-                    type: "company",
-                },
-                {
-                    label: "合作公司名称",
-                    name: "保司机构",
-                    type: "slot",
-                },
-                {
-                    label: "年月日",
-                    name: "data",
-                    type: "slot",
-                },
-            ],
-            formList1: [
-                {
-                    label: "结算状态",
-                    prop: "settlementStatus",
-                    type: "select",
-                    options: [
-                      {
-                        label: '开票未结算',
-                        value: '0'
-                      },
-                      {
-                        label: '开票已结算',
-                        value: '1'
-                      }, 
-                      {
-                        label: '开票结算清',
-                        value: '2'
-                      },
-                    ]
-                },
-
-            ],
-            tableConfig: {
-                columns: [
-                    {
-                        prop: "companyName",
-                        label: "保险公司名称",
-                        type: "text"
-                    },
-                    {
-                        prop: "partnerCompaniesName",
-                        label: "保司机构",
-                        type: "text"
-                    },
-                    {
-                        prop: "allInvoicCommissionFeevalue",
-                        label: "已开票手续费",
-                        type: "text"
-                    },
-                    {
-                        prop: "readyCommissionFeevalue",
-                        label: "已开票已结算手续费",
-                        type: "text"
-                    },
-                    {
-                        prop: "invoicCommissionFeevalue",
-                        label: "已开票未结算手续费",
-                        type: "text"
-                    },
-                ],
-                loading: true,
-                isPaginationShow: true,
-                showSummary: true,
-                isShowIndex: true,
-                tableHeight: 'auto',
-                optBtns: [
-                    {
-                        type: 'primary',
-                        label: '详情',
-                        click: (row, index) => { return this.haldDetail(row) },
-                    }
-                ]
+          },
+          {
+            type: "primary",
+            label: "明细",
+            hide: (row) => {
+              return row.completionStatus != "0";
             },
-            tableData: [],
-            pageData: {
-                pageNum: 1,
-                pageSize: 20,
-                agreementType: '2',
-                isNotCar: '1',
-                isNotDocumentary: '0',
-                handlingFeesStatus: '0'
+            click: (row, index) => {
+              return this.haldRecordDetail(row);
             },
-            formData: {},
-            formDetail: {},
-            batchData: {}
-        };
-    },
-    created() {
-        this.$api.insCompany.findLeftInsTree({
-            classname: "",
-            type: '1',
-        }).then((res) => {
-            this.ztreeNodes = res.data;
-        });
-        this.findPage();
-    },
-    computed: {
-        total() {
-            var sum =0;
-            if(this.form.insuranceHandlingList.length>0){
-                this.form.insuranceHandlingList.forEach(item => {
-                     sum = new Decimal(sum).plus((item.settlementAmount==''||item.settlementAmount==null)?new Decimal(0): new Decimal(item.settlementAmount)).toString();
-                });
-                return  Object.is(Number(sum), NaN)?0:sum;
-            }
-            return sum;
-       }
-    },
-    methods: {
-          //改变事件
-     amountChange(row){
-      if(row.settlementAmount>0 && row.settlementAmount>row.remainingAmount){
-         this.$message.error("进账金额不能大于未结算金额");
-      }
-     },
-        // 明细
-      findPageDetailrecord(data) {
-            this.tableConfigDetailrecord.loading = true
-            this.$api.task
-            .settlementFeesGetRecord(this.recorddetailid)
-            .then(res => {
-                if (res.code == 200) {
-                    res.data.forEach(ele => {
-                        if (ele.imageUrl) {
-                        ele.imageUrl= process.env.BASE_URL+ele.imageUrl
-                        }
-                    });
-                    this.formTableDatarecord = res.data
-                    this.tableConfigDetailrecord.loading = false;
-                }
-                else {
-                    this.tableConfigDetail.loading = false;
-                    this.$message.error(res.msg)
-                }
-            });
-        },
-        getListrecord(data) {
-            this.findPageDetailrecord(data)
-        },
-        haldRecord(row) {
-            this.dialogVisiblerecord = true
-            this.recorddetailid = row.id
-            this.findPageDetailrecord()
-        },
-        
-        haldRecordDetail(row) {
-            this.dialogVisiblerecordDetail = true
-            this.recorddetailid = row.id
-            this.getListrecorddetail()
+          },
+        ],
+      },
+      searchData: {},
+      formList: [
+        {
+          label: "保险公司",
+          prop: "companyName",
+          type: "company",
         },
-        getListrecorddetail(data) {
-            this.findPageDetailrecorddatail(data)
+        {
+          label: "合作公司名称",
+          name: "保司机构",
+          type: "slot",
         },
-        findPageDetailrecorddatail(data) {
-            this.tableConfigDetailrecorddetail.loading = true;
-            this.$api.task
-            .fncplyFeeQuery({
-                    partnerCompaniesId: this.formDetail.partnerCompaniesId,
-                    agreementType: '2',
-                    isNotCar: '1',
-                    handlingFeesStatus: '0',
-                    id:this.recorddetailid,
-                    ...this.pageDatarecorddetail,
-                    ...data})
-                .then(res => {
-                    if (res.code == 200) {
-                        this.tableConfigDetailrecorddetail.loading = false;
-                        this.recordDetailData = res.data.content ? res.data.content : []
-                    }
-                    else {
-                        this.tableConfigDetailrecorddetail.loading = false;
-                        this.$message.error(res.msg)
-                    }
-                });
+        {
+          label: "年月日",
+          name: "data",
+          type: "slot",
         },
-      handleCloserecord() {
-            this.dialogVisiblerecord = false
-        },
-        handleCloserecorddetail() {
-            this.dialogVisiblerecordDetail = false
+      ],
+      formList1: [
+        {
+          label: "结算状态",
+          prop: "settlementStatus",
+          type: "select",
+          options: [
+            {
+              label: "开票未结算",
+              value: "0",
+            },
+            {
+              label: "开票已结算",
+              value: "1",
+            },
+            {
+              label: "开票结算清",
+              value: "2",
+            },
+          ],
         },
-        drivingupload(file, fileList) {
-            this.fileList = []
-            const params = new FormData(); // 声明formData数据类型
-            params.append("multipartFile", file.raw);
-            params.append("type", "image");
-            this.$api.letter.uploadFile(params).then(res => {
-                if (res.code == "200") {
-                    this.batchData = res.data
-                    this.fileList = fileList
-                }
-                else {
-                    this.fileList = []
-                    this.$message.error(res.msg)
-                }
+      ],
+      tableConfig: {
+        columns: [
+          {
+            prop: "companyName",
+            label: "保险公司名称",
+            type: "text",
+          },
+          {
+            prop: "partnerCompaniesName",
+            label: "保司机构",
+            type: "text",
+          },
+          {
+            prop: "allInvoicCommissionFeevalue",
+            label: "已开票手续费",
+            type: "text",
+          },
+          {
+            prop: "readyCommissionFeevalue",
+            label: "已开票已结算手续费",
+            type: "text",
+          },
+          {
+            prop: "invoicCommissionFeevalue",
+            label: "已开票未结算手续费",
+            type: "text",
+          },
+        ],
+        loading: true,
+        isPaginationShow: true,
+        showSummary: true,
+        isShowIndex: true,
+        tableHeight: "auto",
+        optBtns: [
+          {
+            type: "primary",
+            label: "详情",
+            click: (row, index) => {
+              return this.haldDetail(row);
+            },
+          },
+        ],
+      },
+      tableData: [],
+      pageData: {
+        pageNum: 1,
+        pageSize: 20,
+        agreementType: "2",
+        isNotCar: "1",
+        isNotDocumentary: "0",
+        handlingFeesStatus: "0",
+      },
+      formData: {},
+      formDetail: {},
+      batchData: {},
+    };
+  },
+  created() {
+    this.$api.insCompany
+      .findLeftInsTree({
+        classname: "",
+        type: "1",
+      })
+      .then((res) => {
+        this.ztreeNodes = res.data;
+      });
+    this.findPage();
+  },
+  computed: {
+    total() {
+      var sum = 0;
+      if (this.form.insuranceHandlingList.length > 0) {
+        this.form.insuranceHandlingList.forEach((item) => {
+          sum = new Decimal(sum)
+            .plus(
+              item.settlementAmount == "" || item.settlementAmount == null
+                ? new Decimal(0)
+                : new Decimal(item.settlementAmount)
+            )
+            .toString();
+        });
+        return Object.is(Number(sum), NaN) ? 0 : sum;
+      }
+      return sum;
+    },
+  },
+  methods: {
+    //改变事件
+    amountChange(row) {
+      if (
+        row.settlementAmount > 0 &&
+        row.settlementAmount > row.remainingAmount
+      ) {
+        this.$message.error("进账金额不能大于未结算金额");
+      }
+    },
+    // 明细
+    findPageDetailrecord(data) {
+      this.tableConfigDetailrecord.loading = true;
+      this.$api.task
+        .settlementFeesGetRecord(this.recorddetailid)
+        .then((res) => {
+          if (res.code == 200) {
+            res.data.forEach((ele) => {
+              if (ele.imageUrl) {
+                ele.imageUrl = process.env.BASE_URL + ele.imageUrl;
+              }
             });
-        },
-        getYearData(val) {
-            this.formData.year = val
-        },
-        getMonthData(val) {
-            this.formData.month = val
-        },
-        getDayData(val) {
-            this.formData.day = val
-        },
-        haldDetail(row) {
-            this.dialogVisible = true
-            this.formDetail = row
-            this.findPageDetail(row)
-        },
-        handleSearchList1(data) {
-            this.findPageDetail({ ...this.formDetail, ...data })
-        },
-        handVoid(row) {
-            this.$api.task
-                .yaidlnvoicing({ id: row.id })
-                .then(res => {
-                    if (res.code == 200) {
-                        this.dialogVisible = false
-                        this.$message({
-                            message: res.msg || '操作成功',
-                            type: 'success'
-                        })
-                    }
-                    else {
-                        this.$message.error(res.msg)
-                    }
-                });
-        },
-        findPageDetail(data) {
-            this.tableConfigDetail.loading = true
-            this.$api.task
-                .invicdetai({
-                    partnerCompaniesId: data.partnerCompaniesId,
-                    agreementType: '2',
-                    isNotCar: '1',
-                    isNotDocumentary: '0',
-                    handlingFeesStatus: '0',
-                    // settlementStatus: data.settlementStatus,
-                    completionStatus:data.settlementStatus || '0',
-                    settlementStatus: '1'
-                })
-                .then(res => {
-                    if (res.code == 200) {
-                        this.formTableData = res.data;
-                        this.tableConfigDetail.loading = false;
-                    }
-                    else {
-                        this.tableConfigDetail.loading = false;
-                        this.$message.error(res.msg)
-                    }
-                });
-        },
-        handleClose() {
-            this.dialogVisible = false
-        },
-        // 查询
-        handleSearchList(data) {
-            this.findPage(data);
-        },
-        resetForm() {
-            this.formData = {}
-            this.$refs.yearMonthYay.clear()
-        },
-        //列表数据
-        findPage(data) {
-            // if (data) {
-            //     this.pageData.pageNum = data.pageNum;
-            //     this.pageData.pageSize = data.pageSize;
-            // }
-            this.tableConfig.loading = true;
-            this.$api.task
-                .totalBxAmount({ ...this.pageData, ...this.formData, ...data })
-                .then(res => {
-                    if (res.code == 200) {
-                        this.tableData = res.data ? res.data : []
-                        // this.pageData.pageNum = res.data.pageNum;
-                        // this.pageData.pageSize = res.data.pageSize;
-                        // this.pageData.totalSize = res.data.totalSize;
-                        this.tableConfig.loading = false;
-                    }
-                    else {
-                        this.tableConfig.loading = false;
-                        this.$message.error(res.msg)
-                    }
-                });
-        },
-        getList(data) {
-            this.findPage(data)
-        },
-        //取消结算
-        cancelSumbit(){
-        this.dialogVisiblebalance = false
-        //清空数据
-        this.form= {
-            insuranceHandlingList:[],
-            settlementAmount:"",
-            settlementTime:"",
-        }
-        this.batchData.id=null;
-        },
-        balanceSumbit() {
-        var flag=0;
-        var count=0;
-        if(this.form.insuranceHandlingList){
-            this.form.insuranceHandlingList.forEach(e => {  
-            if(e.settlementAmount>0 && e.settlementAmount>e.remainingAmount){
-                this.$message.error("进账金额不能大于未结算金额");
-                flag+=1;
-            }
-            if(e.settlementAmount>0){
-                count+=1;
-            }
-            })
-        }
-        if (count==0) {
-            this.$message.error("未填写金额！！");
-            return;
-        }
-        if (flag>0) {
-            this.$message.error("金额输入错误！！");
-            return;
+            this.formTableDatarecord = res.data;
+            this.tableConfigDetailrecord.loading = false;
+          } else {
+            this.tableConfigDetail.loading = false;
+            this.$message.error(res.msg);
+          }
+        });
+    },
+    getListrecord(data) {
+      this.findPageDetailrecord(data);
+    },
+    haldRecord(row) {
+      this.dialogVisiblerecord = true;
+      this.recorddetailid = row.id;
+      this.findPageDetailrecord();
+    },
+
+    haldRecordDetail(row) {
+      this.dialogVisiblerecordDetail = true;
+      this.recorddetailid = row.id;
+      this.getListrecorddetail();
+    },
+    getListrecorddetail(data) {
+      this.findPageDetailrecorddatail(data);
+    },
+    findPageDetailrecorddatail(data) {
+      this.tableConfigDetailrecorddetail.loading = true;
+      this.$api.task
+        .fncplyFeeQuery({
+          partnerCompaniesId: this.formDetail.partnerCompaniesId,
+          agreementType: "2",
+          isNotCar: "1",
+          handlingFeesStatus: "0",
+          id: this.recorddetailid,
+          ...this.pageDatarecorddetail,
+          ...data,
+        })
+        .then((res) => {
+          if (res.code == 200) {
+            this.tableConfigDetailrecorddetail.loading = false;
+            this.recordDetailData = res.data.content ? res.data.content : [];
+          } else {
+            this.tableConfigDetailrecorddetail.loading = false;
+            this.$message.error(res.msg);
+          }
+        });
+    },
+    handleCloserecord() {
+      this.dialogVisiblerecord = false;
+    },
+    handleCloserecorddetail() {
+      this.dialogVisiblerecordDetail = false;
+    },
+    drivingupload(file, fileList) {
+      this.fileList = [];
+      const params = new FormData(); // 声明formData数据类型
+      params.append("multipartFile", file.raw);
+      params.append("type", "image");
+      this.$api.letter.uploadFile(params).then((res) => {
+        if (res.code == "200") {
+          this.batchData = res.data;
+          this.fileList = fileList;
+        } else {
+          this.fileList = [];
+          this.$message.error(res.msg);
         }
-      
-      this.form.settlementAmount=this.total;
-            this.$api.task
-                // .batchBxBalance({
-                .noBatchBxBalance({
-                    ...this.openBalanceDetail,
-                    otherFeevalue: this.formDetail.otherFeevalue,
-                    // partnerCompaniesId: this.formDetail.partnerCompaniesId,
-                    companyId: this.formDetail.companyId,
-                    // isNotCar: '1',
-                    handlingFeesStatus: '1',
-                    settlementImageId: this.batchData.id,
-                    ...this.form
-                })
-                .then(res => {
-                    if (res.code == 200) {
-                        this.haldDetail(this.formDetail)
-                        this.dialogVisiblebalance = false
-                        this.$message({
-                            message: res.msg || '操作成功',
-                            type: 'success'
-                        })
-                    }
-                    else {
-                        this.$message.error(res.msg)
-                    }
-                });
-        },
-        handleClosebalance() {
-            this.dialogVisiblebalance = false;
-        },
-        // 结算
-        balanceFun(row) {
-            this.openBalanceDetail = row
-            this.getSettlementList(row);
-            this.dialogVisiblebalance = true
-            // this.$api.task
-            //     .batchBxBalance({
-            //         ...row,
-            //         otherFeevalue:this.formDetail.otherFeevalue,
-            //         partnerCompaniesId:this.formDetail.partnerCompaniesId,
-            //         companyId:this.formDetail.companyId,
-            //         isNotCar:'0',
-            //         handlingFeesStatus:'1',
-            //         })
-            //     .then(res => {
-            //         if (res.code==200) {
-            //             this.haldDetail(this.formDetail)
-            //             this.dialogVisible=false
-            //             this.$message({
-            //                 message: res.msg ||'操作成功',
-            //                 type: 'success'
-            //             })
-            //         }
-            //         else{
-            //             this.$message.error(res.msg)
-            //         }
-            //     });
-        },
-         //通过结算数据id查询需要结算的数据
-        getSettlementList(row){
-        this.$api.settlement.queryListByTaskIdAndCompanyId(
-            { 
-            taskId: row.taskId,
-            partnerCompaniesId:row.partnerCompaniesId,
-            isNotCar:"1",
-            isNotDocumentary:"0"
-            }).then((res) => {
+      });
+    },
+    getYearData(val) {
+      this.formData.year = val;
+    },
+    getMonthData(val) {
+      this.formData.month = val;
+    },
+    getDayData(val) {
+      this.formData.day = val;
+    },
+    haldDetail(row) {
+      this.dialogVisible = true;
+      this.formDetail = row;
+      this.findPageDetail(row);
+    },
+    handleSearchList1(data) {
+      this.findPageDetail({ ...this.formDetail, ...data });
+    },
+    handVoid(row) {
+      this.$confirm("是否确认作废?", "提示", {
+        confirmButtonText: "提交",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$api.task.yaidlnvoicing({ id: row.id }).then((res) => {
             if (res.code == 200) {
-            this.form.insuranceHandlingList =res.data; 
-            } 
-        }); 
-        },
-        tablePageChange(val) {
-            this.pageData.pageSize = val;
-            this.findPage();
-        },
-        tableCurrentChange(val) {
-            this.pageData.pageNum = val;
-            this.findPage();
-        },
+              this.dialogVisible = false;
+              this.$message({
+                message: res.msg || "操作成功",
+                type: "success",
+              });
+            } else {
+              this.$message.error(res.msg);
+            }
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消作废",
+          });
+        });
+    },
 
-    }
+    findPageDetail(data) {
+      this.tableConfigDetail.loading = true;
+      this.$api.task
+        .invicdetai({
+          partnerCompaniesId: data.partnerCompaniesId,
+          agreementType: "2",
+          isNotCar: "1",
+          isNotDocumentary: "0",
+          handlingFeesStatus: "0",
+          // settlementStatus: data.settlementStatus,
+          completionStatus: data.settlementStatus || "0",
+          settlementStatus: "1",
+        })
+        .then((res) => {
+          if (res.code == 200) {
+            this.formTableData = res.data;
+            this.tableConfigDetail.loading = false;
+          } else {
+            this.tableConfigDetail.loading = false;
+            this.$message.error(res.msg);
+          }
+        });
+    },
+    handleClose() {
+      this.dialogVisible = false;
+    },
+    // 查询
+    handleSearchList(data) {
+      this.findPage(data);
+    },
+    resetForm() {
+      this.formData = {};
+      this.$refs.yearMonthYay.clear();
+    },
+    //列表数据
+    findPage(data) {
+      // if (data) {
+      //     this.pageData.pageNum = data.pageNum;
+      //     this.pageData.pageSize = data.pageSize;
+      // }
+      this.tableConfig.loading = true;
+      this.$api.task
+        .totalBxAmount({ ...this.pageData, ...this.formData, ...data })
+        .then((res) => {
+          if (res.code == 200) {
+            this.tableData = res.data ? res.data : [];
+            // this.pageData.pageNum = res.data.pageNum;
+            // this.pageData.pageSize = res.data.pageSize;
+            // this.pageData.totalSize = res.data.totalSize;
+            this.tableConfig.loading = false;
+          } else {
+            this.tableConfig.loading = false;
+            this.$message.error(res.msg);
+          }
+        });
+    },
+    getList(data) {
+      this.findPage(data);
+    },
+    //取消结算
+    cancelSumbit() {
+      this.dialogVisiblebalance = false;
+      //清空数据
+      this.form = {
+        insuranceHandlingList: [],
+        settlementAmount: "",
+        settlementTime: "",
+      };
+      this.batchData.id = null;
+    },
+    balanceSumbit() {
+      var flag = 0;
+      var count = 0;
+      if (this.form.insuranceHandlingList) {
+        this.form.insuranceHandlingList.forEach((e) => {
+          if (
+            e.settlementAmount > 0 &&
+            e.settlementAmount > e.remainingAmount
+          ) {
+            this.$message.error("进账金额不能大于未结算金额");
+            flag += 1;
+          }
+          if (e.settlementAmount > 0) {
+            count += 1;
+          }
+        });
+      }
+      if (count == 0) {
+        this.$message.error("未填写金额！！");
+        return;
+      }
+      if (flag > 0) {
+        this.$message.error("金额输入错误！！");
+        return;
+      }
+
+      this.form.settlementAmount = this.total;
+      this.$api.task
+        // .batchBxBalance({
+        .noBatchBxBalance({
+          ...this.openBalanceDetail,
+          otherFeevalue: this.formDetail.otherFeevalue,
+          // partnerCompaniesId: this.formDetail.partnerCompaniesId,
+          companyId: this.formDetail.companyId,
+          // isNotCar: '1',
+          handlingFeesStatus: "1",
+          settlementImageId: this.batchData.id,
+          ...this.form,
+        })
+        .then((res) => {
+          if (res.code == 200) {
+            this.haldDetail(this.formDetail);
+            this.dialogVisiblebalance = false;
+            this.$message({
+              message: res.msg || "操作成功",
+              type: "success",
+            });
+          } else {
+            this.$message.error(res.msg);
+          }
+        });
+    },
+    handleClosebalance() {
+      this.dialogVisiblebalance = false;
+    },
+    // 结算
+    balanceFun(row) {
+      this.openBalanceDetail = row;
+      this.getSettlementList(row);
+      this.dialogVisiblebalance = true;
+      // this.$api.task
+      //     .batchBxBalance({
+      //         ...row,
+      //         otherFeevalue:this.formDetail.otherFeevalue,
+      //         partnerCompaniesId:this.formDetail.partnerCompaniesId,
+      //         companyId:this.formDetail.companyId,
+      //         isNotCar:'0',
+      //         handlingFeesStatus:'1',
+      //         })
+      //     .then(res => {
+      //         if (res.code==200) {
+      //             this.haldDetail(this.formDetail)
+      //             this.dialogVisible=false
+      //             this.$message({
+      //                 message: res.msg ||'操作成功',
+      //                 type: 'success'
+      //             })
+      //         }
+      //         else{
+      //             this.$message.error(res.msg)
+      //         }
+      //     });
+    },
+    //通过结算数据id查询需要结算的数据
+    getSettlementList(row) {
+      this.$api.settlement
+        .queryListByTaskIdAndCompanyId({
+          taskId: row.taskId,
+          partnerCompaniesId: row.partnerCompaniesId,
+          isNotCar: "1",
+          isNotDocumentary: "0",
+        })
+        .then((res) => {
+          if (res.code == 200) {
+            this.form.insuranceHandlingList = res.data;
+          }
+        });
+    },
+    tablePageChange(val) {
+      this.pageData.pageSize = val;
+      this.findPage();
+    },
+    tableCurrentChange(val) {
+      this.pageData.pageNum = val;
+      this.findPage();
+    },
+  },
 };
 </script>
   
 <style scoped>
-.InvoicedAndSettled>>>.el-table__body-wrapper {
-    overflow-y: auto !important;
-    height: auto !important;
+.InvoicedAndSettled >>> .el-table__body-wrapper {
+  overflow-y: auto !important;
+  height: auto !important;
 }
 .imageclass {
   width: 200px;

src/views/Letter/Wallet/AutoInsuranceDetails.vue

@@ -165,10 +165,11 @@ export default {
         { prop: "insuredName", label: "被保险人", minWidth: 160 },
         { prop: "jqapplyno", label: "交强保单号", minWidth: 160 },
         { prop: "syapplyno", label: "商业保单号", minWidth: 160 },
-        { prop: "amount", label: "交易金额", minWidth: 160 },
+        { prop: "amount", label: "交易金额", minWidth: 160, formatter: this.amountFormatter },
         { prop: "auditTime", label: "审核时间", minWidth: 160 },
         { prop: "auditstatus", label: "审核状态", minWidth: 160 ,formatter: this.validIndFormatter,},
       ],
+      feeView:null,
     }
   },
   // 生命周期函数
@@ -180,6 +181,14 @@ export default {
   },
   // 方法函数
   methods: {
+    amountFormatter(row, column){
+      let amount = row.amount;
+      if(this.feeView){
+        return amount;
+      }else{
+        return "￥"+amount;
+      }
+    },
     validIndFormatter(row, column) {
       let auditstatus = row.auditstatus;
       if (auditstatus == '已审核') {
@@ -294,6 +303,7 @@ export default {
         .findMyInsuranceByUserId({ ...this.pageRequest, ...this.queryForm })
         .then((res) => {
           this.autoInsuranceResult = res.data;
+          this.feeView=res.data.feeView;
         });
     },
     CompanyList() {

src/views/Letter/Wallet/ExpenditureDetails.vue

@@ -85,8 +85,8 @@
 
         <el-table-column prop="amount" label="交易金额" align="center">
           <template slot-scope="scope">
-            <span v-if="scope.row.transactionType == '3'" style="color: #0052FF;">-{{ scope.row.amount }}</span>
-            <span v-else>+{{ scope.row.amount }}</span>
+            <span v-if="scope.row.transactionType == '3'" style="color: #0052FF;">- {{feeView?'':'￥'}}{{ scope.row.amount }}</span>
+            <span v-else>+ {{feeView?'':'￥'}}{{ scope.row.amount }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="auditingStatus" label="提现状态" align="center">
@@ -302,7 +302,8 @@ export default {
           value: '4',
           label: '六月内'
         },
-      ]
+      ],
+      feeView:null,
     }
   },
 
@@ -541,6 +542,7 @@ export default {
           this.formQuery.pageNum = res.data.pageNum;
           this.formQuery.pageSize = res.data.pageSize;
           this.formQuery.totalSize = res.data.totalSize;
+          this.feeView=res.data.feeView;
           loading.close();
         } else {
           loading.close();

src/views/Login.vue

@@ -158,6 +158,8 @@ import LangSelector from "@/components/LangSelector";
 import { login } from "@/api/user";
 import CryptoJS from "crypto-js";
 // import { getSysList } from "../http/moudules/sys";
+
+import { sendWebsocket,closeWebsocket  } from '@/utils/websocket.js'
 import {
   getUserIP,
   getUserLocation,
@@ -229,6 +231,7 @@ export default {
       }
     },
     login(formName) {
+      
       // let token = CryptoJS.AES.encrypt(
       //   "2856c49f-7b34-4e83-b3c8-2c37dba7cb3b",
       //   "token"
@@ -304,10 +307,22 @@ export default {
                     token;
                   // alert(res.data);
                 } else {
+                  this.getUser();
                   Cookies.set("token", res.data); // 放置token到Cookie
-                  this.submitLocation();
+                  // this.submitLocation();
                   this.getDictItems();
-                  this.getUser();
+                  setTimeout(()=>{
+                    let userId=sessionStorage.getItem("user")
+                    let data={
+                    ...this.addressInfo,
+                    userId,
+                    systemType:this.systemType
+                  }
+                  // sendWebsocket(`ws://192.168.0.52:8080//pcWebsocket/${userId}`,data)
+                  sendWebsocket(`/pcWebsocket/${userId}`,data)
+                  },1000)
+                  
+
                 }
               }
               this.loading = false;

src/views/PeopleManage/PcLoginRecord.vue

@@ -19,6 +19,8 @@
           :value="option.code"></el-option>
       </el-select>
       <el-button size="small" type="primary" @click="onSearch">搜索</el-button>
+      <el-button size="small" type="primary" @click="onCircular">圆形定位</el-button>
+      <!-- <el-button size="small" type="primary" @click="map.remove(circle)">删除定位</el-button> -->
     </div>
     <div class="source-window">
       <div>
@@ -37,70 +39,95 @@
         </el-switch>
       </div>
     </div>
-    <div v-if="infoWindowVisible" class="info-window">
+    <div v-if="infoWindowVisible" class="infohis-window" >
       <p class="close flex j-s">
-        <span>详情内容</span>
+        <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"
+      <el-table :data="tableData" border style="width: 100%;  overflow: auto;"
         :header-cell-style="{
           background: '#F2F7FC',
           fontWeight: '700',
           color: '#606266',
         }">
-        <el-table-column prop="userId" label="工号" width="170">
+        <el-table-column prop="userId" label="工号" width="150">
         </el-table-column>
-        <el-table-column prop="userName" label="姓名" width="100">
+        <el-table-column prop="userName" label="姓名" width="80">
         </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"
+          :page-sizes="[5,10, 20, 30, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next"
           :total="totalSum">
         </el-pagination>
       </div>
     </div>
     <div class="personnel-window ">
       <p class="close flex j-s ">
-        <span>人员分布</span>
-        <span style="color: #3865E9 ; cursor: pointer; font-size: 14px;" @click="isCollapse = !isCollapse">{{
-          isCollapse ? '收起' : '展开' }} </span>
+        <!-- <span>人员分布</span> -->
+        <el-tabs style="position: relative;width: 100%;" v-model="activeName" @tab-click="handHistory">
+          <el-tab-pane label="人员分布" name="1"></el-tab-pane>
+          <el-tab-pane label="历史在线人数" name="2"></el-tab-pane>
+        </el-tabs>
+        <span style="color: #3865E9 ; cursor: pointer; font-size: 14px;position: absolute;line-height: 40px;
+    right: 30px;" @click="isCollapse = !isCollapse">{{
+      isCollapse ? '收起' : '展开' }} </span>
       </p>
-      <div class="info-title"><i></i>人员数量概览</div>
-      <div style="padding: 10px 0;" class="flex j-s">
-        <div v-for="(item, index) in overviewOption" :key="index"
-          :class="currentIndex === index ? 'overview after-img' : 'overview '" @click="checkPrice(index)">
-          <span>{{ item.active }}</span>
-          <span>{{ item.name }}</span>
+      <div v-show="activeName == 1">
+        <div class="flex j-s">
+          <div class="info-title"><i></i>人员数量概览</div>
+          <div class="info-online"><i></i>在线人数：{{ onlineData }}</div>
+        </div>
+        <div style="padding: 10px 0;" class="flex j-s">
+          <div v-for="(item, index) in overviewOption" :key="index"
+            :class="currentIndex === index ? 'overview after-img' : 'overview '" @click="checkPrice(index)">
+            <span>{{ item.active }}</span>
+            <span>{{ item.name }}</span>
+          </div>
         </div>
+        <div v-show="isCollapse" class="info-title"><i></i>区域人员概览</div>
+        <el-table v-show="isCollapse" :data="overviewData" border
+          style="width: 100%; max-height: 50vh; overflow: auto;margin:15px 0" :header-cell-style="{
+            background: '#F7F7F9',
+            fontWeight: '700',
+            color: '#000',
+          }">
+          <el-table-column type="index" align="center" width="50" label="序号">
+            <template slot-scope="scope">
+              <img v-if="scope.$index == 0" src="../../assets/序号1.png" />
+              <img v-else-if="scope.$index == 1" src="../../assets/序号2.png" />
+              <img v-else-if="scope.$index == 2" src="../../assets/序号3.png" />
+              <span v-else style="text-decoration-line: underline;">{{ scope.$index + 1 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="districtName" align="center" label="区域">
+          </el-table-column>
+          <el-table-column prop="number" align="center" label="人数">
+          </el-table-column>
+          <div slot="empty" class="empty">
+            <img src="../../assets/暂无数据.png" />
+            <div class="txt">暂无数据哦</div>
+          </div>
+        </el-table>
       </div>
-      <div class="info-title"><i></i>区域人员概览</div>
-
-      <el-table v-if="isCollapse" :data="overviewData" border
-        style="width: 100%; max-height: 50vh; overflow: auto;margin:15px 0" :header-cell-style="{
-          background: '#F7F7F9',
-          fontWeight: '700',
-          color: '#000',
-        }">
-        <el-table-column type="index" align="center" width="50" label="序号">
-          <template slot-scope="scope">
-            <img v-if="scope.$index == 0" src="../../assets/序号1.png" />
-            <img v-else-if="scope.$index == 1" src="../../assets/序号2.png" />
-            <img v-else-if="scope.$index == 2" src="../../assets/序号3.png" />
-            <span v-else style="text-decoration-line: underline;">{{ scope.$index + 1 }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="districtName" align="center" label="区域">
-        </el-table-column>
-        <el-table-column prop="number" align="center" label="人数">
-        </el-table-column>
-        <div slot="empty" class="empty">
-          <img src="../../assets/暂无数据.png" />
-          <div class="txt">暂无数据哦</div>
+      <div v-show="activeName == 2">
+        <div style="margin-bottom: 10px;">
+          <span style="color: #262626;font-weight: 700;font-size: 14px;">时间筛选 </span>
+          <el-date-picker size="small" @change="historyDateFun"  v-model="historyDate" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
+            value-format="yyyy-MM-dd">
+          </el-date-picker>
         </div>
-      </el-table>
+        <div class="flex j-s">
+          <div class="info-title"><i></i>历史在线人数统计</div>
+          <div class="info-online"><i></i>在线总人数：{{ onlineHisData }}</div>
+        </div>
+        <div id="echarts_box" v-show="isCollapse" style="width: 460px;height:300px;"></div>
+
+      </div>
+
+
     </div>
     <div v-if="personnelVisible" class="info-window">
       <p class="close flex j-s">
@@ -133,6 +160,18 @@
             {{ scope.row.source == '1' ? '渠道' : '代理' }}
           </template>
         </el-table-column>
+        <el-table-column
+          label="操作">
+          <template slot-scope="scope">
+            <el-button
+            style="color:#3865E9 "
+              @click.native.prevent="historicRecords(scope.row)"
+              type="text"
+              size="small">
+              历史记录
+            </el-button>
+          </template>
+        </el-table-column>
         <div slot="empty" class="empty">
           <img src="../../assets/暂无数据.png" />
           <div class="txt">暂无数据哦</div>
@@ -144,17 +183,27 @@
         </el-pagination>
       </div>
     </div>
+    <div class="info-window input-card" v-if="circle">
+      <el-button size="small" round @click="circleEditor.open()" style="margin-bottom: 5px">开始编辑</el-button>
+      <el-button size="small" round @click="circleEditor.close()" style="margin-left:0">结束编辑</el-button>
+
+    </div>
   </div>
 </template>
 
 <script>
+import echarts from 'echarts';
 import yongchengData from '../../assets/js/yongchengData';
 import AMapLoader from "@amap/amap-jsapi-loader";
+window._AMapSecurityConfig = {
+  securityJsCode: 'd62687dd438cfadd859bbab66d8e41a2',		//安全密钥
+}
+var myChart;
 export default {
   data() {
     return {
       pageNum: 1, //当前页面
-      pageSize: 10, //每页显示条数
+      pageSize: 5, //每页显示条数
       totalSum: 0, //全部的数据条数
       tableData: [],
       marker: null,
@@ -194,10 +243,21 @@ export default {
       personnelData: [],
       personnelTotalSize: 0,
       personnelPageNum: 1,
-      position: []
+      position: [],
+      location: ["112.34988", "37.827066"],
+      circleEditor: null,
+      circle: null,
+      activeName: '1',
+      historyDate: '',
+      onlineData:'',
+      onlineHisData:'',
+      radius:'100000',
+      markers: [],
+
     };
   },
   mounted() {
+    myChart = echarts.init(document.getElementById('echarts_box'))
     this.initMap();
   },
   created() {
@@ -205,11 +265,6 @@ export default {
     this.queryPcNum()
 
     //标注文字上的点击事件
-    // window.handleDetail = id => {
-    //   this.rowId = id;
-    //   this.detail();
-    // };
-
     window.personnelclick = () => {
       this.personnelVisible = true;
     };
@@ -219,9 +274,90 @@ export default {
     this.map.destroy();
   },
   methods: {
+    historicRecords(row){
+      this.rowId=row.userId
+      this.detail()
+    },
+    handHistory(tab, event){
+      if(tab.name=='2'){
+        this.queryAnalysis();
+      }
+    },
+    historyDateFun(val){
+      this.queryAnalysis({dates:val});
+    },
+    queryAnalysis(param) {
+      this.$api.user.ipAddrGetPcAddress(param).then((res) => {
+      	if (res.code == 200) {
+          this.onlineHisData=res.data.onlineNum
+      		this.formatAnalysisDate(res.data.list)
+      	}
+        else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    formatAnalysisDate(data) {
+      const dateList = data.map(function (item) {
+        return item.time.split(" ")[1]+':00'
+      });
+      const valueList = data.map(function (item) {
+        return item.countNum;
+      });
+
+      let option = {
+        visualMap:  {
+      show: false,
+      type: 'continuous',
+      seriesIndex: 0,
+      min: 0,
+      max: 400
+    },
+     
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis:{
+            data: dateList,
+            axisLine: {
+                lineStyle: {
+                    color: "#86909C ",
+                }
+            }
+          },
+        yAxis: {
+          name: "人数", //命名
+          axisLine: {
+                lineStyle: {
+                  color: "#86909C ",
+                }
+            }
+        },
+        series:  [{
+          type: 'line',
+          showSymbol: false,
+          data: valueList,
+          lineStyle: {
+            color: {
+              type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {offset: 0, color: '#3865E9'},
+                    {offset: 1, color: '#A6D2F3'}, 
+                ],
+            }
+        }
+        }],
+      }
+      myChart.setOption(option)
+
+    },
     morelFun() {
       this.$api.user
-        .queryPcAddressInfo({ lng: this.position[0], lat: this.position[1], pageSize: 5, pageNum: this.personnelPageNum })
+        .queryPcAddressInfo({ lng: this.position[0], lat: this.position[1], source: this.source,pageSize: 5, pageNum: this.personnelPageNum })
         .then(res => {
           if (res.code == 200) {
             this.personnelTotalSize = res.data.totalSize
@@ -233,12 +369,117 @@ export default {
       this.currentIndex = index
       this.queryRegion(index == 0 ? null : index)
     },
+    onCircular() {
+      // 创建圆形编辑器对象
+      let _this = this
+      _this.map.on('click', e => {
+        let longitude = e.lnglat.lng
+        let latitude = e.lnglat.lat
+        if (_this.circle) {
+          _this.map.remove(_this.circle)
+        }
+ 
+
+        _this.circle = new AMap.Circle({
+          center: [longitude, latitude],
+          radius: this.radius, //半径
+          borderWeight: 2,
+          strokeColor: "#68B7FF",
+          strokeOpacity: 1,
+          strokeWeight: 6,
+          strokeOpacity: 0.2,
+          fillOpacity: 0.4,
+          // strokeStyle: 'dashed',
+          strokeStyle: 'solid',
+          strokeDasharray: [10, 10],
+          // 线样式还支持 'dashed'
+          // fillColor: '#1791fc',
+          fillColor: '#68B7FF',
+          zIndex: 50,
+        })
+
+        // circle.setMap(null)
+
+        _this.circle.setMap(_this.map)
+        // 缩放地图到合适的视野级别
+        _this.map.setFitView([_this.circle])
+
+        _this.onCircularFun({ latitude, longitude, radius: _this.radius })
+        _this.circleEditor = new AMap.CircleEditor(_this.map, _this.circle)
+        _this.circleEditor.on('move', function (event) {
+          _this.onCircularFun({ latitude: event.lnglat.lat, longitude: event.lnglat.lng, radius: _this.radius })
+
+        })
+        _this.circleEditor.on('adjust', function (event) {
+          _this.radius=event.radius
+          _this.onCircularFun({ latitude: event.lnglat.lat, longitude: event.lnglat.lng, radius: event.radius })
+
+        })
+
+        _this.circleEditor.on('end', function (event) {
+          console.log('触发事件： end', event)
+          // event.target 即为编辑后的圆形对象
+        })
+
+      })
+  
+  // 将点标记添加到地图map上
+    },
+   
+    async onCircularFun(data) {
+      let _this = this;
+          //  // 首先创建 AMap.Icon 实例：
+          //  var icon = new AMap.Icon({
+          //   size: new AMap.Size(40, 40), // 图标尺寸
+          //   image: '../../assets/Frame(2).png',
+          //   imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+          //   imageSize: new AMap.Size(40, 40), // 根据所设置的大小拉伸或压缩图片
+          // });
+          // // 将 Icon 实例添加到 marker 上:
+          // var marker = new AMap.Marker({
+          //   position: new AMap.LngLat(data.longitude, data.latitude),// icon在地图上显示的位置，数组内对应经纬度
+          //   offset: new AMap.Pixel(-20, -36),//设置icon在地上的偏移量
+          //   icon: icon, // 添加 Icon 实例
+          //   zoom: 13, //缩放等级
+          // });
+          // _this.map.add(marker);
+          // this.addMarker(data)
+      let res = await _this.$api.user.ipAddrLocations(data)
+        if (res.code == 200) {
+          if (res.data && res.data.length > 0) {
+            //处理后台返回要用到的数据
+            // _this.positionData = res.data.data
+            _this.positionData = res.data.map(item => ({
+              userName: item.userName,
+              id: item.id,
+              userId: item.userId,
+              address: item.address,
+              leaderName: item.leaderName,
+              // onlineImg: item.status ? "Frame-1(2).png" : "Frame(2).png",
+              onlineImg: "Frame-1(2).png",
+              operationTime: item.operationTime,
+              source: item.source,
+              // status: item.status ? "在线" : "离线",
+              positionArr: [item.longitude, item.latitude]
+            }));
+            _this.mapPoint();
+          }
+          else {
+            _this.positionData=[]
+            _this.loading = false; //地图加载完成
+          }
+        } else {
+          _this.$message.error(res.msg)
+          _this.loading = false;
+        }
+
+    },
     queryPcNum() {
       this.$api.user
         .ipAddrQueryPcNum(this.province)
         .then(res => {
           if (res.code == 200) {
-            // this.overviewForm = res.data;
+            this.onlineData = res.data.onlineNum
             this.overviewOption[0].active = res.data.allNum
             this.overviewOption[1].active = res.data.channelNum
             this.overviewOption[2].active = res.data.proxyNum
@@ -259,13 +500,39 @@ export default {
       this.currentIndex = 0
       this.queryRegion()
       this.queryPcNum()
-      this.initMap();
+      const geocoder = new AMap.Geocoder({
+        radius: 1000,
+        extensions: 'all'
+      })
+      let address = ''
+      if (this.province.province) {
+        address = this.province.province
+        if (this.province.city) {
+          address = this.province.province + this.province.city
+          if (this.province.district) {
+            address = this.province.province + this.province.city + this.province.district
+          }
+        }
+      }
+
+      geocoder.getLocation(address ? address : '山西省', (status, result) => {
+        if (status === 'complete' && result.info === 'OK') {
+          this.location = [
+            result.geocodes[0].location.lng + "",
+            result.geocodes[0].location.lat + ""
+          ]
+          this.initMap();
+        }
+      })
+
     },
     provinceChange(val) {
+      this.cityClear()
       this.province.province = this.provinceOption.find(e => e.code == val).name
       this.cityOption = this.provinceOption.find(e => e.code == val).sub
     },
     cityChange(val) {
+      this.districtClear()
       this.province.city = this.cityOption.find(e => e.code == val).name
       this.districtOption = this.cityOption.find(e => e.code == val).sub
     },
@@ -351,26 +618,30 @@ export default {
       this.personnelPageNum = val;
       this.morelFun();
     },
+
+    addMarker(data) {
+      // 清除其他icon
+      if (this.marker) {
+        this.marker.setMap(null)
+        this.marker = null
+      }
+      // 重新渲染icon
+      this.marker = new AMap.Marker({
+        // icon: '//a.amap.com/jsapi_demos/static/demo-c: this.pointenter/icons/po: this.pointi-marker-default.png',
+        icon: '../../assets/Frame(2).png',
+        position:new AMap.LngLat(data.longitude, data.latitude),
+        offset: new AMap.Pixel(-13, -30) //icon中心点的偏移量
+      })
+      this.marker.setMap(this.map) //设置icon
+    },
     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.Geocoder"] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+        plugins: ["AMap.Geocoder", 'AMap.Marker', 'AMap.CircleEditor',] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
       }).then(AMap => {
-        // AMap.plugin('AMap.Geocoder', function() {
-        //   var geocoder = new AMap.Geocoder({
-        //     // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
-        //     city: '010'
-        //   })
-
-        //   geocoder.getLocation('北京市海淀区苏州街', function(status, result) {
-        //     if (status === 'complete' && result.info === 'OK') {
-        //       // result中对应详细地理坐标信息
-        //     }
-        //   })
-        // })
 
         _this.map = new AMap.Map("containerMap", {
           //设置地图容器id
@@ -378,7 +649,8 @@ export default {
           zoom: 8, //初始化地图级别
           expandZoomRange: true, //支持可以扩展最大缩放级别
           // center: ['116.441504', '40.031386'], //初始化地图中心点位置
-          center: ["112.34988", "37.827066"],
+          center: this.location,
+          resizeEnable: true,
           // mapStyle: 'amap://styles/blue',
           mapStyle: "amap://styles/normal" //地图样式，彩色
         });
@@ -393,10 +665,12 @@ export default {
                   id: item.id,
                   userId: item.userId,
                   address: item.address,
+                  leaderName: item.leaderName,
                   // onlineImg: item.status ? "Frame-1(2).png" : "Frame(2).png",
                   onlineImg: "Frame-1(2).png",
                   operationTime: item.operationTime,
                   source: item.source,
+                  status: item.status ? "#1CE247" : "#B2B2B2",
                   // status: item.status ? "在线" : "离线",
                   positionArr: [item.longitude, item.latitude]
                 }));
@@ -410,7 +684,9 @@ export default {
               _this.loading = false;
             }
           });
+
         });
+
       });
       //放大/缩小的工具条----地图右下角的 + 和 - 按钮
       // _this.map.plugin(["AMap.ToolBar"], function () {
@@ -427,7 +703,7 @@ export default {
     },
 
     mapPoint() {
-      var _this = this;
+      let _this = this;
       /* 1.创建 LabelMarker，
       2.创建 LabelsLayer，将已创建的 LabelMarker 添加到 LabelsLayer 上
       3. 将 LabelsLayer 添加到地图实例 */
@@ -444,6 +720,7 @@ export default {
 
       _this.infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -4), closeWhenClickMap: true, }); //信息窗口
       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
@@ -457,31 +734,22 @@ export default {
             : '<div style="width:14px;height:14px;background: #00C2FF;border-radius: 50%;border: 1px solid #FFFFFF;"></div>',
           // icon: require("@/assets/" + position[i].onlineImg)
         });
-        // normalMarker.content =
-        //   '<div style="font-weight: 700;padding:20px 20px 6px 20px">员工姓名：' +
-        //   position[i].userName +
-        //   "</div>" +
-        //   '<div  style="padding:6px 20px">员工工号：' +
-        //   position[i].userId +
-        //   "</div>" +
-        //   "</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].userId +
-        //   "')\">查看详情</div>";
         normalMarker.content =
           `
-        <div style="font-weight: 700;border-bottom: 1px solid rgba(255, 255, 255, 0.85); padding: 5px 0 8px 0;"> ${position[i].source == 1 ? "渠道姓名：" : "代理人姓名："} ${position[i].userName}</div>
+        <div  style="font-weight: 700;border-bottom: 1px solid rgba(255, 255, 255, 0.85); padding: 5px 0 8px 0;"> 
+            <i style="display: inline-block;margin-right:5px;width: 8px;height: 8px;border-radius: 50%;background-color:${position[i].status}"></i>
+            <span>${position[i].source == 1 ? "渠道姓名：" : "代理人姓名："} ${position[i].userName}</span>
+        </div>
         <div style="padding: 8px 0 5px 0;">${position[i].source == 1 ? "渠道工号：" : "代理人工号："}${position[i].userId}</div>
+        <div >管理人名称： ${position[i].leaderName}</div>
         <div >地址： ${position[i].address}</div>
         <div >登录时间： ${position[i].operationTime}</div>
         `
         normalMarker.on("click", _this.markerClick);
-        normalMarker.setExtData({ id: position[i].id }); //给标注添加信息，点击时可以获取
+        normalMarker.setExtData({ id: position[i].userId }); //给标注添加信息，点击时可以获取
       }
       // 一次性将海量点添加到图层
+
       labelsLayer.add(labelMarker);
       this.loading = false; //地图加载完成
     },
@@ -490,13 +758,13 @@ export default {
       this.position = e.target._position
       // _this.morelFun()
       this.$api.user
-        .queryPcAddressInfo({ lng: e.target._position[0], lat: e.target._position[1], pageSize: 5, pageNum: this.personnelPageNum })
+        .queryPcAddressInfo({ lng: e.target._position[0], lat: e.target._position[1], source: this.source,pageSize: 5, pageNum: this.personnelPageNum })
         .then(res => {
           if (res.code == 200) {
             this.personnelTotalSize = res.data.totalSize
             this.personnelData = res.data.content
             let content = e.target.content
-            content= _this.personnelTotalSize==1?content:content+ `<div style="font-weight: 700;display: flex; justify-content: space-between;align-items: center;"> 
+            content =  e.target.content + `<div style="font-weight: 700;display: flex; justify-content: space-between;align-items: center;"> 
           <span>共${_this.personnelTotalSize}人信息</span>
            <div style="background: linear-gradient( 270deg, #225FFE 0%, #23CAFF 100%);padding:4px 8px;color:#fff;border-radius: 4px 4px 4px 4px;" onclick="personnelclick()">查看更多</div>
           </div>`
@@ -574,7 +842,16 @@ export default {
   width: 30vw;
   box-shadow: 0px 5px 10px #ddd;
 }
-
+.infohis-window{
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 100;
+  background-color: white;
+  padding: 10px;
+  width: 25vw;
+  box-shadow: 0px 5px 10px #ddd;
+}
 .personnel-window {
   position: fixed;
   bottom: 10px;
@@ -615,6 +892,19 @@ export default {
 }
 
 /deep/ {
+  .el-button--primary{
+    background: #3355FF !important;
+    border-color: #3355FF !important;
+  }
+  .el-tabs__item:hover,
+  .el-tabs__item.is-active {
+    color: #3865E9;
+  }
+
+  .el-tabs__active-bar {
+    background-color: #3865E9;
+  }
+
   .el-table__empty-text {
     line-height: 35px;
   }
@@ -680,5 +970,23 @@ export default {
   .txt {
     padding: 15px 0;
   }
+
+  .input-card {
+    width: 85px;
+    display: flex;
+    flex-direction: column;
+  }
+  .info-online{
+    font-size: 14px;
+    line-height: 30px;
+  i {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    background: #1CE247;
+    border-radius: 50%;
+    margin-right: 10px;
+  }
+  }
 }
 </style>

src/views/PeopleManage/UserMap.vue

@@ -2,31 +2,6 @@
   <div>
     <div id="container" style="width: 100%; height: 87vh" 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 class="province-window">
       <el-select size="small" v-model="provinceName" clearable placeholder="请选择省" @change="provinceChange" @clear="provinceClear">
         <el-option v-for="(option, index) in provinceOption" :key="index" :label="option.name"
@@ -64,44 +39,96 @@
         </el-switch>
       </div>
     </div>
+    <div v-if="infoWindowVisible" class="infohis-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%;  overflow: auto;"
+        :header-cell-style="{
+          background: '#F2F7FC',
+          fontWeight: '700',
+          color: '#606266',
+        }">
+        <el-table-column prop="userId" label="工号" width="150">
+        </el-table-column>
+        <el-table-column prop="userName" label="姓名" width="80">
+        </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="[5,10, 20, 30, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next"
+          :total="totalSum">
+        </el-pagination>
+      </div>
+    </div>
     <div class="personnel-window ">
       <p class="close flex j-s ">
-        <span>人员分布</span>
-        <span style="color: #3865E9 ; cursor: pointer; font-size: 14px;" @click="isCollapse = !isCollapse">{{
-          isCollapse ? '收起' : '展开' }} </span>
+        <!-- <span>人员分布</span> -->
+        <el-tabs style="position: relative;width: 100%;" v-model="activeName" @tab-click="handHistory">
+          <el-tab-pane label="人员分布" name="1"></el-tab-pane>
+          <el-tab-pane label="历史在线人数" name="2"></el-tab-pane>
+        </el-tabs>
+        <span style="color: #3865E9 ; cursor: pointer; font-size: 14px;position: absolute;line-height: 40px;
+    right: 30px;" @click="isCollapse = !isCollapse">{{
+      isCollapse ? '收起' : '展开' }} </span>
       </p>
-      <div class="info-title"><i></i>人员数量概览</div>
-      <div style="padding: 10px 0;" class="flex j-s">
-        <div v-for="(item, index) in overviewOption" :key="index"
-          :class="currentIndex === index ? 'overview after-img' : 'overview '" @click="checkPrice(index)">
-          <span>{{ item.active }}</span>
-          <span>{{ item.name }}</span>
+      <div v-show="activeName == 1">
+        <div class="flex j-s">
+          <div class="info-title"><i></i>人员数量概览</div>
+          <div class="info-online"><i></i>在线人数：{{ onlineData }}</div>
+        </div>
+        <div style="padding: 10px 0;" class="flex j-s">
+          <div v-for="(item, index) in overviewOption" :key="index"
+            :class="currentIndex === index ? 'overview after-img' : 'overview '" @click="checkPrice(index)">
+            <span>{{ item.active }}</span>
+            <span>{{ item.name }}</span>
+          </div>
         </div>
+        <div v-show="isCollapse" class="info-title"><i></i>区域人员概览</div>
+        <el-table v-show="isCollapse" :data="overviewData" border
+          style="width: 100%; max-height: 50vh; overflow: auto;margin:15px 0" :header-cell-style="{
+            background: '#F7F7F9',
+            fontWeight: '700',
+            color: '#000',
+          }">
+          <el-table-column type="index" align="center" width="50" label="序号">
+            <template slot-scope="scope">
+              <img v-if="scope.$index == 0" src="../../assets/序号1.png" />
+              <img v-else-if="scope.$index == 1" src="../../assets/序号2.png" />
+              <img v-else-if="scope.$index == 2" src="../../assets/序号3.png" />
+              <span v-else style="text-decoration-line: underline;">{{ scope.$index + 1 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="districtName" align="center" label="区域">
+          </el-table-column>
+          <el-table-column prop="number" align="center" label="人数">
+          </el-table-column>
+          <div slot="empty" class="empty">
+            <img src="../../assets/暂无数据.png" />
+            <div class="txt">暂无数据哦</div>
+          </div>
+        </el-table>
       </div>
-      <div class="info-title"><i></i>区域人员概览</div>
-
-      <el-table v-if="isCollapse" :data="overviewData" border style="width: 100%;margin: 10px 0px;" :header-cell-style="{
-        background: '#F7F7F9',
-        fontWeight: '700',
-        color: '#000',
-      }">
-      <el-table-column type="index" align="center" width="50" label="序号">
-          <template slot-scope="scope">
-            <img v-if="scope.$index == 0" src="../../assets/序号1.png" />
-            <img v-else-if="scope.$index == 1" src="../../assets/序号2.png" />
-            <img v-else-if="scope.$index == 2" src="../../assets/序号3.png" />
-            <span v-else style="text-decoration-line: underline;">{{ scope.$index + 1 }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="districtName" align="center" label="区域">
-        </el-table-column>
-        <el-table-column prop="number" align="center" label="人数">
-        </el-table-column>
-        <div slot="empty" class="empty">
-          <img src="../../assets/暂无数据.png"/>
-          <div class="txt">暂无数据哦</div>
+      <div v-show="activeName == 2">
+        <div style="margin-bottom: 10px;">
+          <span style="color: #262626;font-weight: 700;font-size: 14px;">时间筛选 </span>
+          <el-date-picker size="small" @change="historyDateFun"  v-model="historyDate" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
+            value-format="yyyy-MM-dd">
+          </el-date-picker>
+        </div>
+        <div class="flex j-s">
+          <div class="info-title"><i></i>历史在线人数统计</div>
+          <div class="info-online"><i></i>在线总人数：{{ onlineHisData }}</div>
+        </div>
+        <div id="echarts_box" v-show="isCollapse" style="width: 460px;height:300px;"></div>
+        <!-- <div v-if="isCollapse &&onlineHisData==0" class="empty" style="text-align: center;">
+            <img src="../../assets/暂无数据.png" />
+            <div class="txt">暂无数据哦</div>
+          </div> -->
       </div>
-      </el-table>
     </div>
     <div v-if="personnelVisible" class="info-window">
       <p class="close flex j-s">
@@ -121,19 +148,33 @@
             <span v-else style="text-decoration-line: underline;">{{ scope.$index + 1 }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="userName" label="姓名" width="100">
+        <el-table-column prop="userName" label="姓名" >
+        </el-table-column>
+        <el-table-column prop="id" label="工号">
         </el-table-column>
-        <el-table-column prop="userId" label="工号">
+        <el-table-column prop="leaderName" label="管理人">
         </el-table-column>
         <el-table-column prop="address" label="地址">
         </el-table-column>
-        <el-table-column prop="operationTime" label="登录时间">
+        <el-table-column prop="createTime" label="登录时间">
         </el-table-column>
         <el-table-column prop="source" label="分类">
           <template slot-scope="scope">
             {{ scope.row.source == '1' ? '渠道' : '代理' }}
           </template>
         </el-table-column>
+        <el-table-column
+          label="操作">
+          <template slot-scope="scope">
+            <el-button
+            style="color:#3865E9 "
+              @click.native.prevent="historicRecords(scope.row)"
+              type="text"
+              size="small">
+              历史记录
+            </el-button>
+          </template>
+        </el-table-column>
         <div slot="empty" class="empty">
           <img src="../../assets/暂无数据.png" />
           <div class="txt">暂无数据哦</div>
@@ -149,13 +190,18 @@
 </template>
 
 <script>
+import echarts from 'echarts';
 import yongchengData from '../../assets/js/yongchengData';
 import AMapLoader from "@amap/amap-jsapi-loader";
+window._AMapSecurityConfig = {
+  securityJsCode: 'd62687dd438cfadd859bbab66d8e41a2',		//安全密钥
+}
+var myChart;
 export default {
   data() {
     return {
       pageNum: 1, //当前页面
-      pageSize: 10, //每页显示条数
+      pageSize: 5, //每页显示条数
       totalSum: 0, //全部的数据条数
       tableData: [],
       marker: null,
@@ -195,20 +241,24 @@ export default {
       personnelData: [],
       personnelTotalSize: 0,
       personnelPageNum: 1,
-      position: []
+      position: [],
+      location: ["112.34988", "37.827066"],
+      circleEditor: null,
+      circle: null,
+      activeName: '1',
+      historyDate: '',
+      onlineData:'',
+      onlineHisData:'',
     };
   },
   mounted() {
+    myChart = echarts.init(document.getElementById('echarts_box'))
     this.initMap();
   },
   created() {
     this.queryRegion()
     this.queryPcNum()
     //标注文字上的点击事件
-    // window.handleDetail = id => {
-    //   this.rowId = id;
-    //   this.detail();
-    // };
     window.personnelclick = () => {
       this.personnelVisible = true;
     };
@@ -218,6 +268,85 @@ export default {
     this.map.destroy();
   },
   methods: {
+    historicRecords(row){
+      this.rowId=row.id
+      this.detail()
+    },
+    handHistory(tab, event){
+      if(tab.name=='2'){
+        this.queryAnalysis();
+      }
+    },
+    historyDateFun(val){
+      this.queryAnalysis({dates:val});
+    },
+    queryAnalysis(param) {
+      this.$api.user.getGeographyPosition(param).then((res) => {
+      	if (res.code == 200) {
+          this.onlineHisData=res.data.onlineNum
+      		this.formatAnalysisDate(res.data.list)
+      	}
+        else{
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    formatAnalysisDate(data) {
+      const dateList = data.map(function (item) {
+        return item.time.split(" ")[1]+':00'
+      });
+      const valueList = data.map(function (item) {
+        return item.countNum;
+      });
+
+      let option = {
+        visualMap:  {
+      show: false,
+      type: 'continuous',
+      seriesIndex: 0,
+      min: 0,
+      max: 400
+    },
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis:{
+            data: dateList,
+            axisLine: {
+                lineStyle: {
+                    color: "#86909C ",
+                }
+            }
+          },
+        yAxis: {
+          name: "人数", //命名
+          axisLine: {
+                lineStyle: {
+                  color: "#86909C ",
+                }
+            }
+        },
+        series:  [{
+          type: 'line',
+          showSymbol: false,
+          data: valueList,
+          lineStyle: {
+            color: {
+              type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {offset: 0, color: '#3865E9'},
+                    {offset: 1, color: '#A6D2F3'}, 
+                ],
+            }
+        }
+        }],
+      }
+      myChart.setOption(option)
+    },
     handlePersonnelChange(val) {
       this.personnelPageNum = val;
       this.morelFun();
@@ -241,7 +370,7 @@ export default {
         .geographyQueryPcNum(this.province)
         .then(res => {
           if (res.code == 200) {
-            this.overviewForm = res.data;
+            this.onlineData = res.data.onlineNum
             this.overviewOption[0].active = res.data.allNum
             this.overviewOption[1].active = res.data.channelNum
             this.overviewOption[2].active = res.data.proxyNum
@@ -261,7 +390,30 @@ export default {
       this.currentIndex=0
       this.queryRegion()
       this.queryPcNum()
-      this.initMap();
+      const geocoder = new AMap.Geocoder({
+        radius: 1000,
+        extensions: 'all'
+      })
+      let address = ''
+      if (this.province.province) {
+        address = this.province.province
+        if (this.province.city) {
+          address = this.province.province + this.province.city
+          if (this.province.district) {
+            address = this.province.province + this.province.city + this.province.district
+          }
+        }
+      }
+
+      geocoder.getLocation(address ? address : '山西省', (status, result) => {
+        if (status === 'complete' && result.info === 'OK') {
+          this.location = [
+            result.geocodes[0].location.lng + "",
+            result.geocodes[0].location.lat + ""
+          ]
+          this.initMap();
+        }
+      })
     },
     provinceChange(val) {
       this.province.province = this.provinceOption.find(e => e.code == val).name
@@ -349,6 +501,7 @@ export default {
       this.pageNum = val;
       this.detail();
     },
+    
     initMap() {
       var _this = this;
       // https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png
@@ -385,6 +538,7 @@ export default {
                   createTime: item.createTime,
                   deptName: item.deptName,
                   source: item.source,
+                  leaderName: item.leaderName,
                   positionArr: [item.longitude, item.latitude]
                 }));
                 _this.mapPoint();
@@ -460,6 +614,7 @@ export default {
         </div>
         <div style="padding: 8px 0 5px 0;">${position[i].source == 1 ? "渠道工号：" : "代理人工号："}${position[i].id}</div>
         <div >所属机构：${position[i].deptName}</div>
+        <div >管理人名称： ${position[i].leaderName}</div>
         <div >地址： ${position[i].address}</div>
         <div >登录时间： ${position[i].createTime}</div>
         `
@@ -513,7 +668,7 @@ export default {
             this.personnelTotalSize = res.data.totalSize
             this.personnelData = res.data.content
             let content = e.target.content
-            content= _this.personnelTotalSize==1?content:content+ `<div style="font-weight: 700;display: flex; justify-content: space-between;align-items: center;"> 
+            content=  e.target.content+ `<div style="font-weight: 700;display: flex; justify-content: space-between;align-items: center;"> 
           <span>共${_this.personnelTotalSize}人信息</span>
            <div style="background: linear-gradient( 270deg, #225FFE 0%, #23CAFF 100%);padding:4px 8px;color:#fff;border-radius: 4px 4px 4px 4px;" onclick="personnelclick()">查看更多</div>
           </div>`
@@ -623,10 +778,19 @@ export default {
   z-index: 100;
   background-color: white;
   padding: 10px;
-  width: 30vw;
+  width: 32vw;
+  box-shadow: 0px 5px 10px #ddd;
+}
+.infohis-window{
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 100;
+  background-color: white;
+  padding: 10px;
+  width: 25vw;
   box-shadow: 0px 5px 10px #ddd;
 }
-
 .personnel-window {
   position: fixed;
   bottom: 10px;
@@ -639,9 +803,7 @@ export default {
 }
 
 .bottomFixed {
-  height: 50px;
-  position: absolute;
-  bottom: 0;
+  text-align: right;
   width: 100%;
   background: #fff;
   margin-top: 10px;
@@ -669,6 +831,18 @@ export default {
 }
 
 /deep/ {
+  .el-button--primary{
+    background: #3355FF !important;
+    border-color: #3355FF !important;
+  }
+  .el-tabs__item:hover,
+  .el-tabs__item.is-active {
+    color: #3865E9;
+  }
+
+  .el-tabs__active-bar {
+    background-color: #3865E9;
+  }
   .el-table__empty-text{
     line-height: 35px;
   }
@@ -732,5 +906,22 @@ export default {
   .txt{
     padding: 15px 0;
   }
+  .input-card {
+    width: 85px;
+    display: flex;
+    flex-direction: column;
+  }
+  .info-online{
+    font-size: 14px;
+    line-height: 30px;
+    i {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      background: #1CE247;
+      border-radius: 50%;
+      margin-right: 10px;
+    }
+  }
 }
 </style>

src/views/Task/daikeComponents/KtLetter.vue

@@ -1113,7 +1113,7 @@
                   <span style="color: #d42426; font-weight: bold">
                     ￥{{ reslistitem.result.sumPermium }}
                   </span>
-                  <span style="font-size: 13px; color: #2d4d89" class="m-top-5">优惠：{{ reslistitem.result.sumExportFee
+                  <span style="font-size: 13px; color: #2d4d89" class="m-top-5">{{reslistitem.result.feeView?'总科技币：':'优惠：'}}{{ reslistitem.result.sumExportFee
                   }}</span>
                 </div>
               </el-col>
@@ -1122,7 +1122,7 @@
                   <span style="color: #d42426; font-weight: bold">
                     ￥{{ reslistitem.result.jqPremium }}
                   </span>
-                  <span v-if="reslistitem.result.jqPremium" style="font-size: 13px; color: #2d4d89" class="m-top-5">优惠：{{
+                  <span v-if="reslistitem.result.jqPremium" style="font-size: 13px; color: #2d4d89" class="m-top-5">{{reslistitem.result.feeView?'掌柜科技币：':'优惠：'}}{{
                     reslistitem.result.jqExportFee }}</span>
                 </div>
               </el-col>
@@ -1136,7 +1136,7 @@
                   <span style="color: #d42426; font-weight: bold">
                     ￥{{ reslistitem.result.syPremium }}
                   </span>
-                  <span v-if="reslistitem.result.syPremium" style="font-size: 13px; color: #2d4d89" class="m-top-5">优惠：{{
+                  <span v-if="reslistitem.result.syPremium" style="font-size: 13px; color: #2d4d89" class="m-top-5">{{reslistitem.result.feeView?'掌柜科技币：':'优惠：'}}{{
                     reslistitem.result.syExportFee }}</span>
                 </div>
               </el-col>
@@ -1149,7 +1149,7 @@
                       : "无"
                     }}
                   </span>
-                  <span v-if="reslistitem.result.jyPremium" style="font-size: 13px; color: #2d4d89" class="m-top-5">优惠：{{
+                  <span v-if="reslistitem.result.jyPremium" style="font-size: 13px; color: #2d4d89" class="m-top-5">{{reslistitem.result.feeView?'掌柜科技币：':'优惠：'}}{{
                     reslistitem.result.noExportFee }}</span>
                 </div>
               </el-col>