修改定位

src/api/system/index.js

@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+// 查询部门列表
+export function block(query) {
+  return request({
+    url: '/homeController/block',
+    method: 'get',
+    params: query
+  })
+}
+
+export function columnar(query) {
+  return request({
+    url: '/homeController/columnar',
+    method: 'get',
+    params: query
+  })
+}
+
+export function ranking(query) {
+  return request({
+    url: '/homeController/ranking',
+    method: 'get',
+    params: query
+  })
+}

src/components/map/map.vue

@@ -0,0 +1,434 @@
+<template>
+  <div id="wrap">
+    <div id="searchWrap">
+      <!-- <div class="searchWrap">
+        <input type="text" v-model="address" @input="search" /><button
+          @click="search"
+        >
+          搜索
+        </button>
+      </div> -->
+      <div id="result" class="amap_lib_placeSearch" v-show="hide">
+        <div
+          class="amap_lib_placeSearch_list amap-pl-pc"
+          v-for="(item, index) in poiArr"
+          @click="openMarkerTipById(index, $event)"
+          @mouseout="onmouseout_MarkerStyle(index + 1, $event)"
+          :key="index"
+        >
+          <div class="poibox" style="border-bottom: 1px solid #eaeaea">
+            <div
+              class="amap_lib_placeSearch_poi poibox-icon"
+              :class="index == selectedIndex ? 'selected' : ''"
+            >
+              {{ index + 1 }}
+            </div>
+            <div
+              class="poi-img"
+              v-if="item.url"
+              :style="
+                'background-image:url(' +
+                item.url +
+                '?operate=merge&amp;w=90&amp;h=56&amp;position=5)'
+              "
+            ></div>
+            <h3 class="poi-title">
+              <span class="poi-name">{{ item.name }}</span>
+            </h3>
+            <div class="poi-info">
+              <p class="poi-addr">地址：{{ item.address }}</p>
+              <p class="poi-tel">电话：{{ item.tel }}</p>
+            </div>
+            <div class="clear"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="iCenter"></div>
+    <!-- <button class="btn" @click="fetAddressName">获取当前位置和名字</button> -->
+  </div>
+</template>
+<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=5df9445f578191c7d4fd5f3ce6b8712c"></script>
+<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
+<script>
+import AMapLoader from "@amap/amap-jsapi-loader";
+window._AMapSecurityConfig = {
+  securityJsCode: "b5c2691e1ffcf58a735e502081ae781f",
+};
+export default {
+  props: ["newAddress", "dataObj"], // 父组件传过来的地址和地址经纬度信息，
+  data() {
+    return {
+      address: this.newAddress ? this.newAddress : "郑州", //保存地址的汉字名字
+      map1: "",
+      map: "", //保存地址的经纬度
+      poiArr: [], //左边搜索出来的数组
+      windowsArr: [], //信息窗口的数组
+      marker: [],
+      mapObj: "", //地图对象
+      selectedIndex: -1,
+      hide: true,
+      clickType: 1,
+      location: {
+        P: this.dataObj.lat,
+        Q: this.dataObj.lng,
+      },
+      aMap:null,
+      addressData:{}
+    };
+  },
+  mounted() {
+    console.log(333, this.dataObj, this.location);
+    this.mapInit();
+    // this.placeSearch(this.address);
+  },
+  methods: {
+    showToast(address) {
+      // this.placeSearch(address.address);
+      console.log(444, address);
+      this.location.P = address.lat;
+      this.location.Q = address.lng;
+      this.address = address.address;
+      let that = this;
+      new AMap.InfoWindow({
+        content: "<h3>" + "当前选中地址" + "</h3>" + that.address,
+        size: new AMap.Size(300, 0),
+        autoMove: true,
+        offset: new AMap.Pixel(-4, -10),
+      }).open(that.mapObj, that.location);
+    },
+    cancelSave() {
+      eventBus.$emit("cancelSave");
+    },
+    saveAddress() {
+      let addressName, location;
+      if (this.clickType == 1) {
+        let address = this.poiArr[this.selectedIndex];
+        addressName = address.name + address.address;
+        location = address.location;
+        console.log(address.name + address.address, address.location);
+      } else if (this.clickType == 2) {
+        console.log(this.address, this.map);
+        addressName = this.address;
+        location = this.map;
+      } else if (this.clickType == 3) {
+        console.log(this.address, this.map1);
+        addressName = this.address;
+        location = this.map1;
+      }
+      eventBus.$emit("saveAddress", [addressName, location]);
+    },
+    // 经纬度转化为详细地址
+    getAddress(lng,lat) {
+      let that = this;
+      AMap.plugin("AMap.Geocoder", function () {
+        let geocoder = new AMap.Geocoder({
+          radius: 100,
+          extensions: "all",
+        });
+        geocoder.getAddress(
+          // [that.map1.lng, that.map1.lat],
+          [lng,lat],
+          function (status, result) {
+            if (status === "complete" && result.info === "OK") {
+              let address = result.regeocode.formattedAddress;
+              // console.log(result.regeocode);
+              // that.address = result.regeocode.formattedAddress;
+              that.addressData.addressName = result.regeocode.formattedAddress
+              that.$emit('uploadAddress',that.addressData)
+              // that.placeSearch(that.address)
+            }
+          }
+        );
+      });
+    },
+    // 地图点击事件
+    // testevent() {
+    //   let that = this;
+    //   this.clickType = 3;
+    //   // var map=new AMap.Map('iCenter');//重新new出一个对象，传入参数是div的id
+    //   // console.log(this.mapEl);
+    //   this.mapEl.event.addListener(this.mapObj, "click", function (e) {
+    //   // this.aMap.event.addListener(this.mapObj, "click", function (e) {
+    //     //添加点击事件,传入对象名，事件名，回调函数
+    //     that.map1 = e.lnglat;
+    //     that.getAddress();
+    //     setTimeout(() => {
+    //       new AMap.InfoWindow({
+    //         content: "<h3>" + "当前选中地址" + "</h3>" + that.address,
+    //         size: new AMap.Size(300, 0),
+    //         autoMove: true,
+    //         offset: new AMap.Pixel(-4, -10),
+    //       }).open(that.mapObj, e.lnglat);
+    //     }, 100);
+    //   });
+    // },
+    //创建一个map
+    mapInit() {
+      AMapLoader.reset();
+      AMapLoader.load({
+        key: "5df9445f578191c7d4fd5f3ce6b8712c", // 申请好的Web端开发者Key，首次调用 load 时必填
+        version: "2.0", // 指定要加载的 JSAPI 的版本，缺少时默认为 1.4.15
+        plugins: [
+          "AMap.AutoComplete",
+          "AMap.Marker",
+          "AMap.PlaceSearch",
+          "AMap.Geolocation",
+        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+      }).then((AMap) => {
+        this.aMap = AMap;
+        // 设置地图容器id
+        this.mapEl = new AMap.Map("result", {
+          resizeEnable: true,
+          viewMode: "3D", // 是否为3D地图模式
+          zoom: 12, // 初始化地图级别
+          // center: [116.397428, 39.90923] // 初始化地图中心点位置  默认当前行政区
+        });
+        // this.autoComplete = new AMap.AutoComplete({
+        //   city: "全国",
+        // });
+        // if (this.info.lng && this.info.lat) {
+        //   this.addmark(this.currentAddr);
+        // }
+        this.mapEl.on("click", (e) => {
+          this.addressData.latitude = e.lnglat.getLat()
+          this.addressData.longitude = e.lnglat.getLng()
+          this.getAddress(e.lnglat.getLng(), e.lnglat.getLat());
+        });
+      });
+
+      // this.mapObj = new AMap.Map("iCenter", {
+      //   resizeEnable: true,
+      //   zoom: 10,
+      // });
+      // this.testevent();
+    },
+    //根据名字地址去搜索结果
+    // placeSearch(name) {
+    //   let that = this;
+    //   this.hide = true;
+    //   var MSearch;
+    //   this.mapObj.plugin(
+    //     ["AMap.PlaceSearch", "AMap.ToolBar", "AMap.Scale"],
+    //     () => {
+    //       this.mapObj.addControl(new AMap.ToolBar());
+    //       this.mapObj.addControl(new AMap.Scale());
+    //       MSearch = new AMap.PlaceSearch({
+    //         //构造地点查询类
+    //         city: that.address, //城市
+    //       });
+    //       AMap.event.addListener(
+    //         MSearch,
+    //         "complete",
+    //         this.keywordSearch_CallBack
+    //       ); //返回地点查询结果
+    //       MSearch.search(name); //关键字查询
+    //     }
+    //   );
+    // },
+    //结果的回调
+    keywordSearch_CallBack(data) {
+      console.log(111, data);
+      var poiArr = data.poiList.pois;
+      var resultCount = poiArr.length;
+      this.poiArr = poiArr; //左边要渲染的数据
+      for (var i = 0; i < resultCount; i++) {
+        this.addmarker(i, poiArr[i]);
+        console.log(poiArr[i]);
+        this.poiArr[i].url = this.poiArr[i].photos
+          ? this.poiArr[i].photos[0]
+            ? this.poiArr[i].photos[0].url
+            : ""
+          : "";
+      }
+      this.mapObj.setFitView();
+    },
+    //添加marker&infowindow
+    addmarker(i, d) {
+      var lngX = d.location.getLng();
+      var latY = d.location.getLat();
+      console.log(lngX, latY);
+      var markerOption = {
+        map: this.mapObj,
+        position: new AMap.LngLat(lngX, latY),
+      };
+      var mar = new AMap.Marker(markerOption);
+      this.marker.push(new AMap.LngLat(lngX, latY));
+      var infoWindow = new AMap.InfoWindow({
+        content:
+          "<h3>" +
+          "当前选中位置：" +
+          d.name +
+          "</h3>" +
+          this.TipContents(d.name, d.address),
+        size: new AMap.Size(300, 0),
+        autoMove: true,
+        offset: new AMap.Pixel(0, -30),
+      });
+      console.log();
+      this.windowsArr.push(infoWindow);
+      var _this = this;
+      var aa = (e) => {
+        this.clickType = 2;
+        var obj = mar.getPosition();
+        this.map = obj; //这里保存的地址经纬度
+        this.address = d.name + d.address; //这里保存的是地址名字
+        infoWindow.open(_this.mapObj, obj);
+      };
+      AMap.event.addListener(mar, "click", aa);
+    },
+    TipContents(name, address) {
+      //窗体内容
+      if (
+        name == "" ||
+        name == "undefined" ||
+        name == null ||
+        name == " undefined" ||
+        typeof name == "undefined"
+      ) {
+        type = "暂无";
+      }
+      if (
+        address == "" ||
+        address == "undefined" ||
+        address == null ||
+        address == " undefined" ||
+        typeof address == "undefined"
+      ) {
+        address = "暂无";
+      }
+      var str = `地址：${address}`;
+      return str;
+    },
+    openMarkerTipById(pointid, event) {
+      //根据id 打开搜索结果点tip
+      this.clickType = 1;
+      event.currentTarget.style.background = "#CAE1FF";
+      this.selectedIndex = pointid;
+      // this.map = this.marker[pointid]
+      this.map1 = this.poiArr[pointid].location;
+      console.log(222, this.mapObj, this.marker[pointid]);
+      console.log(this.marker[pointid], this.poiArr[pointid]);
+      this.address = this.poiArr[pointid].address + this.poiArr[pointid].name;
+      this.windowsArr[pointid].open(this.mapObj, this.marker[pointid]);
+    },
+    onmouseout_MarkerStyle(pointid, event) {
+      //鼠标移开后点样式恢复
+      event.currentTarget.style.background = "";
+    },
+    search() {
+      this.windowsArr = [];
+      this.marker = [];
+
+      this.mapObj = "";
+      this.mapInit();
+      // this.placeSearch(this.address);
+    },
+  },
+};
+</script>
+<style lang="scss">
+#wrap {
+  width: 100%;
+  display: flex;
+  #iCenter {
+    height: 400px;
+    position: relative;
+    display: flex;
+    flex: 1;
+  }
+  #searchWrap {
+    width: 100%;
+    position: relative;
+    height: 400px;
+    .searchWrap {
+      position: absolute;
+      width: 100%;
+      z-index: 9;
+      display: flex;
+      align-items: center;
+      input {
+        width: 260px;
+        height: 24px;
+      }
+      button {
+        width: 36px;
+        height: 28px;
+      }
+    }
+    #result {
+      width: 100%;
+      position: absolute;
+      top: 30px;
+      height: 100%;
+      z-index: 8;
+      overflow-y: scroll;
+      border-right: 1px solid #ccc;
+    }
+  }
+  .amap_lib_placeSearch {
+    height: 100%;
+    overflow-y: scroll;
+    .poibox {
+      border-bottom: 1px solid #eaeaea;
+      cursor: pointer;
+      padding: 5px 0 5px 10px;
+      position: relative;
+      min-height: 35px;
+      .selected {
+        background-image: url(https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png) !important;
+      }
+      &:hover {
+        background: #f6f6f6;
+      }
+      .poi-img {
+        float: right;
+        margin: 3px 8px 0;
+        width: 90px;
+        height: 56px;
+        overflow: hidden;
+      }
+      .poi-title {
+        margin-left: 25px;
+        font-size: 13px;
+        overflow: hidden;
+      }
+      .poi-info {
+        word-break: break-all;
+        margin: 0 0 0 25px;
+        overflow: hidden;
+        p {
+          color: #999;
+          font-family: Tahoma;
+          line-height: 20px;
+          font-size: 12px;
+        }
+      }
+      .poibox-icon {
+        margin-left: 7px;
+        margin-top: 4px;
+      }
+      .amap_lib_placeSearch_poi {
+        background: url(https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png)
+          no-repeat;
+        height: 31px;
+        width: 19px;
+        cursor: pointer;
+        left: -1px;
+        text-align: center;
+        color: #fff;
+        font: 12px arial, simsun, sans-serif;
+        padding-top: 3px;
+        position: absolute;
+      }
+    }
+  }
+  .btn {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    padding: 10px;
+  }
+}
+</style>
+

src/main.js

@@ -5,6 +5,11 @@ import Cookies from 'js-cookie'
 import Element from 'element-ui'
 import './assets/styles/element-variables.scss'
 
+// 引入 echarts
+import * as echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+
+
 import '@/assets/styles/index.scss' // global css
 import '@/assets/styles/ruoyi.scss' // ylx css
 import App from './App'

src/views/index.vue

@@ -1,85 +1,350 @@
 <template>
   <div class="app-container home">
-    11111
+    <div class="contrast">
+      <div class="contrast_data">
+        <div class="top">营业额</div>
+        <div class="center">
+          {{ upOrderNum.turnover }}
+        </div>
+        <div class="bnottom">{{ Turnover }}%,同上月对比</div>
+        <!-- <div class="bnottom"> {{0+ (300-200)/200 *100}}%,同上月对比</div> -->
+      </div>
+      <div class="contrast_data">
+        <div class="top">订单量</div>
+        <div class="center">
+          {{ upOrderNum.upOrderNum }}
+        </div>
+        <div class="bnottom">{{ order }}%,同上月对比</div>
+      </div>
+      <div class="contrast_data">
+        <div class="top">提现</div>
+        <div class="center">
+          {{ upOrderNum.getAmount }}
+        </div>
+        <div class="bnottom">
+          <!-- {{ getAmount.slice(0,6)}}%,同上月对比 -->
+          {{ 
+    (typeof getAmount === 'string' && getAmount.length > 0) ? 
+      getAmount.slice(0, 6) + (getAmount.length > 6 ? '' : '') + '%,同上月对比' :
+      '数据无效'
+  }}
+        </div>
+      </div>
+      <div class="contrast_data">
+        <div class="top">用户总数</div>
+        <div class="center">
+          {{ upOrderNum.userNum }}
+        </div>
+        <div class="bnottom">{{ userNum }}%,同上月对比</div>
+      </div>
+      <div class="contrast_data">
+        <div class="top">教练数量</div>
+        <div class="center">
+          {{ upOrderNum.upJsNum }}
+        </div>
+        <div class="bnottom">{{ jsNum }}%,同上月对比</div>
+      </div>
+    </div>
+    <div class="chart">
+      <div class="left">
+        <div class="title">销售金额</div>
+        <div class="chart_box">
+          <div class="bar_chart" ref="barChart"></div>
+        </div>
+      </div>
+      <div class="left">
+        <div class="title">技师营业额排名</div>
+        <div class="chart_box">
+          <el-date-picker
+            v-model="value2"
+            type="daterange"
+            align="right"
+            unlink-panels
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :picker-options="pickerOptions"
+            value-format = "yyyy-MM-dd"
+            @change="ranking"
+          >
+          </el-date-picker>
+          <div class="js_num">
+            <div class="js" v-for="(item, index) in jsList" :key="index">
+              <div>
+                <span class="serial">{{ index + 1 }}</span>
+                <span> {{ item.name }}</span>
+              </div>
+
+              <span class="num">{{ item.orderNum }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import { block,columnar,ranking } from "@/api/system/index";
+import { getInfo } from "@/api/login";
 export default {
   name: "Index",
   data() {
     return {
-      // 版本号
-      version: "3.8.7"
+      contrastList: [
+        {
+          title: "营业额",
+          num: "1515515",
+          rate: "+20%",
+        },
+        {
+          title: "订单量",
+          num: "1515515",
+          rate: "+20%",
+        },
+        {
+          title: "提现",
+          num: "1515515",
+          rate: "+20%",
+        },
+        {
+          title: "用户总数",
+          num: "1515515",
+          rate: "+20%",
+        },
+        {
+          title: "教练数量",
+          num: "1515515",
+          rate: "+20%",
+        },
+      ],
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+      value2: "",
+      jsList: [],
+      upOrderNum: {},
+      Turnover: 0,
+      order: 0,
+      getAmount: 0,
+      userNum: 0,
+      jsNum: 0,
+      source:[],
+      deptId:''
     };
   },
+  mounted() {
+    this.getInfo();
+  },
   methods: {
+    ranking(){
+      let data = {};
+      data.deptId = this.deptId;
+      data.start = this.value2[0]
+      data.end = this.value2[1]
+      console.log(this.value2);
+      ranking(data).then(res => {
+        this.jsList = res
+      })
+    },
+    columnar(deptId){
+      let data = {};
+      data.deptId = deptId;
+      columnar(data).then(res => {
+        this.source = res
+         // 初始化 echarts
+    this.initBarChart();
+      })
+    },
+    getInfo() {
+      getInfo().then((res) => {
+        this.deptId = res.user.dept.deptId
+        this.getblock(res.user.dept.deptId);
+        this.columnar(res.user.dept.deptId);
+        this.ranking(res.user.dept.deptId);
+      });
+    },
+    getblock(deptId) {
+      let data = {};
+      data.deptId = deptId;
+      block(data).then((res) => {
+        this.upOrderNum = res;
+        (res.turnover - res.upTurnover) / res.upTurnover >= 0
+          ? (this.Turnover =
+              "+" + ((res.turnover - res.upTurnover) / res.upTurnover) * 100)
+          : (this.Turnover =
+              "" + ((res.turnover - res.upTurnover) / res.upTurnover) * 100);
+        (res.orderNum - res.upOrderNum) / res.upOrderNum >= 0
+          ? (this.order =
+              "+" + ((res.orderNum - res.upOrderNum) / res.upOrderNum) * 100)
+          : (this.order =
+              "" + ((res.orderNum - res.upOrderNum) / res.upOrderNum) * 100);
+        (res.getAmount - res.upGetAmount) / res.upGetAmount >= 0
+          ? (this.getAmount =
+              "+" + ((res.getAmount - res.upGetAmount) / res.upGetAmount) * 100)
+          : (this.getAmount =
+              "" + ((res.getAmount - res.upGetAmount) / res.upGetAmount) * 100);
+        (res.userNum - res.upUserNum) / res.upUserNum >= 0
+          ? (this.userNum =
+              "+" + ((res.userNum - res.upUserNum) / res.upUserNum) * 100)
+          : (this.userNum =
+              "" + ((res.userNum - res.upUserNum) / res.upUserNum) * 100);
+        (res.jsNum - res.upJsNum) / res.upJsNum >= 0
+          ? (this.jsNum = "+" + ((res.jsNum - res.upJsNum) / res.upJsNum) * 100)
+          : (this.jsNum = "" + ((res.jsNum - res.upJsNum) / res.upJsNum) * 100);
+      });
+    },
+
+    initBarChart() {
+      // 通过 $ref 进行挂载
+      let myChart = this.$echarts.init(this.$refs.barChart);
+      let option = {
+        legend: {},
+        tooltip: {},
+        dataset: {
+          dimensions: ["横坐标", "营业额", "教练总数", "用户总数","订单数量","提现金额"],
+          source:this.source,
+          // source: [
+          //   { product: "Matcha Latte", 2015: 43.3, 2016: 85.8, 2017: 93.7 },
+          //   { product: "Milk Tea", 2015: 83.1, 2016: 73.4, 2017: 55.1 },
+          //   { product: "Cheese Cocoa", 2015: 86.4, 2016: 65.2, 2017: 82.5 },
+          //   { product: "Walnut Brownie", 2015: 72.4, 2016: 53.9, 2017: 39.1 },
+          // ],
+        },
+        xAxis: { type: "category" },
+        yAxis: {},
+        // Declare several bar series, each will be mapped
+        // to a column of dataset.source by default.
+        series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }, { type: "bar" }, { type: "bar" }],
+      };
+      option && myChart.setOption(option);
+    },
+
     goTarget(href) {
       window.open(href, "_blank");
-    }
-  }
+    },
+  },
 };
 </script>
 
 <style scoped lang="scss">
 .home {
-  blockquote {
-    padding: 10px 20px;
-    margin: 0 0 20px;
-    font-size: 17.5px;
-    border-left: 5px solid #eee;
-  }
-  hr {
-    margin-top: 20px;
-    margin-bottom: 20px;
-    border: 0;
-    border-top: 1px solid #eee;
-  }
-  .col-item {
-    margin-bottom: 20px;
-  }
-
-  ul {
-    padding: 0;
-    margin: 0;
-  }
-
-  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 13px;
-  color: #676a6c;
-  overflow-x: hidden;
-
-  ul {
-    list-style-type: none;
-  }
-
-  h4 {
-    margin-top: 0px;
-  }
-
-  h2 {
-    margin-top: 10px;
-    font-size: 26px;
-    font-weight: 100;
-  }
-
-  p {
-    margin-top: 10px;
-
-    b {
-      font-weight: 700;
+  width: 100%;
+  height: 100%;
+  .contrast {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    .contrast_data {
+      width: 18%;
+      height: 150px;
+      background: linear-gradient(to right, #338aef, #3498f2);
+      padding: 10px;
+      padding-left: 20px;
+      box-sizing: border-box;
+      border-radius: 10px;
+      color: #fff;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      .top {
+        font-size: 20px;
+      }
+      .center {
+        font-size: 26px;
+      }
+      .bottom {
+        font-size: 18px;
+      }
     }
   }
-
-  .update-log {
-    ol {
-      display: block;
-      list-style-type: decimal;
-      margin-block-start: 1em;
-      margin-block-end: 1em;
-      margin-inline-start: 0;
-      margin-inline-end: 0;
-      padding-inline-start: 40px;
+  .chart {
+    width: 100%;
+    height: 600px;
+    margin: 30px 0px;
+    // border: 1px solid lightcoral;
+    display: flex;
+    justify-content: space-between;
+    .left {
+      width: 48%;
+      height: 100%;
+      .title {
+        font-size: 20px;
+        font-weight: 700;
+        margin-bottom: 20px;
+        padding: 10px 0px;
+        color: #303133;
+        border-bottom: 1px solid #999;
+      }
+      .chart_box {
+        width: 100%;
+        height: 90%;
+        .bar_chart {
+          width: 100%;
+          height: 110%;
+          canvas {
+            width: 100% !important;
+          }
+        }
+        .js_num {
+          width: 100%;
+          height: 90%;
+          .js {
+            width: 100%;
+            margin-top: 19px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            span {
+              display: inline-block;
+              // width: 30px;
+              height: 30px;
+              text-align: center;
+              line-height: 30px;
+            }
+            .serial {
+              display: inline-block;
+              width: 30px;
+              height: 30px;
+              border-radius: 50%;
+              background-color: #338aef;
+              color: #fff;
+              text-align: center;
+              line-height: 30px;
+              margin-right: 30px;
+            }
+          }
+        }
+      }
     }
   }
 }

src/views/technician/details/details.vue

@@ -201,8 +201,9 @@
         </el-input>
       </el-form-item>
       <el-form-item label="地址：">
-        <el-input v-model="jsInfos.address"></el-input>
+        <el-input v-model="jsInfos.address" ></el-input>
       </el-form-item>
+      <Map :newAddress="newAddress" :dataObj="addr" @uploadAddress="uploadAddressData" />
       <!-- <el-form-item label="是否带头像框：" prop="nB1">
         <el-radio-group v-model="jsInfos.nB1">
           <el-radio :label="0">否</el-radio>
@@ -222,7 +223,7 @@
         </el-radio-group>
       </el-form-item> -->
 
-      <div style="text-align: justify; margin-top: 20px; margin-bottom: 20px">
+      <div style="text-align: justify; margin-top: 50px; margin-bottom: 20px">
         <el-button type="primary" @click="addComplaintShow(jsInfos.id,jsInfos)"
           >添加评论</el-button
         >
@@ -296,12 +297,15 @@ import {
   getDept,
 } from "@/api/system/js";
 import { upload } from "@/api/public";
+import Map from '@/components/map/map.vue';
 export default {
+  components: {
+    Map
+  },
   data() {
     return {
       options: [],
       value: "",
-
       dialogFormVisible: false,
       jsInfos: {},
       uploadInfos: {
@@ -316,6 +320,9 @@ export default {
         name: "",
       },
       headimg: "",
+      show: false,
+      addr: {},
+      newAddress:'太原'
     };
   },
   mounted() {
@@ -325,6 +332,13 @@ export default {
     this.getDept();
   },
   methods: {
+    uploadAddressData(payload){
+      console.log(payload);
+      this.jsInfos.latitude =payload.latitude
+      this.jsInfos.longitude =payload.longitude
+      this.jsInfos.address =payload.addressName
+
+    },
     handleSelectionChange(val) {
       this.jsInfos.deptId = val.deptId;
       this.jsInfos.city = val.deptName;
@@ -742,6 +756,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.map_point {
+  .open {
+    width: 460px;
+    margin: 300px auto;
+    .info {
+      margin-bottom: 20px;
+    }
+  }
+}
 .el-form-item {
   align-items: center;
 }