diff --git a/yanzhu-bigscreen/public/images/map/WEB_3578CFDB64B74818851FE993E99B2274.png b/yanzhu-bigscreen/public/images/map/WEB_3578CFDB64B74818851FE993E99B2274.png
new file mode 100644
index 00000000..38d33169
Binary files /dev/null and b/yanzhu-bigscreen/public/images/map/WEB_3578CFDB64B74818851FE993E99B2274.png differ
diff --git a/yanzhu-bigscreen/src/api/machmater.js b/yanzhu-bigscreen/src/api/machmater.js
index db871857..483bfb35 100644
--- a/yanzhu-bigscreen/src/api/machmater.js
+++ b/yanzhu-bigscreen/src/api/machmater.js
@@ -1,5 +1,6 @@
 import request from '@/utils/request'
 
+//机智管家-管理指标
 const machGetManageQuota=(projectId)=>{
     return request({
         url: '/manage/bgscreen/machMater/machGetManageQuota',
@@ -9,8 +10,132 @@ const machGetManageQuota=(projectId)=>{
         }
     })
 }
+//机智管家-设备概况
+const machGetEquipmentOverview=(projectId)=>{
+    return request({
+        url: '/manage/bgscreen/machMater/machGetEquipmentOverview',
+        method: 'get',
+        params: {
+            projectId: projectId
+        }
+    })
+}
 
-//时间段内工号申领情况
+
+//机智管家-操作证情况
+const machGetCertInfoData=(projectId)=>{
+    return request({
+        url: '/manage/bgscreen/machMater/machGetCertInfoData',
+        method: 'get',
+        params: {
+            projectId: projectId
+        }
+    })
+}
+
+//机智管家-机械地图数据
+const machSelectMachineMapData=(projectId)=>{
+    return request({
+        url: '/manage/bgscreen/machMater/machSelectMachineMapData',
+        method: 'get',
+        params: {
+            projectId: projectId
+        }
+    })
+}
+
+//机智管家-获取地图项目列表
+const machGetMapData=(projectId)=>{
+    return request({
+        url: '/manage/bgscreen/machMater/machGetMapData',
+        method: 'get',
+        params: {
+            projectId: projectId
+        }
+    })
+}
+
+//机智管家-设备详情
+const machGetMachineInfo=(projectId,deviceNum)=>{
+    return request({
+        url: '/manage/bgscreen/machMater/machGetMachineInfo',
+        method: 'get',
+        params: {
+            projectId: projectId,
+            deviceNum:deviceNum
+        }
+    })
+}
+
+//机智管家-分类及工时情况
+const machGetClassifyWorks=(projectId)=>{
+    return request({
+        url: '/manage/bgscreen/machMater/machGetClassifyWorks',
+        method: 'get',
+        params: {
+            projectId: projectId
+        }
+    })
+}
+
+//机智管家-设备详情Url
+const machGetSystemDeviceInfoUrl=(projectId,deviceNum)=>{
+    return request({
+        url: '/manage/bgscreen/machMater/machGetSystemDeviceInfoUrl',
+        method: 'get',
+        params: {
+            projectId: projectId,
+            deviceNum:deviceNum
+        }
+    })
+}
+
+
+//机智管家-监控预警
+const machGetClockInException=(projectId,pageSize)=>{
+    return request({
+        url: '/manage/bgscreen/machMater/machGetClockInException',
+        method: 'get',
+        params: {
+            projectId: projectId,
+            pageSize:pageSize
+        }
+    })
+}
+
+//机智管家-根据项目获取设备信息
+const machGetDeviceInfoByProjectId=(projectId)=>{
+    return request({
+        url: '/manage/bgscreen/machMater/machGetDeviceInfoByProjectId',
+        method: 'get',
+        params: {
+            projectId: projectId
+        }
+    })
+}
+
+//机智管家-获取异常预警
+const machGetExceptionAlert=(projectId,size)=>{
+    return request({
+        url: '/manage/bgscreen/machMater/machGetExceptionAlert',
+        method: 'get',
+        params: {
+            projectId: projectId,
+            size:size
+        }
+    })
+}
+
+//材料销号制-获取工号信息
+const materGetConcreteMaterialActQuantityGhInfoService=data=>{
+    return request({
+        url: '/manage/bgscreen/machMater/materGetConcreteMaterialActQuantityGhInfoService',
+        method: 'get',
+        params: data
+    })
+}
+
+//材料销号制-时间段内工号申领情况
 const materGetConcreteMaterialActQuantityBuildingNoInfoService=data=>{
     return request({
         url: '/manage/bgscreen/machMater/materGetConcreteMaterialActQuantityBuildingNoInfoService',
@@ -19,7 +144,58 @@ const materGetConcreteMaterialActQuantityBuildingNoInfoService=data=>{
     })
 }
 
+//材料销号制-获取用量情况统计服务
+const materGetProjectChaoHaoStatisticsRPTService=data=>{
+    return request({
+        url: '/manage/bgscreen/machMater/materGetProjectChaoHaoStatisticsRPTService',
+        method: 'get',
+        params: data
+    })
+}
+
+//材料销号制-获取超耗原因分析(混凝土)
+const materGetReportConcreteExceedReasonService=data=>{
+    return request({
+        url: '/manage/bgscreen/machMater/materGetReportConcreteExceedReasonService',
+        method: 'get',
+        params: data
+    })
+}
+
+//获取超耗率top5材料（混凝土）
+const materGetReportConcreteExceedMaterielTopService=data=>{
+    return request({
+        url: '/manage/bgscreen/machMater/materGetReportConcreteExceedMaterielTopService',
+        method: 'get',
+        params: data
+    })
+}
+
+//材料销号制-今日申领工单
+const materGetConcreteOrderDetailsInfoService=data=>{
+    return request({
+        url: '/manage/bgscreen/machMater/materGetConcreteOrderDetailsInfoService',
+        method: 'get',
+        params: data
+    })
+}
+
 export default{
     machGetManageQuota,
-    materGetConcreteMaterialActQuantityBuildingNoInfoService
+    machGetEquipmentOverview,
+    machGetCertInfoData,
+    machSelectMachineMapData,
+    machGetMapData,
+    machGetClassifyWorks,
+    machGetClockInException,
+    machGetDeviceInfoByProjectId,
+    machGetExceptionAlert,
+    machGetMachineInfo,
+    machGetSystemDeviceInfoUrl,
+    materGetConcreteMaterialActQuantityBuildingNoInfoService,
+    materGetConcreteMaterialActQuantityGhInfoService,
+    materGetProjectChaoHaoStatisticsRPTService,
+    materGetReportConcreteExceedReasonService,
+    materGetReportConcreteExceedMaterielTopService,
+    materGetConcreteOrderDetailsInfoService
 }
\ No newline at end of file
diff --git a/yanzhu-bigscreen/src/assets/icons/svg/bind.svg b/yanzhu-bigscreen/src/assets/icons/svg/bind.svg
new file mode 100644
index 00000000..be7dc239
--- /dev/null
+++ b/yanzhu-bigscreen/src/assets/icons/svg/bind.svg
@@ -0,0 +1 @@
+<svg class="icon" style="width: 1.017578125em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1042 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13458"><path d="M682.057143 310.857143h-256v73.142857h219.428571v493.714286h-493.714285V384h128v-73.142857h-164.571429c-20.114286 0-36.571429 16.457143-36.571429 36.571428v566.857143c0 20.114286 16.457143 36.571429 36.571429 36.571429h566.857143c20.114286 0 36.571429-16.457143 36.571428-36.571429V347.428571c0-20.114286-16.457143-36.571429-36.571428-36.571428zM919.771429 73.142857h-566.857143c-20.114286 0-36.571429 16.457143-36.571429 36.571429v566.857143c0 20.114286 16.457143 36.571429 36.571429 36.571428h256v-73.142857h-219.428572V146.285714h493.714286v493.714286h-128v73.142857h164.571429c20.114286 0 36.571429-16.457143 36.571428-36.571428V109.714286c0-20.114286-16.457143-36.571429-36.571428-36.571429z" p-id="13459"></path></svg>
\ No newline at end of file
diff --git a/yanzhu-bigscreen/src/assets/icons/svg/device.svg b/yanzhu-bigscreen/src/assets/icons/svg/device.svg
new file mode 100644
index 00000000..4b920db5
--- /dev/null
+++ b/yanzhu-bigscreen/src/assets/icons/svg/device.svg
@@ -0,0 +1 @@
+<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8341"><path d="M658.285714 1024H0V0h658.285714z m-512-146.285714h365.714286V146.285714H146.285714z"  p-id="8342"></path><path d="M329.142857 329.142857m-109.714286 0a109.714286 109.714286 0 1 0 219.428572 0 109.714286 109.714286 0 1 0-219.428572 0Z"  p-id="8343"></path><path d="M219.428571 731.428571h219.428572v73.142858H219.428571zM771.657143 1011.565714l-80.457143-121.417143L877.714286 765.074286V258.925714L691.2 133.851429l80.457143-121.417143L1024 179.931429v664.137142l-252.342857 167.497143z"  p-id="8344"></path></svg>
\ No newline at end of file
diff --git a/yanzhu-bigscreen/src/components/rankChart.vue b/yanzhu-bigscreen/src/components/rankChart.vue
new file mode 100644
index 00000000..f4c7ddbc
--- /dev/null
+++ b/yanzhu-bigscreen/src/components/rankChart.vue
@@ -0,0 +1,236 @@
+<template>
+  <div :style="{ height: height + 'px' }" ref="chart"></div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+    },
+    height: {
+      type: Number,
+    },
+    showval: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      option: {},
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.getChartData();
+    },
+    //分类及工时情况
+    getChartData() {
+      var chChartBar = echarts.init(this.$refs.chart);
+      this.echartBar(chChartBar, this.data);
+    },
+    echartBar(chChart, chartData) {
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        var value = [];
+        var prop = [];
+        var text = [];
+        var zero = [];
+        var bgd = [];
+        var total = 0;
+        for (let i = chartData.length - 1; i >= 0; i--) {
+          total += +chartData[i].value;
+          value.push(chartData[i].value);
+          prop.push(chartData[i].prop);
+          text.push(chartData[i].text);
+          bgd.push(100);
+          zero.push(0);
+        }
+
+        var data = [];
+        var data_all = new Array(prop.length);
+        for (let i = 0; i < prop.length; i++) {
+          let tmp = new Array(prop.length).fill(0);
+          tmp[i] = prop[i];
+          data.push(tmp);
+          let tmp_all = 0;
+
+          for (let j = i; j < prop.length; j++) {
+            tmp_all += +prop[j];
+          }
+          data_all[i] = tmp_all.toFixed(1);
+        }
+
+        data_all.splice(0, 1);
+        data_all.push(0);
+
+        var series = [
+          //背景色--------------------我是分割线君------------------------------//
+          {
+            show: true,
+            type: "bar",
+            barGap: "-100%",
+            barWidth: "6", //统计条宽度
+            itemStyle: {
+              normal: {
+                color: "rgba(27, 61, 133,0.5)",
+              },
+            },
+            z: 1,
+            data: bgd,
+          },
+          //数据条--------------------我是分割线君------------------------------//
+          {
+            show: true,
+            type: "bar",
+            xAxisIndex: 1, //代表使用第二个X轴刻度!!!!!!!!!!!!!!!!!!!!!!!!
+            barGap: "-100%",
+            barWidth: "6", //统计条宽度
+            itemStyle: {
+              normal: {
+                color: "rgba(22,203,115,0.05)",
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                //label 的position位置可以是top bottom left,right,也可以是固定值
+                //在这里需要上下统一对齐,所以用固定值
+                position: [0, "-25"],
+                rich: {
+                  //富文本
+                  prop: {
+                    //自定义颜色
+                    color: "#c6d9fa",
+                    fontSize: "16",
+                  },
+                  index: {
+                    color: "#fcbc02",
+                    fontStyle: "italic",
+                    padding: [0, 0, 0, 5],
+                    fontSize: "14",
+                  },
+                  name: {
+                    width: this.showval ? 280 : 300,
+                    color: "#c6d9fa",
+                    padding: [0, 0, 0, 10],
+                    fontSize: "16",
+                  },
+                  color: {
+                    color: "#8ca2be",
+                    fontSize: "14",
+                  },
+                  arrow: {
+                    width: 12,
+                    height: 8,
+                    backgroundColor: {
+                      image: "http://fileimg.makalu.cc/WEB_2B7C06210CD44D55BFEE6205A35DE4A7.png",
+                    },
+                  },
+                },
+                formatter: (data) => {
+                  //富文本固定格式{colorName|这里填你想要写的内容}
+                  if (this.showval) {
+                    return "{arrow|}{index|No." + (chartData.length - data.dataIndex) + "}{name|" + text[data.dataIndex] + "}{prop|" + value[data.dataIndex] + "  " + prop[data.dataIndex] + "} {color| %}";
+                  }
+                  return "{arrow|}{index|No." + (chartData.length - data.dataIndex) + "}{name|" + text[data.dataIndex] + "}{prop|" + prop[data.dataIndex] + "} {color| %}";
+                },
+              },
+            },
+            data: value,
+          },
+          {
+            type: "bar",
+            stack: "总",
+            barWidth: 6,
+            itemStyle: {
+              normal: {
+                barBorderColor: "rgba(0,0,0,0)",
+                color: "rgba(0,0,0,0)",
+              },
+            },
+            data: data_all,
+          },
+        ];
+        for (let i = 0; i < data.length; i++) {
+          series.push({
+            type: "bar",
+            barWidth: 6,
+            stack: "总",
+            // itemStyle: {
+            //     normal: {
+            //         color: '#0780d9'
+            //     }
+            // },
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#41adf5",
+                  },
+                  {
+                    offset: 1,
+                    color: "#175eac",
+                  },
+                ]),
+                barBorderRadius: [5, 5, 5, 5],
+              },
+            },
+            data: data[i],
+          });
+        }
+
+        this.option = {
+          grid: {
+            left: "2%",
+            right: "2%",
+            bottom: "-8%",
+            top: "3%",
+            containLabel: true,
+          },
+          yAxis: {
+            type: "category",
+            axisLabel: {
+              show: false, //让Y轴数据不显示
+            },
+            itemStyle: {},
+            axisTick: {
+              show: false, //隐藏Y轴刻度
+            },
+            axisLine: {
+              show: false, //隐藏Y轴线段
+            },
+            data: text,
+          },
+
+          xAxis: [
+            {
+              show: false,
+            },
+            {
+              show: false,
+            },
+          ],
+          series: series,
+        };
+
+        chChart.setOption(this.option);
+        window.onresize = chChart.resize;
+      });
+    },
+  },
+  watch: {
+    data: function () {
+      this.init();
+    },
+  },
+};
+</script>
diff --git a/yanzhu-bigscreen/src/views/machmater/baiduMap.vue b/yanzhu-bigscreen/src/views/machmater/baiduMap.vue
new file mode 100644
index 00000000..3f43f71b
--- /dev/null
+++ b/yanzhu-bigscreen/src/views/machmater/baiduMap.vue
@@ -0,0 +1,2289 @@
+<template>
+  <div style="height: 100%" ref="allMap"></div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+    },
+    height: {
+      type: String,
+    },
+    building: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      skyMap: "",
+      key: 0,
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.initMap();
+      this.getIconMap();
+      this.setMapStyle();
+      this.getBuilding();
+    },
+    initMap() {
+      // GL版命名空间为BMapGL
+      var map = new BMapGL.Map(this.$refs.allMap); // 创建Map实例,
+
+      var longitude = "104.509823";
+      var latitude = "35.09362";
+
+      map.centerAndZoom(new BMapGL.Point(longitude, latitude), 14); // 初始化地图,设置中心点坐标和地图级别
+      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
+      this.skyMap = map;
+    },
+    getBuilding() {
+      let optsStyle = {
+        color: "#ffffff",
+        //position: 'relative',
+        borderRadius: "5px",
+        borderColor: "#000",
+        background: "0",
+        padding: "5px",
+        fontSize: "10px",
+        fontFamily: "微软雅黑",
+        fontWeight: "bold",
+      };
+      var map = this.skyMap;
+      var list = this.building;
+      let pointArray = [];
+      for (let i = 0; i < list.length; i++) {
+        //显示标记名称
+        let opts = { position: new BMapGL.Point(list[i].longitude, list[i].latitude), offset: new BMapGL.Size(-20, 20) };
+        let label = new BMapGL.Label(list[i].name, opts);
+        label.setStyle(optsStyle);
+        map.addOverlay(label);
+        //显示标记图标
+        let myIcon = new BMapGL.Icon(list[i].icon, new BMapGL.Size(30, 30));
+        let marker = new BMapGL.Marker(new BMapGL.Point(list[i].longitude, list[i].latitude), { icon: myIcon });
+        map.addOverlay(marker);
+        pointArray.push(new BMapGL.Point(list[i].longitude, list[i].latitude));
+      }
+      map.setViewport(pointArray);
+    },
+
+    getIconMap() {
+      var map = this.skyMap;
+      map.clearOverlays();
+      let is1K = this.$dpi() == "1K";
+      let is2K = this.$dpi() == "2K";
+      let w=is1K?25:is2K?30:40
+      let h=is1K?31:is2K?31.0*30/25:40.0/25*31
+      var pointArray = new Array();
+      for (let i = 0; i < this.data.length; i++) {
+        pointArray[i] = new BMapGL.Point(this.data[i].longitude, this.data[i].latitude);
+         
+        var myIcon = new BMapGL.Icon(this.chineseHelper(this.data[i].icon), new BMapGL.Size(w, h));
+        var marker = new BMapGL.Marker(new BMapGL.Point(this.data[i].longitude, this.data[i].latitude), { icon: myIcon });
+        var content = this.data[i].info;
+        map.addOverlay(marker);
+        this.addClickHandler(content, marker);
+      }
+      //让所有点在视野范围内
+      map.setViewport(pointArray);
+    },
+    addClickHandler(content, marker) {
+      var map = this.skyMap;
+      var that = this;
+      marker.addEventListener("click", function (e) {
+        //map.centerAndZoom(new BMapGL.Point(marker.latLng.lng,marker.latLng.lat), 16);
+        that.openInfo(content, e);
+      });
+    },
+    openInfo(content, e) {
+      let is1K = this.$dpi() == "1K";
+      let is2K = this.$dpi() == "2K";
+      var map = this.skyMap;
+      var opts = {
+        width: is1K ? 320 : is2K ? 320 : 620, // 信息窗口宽度
+        //height: 100,     // 信息窗口高度
+        //title : "信息窗口" , // 信息窗口标题
+      };
+      var p = e.target;
+      var point = new BMapGL.Point(p.getPosition().lng, p.getPosition().lat);
+      var infoWindow = new BMapGL.InfoWindow(content, opts); // 创建信息窗口对象
+
+      $(".BMap_bubble_pop").css("background-color", "rgba(0,0,0,0)");
+      $(".BMap_bubble_pop").css("border", "0");
+      $(".BMap_bubble_pop>img").attr("src", "./images/map/WEB_3578CFDB64B74818851FE993E99B2274.png");
+      map.openInfoWindow(infoWindow, point); //开启信息窗口
+      setTimeout(()=>{
+         $(".BMap_bubble_pop>img").attr("src", "./images/map/WEB_3578CFDB64B74818851FE993E99B2274.png");
+      },100);
+     
+      // infoWindow.addEventListener('open',function(type, target, point){ //窗口打开是，隐藏自带的关闭按钮
+      //     $('.BMap_pop>img').hide();
+      // })
+    },
+    chineseHelper(str) {
+      let helper = "";
+      let index = str.lastIndexOf("/");
+      let lastSegment = str.substring(index + 1);
+      let oneSegment = str.substring(0, index);
+      switch (lastSegment) {
+        case "挖掘机.png":
+          helper = "digger.png";
+          break;
+        case "挖掘机2.png":
+          helper = "digger2.png";
+          break;
+        case "挖掘机3.png":
+          helper = "digger3.png";
+          break;
+        case "挖掘机4.png":
+          helper = "digger4.png";
+          break;
+        case "挖掘机5.png":
+          helper = "digger5.png";
+          break;
+        case "汽车起重机.png":
+          helper = "truckCrane.png";
+          break;
+        case "汽车起重机2.png":
+          helper = "truckCrane2.png";
+          break;
+        case "汽车起重机3.png":
+          helper = "truckCrane3.png";
+          break;
+        case "汽车起重机4.png":
+          helper = "truckCrane4.png";
+          break;
+        case "汽车起重机5.png":
+          helper = "truckCrane5.png";
+          break;
+        case "洒水车.png":
+          helper = "wateringCar.png";
+          break;
+        case "洒水车2.png":
+          helper = "wateringCar2.png";
+          break;
+        case "洒水车3.png":
+          helper = "wateringCar3.png";
+          break;
+        case "洒水车4.png":
+          helper = "wateringCar4.png";
+          break;
+        case "洒水车5.png":
+          helper = "wateringCar5.png";
+          break;
+        case "混凝土搅拌输送车.png":
+          helper = "mixerTruck.png";
+          break;
+        case "混凝土搅拌输送车2.png":
+          helper = "mixerTruck2.png";
+          break;
+        case "混凝土搅拌输送车3.png":
+          helper = "mixerTruck3.png";
+          break;
+        case "混凝土搅拌输送车4.png":
+          helper = "mixerTruck4.png";
+          break;
+        case "混凝土搅拌输送车5.png":
+          helper = "mixerTruck5.png";
+          break;
+        case "自卸汽车.png":
+          helper = "dumpTruck.png";
+          break;
+        case "自卸汽车2.png":
+          helper = "dumpTruck2.png";
+          break;
+        case "自卸汽车3.png":
+          helper = "dumpTruck3.png";
+          break;
+        case "自卸汽车4.png":
+          helper = "dumpTruck4.png";
+          break;
+        case "自卸汽车5.png":
+          helper = "dumpTruck5.png";
+          break;
+        case "装载机.png":
+          helper = "loader.png";
+          break;
+        case "装载机2.png":
+          helper = "loader2.png";
+          break;
+        case "装载机3.png":
+          helper = "loader3.png";
+          break;
+        case "装载机4.png":
+          helper = "loader4.png";
+          break;
+        case "装载机5.png":
+          helper = "loader5.png";
+          break;
+        default:
+          helper = lastSegment;
+      }
+      return oneSegment + "/" + helper;
+    },
+    setMapStyle() {
+      var map = this.skyMap;
+      //百度地图背景色
+      var styleJson = [
+        {
+          featureType: "land",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+            color: "#00092aff",
+          },
+        },
+        {
+          featureType: "water",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+            color: "#033a58ff",
+          },
+        },
+        {
+          featureType: "green",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+            color: "#0e1b30ff",
+          },
+        },
+        {
+          featureType: "building",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+          },
+        },
+        {
+          featureType: "building",
+          elementType: "geometry.topfill",
+          stylers: {
+            color: "#113549ff",
+          },
+        },
+        {
+          featureType: "building",
+          elementType: "geometry.sidefill",
+          stylers: {
+            color: "#143e56ff",
+          },
+        },
+        {
+          featureType: "building",
+          elementType: "geometry.stroke",
+          stylers: {
+            color: "#dadada00",
+          },
+        },
+        {
+          featureType: "subwaystation",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+            color: "#113549B2",
+          },
+        },
+        {
+          featureType: "education",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+            color: "#12223dff",
+          },
+        },
+        {
+          featureType: "medical",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+            color: "#12223dff",
+          },
+        },
+        {
+          featureType: "scenicspots",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+            color: "#12223dff",
+          },
+        },
+        {
+          featureType: "highway",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+            weight: "4",
+          },
+        },
+        {
+          featureType: "highway",
+          elementType: "geometry.fill",
+          stylers: {
+            color: "#12223dff",
+          },
+        },
+        {
+          featureType: "highway",
+          elementType: "geometry.stroke",
+          stylers: {
+            color: "#fed66900",
+          },
+        },
+        {
+          featureType: "highway",
+          elementType: "labels",
+          stylers: {
+            visibility: "on",
+          },
+        },
+        {
+          featureType: "highway",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#12223dff",
+          },
+        },
+        {
+          featureType: "highway",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "highway",
+          elementType: "labels.icon",
+          stylers: {
+            visibility: "on",
+          },
+        },
+        {
+          featureType: "arterial",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+            weight: "2",
+          },
+        },
+        {
+          featureType: "arterial",
+          elementType: "geometry.fill",
+          stylers: {
+            color: "#12223dff",
+          },
+        },
+        {
+          featureType: "arterial",
+          elementType: "geometry.stroke",
+          stylers: {
+            color: "#ffeebb00",
+          },
+        },
+        {
+          featureType: "arterial",
+          elementType: "labels",
+          stylers: {
+            visibility: "on",
+          },
+        },
+        {
+          featureType: "arterial",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#2dc4bbff",
+          },
+        },
+        {
+          featureType: "arterial",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "local",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+            weight: "1",
+          },
+        },
+        {
+          featureType: "local",
+          elementType: "geometry.fill",
+          stylers: {
+            color: "#12223dff",
+          },
+        },
+        {
+          featureType: "local",
+          elementType: "geometry.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "local",
+          elementType: "labels",
+          stylers: {
+            visibility: "on",
+          },
+        },
+        {
+          featureType: "local",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#979c9aff",
+          },
+        },
+        {
+          featureType: "local",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffffff",
+          },
+        },
+        {
+          featureType: "railway",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "subway",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+            weight: "1",
+          },
+        },
+        {
+          featureType: "subway",
+          elementType: "geometry.fill",
+          stylers: {
+            color: "#d8d8d8ff",
+          },
+        },
+        {
+          featureType: "subway",
+          elementType: "geometry.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "subway",
+          elementType: "labels",
+          stylers: {
+            visibility: "on",
+          },
+        },
+        {
+          featureType: "subway",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#979c9aff",
+          },
+        },
+        {
+          featureType: "subway",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffffff",
+          },
+        },
+        {
+          featureType: "continent",
+          elementType: "labels",
+          stylers: {
+            visibility: "on",
+          },
+        },
+        {
+          featureType: "continent",
+          elementType: "labels.icon",
+          stylers: {
+            visibility: "on",
+          },
+        },
+        {
+          featureType: "continent",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#2dc4bbff",
+          },
+        },
+        {
+          featureType: "continent",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "city",
+          elementType: "labels.icon",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "city",
+          elementType: "labels",
+          stylers: {
+            visibility: "on",
+          },
+        },
+        {
+          featureType: "city",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "town",
+          elementType: "labels.icon",
+          stylers: {
+            visibility: "on",
+          },
+        },
+        {
+          featureType: "town",
+          elementType: "labels",
+          stylers: {
+            visibility: "on",
+          },
+        },
+        {
+          featureType: "town",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#91aeb9ff",
+          },
+        },
+        {
+          featureType: "town",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "road",
+          elementType: "geometry.fill",
+          stylers: {
+            color: "#12223dff",
+          },
+        },
+        {
+          featureType: "poilabel",
+          elementType: "labels",
+          stylers: {
+            visibility: "on",
+          },
+        },
+        {
+          featureType: "districtlabel",
+          elementType: "labels",
+          stylers: {
+            visibility: "on",
+          },
+        },
+        {
+          featureType: "road",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+          },
+        },
+        {
+          featureType: "road",
+          elementType: "labels",
+          stylers: {
+            visibility: "on",
+          },
+        },
+        {
+          featureType: "road",
+          elementType: "geometry.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "district",
+          elementType: "labels",
+          stylers: {
+            visibility: "on",
+          },
+        },
+        {
+          featureType: "poilabel",
+          elementType: "labels.icon",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "poilabel",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#2dc4bbff",
+          },
+        },
+        {
+          featureType: "poilabel",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "manmade",
+          elementType: "geometry",
+          stylers: {
+            color: "#12223dff",
+          },
+        },
+        {
+          featureType: "entertainment",
+          elementType: "geometry",
+          stylers: {
+            color: "#12223dff",
+          },
+        },
+        {
+          featureType: "shopping",
+          elementType: "geometry",
+          stylers: {
+            color: "#12223dff",
+          },
+        },
+        {
+          featureType: "nationalway",
+          stylers: {
+            level: "6",
+            curZoomRegionId: "0",
+            curZoomRegion: "6-10",
+          },
+        },
+        {
+          featureType: "nationalway",
+          stylers: {
+            level: "7",
+            curZoomRegionId: "0",
+            curZoomRegion: "6-10",
+          },
+        },
+        {
+          featureType: "nationalway",
+          stylers: {
+            level: "8",
+            curZoomRegionId: "0",
+            curZoomRegion: "6-10",
+          },
+        },
+        {
+          featureType: "nationalway",
+          stylers: {
+            level: "9",
+            curZoomRegionId: "0",
+            curZoomRegion: "6-10",
+          },
+        },
+        {
+          featureType: "nationalway",
+          stylers: {
+            level: "10",
+            curZoomRegionId: "0",
+            curZoomRegion: "6-10",
+          },
+        },
+        {
+          featureType: "nationalway",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+            level: "6",
+            curZoomRegionId: "0",
+            curZoomRegion: "6-10",
+          },
+        },
+        {
+          featureType: "nationalway",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+            level: "7",
+            curZoomRegionId: "0",
+            curZoomRegion: "6-10",
+          },
+        },
+        {
+          featureType: "nationalway",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+            level: "8",
+            curZoomRegionId: "0",
+            curZoomRegion: "6-10",
+          },
+        },
+        {
+          featureType: "nationalway",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+            level: "9",
+            curZoomRegionId: "0",
+            curZoomRegion: "6-10",
+          },
+        },
+        {
+          featureType: "nationalway",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+            level: "10",
+            curZoomRegionId: "0",
+            curZoomRegion: "6-10",
+          },
+        },
+        {
+          featureType: "nationalway",
+          elementType: "labels",
+          stylers: {
+            visibility: "off",
+            level: "6",
+            curZoomRegionId: "0",
+            curZoomRegion: "6-10",
+          },
+        },
+        {
+          featureType: "nationalway",
+          elementType: "labels",
+          stylers: {
+            visibility: "off",
+            level: "7",
+            curZoomRegionId: "0",
+            curZoomRegion: "6-10",
+          },
+        },
+        {
+          featureType: "nationalway",
+          elementType: "labels",
+          stylers: {
+            visibility: "off",
+            level: "8",
+            curZoomRegionId: "0",
+            curZoomRegion: "6-10",
+          },
+        },
+        {
+          featureType: "nationalway",
+          elementType: "labels",
+          stylers: {
+            visibility: "off",
+            level: "9",
+            curZoomRegionId: "0",
+            curZoomRegion: "6-10",
+          },
+        },
+        {
+          featureType: "nationalway",
+          elementType: "labels",
+          stylers: {
+            visibility: "off",
+            level: "10",
+            curZoomRegionId: "0",
+            curZoomRegion: "6-10",
+          },
+        },
+        {
+          featureType: "cityhighway",
+          stylers: {
+            level: "6",
+            curZoomRegionId: "0",
+            curZoomRegion: "6-9",
+          },
+        },
+        {
+          featureType: "cityhighway",
+          stylers: {
+            level: "7",
+            curZoomRegionId: "0",
+            curZoomRegion: "6-9",
+          },
+        },
+        {
+          featureType: "cityhighway",
+          stylers: {
+            level: "8",
+            curZoomRegionId: "0",
+            curZoomRegion: "6-9",
+          },
+        },
+        {
+          featureType: "cityhighway",
+          stylers: {
+            level: "9",
+            curZoomRegionId: "0",
+            curZoomRegion: "6-9",
+          },
+        },
+        {
+          featureType: "cityhighway",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+            level: "6",
+            curZoomRegionId: "0",
+            curZoomRegion: "6-9",
+          },
+        },
+        {
+          featureType: "cityhighway",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+            level: "7",
+            curZoomRegionId: "0",
+            curZoomRegion: "6-9",
+          },
+        },
+        {
+          featureType: "cityhighway",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+            level: "8",
+            curZoomRegionId: "0",
+            curZoomRegion: "6-9",
+          },
+        },
+        {
+          featureType: "cityhighway",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+            level: "9",
+            curZoomRegionId: "0",
+            curZoomRegion: "6-9",
+          },
+        },
+        {
+          featureType: "cityhighway",
+          elementType: "labels",
+          stylers: {
+            visibility: "off",
+            level: "6",
+            curZoomRegionId: "0",
+            curZoomRegion: "6-9",
+          },
+        },
+        {
+          featureType: "cityhighway",
+          elementType: "labels",
+          stylers: {
+            visibility: "off",
+            level: "7",
+            curZoomRegionId: "0",
+            curZoomRegion: "6-9",
+          },
+        },
+        {
+          featureType: "cityhighway",
+          elementType: "labels",
+          stylers: {
+            visibility: "off",
+            level: "8",
+            curZoomRegionId: "0",
+            curZoomRegion: "6-9",
+          },
+        },
+        {
+          featureType: "cityhighway",
+          elementType: "labels",
+          stylers: {
+            visibility: "off",
+            level: "9",
+            curZoomRegionId: "0",
+            curZoomRegion: "6-9",
+          },
+        },
+        {
+          featureType: "subwaylabel",
+          elementType: "labels",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "subwaylabel",
+          elementType: "labels.icon",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "tertiarywaysign",
+          elementType: "labels",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "tertiarywaysign",
+          elementType: "labels.icon",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "provincialwaysign",
+          elementType: "labels",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "provincialwaysign",
+          elementType: "labels.icon",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "nationalwaysign",
+          elementType: "labels",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "nationalwaysign",
+          elementType: "labels.icon",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "highwaysign",
+          elementType: "labels",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "highwaysign",
+          elementType: "labels.icon",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "village",
+          elementType: "labels",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "district",
+          elementType: "labels.text",
+          stylers: {
+            fontsize: "20",
+          },
+        },
+        {
+          featureType: "district",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#2dc4bbff",
+          },
+        },
+        {
+          featureType: "district",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "country",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#ffffffff",
+          },
+        },
+        {
+          featureType: "country",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "water",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#2dc4bbff",
+          },
+        },
+        {
+          featureType: "water",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "cityhighway",
+          elementType: "geometry.fill",
+          stylers: {
+            color: "#12223dff",
+          },
+        },
+        {
+          featureType: "cityhighway",
+          elementType: "geometry.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "tertiaryway",
+          elementType: "geometry.fill",
+          stylers: {
+            color: "#12223dff",
+          },
+        },
+        {
+          featureType: "tertiaryway",
+          elementType: "geometry.stroke",
+          stylers: {
+            color: "#ffffff10",
+          },
+        },
+        {
+          featureType: "provincialway",
+          elementType: "geometry.fill",
+          stylers: {
+            color: "#12223dff",
+          },
+        },
+        {
+          featureType: "provincialway",
+          elementType: "geometry.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "nationalway",
+          elementType: "geometry.fill",
+          stylers: {
+            color: "#12223dff",
+          },
+        },
+        {
+          featureType: "nationalway",
+          elementType: "geometry.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "highway",
+          elementType: "labels.text",
+          stylers: {
+            fontsize: "20",
+          },
+        },
+        {
+          featureType: "nationalway",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "nationalway",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#12223dff",
+          },
+        },
+        {
+          featureType: "nationalway",
+          elementType: "labels.text",
+          stylers: {
+            fontsize: "20",
+          },
+        },
+        {
+          featureType: "provincialway",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#12223dff",
+          },
+        },
+        {
+          featureType: "provincialway",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "provincialway",
+          elementType: "labels.text",
+          stylers: {
+            fontsize: "20",
+          },
+        },
+        {
+          featureType: "cityhighway",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#12223dff",
+          },
+        },
+        {
+          featureType: "cityhighway",
+          elementType: "labels.text",
+          stylers: {
+            fontsize: "20",
+          },
+        },
+        {
+          featureType: "cityhighway",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "estate",
+          elementType: "geometry",
+          stylers: {
+            color: "#12223dff",
+          },
+        },
+        {
+          featureType: "tertiaryway",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#2dc4bbff",
+          },
+        },
+        {
+          featureType: "tertiaryway",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "fourlevelway",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#2dc4bbff",
+          },
+        },
+        {
+          featureType: "fourlevelway",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "scenicspotsway",
+          elementType: "geometry.fill",
+          stylers: {
+            color: "#12223dff",
+          },
+        },
+        {
+          featureType: "scenicspotsway",
+          elementType: "geometry.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "universityway",
+          elementType: "geometry.fill",
+          stylers: {
+            color: "#12223dff",
+          },
+        },
+        {
+          featureType: "universityway",
+          elementType: "geometry.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "vacationway",
+          elementType: "geometry.fill",
+          stylers: {
+            color: "#12223dff",
+          },
+        },
+        {
+          featureType: "vacationway",
+          elementType: "geometry.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "fourlevelway",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+          },
+        },
+        {
+          featureType: "fourlevelway",
+          elementType: "geometry.fill",
+          stylers: {
+            color: "#12223dff",
+          },
+        },
+        {
+          featureType: "fourlevelway",
+          elementType: "geometry.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "transportationlabel",
+          elementType: "labels",
+          stylers: {
+            visibility: "on",
+          },
+        },
+        {
+          featureType: "transportationlabel",
+          elementType: "labels.icon",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "transportationlabel",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#2dc4bbff",
+          },
+        },
+        {
+          featureType: "transportationlabel",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "educationlabel",
+          elementType: "labels",
+          stylers: {
+            visibility: "on",
+          },
+        },
+        {
+          featureType: "educationlabel",
+          elementType: "labels.icon",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "educationlabel",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#2dc4bbff",
+          },
+        },
+        {
+          featureType: "educationlabel",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "transportation",
+          elementType: "geometry",
+          stylers: {
+            color: "#113549ff",
+          },
+        },
+        {
+          featureType: "airportlabel",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#2dc4bbff",
+          },
+        },
+        {
+          featureType: "airportlabel",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "scenicspotslabel",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#2dc4bbff",
+          },
+        },
+        {
+          featureType: "scenicspotslabel",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "medicallabel",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#2dc4bbff",
+          },
+        },
+        {
+          featureType: "medicallabel",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "medicallabel",
+          elementType: "labels.icon",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "scenicspotslabel",
+          elementType: "labels.icon",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "airportlabel",
+          elementType: "labels.icon",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "entertainmentlabel",
+          elementType: "labels.icon",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "entertainmentlabel",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#2dc4bbff",
+          },
+        },
+        {
+          featureType: "entertainmentlabel",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "estatelabel",
+          elementType: "labels.icon",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "estatelabel",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#2dc4bbff",
+          },
+        },
+        {
+          featureType: "estatelabel",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "businesstowerlabel",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#2dc4bbff",
+          },
+        },
+        {
+          featureType: "businesstowerlabel",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "businesstowerlabel",
+          elementType: "labels.icon",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "companylabel",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#2dc4bbff",
+          },
+        },
+        {
+          featureType: "companylabel",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "companylabel",
+          elementType: "labels.icon",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "governmentlabel",
+          elementType: "labels.icon",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "governmentlabel",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#2dc4bbff",
+          },
+        },
+        {
+          featureType: "governmentlabel",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "restaurantlabel",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#2dc4bbff",
+          },
+        },
+        {
+          featureType: "restaurantlabel",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "restaurantlabel",
+          elementType: "labels.icon",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "hotellabel",
+          elementType: "labels.icon",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "hotellabel",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#2dc4bbff",
+          },
+        },
+        {
+          featureType: "hotellabel",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "shoppinglabel",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#2dc4bbff",
+          },
+        },
+        {
+          featureType: "shoppinglabel",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "shoppinglabel",
+          elementType: "labels.icon",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "lifeservicelabel",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#2dc4bbff",
+          },
+        },
+        {
+          featureType: "lifeservicelabel",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "lifeservicelabel",
+          elementType: "labels.icon",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "carservicelabel",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#2dc4bbff",
+          },
+        },
+        {
+          featureType: "carservicelabel",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "carservicelabel",
+          elementType: "labels.icon",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "financelabel",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#2dc4bbff",
+          },
+        },
+        {
+          featureType: "financelabel",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "financelabel",
+          elementType: "labels.icon",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "otherlabel",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#2dc4bbff",
+          },
+        },
+        {
+          featureType: "otherlabel",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "otherlabel",
+          elementType: "labels.icon",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "manmade",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#2dc4bbff",
+          },
+        },
+        {
+          featureType: "manmade",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "transportation",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#2dc4bbff",
+          },
+        },
+        {
+          featureType: "transportation",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "education",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#2dc4bbff",
+          },
+        },
+        {
+          featureType: "education",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "medical",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#2dc4bbff",
+          },
+        },
+        {
+          featureType: "medical",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "scenicspots",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#2dc4bbff",
+          },
+        },
+        {
+          featureType: "scenicspots",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+          },
+        },
+        {
+          featureType: "country",
+          elementType: "labels",
+          stylers: {
+            visibility: "on",
+          },
+        },
+        {
+          featureType: "districtlabel",
+          elementType: "labels.text.fill",
+          stylers: {
+            color: "#00ebcaff",
+          },
+        },
+        {
+          featureType: "districtlabel",
+          elementType: "labels.text.stroke",
+          stylers: {
+            color: "#ffffff00",
+          },
+        },
+        {
+          featureType: "districtlabel",
+          elementType: "labels.text",
+          stylers: {
+            fontsize: 25,
+          },
+        },
+        {
+          featureType: "country",
+          elementType: "labels.text",
+          stylers: {
+            fontsize: 30,
+          },
+        },
+        {
+          featureType: "boundary",
+          stylers: {
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "5",
+          },
+        },
+        {
+          featureType: "boundary",
+          stylers: {
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "6",
+          },
+        },
+        {
+          featureType: "boundary",
+          stylers: {
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "7",
+          },
+        },
+        {
+          featureType: "boundary",
+          stylers: {
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "8",
+          },
+        },
+        {
+          featureType: "boundary",
+          stylers: {
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "9",
+          },
+        },
+        {
+          featureType: "boundary",
+          stylers: {
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "10",
+          },
+        },
+        {
+          featureType: "boundary",
+          stylers: {
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "11",
+          },
+        },
+        {
+          featureType: "boundary",
+          stylers: {
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "12",
+          },
+        },
+        {
+          featureType: "boundary",
+          stylers: {
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "13",
+          },
+        },
+        {
+          featureType: "boundary",
+          stylers: {
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "14",
+          },
+        },
+        {
+          featureType: "boundary",
+          stylers: {
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "15",
+          },
+        },
+        {
+          featureType: "boundary",
+          stylers: {
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "16",
+          },
+        },
+        {
+          featureType: "boundary",
+          stylers: {
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "17",
+          },
+        },
+        {
+          featureType: "boundary",
+          stylers: {
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "18",
+          },
+        },
+        {
+          featureType: "boundary",
+          stylers: {
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "19",
+          },
+        },
+        {
+          featureType: "boundary",
+          stylers: {
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "20",
+          },
+        },
+        {
+          featureType: "boundary",
+          stylers: {
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "21",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "5",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "6",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "7",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "8",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "9",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "10",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "11",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "12",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "13",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "14",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "15",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "16",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "17",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "18",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "19",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "20",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "on",
+            curZoomRegionId: "0",
+            curZoomRegion: "5,21",
+            level: "21",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+            curZoomRegionId: "1",
+            curZoomRegion: "3,21",
+            level: "3",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+            curZoomRegionId: "1",
+            curZoomRegion: "3,21",
+            level: "4",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+            curZoomRegionId: "1",
+            curZoomRegion: "3,21",
+            level: "5",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+            curZoomRegionId: "1",
+            curZoomRegion: "3,21",
+            level: "6",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+            curZoomRegionId: "1",
+            curZoomRegion: "3,21",
+            level: "7",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+            curZoomRegionId: "1",
+            curZoomRegion: "3,21",
+            level: "8",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+            curZoomRegionId: "1",
+            curZoomRegion: "3,21",
+            level: "9",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+            curZoomRegionId: "1",
+            curZoomRegion: "3,21",
+            level: "10",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+            curZoomRegionId: "1",
+            curZoomRegion: "3,21",
+            level: "11",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+            curZoomRegionId: "1",
+            curZoomRegion: "3,21",
+            level: "12",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+            curZoomRegionId: "1",
+            curZoomRegion: "3,21",
+            level: "13",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+            curZoomRegionId: "1",
+            curZoomRegion: "3,21",
+            level: "14",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+            curZoomRegionId: "1",
+            curZoomRegion: "3,21",
+            level: "15",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+            curZoomRegionId: "1",
+            curZoomRegion: "3,21",
+            level: "16",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+            curZoomRegionId: "1",
+            curZoomRegion: "3,21",
+            level: "17",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+            curZoomRegionId: "1",
+            curZoomRegion: "3,21",
+            level: "18",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+            curZoomRegionId: "1",
+            curZoomRegion: "3,21",
+            level: "19",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+            curZoomRegionId: "1",
+            curZoomRegion: "3,21",
+            level: "20",
+          },
+        },
+        {
+          featureType: "boundary",
+          elementType: "geometry",
+          stylers: {
+            visibility: "off",
+            curZoomRegionId: "1",
+            curZoomRegion: "3,21",
+            level: "21",
+          },
+        },
+      ];
+
+      map.setMapStyleV2({ styleJson: styleJson });
+    },
+  },
+  watch: {
+    data: function (n, o) {
+      this.init();
+    },
+    building: function (n, o) {
+      this.init();
+    },
+  },
+};
+</script>
+<style lang="less">
+.BMap_bubble_pop {
+  background: rgba(0, 0, 0, 0) !important;
+  overflow:  hidden !important;
+  border: none !important;
+  padding-bottom:31px !important;
+  .BMap_bubble_center{
+    height: auto !important;
+    width:100% !important;
+    .BMap_bubble_content{
+        position: relative !important;
+    height: auto !important;
+    }
+  }
+}
+</style>
diff --git a/yanzhu-bigscreen/src/views/machmater/chinaMap.vue b/yanzhu-bigscreen/src/views/machmater/chinaMap.vue
new file mode 100644
index 00000000..0b7c0eeb
--- /dev/null
+++ b/yanzhu-bigscreen/src/views/machmater/chinaMap.vue
@@ -0,0 +1,244 @@
+<template>
+  <div style="height:100%" ref="map"></div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+    },
+    height: {
+      type: Number,
+    },
+  },
+  data() {
+    return {
+      option: {},
+    };
+  },
+  mounted() {
+    this.loadMap(this.data);
+    window.chartClick = this.chartClick;
+  },
+  methods: {
+    chartClick(id) {
+      this.$emit("projectid", id);
+    },
+    loadMap(outdata) {
+      console.log();
+
+      var myChart = echarts.init(this.$refs.map);
+      var max = 1000,
+        min = 1;
+      var maxSize4Pin = 100,
+        minSize4Pin = 20;
+      var geoCoordMap = {};
+      /*获取地图数据*/
+      var mapFeatures = echarts.getMap("china").geoJson.features;
+      //  console.log(mapFeatures)
+      mapFeatures.forEach(function (v) {
+        // 地区名称
+        var name = v.properties.name;
+        // 地区经纬度
+        geoCoordMap[name] = v.properties.cp;
+      });
+
+      var convertData = function (outdata) {
+        var res = [];
+        for (var i = 0; i < outdata.length; i++) {
+          var geoCoord = geoCoordMap[outdata[i].name];
+          if (geoCoord) {
+            res.push({
+              name: outdata[i].name,
+              value: geoCoord.concat(outdata[i].count),
+              items: outdata[i].items,
+            });
+          }
+        }
+        return res;
+      };
+
+      this.option = {
+        tooltip: {
+          show: true,
+          trigger: "item",
+          enterable: true,
+          showContent: true,
+          padding: 0,
+          triggerOn: "click",
+          formatter: function (params) {
+            var tipHtml = "";
+            if (params.data) {
+              tipHtml += '<div style="background:rgba(22,80,158,0.5);padding: 0 10px;border: 2px solid #265dad">' + '<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);">' + '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;">' + "</i>" + '<span style="margin-left:10px;color:#fff;font-size:16px;">' + params.data.name + " （项目总数：" + params.data.value[2] + "）" + "</span>" + "</div>" + '<div style="padding:5px;max-height: 350px;overflow: auto" class="china-map">';
+              for (var i = 0; i < params.data.items.length; i++) {
+                tipHtml += `<p style="color:#11ee7d;padding:8px 0;cursor: pointer" onclick="chartClick('${params.data.items[i].id}')">${params.data.items[i].projectName}</p>`;
+              }
+              tipHtml += "</div>" + "</div>";
+              return tipHtml;
+            }
+          },
+        },
+        geo: {
+          map: "china",
+          show: true,
+          roam: false,
+          zoom: 1.17,
+          label: {
+            emphasis: {
+              show: false,
+            },
+          },
+          layoutSize: "100%",
+          itemStyle: {
+            areaColor: "#86c2f8",
+            borderColor: "#86c2f8",
+            shadowColor: "#86c2f8",
+            shadowBlur: 25,
+            borderWidth: 5,
+          },
+        },
+        series: [
+          {
+            type: "scatter",
+            coordinateSystem: "geo",
+            symbolSize: 25,
+            label: {
+              normal: {
+                formatter: "{b}",
+                position: "top",
+                show: true,
+                fontSize: 16, //省会字体大小
+                fontWeight: "bold",
+                color: "#ffffff",
+              },
+              emphasis: {
+                show: false,
+              },
+            },
+            itemStyle: {
+              normal: {
+                color: "#ffffff",
+              },
+            },
+            data: convertData(outdata),
+          },
+          {
+            type: "map",
+            roam: false,
+            zoom: 1.15,
+            map: "china", //使用
+            label: {
+              normal: {
+                show: true,
+                fontSize: 16, //省会字体大小
+
+                textStyle: {
+                  color: "#ffffff",
+                },
+              },
+              emphasis: {
+                show: false,
+                color: "#11ee7d", //指上省会字体颜色
+              },
+            },
+            itemStyle: {
+              normal: {
+                areaColor: {
+                  type: "radial",
+                  x: 0.5,
+                  y: 0.5,
+                  r: 0.8,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "#1c2a4c", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#1f335e", // 100% 处的颜色
+                    },
+                  ],
+                  globalCoord: true, // 缺省为 false
+                },
+                shadowColor: "rgb(58,115,192)",
+                borderColor: "#8ac2fb",
+              },
+              emphasis: {
+                areaColor: "#22578b", //指上背景限色
+                textStyle: {
+                  color: "#11ee7d",
+                },
+              },
+            },
+          },
+          {
+            type: "effectScatter",
+            coordinateSystem: "geo",
+            rippleEffect: {
+              brushType: "stroke", //fill
+              period: 2,
+              scale: 3,
+            },
+            showEffectOn: "render",
+            symbol: "circle",
+            symbolSize: 25,
+            zlevel: 1,
+            itemStyle: {
+              normal: {
+                show: true,
+                color: {
+                  type: "radial",
+                  x: 0.5,
+                  y: 0.5,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(129,229,255,1)",
+                    },
+                    {
+                      offset: 0.8,
+                      color: "rgba(129,229,255,1)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(129,229,255,1)",
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                color: "#fff",
+                fontWeight: "bold",
+                position: "inside", //  inside  中间
+                formatter: function (para) {
+                  return "{cnNum|" + para.data.value[2] + "}";
+                },
+                rich: {
+                  cnNum: {
+                    fontSize: 16,
+                    color: "#000000",
+                    fontWeight: "bold",
+                  },
+                },
+              },
+            },
+            data: convertData(outdata),
+          },
+        ],
+      };
+      myChart.setOption(this.option);
+    },
+  },
+  watch: {
+    data: function (n, o) {
+      this.loadMap(this.data);
+    },
+  },
+};
+</script>
diff --git a/yanzhu-bigscreen/src/views/machmater/machineInfoDialog.vue b/yanzhu-bigscreen/src/views/machmater/machineInfoDialog.vue
new file mode 100644
index 00000000..d7a64904
--- /dev/null
+++ b/yanzhu-bigscreen/src/views/machmater/machineInfoDialog.vue
@@ -0,0 +1,301 @@
+<template>
+  <MyDialog v-if="show" v-model="show" width="40vw" height="65vh" class="machine-info-dlg">
+    <template slot="title">
+      {{ title }}
+    </template>
+    <div class="scroll info-main" v-loading="loading">
+      <div class="info-top">基础信息</div>
+      <div class="info-list" v-if="machInfo">
+        <div class="info-item">
+          <span class="info-label">设备简称:</span>
+          <span class="info-value">{{ machInfo.device_name }}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">设备型号:</span>
+          <span class="info-value">{{ machInfo.device_model }}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">设备品牌:</span>
+          <span class="info-value">{{ machInfo.device_brand }}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">管理号码:</span>
+          <span class="info-value">{{ machInfo.manage_num }}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">功率(kw):</span>
+          <span class="info-value">{{ machInfo.power }}</span>
+        </div>
+      </div>
+
+      <div class="info-top">归属信息</div>
+      <div class="info-list" v-if="machInfo">
+        <div class="info-item">
+          <span class="info-label">公司名称:</span>
+          <span class="info-value">{{ machInfo.dept_name }}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">项目名称:</span>
+          <span class="info-value">{{ machInfo.project_Name }}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">当前位置:</span>
+          <span class="info-value">{{ machInfo.address }}</span>
+        </div>
+      </div>
+
+      <div class="info-top">进场验收信息</div>
+      <div class="info-list" v-if="machInfo">
+        <div class="info-item">
+          <span class="info-label">评估价值(万元):</span>
+          <span class="info-value">{{ machInfo.costRemark }}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">综合评价:</span>
+          <span class="info-value">{{ machInfo.examineRemark }}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">验收时间:</span>
+          <span class="info-value">{{ machInfo.examineDate }}</span>
+        </div>
+        <div class="info-item" v-if="machInfo.pdfUrl">
+          <span class="info-label">验收报告:</span>
+          <span class="info-value">
+            <a class="link" :href="machInfo.pdfUrl" target="_blank">点击文件预览</a>
+          </span>
+        </div>
+        <div class="info-item" v-if="photoInfo && photoInfo.length > 0">
+          <span class="info-label"></span>
+          <span class="info-value img-list">
+            <div v-for="(it, idx) in photoInfo" :key="idx" class="img-item">
+              <el-image :src="it.imageUrl" :preview-src-list="[it.imageUrl]" fit="cover" />
+              <div>{{ it.site }}</div>
+            </div>
+          </span>
+        </div>
+      </div>
+
+      <div class="info-top">维保信息</div>
+      <div class="info-list" v-if="machInfo">
+        <div class="info-item">
+          <span class="info-label">维保类型:</span>
+          <span class="info-value">{{ machInfo.maintenance_type }}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">维保内容:</span>
+          <span class="info-value">{{ machInfo.maintenance_content }}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">维保金额:</span>
+          <span class="info-value">{{ machInfo.maintenance_money }}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">维保时间:</span>
+          <span class="info-value">{{ machInfo.maintenance_time }}</span>
+        </div>
+        <div class="info-item">
+          <span class="info-label">维保人员:</span>
+          <span class="info-value">{{ machInfo.maintenance_person }}</span>
+        </div>
+        <div class="info-item" v-if="machInfo.maintenance_photo">
+          <span class="info-label">维保图片:</span>
+          <span class="info-value">
+            <el-image class="el-img-20" :src="machInfo.maintenance_photo" :preview-src-list="[machInfo.maintenance_photo]"></el-image>
+          </span>
+        </div>
+      </div>
+
+      <div class="info-top">操作证信息</div>
+      <div class="info-list">
+        <div v-for="(it, idx) in deviceInfo" :key="idx">
+          <div class="info-item">
+            <span class="info-label">证书编码:</span>
+            <span class="info-value">{{ it.num }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">人员名称:</span>
+            <span class="info-value">{{ it.name }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">人员电话:</span>
+            <span class="info-value">{{ it.phone }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">有效日期:</span>
+            <span class="info-value">{{ it.date }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">交底培训:</span>
+            <span class="info-value">已进行交底培训</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">操作证图片:</span>
+            <span class="info-value">
+              <div v-if="it.photo" style="display: inline-block">
+                <el-image class="el-img-20" :src="it.photo" :preview-src-list="[it.photo]" fit="cover" />
+              </div>
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="info-top">操作规范文档</div>
+      <div class="info-list">
+        <div class="info-item">
+          <a class="link" v-if="machInfo.manual_url" :href="getManualUrl(machInfo.manual_url)" target="_blank">点击预览</a>
+        </div>
+      </div>
+    </div>
+  </MyDialog>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      show: false,
+      title: "机械信息卡",
+      machInfo: {},
+      photoInfo: [],
+      deviceInfo: [],
+      loading: true,
+    };
+  },
+  methods: {
+    getManualUrl(url){
+        if(url.indexOf("://")==-1){
+            if(url.indexOf("/")!=0){
+                url="/"+url;
+            }
+            return "https://file-other.makalu.cc"+url;
+        }
+        return url;
+    },
+    showDialog(prjId, deviceNum) {
+      this.$api.machMater.machGetMachineInfo(prjId, deviceNum).then((res) => {
+        this.loading = false;
+        this.machInfo = res.data?.getMachineInfo?.data || {};
+        this.photoInfo = res.data?.getMachinePhoto?.data || [];
+        this.deviceInfo = res.data?.getMachineDeviceInfo?.data || [];
+      });
+      this.show = true;
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.machine-info-dlg {
+  .popup-project-introduction-min {
+    transform: translateY(20%);
+    min-width: 960px;
+    .popup-project-introduction-details {
+      padding: 0px;
+      .quality-table {
+        padding: 0px;
+      }
+
+      * {
+        font-size: 16px;
+        line-height: 30px;
+      }
+
+      .info-item {
+        .info-label {
+          font-size: 14px;
+        }
+        .info-value {
+          font-size: 14px;
+        }
+      }
+      .link {
+        font-size: 14px;
+      }
+    }
+  }
+  .info-top {
+    color: #00eaff;
+    background-image: linear-gradient(120deg, #097fca5e 0%, #010b2d4d 100%);
+    padding-left: 20px;
+  }
+  .info-list {
+    padding-left: 40px;
+  }
+  .info-item {
+    .info-label {
+      color: #4ab4bc;
+      vertical-align: top;
+      margin-right:10px;
+    }
+    .info-value {
+      color: #16d6ff;
+    }
+  }
+  .link {
+    color: #097fca;
+  }
+  .img-list {
+    display: flex;
+    flex-direction: row;
+    .img-item {
+      width: 10%;
+      margin-right: 10px;
+      text-align: center;
+      .el-image{
+        height: 100px;
+      }
+    }
+  }
+  .el-img-20 {
+    width: 20%;
+  }
+  .info-main {
+    max-height: 690px;
+    overflow-y: auto;
+  }
+}
+
+@media (min-width: 1921px) and (max-width: 2560px) {
+  .machine-info-dlg {
+    .popup-project-introduction-details {
+      * {
+        font-size: 24px;
+        line-height: 40px;
+      }
+    }
+    .info-main {
+    max-height: 740px;
+    overflow-y: auto;
+  }
+  }
+}
+
+@media (min-width: 2561px) {
+  .machine-info-dlg {
+    .popup-project-introduction-details {
+      * {
+        font-size: 32px;
+        line-height: 60px;
+      }
+      .info-main {
+        max-height: 1110px;
+      }
+      .info-list {
+        padding-left: 60px;
+      }
+      .info-item {
+        .info-label {
+          font-size: 24px;
+        }
+        .info-value {
+          margin-left: 20px;
+          font-size: 24px;
+        }
+      }
+      .link {
+        font-size: 24px;
+      }
+    }
+  }
+}
+</style>
diff --git a/yanzhu-bigscreen/src/views/machmater/machineManage.vue b/yanzhu-bigscreen/src/views/machmater/machineManage.vue
index 1f3b7c99..55fa8bd8 100644
--- a/yanzhu-bigscreen/src/views/machmater/machineManage.vue
+++ b/yanzhu-bigscreen/src/views/machmater/machineManage.vue
@@ -1,14 +1,87 @@
 <template>
   <div class="machine-manage main-page">
     <el-col :span="6" class="h100">
-      <module-one-1-1 label="设备概况" class="labor-base"> </module-one-1-1>
+      <module-one-1-1 label="设备概况" class="device-info">
+        <div class="survey_title">
+          <div class="survey_title_btn">
+            <div :class="overview == 0 ? 'survey_title_btn_min active' : 'survey_title_btn_min'" @click="onClickoOverview(0)">设备数量</div>
+          </div>
+          <div class="survey_title_btn">
+            <div :class="overview == 1 ? 'survey_title_btn_min active' : 'survey_title_btn_min'" @click="onClickoOverview(1)">绑定数量</div>
+          </div>
+          <div class="survey_title_btn">
+            <div :class="overview == 2 ? 'survey_title_btn_min active' : 'survey_title_btn_min'" @click="onClickoOverview(2)">监测数量</div>
+          </div>
+        </div>
+        <div class="survey_content">
+          <div class="survey_content_img">
+            <svg-icon icon-class="device" v-show="overview == 0" />
+            <svg-icon icon-class="monitor" v-show="overview == 2" />
+            <svg-icon icon-class="bind" v-show="overview == 1" />
+          </div>
+          <div class="survey_content_number">
+            <p v-cloak>{{ showOverViewLabel }}</p>
+            <div class="survey_content_value">
+              <span v-cloak>{{ showOverviewData.countNum }}</span> 台
+            </div>
+          </div>
+        </div>
+        <div class="survey_title">
+          <div class="survey_title_btn">
+            <div class="survey_text survey_text_zy"></div>
+            <div class="survey_text_value">
+              <p>自有</p>
+              <span v-cloak>{{ showOverviewData.zyNum }}</span>
+            </div>
+          </div>
+          <div class="survey_title_btn">
+            <div class="survey_text survey_text_zl"></div>
+            <div class="survey_text_value">
+              <p>租赁</p>
+              <span v-cloak>{{ showOverviewData.zlNum }}</span>
+            </div>
+          </div>
+          <div class="survey_title_btn">
+            <div class="survey_text survey_text_fb"></div>
+            <div class="survey_text_value">
+              <p>分包</p>
+              <span v-cloak>{{ showOverviewData.fbNum }}</span>
+            </div>
+          </div>
+        </div>
+      </module-one-1-1>
 
-      <module-one-1-1 label="分类及工时情况" class="labor-base"> </module-one-1-1>
+      <module-one-1-1 label="分类及工时情况" class="warning-info">
+        <div class="warning-info-title">
+          <div :class="infoNav == 0 ? 'active' : ''" @click="onWarningInfoNav(0)">设备数量</div>
+          <div :class="infoNav == 1 ? 'active' : ''" @click="onWarningInfoNav(1)">昨日工时</div>
+          <div :class="infoNav == 2 ? 'active' : ''" @click="onWarningInfoNav(2)">当月工时</div>
+        </div>
+        <div class="pcd-output-value" style="padding: 10px; justify-content: right">
+          <div class="pcd-output-value-key">
+            <div class="pcd-output-value-key-info">
+              <div class="pcd-rect"></div>
+              <div>已监控</div>
+            </div>
+            <div class="pcd-output-value-key-info">
+              <div class="pcd-rect"></div>
+              <div>未监控</div>
+            </div>
+          </div>
+        </div>
+        <process-control-bar :list="showClassifyBarData" :height="warningHeight" :number="3"></process-control-bar>
+      </module-one-1-1>
 
-      <module-one-1-1 label="设备运行动态" class="labor-base"> </module-one-1-1>
+      <module-one-1-1 label="设备运行动态" class="device-status">
+        <project-overview-chart :htmlShow="true" :key="'ai1' + chart3Key" :sp="''" :fn="changeChart3" :maintitle="deviceTitle" :legend-opt="deviceLegendOpt" :typedata="typeDistributionData" text="台" :height="chart3Height"></project-overview-chart>
+      </module-one-1-1>
     </el-col>
     <el-col :span="12" class="h100">
-      <module-one-2-2 label="项目设备分布总览" class="h77"> </module-one-2-2>
+      <module-one-2-2 label="项目设备分布总览" class="h77">
+        <div style="height: calc(100% - 10px)">
+          <baidu-map :data="personnelListData" :building="buildingData"></baidu-map>
+        </div>
+      </module-one-2-2>
 
       <module-one-2-1 label class="no-title no-border h22"> </module-one-2-1>
     </el-col>
@@ -20,21 +93,57 @@
 
       <module-one-1-1 label="监控异常预警" class="labor-base"> </module-one-1-1>
     </el-col>
+    <machine-info-dialog ref="machineInfoDialog"></machine-info-dialog>
   </div>
 </template>
 
 <script>
 import debounce from "lodash.debounce";
-
+import processControlBar from "./processControlBar.vue";
+import machineInfoDialog from "./machineInfoDialog.vue";
+import baiduMap from "./baiduMap.vue";
 export default {
+  components: {
+    processControlBar,
+    baiduMap,
+    machineInfoDialog,
+  },
   data() {
     return {
       dpi: "",
       selProject: null,
-      apiPath: "//jzgj.crfeb.com.cn",
+      //设备概况
+      overview: 0,
+      showOverViewLabel: "设备数量",
+      showOverviewData: {
+        countNum: 0,
+        zyNum: 0, //自有
+        zlNum: 0, //租赁
+        fbNum: 0, //分包
+      },
+      overviewData: [],
+      overviewInterval: null,
+      //分类及工时情况
+      warningHeight: 270,
+      infoNav: 0,
+      showClassifyBarData: null,
+      classifyBarData: [],
+      //设备运行动态
+      typeDistributionData: [],
+      chart3Key: 0,
+      deviceTitle: "",
+      deviceLegendOpt: {},
+      chart3Height: 260,
+      //项目设备分布总览
+      //百度地图
+      personnelListData: [],
+      buildingData: [],
+      baiduMapShow: false,
+      figureShow: true,
     };
   },
   mounted() {
+    window.machApp = this;
     this.$store.dispatch("ChangeNav", 801);
     this.$bus.$on(
       "projectChange",
@@ -53,12 +162,100 @@ export default {
       }
     });
     this.resize();
+    window.machineInfoCard = this.machineInfoCard;
+    window.goZhgDetails = this.goZhgDetails;
+    window.goAQDetails = this.goAQDetails;
+    window.goOBDDetails = this.goOBDDetails;
   },
   methods: {
+    goOBDDetails(deviceNum) {
+      //跳转OBD轨迹回放页面
+      let requestUrl = "https://jzgj.crfeb.com.cn/largeScreen/digitalConstruction/";
+      let url = requestUrl + "trajectory?deviceId=" + id;
+      window.open(url, "_blank");
+    },
+    goAQDetails(id) {
+      let deviceId = id.replace("aqzg-", "");
+      let url = "https://aqzg.makalu.cc/api/jumpLogin/jumpUrl?phone=15129368192&token=1e2b2fc6899044a59e7d473e33690adc&deviceId=" + deviceId;
+      window.open(url);
+    },
+    goZhgDetails(deviceNum) {
+      //跳转指挥官设备详情页
+      this.$api.machMater.machGetSystemDeviceInfoUrl(this.selProject.id, deviceNum).then((res) => {
+        if (res.msg) {
+          window.open(res.msg, "_blank");
+        }
+      });
+    },
+    machineInfoCard(deviceNum) {
+      this.$refs.machineInfoDialog.showDialog(this.selProject.id, deviceNum);
+    },
+    projectClick() {},
+    changeChart3(opt) {
+      if (this.$dpi() == "1K") {
+        opt.legend[0].left = 200;
+        return opt;
+      } else if (this.$dpi() == "2K") {
+        opt.legend[0].left = 290;
+        return opt;
+      } else {
+        opt.legend[0].left = 500;
+        return opt;
+      }
+    },
+    onWarningInfoNav(n) {
+      this.infoNav = n;
+      let tmps = this.classifyBarData.length > n ? this.classifyBarData[n] : [];
+      if (tmps.length == 0) {
+        tmps = [
+          {
+            total: 0,
+            unit: "台",
+            yesMonitor: 0,
+            name: "高空升降平台（无司机室）",
+            notMonitor: 0,
+          },
+          {
+            total: 0,
+            unit: "台",
+            yesMonitor: 0,
+            name: "施工电梯",
+            notMonitor: 0,
+          },
+        ];
+      }
+      this.showClassifyBarData = tmps;
+    },
+    overviewClick() {
+      let n = this.overview;
+      n++;
+      if (n > 2) {
+        n = 0;
+      }
+      this.onClickoOverview(n);
+    },
+    onClickoOverview(n) {
+      this.overview = n;
+      this.showOverViewLabel = "设备数量,绑定数量,监测数量".split(",")[0];
+      let tmp =
+        this.overviewData.length > n
+          ? this.overviewData[n]
+          : {
+              countNum: 0,
+              zyNum: 0, //自有
+              zlNum: 0, //租赁
+              fbNum: 0, //分包
+            };
+      this.showOverviewData = tmp;
+    },
     resize() {
       let is1K = this.$dpi() == "1K";
       let is2K = this.$dpi() == "2K";
+      this.warningHeight = is1K ? 166 : is2K ? 270 : 470;
+      this.mapHeight = is1K ? 720 : is2K ? 1500 : 2000;
+      this.chart3Height = is1K ? 260 : is2K ? 400 : 600;
       this.chartKey++;
+      this.chart3Key++;
     },
     init() {
       if (!this.selProject) {
@@ -67,7 +264,170 @@ export default {
       this.$api.machMater.machGetManageQuota(this.selProject.id).then((d) => {
         console.log("====>", d);
       });
+      this.loadDeviceOverview();
+      this.loadClassifyBarData();
+
+      this.loadMapData();
+      if (this.overviewInterval) {
+        clearInterval(this.overviewInterval);
+      }
+      this.overviewInterval = setInterval(this.overviewClick, 5000);
+
+      this.setOpts();
     },
+    setOpts() {
+      let is1K = this.$dpi() == "1K";
+      let is2K = this.$dpi() == "2K";
+      this.deviceLegendOpt = {
+        icon: "rect",
+        orient: "vertical",
+        itemWidth: "50%",
+
+        itemWidth: 20,
+        itemGap: 20,
+        itemHeight: 20,
+        type: "scroll",
+        pageTextStyle: {
+          color: "#c3dbfd",
+          fontSize: is1K ? 12 : is2K ? 16 : 20,
+        },
+        scroll: {
+          y: is1K ? 300 : is2K ? 500 : 600,
+          bar: {
+            show: true,
+            width: 5,
+            height: 10,
+          },
+        },
+        textStyle: {
+          padding: [0, 0, 0, 0],
+          fontSize: is1K ? 12 : is2K ? 14 : 20,
+          color: "#c3dbfd",
+          align: "center",
+          rich: {
+            name: {
+              fontSize: is1K ? 12 : is2K ? 14 : 20,
+              color: "#c3dbfd",
+              padding: [5, 2, 5, 2],
+            },
+            percent: {
+              fontSize: is1K ? 12 : is2K ? 14 : 20,
+              color: "#4676FD",
+              padding: [0, 2, 0, 2],
+            },
+          },
+        },
+      };
+    },
+    loadMapData() {
+      this.$api.machMater.machSelectMachineMapData(this.selProject.id).then((d) => {
+        let obj = {};
+        let result = (d.data?.data?.data || []).map((it) => {
+          it.icon = it.icon.replace("../../images", "./images");
+          if (["1", "2"].includes(it.state)) {
+            if (!obj[it.state1]) {
+              obj[it.state1] = [];
+            }
+            obj[it.state1].push(it);
+          }
+          return it;
+        });
+        this.typeDistributionData = [];
+        this.deviceTitle = 0;
+        for (let key in obj) {
+          this.typeDistributionData.push({
+            name: key,
+            value: obj[key].length,
+          });
+          this.deviceTitle += obj[key].length;
+        }
+        this.chart3Key++;
+        for (let i = 0; i < result.length; i++) {
+          var info = `<div class="popup-baidu-max">
+               <div class="popup-baidu-min">
+                    <div class="popup-baidu-con">
+                        <div class="popup-baidu-title">
+                           <div class="popup-baidu-machine-img"><img src="${result[i].photo_url}"></div>
+                            <div class="popup-baidu-machine-info">
+                                <div class="popup-baidu-machine-first">
+                                    <div class="popup-baidu-machine-name ">${result[i].device_name}</div>
+                                    <div class="popup-baidu-machine-state ${result[i].state1 == "运行" ? "state-yx" : result[i].state1 == "怠速" ? "state-ds" : result[i].state1 == "静止" ? "state-jz" : "state-lx"} ">
+                                    ${result[i].state1}</div>
+                                </div>
+                                <div class="popup-baidu-machine-second">
+                                    <div class="popup-baidu-machine-model popup-baidu-text">${result[i].device_model} </div>
+                                    <div class="popup-baidu-machine-oil popup-baidu-text">${result[i].percentage}%</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="popup-baidu-machine-details">
+                            <table>`;
+
+          if (result[i].smart_terminal_type == 2 && result[i].smart_terminal_number.length != 15) {
+            info += "<tr>" + "<td >工作时长</td>" + "<td>" + result[i].workTime + "</td>" + "</tr>" + "<tr>" + "<td>剩余油量</td>" + "<td>" + result[i].volume + "L</td>" + "</tr>";
+          }
+          if (result[i].smart_terminal_type == 2 && result[i].smart_terminal_number.length == 15) {
+            info += "<tr>" + "<td>工作时长</td>" + "<td>" + result[i].workTime + "</td>" + "</tr>" + "<tr>" + "<td>工作里程</td>" + "<td>" + result[i].milestat + "KM</td>" + "</tr>";
+          }
+
+          info += `<tr>
+                      <td>项目名称：</td>
+                      <td> ${result[i].project_abbreviation} </td>
+                  </tr>
+                  <tr>
+                      <td>工点名称：</td>
+                      <td>${result[i].work_poonts_name}</td>
+                  </tr>
+                  <tr>
+                      <td>位置时间：</td>
+                      <td> ${result[i].last_location_at} </td>
+                  </tr>
+                  </table>
+                </div>
+                </div>
+                <div class="popup-baidu-machine-address popup-baidu-text">${result[i].address || ""}</div>
+                <div class="popup-baidu-machine-button">
+                <div class="popup-baidu-machine-blue popup-baidu-text" onclick="machineInfoCard('${result[i].device_num}')">机械信息卡</div>`;
+
+          if (result[i].smart_terminal_type == 1) {
+            info += "</div></div></div></div>";
+          } else if (result[i].smart_terminal_type == 2 && result[i].smart_terminal_number.length != 15 && result[i].smart_terminal_number.indexOf("aqzg") < 0) {
+            info += '<div class="popup-baidu-machine-green" onclick="goZhgDetails(\'' + result[i].device_num + "')\">实时监控状态</div>" + "</div></div></div></div>";
+          } else if (result[i].smart_terminal_type == 2 && result[i].smart_terminal_number.length != 15 && result[i].smart_terminal_number.indexOf("aqzg") > -1) {
+            info += '<div class="popup-baidu-machine-green" onclick="goAQDetails(\'' + result[i].smart_terminal_number + "')\">实时监控状态</div>" + "</div></div></div></div>";
+          } else if (result[i].smart_terminal_type == 2 && result[i].smart_terminal_number.length == 15) {
+            info += '<div class="popup-baidu-machine-green" onclick="goOBDDetails(\'' + result[i].id + "')\">轨迹回放</div>" + "</div></div></div></div>";
+          }
+          result[i].info = info;
+        }
+        this.personnelListData = result;
+      });
+    },
+    loadClassifyBarData() {
+      //分类及工时情况
+      this.$api.machMater.machGetClassifyWorks(this.selProject.id).then((d) => {
+        let data = d.data.data;
+        this.classifyBarData = [data.num, data.dayWorkTime, data.monthWorkTime];
+        this.showClassifyBarData = this.classifyBarData[0];
+      });
+    },
+    loadDeviceOverview() {
+      this.$api.machMater.machGetEquipmentOverview(this.selProject.id).then((d) => {
+        let data = d.data.data;
+        this.overviewData = [data.count, data.bind, data.monitor];
+        this.onWarningInfoNav(0);
+      });
+    },
+  },
+  beforeDestroy() {
+    if (this.overviewInterval) {
+      clearInterval(this.overviewInterval);
+      this.overviewInterval = null;
+    }
+    delete window.machineInfoCard;
+    delete window.goZhgDetails;
+    delete window.goAQDetails;
+    delete window.goOBDDetails;
   },
 };
 </script>
@@ -82,5 +442,298 @@ export default {
       height: calc(22% - 20px);
     }
   }
+  .device-info {
+    .survey_title {
+      padding: 24px 15px;
+    }
+    .survey_content {
+      .survey_content_img {
+        .svg-icon {
+          fill: rgb(1, 169, 255);
+          width: 20px;
+          height: 20px;
+        }
+      }
+    }
+  }
+
+  .warning-info {
+    .pcd-rect {
+      width: 15px;
+      height: 10px;
+      margin-right: 5px;
+      background: #52adf4;
+    }
+    .warning-info-title {
+    }
+  }
+
+  .device-status {
+    .project-overview-chart {
+      .chart-gif {
+        top: 76px !important;
+        left: 50px;
+      }
+      .chart-text {
+        top: 72px !important;
+        left: 46px;
+      }
+    }
+  }
+  @media (min-width: 1921px) and (max-width: 2560px) {
+    .device-info {
+      .survey_title {
+        padding: 30px 15px;
+        .survey_title_btn {
+          .survey_title_btn_min {
+            width: 150px;
+            height: 50px;
+            line-height: 50px;
+            font-size: 20px;
+          }
+
+          .survey_text {
+            width: 150px;
+            height: 32px;
+          }
+          .survey_text_value {
+            height: 32px;
+            line-height: 32px;
+            padding-left: 70px;
+          }
+        }
+      }
+      .survey_content {
+        margin: 20px 0px;
+        .survey_content_img {
+          width: 120px;
+          height: 120px;
+          background-size: 120px 90px;
+          .svg-icon {
+            width: 30px;
+            height: 30px;
+          }
+        }
+      }
+    }
+
+    .warning-info {
+      .pcd-rect {
+        width: 24px;
+        height: 16px;
+        margin-right: 8px;
+      }
+      .pcd-output-value-key-info {
+        font-size: 16px;
+      }
+      .warning-info-title {
+        font-size: 20px;
+      }
+    }
+
+    .device-status {
+      .project-overview-chart {
+        .chart-gif {
+          width: 195px;
+          height: 195px;
+          top: 100px !important;
+          left: 47px;
+        }
+        .chart-text {
+          width: 195px;
+          height: 195px;
+          top: 100px !important;
+          left: 47px;
+          .chart-text-title {
+            font-size: 32px;
+          }
+          .chart-text-sub-title {
+            font-size: 24px;
+          }
+        }
+      }
+    }
+
+    .BMap_bubble_pop {
+      width: 440px !important;
+      .BMap_bubble_top {
+        .BMap_bubble_buttons {
+          div {
+            font-size: 30px !important;
+          }
+        }
+      }
+     .BMap_bubble_content {
+        .popup-baidu-max {
+          .popup-baidu-machine-second {
+            font-size: 14px;
+          }
+          .popup-baidu-text {
+            font-size: 14px;
+          }
+          .popup-baidu-machine-state {
+            font-size: 14px;
+          }
+          .popup-baidu-machine-name {
+            font-size: 14px;
+          }
+          .popup-baidu-machine-details tr {
+            td {
+              font-size: 14px;
+              &:first-child {
+                width: 80px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .BMap_bubble_pop {
+    .BMap_bubble_content {
+      width: 100% !important;
+      .popup-baidu-max {
+        width: 100%;
+        background-size: 100% calc(100% - 3px);
+        .popup-baidu-machine-second {
+          font-size: 12px;
+        }
+        .popup-baidu-text {
+          font-size: 12px;
+        }
+        .popup-baidu-machine-state {
+          font-size: 12px;
+        }
+        .popup-baidu-machine-name {
+          font-size: 12px;
+        }
+        .popup-baidu-machine-details tr {
+          td {
+            font-size: 12px;
+            &:first-child {
+              width: 60px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @media (min-width: 2561px) {
+    .device-info {
+      .survey_title {
+        padding: 40px 15px;
+        .survey_title_btn {
+          .survey_title_btn_min {
+            width: 240px;
+            height: 80px;
+            line-height: 80px;
+            font-size: 32px;
+          }
+
+          .survey_text {
+            width: 220px;
+            height: 50px;
+          }
+          .survey_text_value {
+            height: 50px;
+            line-height: 50px;
+            padding-left: 100px;
+            font-size: 28px;
+            span {
+              font-size: 28px;
+            }
+          }
+        }
+      }
+      .survey_content {
+        margin: 30px 0px;
+        .survey_content_number {
+          font-size: 30px;
+        }
+        .survey_content_img {
+          width: 240px;
+          height: 240px;
+          background-size: 240px 180px;
+          .svg-icon {
+            width: 60px;
+            height: 60px;
+            position: relative;
+            top: 40px;
+          }
+        }
+      }
+    }
+    .BMap_bubble_pop {
+      .BMap_bubble_top {
+        .BMap_bubble_buttons {
+          div {
+            font-size: 40px !important;
+          }
+        }
+      }
+     .BMap_bubble_content {
+        .popup-baidu-max {
+          .popup-baidu-machine-second {
+            font-size: 18px;
+          }
+          .popup-baidu-text {
+            font-size: 18px;
+          }
+          .popup-baidu-machine-state {
+            font-size: 18px;
+          }
+          .popup-baidu-machine-name {
+            font-size: 18px;
+          }
+          .popup-baidu-machine-details tr {
+            td {
+              font-size: 18px;
+              &:first-child {
+                width: 120px;
+              }
+            }
+          }
+        }
+      }
+    }
+    .warning-info {
+      .pcd-rect {
+        width: 36px;
+        height: 24px;
+        margin-right: 8px;
+      }
+      .pcd-output-value-key-info {
+        font-size: 20px;
+      }
+      .warning-info-title {
+        font-size: 28px;
+      }
+    }
+
+    .device-status {
+      .project-overview-chart {
+        .chart-gif {
+          width: 285px;
+          height: 285px;
+          top: 156px !important;
+          left: 82px;
+        }
+        .chart-text {
+          width: 285px;
+          height: 285px;
+          top: 156px !important;
+          left: 82px;
+          .chart-text-title {
+            font-size: 48px;
+          }
+          .chart-text-sub-title {
+            font-size: 32px;
+          }
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/yanzhu-bigscreen/src/views/machmater/processControlBar.vue b/yanzhu-bigscreen/src/views/machmater/processControlBar.vue
new file mode 100644
index 00000000..a28e9bd9
--- /dev/null
+++ b/yanzhu-bigscreen/src/views/machmater/processControlBar.vue
@@ -0,0 +1,127 @@
+<template>
+  <div @mouseover="MouseEnter" @mouseout="MouseLeave" class="process-control-bar">
+    <div class="output-content" ref="process" :style="{ height: height + 'px' }">
+      <div class="process-for" v-for="(item, i) in forData" :key="i">
+        <div style="display: flex; align-items: center; justify-content: space-between; padding: 10px 0 5px">
+          <div class="text-row1">
+            <img src="/cdn/images/arr_up_green.png" width="12" height="8" />
+            <span style="color: #fcbc02; font-style: italic; padding-right: 5px">No.{{ i + 1 }}</span>
+            <span style="color: #c6d9fa">{{ item.name }}</span>
+          </div>
+          <div style="color: #6c829a" class="text-row2">
+            <span style="color: #c6d9fa">{{ item.total }}</span> {{ item.unit }}
+            <span>（</span>
+            <span style="color: #52adf4">{{ item.yesMonitor }}</span> {{ item.unit }} / <span style="color: #4677ff">{{ item.notMonitor }}</span> {{ item.unit }}
+            <span>）</span>
+          </div>
+        </div>
+        <div style="padding-top: 8px">
+          <div style="height: 6px; background: rgba(22, 203, 115, 0.1); display: flex; align-items: center">
+            <div :style="{ width: item.yesWidth + '%', height: '6px', background: '#52adf4' }"></div>
+            <div :style="{ width: item.notWidth + '%', height: '6px', background: '#4677ff' }"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    list: {
+      type: Array,
+    },
+    height: {
+      type: Number,
+    },
+    number: {
+      type: Number,
+    },
+  },
+  data() {
+    return {
+      forData: [],
+      interval: "",
+      index: 0,
+    };
+  },
+  mounted() {
+    //this.init()
+  },
+  methods: {
+    init() {
+      this.getData();
+      //计划时间
+    },
+    getData() {
+      var data = this.list;
+      var max = 0;
+      for (let i = 0; i < data.length; i++) {
+        if (max < Number(data[i].total)) {
+          max = Number(data[i].total);
+        }
+      }
+      data.map((x) => {
+        x.yesWidth = (Number(x.yesMonitor) / max) * 100;
+        x.notWidth = (Number(x.notMonitor) / max) * 100;
+        return x;
+      });
+      this.forData = data;
+      this.$refs.process.scrollTop = 0;
+      this.index = 0;
+      this.interval = setInterval(this.scroll, 5000);
+    },
+    scroll() {
+      let els=this.$el.querySelectorAll(".process-for");
+      if(els.length==0){
+        return;
+      }
+      let offsetHeight = els[0].offsetHeight;
+      if (this.index == this.forData.length - this.number) {
+        this.index = 0;
+      } else {
+        this.index += 1;
+      }
+      $(this.$refs.process).animate({ scrollTop: offsetHeight * this.index + "px" });
+    },
+    MouseEnter() {
+      //鼠标移入停止滚动
+      clearInterval(this.interval);
+    },
+    MouseLeave() {
+      //鼠标离开继续滚动
+      this.interval = setInterval(this.scroll, 5000);
+    },
+  },
+  watch: {
+    list: function (n, o) {
+      this.init();
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.process-control-bar {
+  .process-for {
+    height: 60px;
+    font-size:14px;
+  }
+  @media (min-width: 1921px) and (max-width: 2560px) {
+    .process-for {
+      height: 70px;
+      margin: 20px 0px;
+      font-size: 18px;
+    }
+  }
+
+  @media (min-width: 2561px) {
+    .process-for {
+      height: 80px;
+      margin: 40px 0px;
+      font-size: 24px;
+    }
+  }
+}
+</style>
diff --git a/yanzhu-modules/yanzhu-manage/src/main/java/com/yanzhu/manage/controller/bigscreen/MachMaterController.java b/yanzhu-modules/yanzhu-manage/src/main/java/com/yanzhu/manage/controller/bigscreen/MachMaterController.java
index 2b5e957c..0742e989 100644
--- a/yanzhu-modules/yanzhu-manage/src/main/java/com/yanzhu/manage/controller/bigscreen/MachMaterController.java
+++ b/yanzhu-modules/yanzhu-manage/src/main/java/com/yanzhu/manage/controller/bigscreen/MachMaterController.java
@@ -34,6 +34,9 @@ public class MachMaterController extends BaseController {
         }
         paramJson.remove("url");
         Map<String, Object> map = new HashMap<>();
+        if(url.endsWith("/")){
+            url = url.substring(0, url.length() - 1);
+        }
         map.put("url", url);
         map.put("obj", paramJson);
         return map;
@@ -49,10 +52,10 @@ public class MachMaterController extends BaseController {
     public AjaxResult machGetManageQuota(Long projectId) throws Exception {
         Map<String, Object> map = getConfig(projectId, "mach");
         String url = map.get("url").toString();
-        url += "/largeScreen/digitalConstruction/getManageQuota";
         JSONObject paramJson = (JSONObject) map.get("obj");
         HttpUtils httpUtils = new HttpUtils();
-        String result = httpUtils.sendJSONPost(url, paramJson.toString(), null);
+        url += "/largeScreen/digitalConstruction/getManageQuota?"+ HttpUtils.jsonToGetParams( paramJson);
+        String result = httpUtils.sendGet(url);
         return AjaxResult.success(JSONObject.parseObject(result));
     }
 
@@ -63,10 +66,10 @@ public class MachMaterController extends BaseController {
     public AjaxResult machGetEquipmentOverview(Long projectId) throws Exception {
         Map<String, Object> map = getConfig(projectId, "mach");
         String url = map.get("url").toString();
-        url += "/largeScreen/digitalConstruction/getEquipmentOverview";
         JSONObject paramJson = (JSONObject) map.get("obj");
         HttpUtils httpUtils = new HttpUtils();
-        String result = httpUtils.sendJSONPost(url, paramJson.toString(), null);
+        url += "/largeScreen/digitalConstruction/getEquipmentOverview?"+ HttpUtils.jsonToGetParams( paramJson);
+        String result = httpUtils.sendGet(url);
         return AjaxResult.success(JSONObject.parseObject(result));
     }
 
@@ -78,10 +81,10 @@ public class MachMaterController extends BaseController {
     public AjaxResult machGetCertInfoData(Long projectId) throws Exception {
         Map<String, Object> map = getConfig(projectId, "mach");
         String url = map.get("url").toString();
-        url += "/largeScreen/digitalConstruction/getCertInfoData";
         JSONObject paramJson = (JSONObject) map.get("obj");
         HttpUtils httpUtils = new HttpUtils();
-        String result = httpUtils.sendJSONPost(url, paramJson.toString(), null);
+        url += "/largeScreen/digitalConstruction/getCertInfoData?"+ HttpUtils.jsonToGetParams( paramJson);
+        String result = httpUtils.sendGet(url);
         return AjaxResult.success(JSONObject.parseObject(result));
     }
 
@@ -92,10 +95,11 @@ public class MachMaterController extends BaseController {
     public AjaxResult machSelectMachineMapData(Long projectId) throws Exception {
         Map<String, Object> map = getConfig(projectId, "mach");
         String url = map.get("url").toString();
-        url += "/largeScreen/digitalConstruction/selectMachineMapData";
+
         JSONObject paramJson = (JSONObject) map.get("obj");
         HttpUtils httpUtils = new HttpUtils();
-        String result = httpUtils.sendJSONPost(url, paramJson.toString(), null);
+        url += "/largeScreen/digitalConstruction/selectMachineMapData?"+ HttpUtils.jsonToGetParams( paramJson);
+        String result = httpUtils.sendGet(url);
         return AjaxResult.success(JSONObject.parseObject(result));
     }
 
@@ -106,10 +110,10 @@ public class MachMaterController extends BaseController {
     public AjaxResult machGetMapData(Long projectId) throws Exception {
         Map<String, Object> map = getConfig(projectId, "mach");
         String url = map.get("url").toString();
-        url += "/largeScreen/digitalConstruction/getMapData";
         JSONObject paramJson = (JSONObject) map.get("obj");
         HttpUtils httpUtils = new HttpUtils();
-        String result = httpUtils.sendJSONPost(url, paramJson.toString(), null);
+        url += "/largeScreen/digitalConstruction/getMapData?"+ HttpUtils.jsonToGetParams( paramJson);
+        String result = httpUtils.sendGet(url);
         return AjaxResult.success(JSONObject.parseObject(result));
     }
 
@@ -120,13 +124,57 @@ public class MachMaterController extends BaseController {
     public AjaxResult machGetClassifyWorks(Long projectId) throws Exception {
         Map<String, Object> map = getConfig(projectId, "mach");
         String url = map.get("url").toString();
-        url += "/largeScreen/digitalConstruction/getClassifyWorks";
         JSONObject paramJson = (JSONObject) map.get("obj");
         HttpUtils httpUtils = new HttpUtils();
-        String result = httpUtils.sendJSONPost(url, paramJson.toString(), null);
+        url += "/largeScreen/digitalConstruction/getClassifyWorks?"+ HttpUtils.jsonToGetParams( paramJson);
+        String result = httpUtils.sendGet(url);
         return AjaxResult.success(JSONObject.parseObject(result));
     }
 
+    // 机智管家-设备详情
+    @GetMapping("/machGetMachineInfo")
+    public AjaxResult machGetMachineInfo(Long projectId,String deviceNum) throws Exception {
+        Map<String, Object> map = getConfig(projectId, "mach");
+        String url = map.get("url").toString();
+        JSONObject paramJson = (JSONObject) map.get("obj");
+        HttpUtils httpUtils = new HttpUtils();
+        Map<String,Object> result=new HashMap<>();
+        String urlPath=url+"/largeScreen/digitalConstruction/getMachineInfo?"+HttpUtils.jsonToGetParams( paramJson);
+        String postString="device_num="+deviceNum;
+        String res = httpUtils.sendPost(urlPath,postString);
+        JSONObject jo=JSONObject.parseObject(res);
+        result.put("getMachineInfo",jo);
+        if(jo.get("code").toString().equals("0")){
+          JSONObject jdata=  jo.getJSONObject("data");
+          if(jdata!=null){
+             String examine_id= jdata.getString("examine_id");
+             if(StringUtils.isNotBlank(examine_id)){
+                 urlPath=url+"/largeScreen/digitalConstruction/getMachinePhoto?"+HttpUtils.jsonToGetParams( paramJson);
+                 res = httpUtils.sendPost(urlPath,"id="+examine_id);
+                 result.put("getMachinePhoto",JSONObject.parseObject(res));
+             }
+          }
+        }
+
+        urlPath=url+"/largeScreen/digitalConstruction/getMachineDeviceInfo?"+HttpUtils.jsonToGetParams( paramJson);
+        res = httpUtils.sendPost(urlPath,postString);
+        result.put("getMachineDeviceInfo",JSONObject.parseObject(res));
+        return AjaxResult.success(result);
+    }
+
+    // 机智管家-设备详情Url
+    @GetMapping("/machGetSystemDeviceInfoUrl")
+    public AjaxResult machGetSystemDeviceInfoUrl(Long projectId,String deviceNum)throws Exception{
+        Map<String, Object> map = getConfig(projectId, "mach");
+        String url = map.get("url").toString();
+        JSONObject paramJson = (JSONObject) map.get("obj");
+        HttpUtils httpUtils = new HttpUtils();
+        String urlPath=url+"/largeScreen/digitalConstruction/getSystemDeviceInfoUrl?"+HttpUtils.jsonToGetParams( paramJson);
+        String postString="phone=17795687332&device_num="+deviceNum;
+        String res = httpUtils.sendPost(urlPath,postString);
+        return AjaxResult.success(res);
+    }
+
     /**
      * 机智管家-监控预警
      */
@@ -134,11 +182,11 @@ public class MachMaterController extends BaseController {
     public AjaxResult machGetClockInException(Long projectId, int pageSize) throws Exception {
         Map<String, Object> map = getConfig(projectId, "mach");
         String url = map.get("url").toString();
-        url += "/largeScreen/digitalConstruction/getClockInException";
         JSONObject paramJson = (JSONObject) map.get("obj");
         paramJson.put("pageSize", pageSize);
         HttpUtils httpUtils = new HttpUtils();
-        String result = httpUtils.sendJSONPost(url, paramJson.toString(), null);
+        url += "/largeScreen/digitalConstruction/getClockInException?"+ HttpUtils.jsonToGetParams( paramJson);
+        String result = httpUtils.sendGet(url);
         return AjaxResult.success(JSONObject.parseObject(result));
     }
 
@@ -149,10 +197,10 @@ public class MachMaterController extends BaseController {
     public AjaxResult machGetDeviceInfoByProjectId(Long projectId) throws Exception {
         Map<String, Object> map = getConfig(projectId, "mach");
         String url = map.get("url").toString();
-        url += "/largeScreen/digitalConstruction/getDeviceInfoByProjectId";
         JSONObject paramJson = (JSONObject) map.get("obj");
         HttpUtils httpUtils = new HttpUtils();
-        String result = httpUtils.sendJSONPost(url, paramJson.toString(), null);
+        url += "/largeScreen/digitalConstruction/getDeviceInfoByProjectId?"+ HttpUtils.jsonToGetParams( paramJson);
+        String result = httpUtils.sendGet(url);
         return AjaxResult.success(JSONObject.parseObject(result));
     }
 
@@ -164,11 +212,11 @@ public class MachMaterController extends BaseController {
     public AjaxResult machGetExceptionAlert(Long projectId, int size) throws Exception {
         Map<String, Object> map = getConfig(projectId, "mach");
         String url = map.get("url").toString();
-        url += "/largeScreen/digitalConstruction/getExceptionAlert";
         JSONObject paramJson = (JSONObject) map.get("obj");
         paramJson.put("size", size);
         HttpUtils httpUtils = new HttpUtils();
-        String result = httpUtils.sendJSONPost(url, paramJson.toString(), null);
+        url += "/largeScreen/digitalConstruction/getExceptionAlert?"+ HttpUtils.jsonToGetParams( paramJson);
+        String result = httpUtils.sendGet(url);
         return AjaxResult.success(JSONObject.parseObject(result));
     }
 
diff --git a/yanzhu-ui-vue3/src/views/machmange/machConfig/index.vue b/yanzhu-ui-vue3/src/views/machmange/machConfig/index.vue
index d40c5c2c..f853ede3 100644
--- a/yanzhu-ui-vue3/src/views/machmange/machConfig/index.vue
+++ b/yanzhu-ui-vue3/src/views/machmange/machConfig/index.vue
@@ -6,18 +6,25 @@
           <span v-if="mode == 'show'">{{ form.url }}</span>
           <el-input v-else v-model="form.url" placeholder="请输入服务地址"></el-input>
         </el-form-item>
-        <el-form-item label="用户ID" prop="userId">
-          <span v-if="mode == 'show'">{{ form.userId }}</span>
-          <el-input v-else v-model="form.userId" placeholder="请输入用户ID"></el-input>
+
+        <el-form-item label="部门ID" prop="deptId">
+          <span v-if="mode == 'show'">{{ form.deptId }}</span>
+          <el-input v-else v-model="form.deptId" placeholder="请输入用户ID"></el-input>
         </el-form-item>
-        <el-form-item label="配置key" prop="chinaKey">
-          <span v-if="mode == 'show'">{{ form.chinaKey }}</span>
-          <el-input v-else v-model="form.chinaKey" placeholder="请输入配置key"></el-input>
-        </el-form-item>
-        <el-form-item label="项目ID" prop="projectId">
+         <el-form-item label="项目ID" prop="projectId">
           <span v-if="mode == 'show'">{{ form.projectId }}</span>
           <el-input v-else v-model="form.projectId" placeholder="请输入项目ID"></el-input>
         </el-form-item>
+
+        <el-form-item label="配置key" prop="app_key">
+          <span v-if="mode == 'show'">{{ form.app_key }}</span>
+          <el-input v-else v-model="form.app_key" placeholder="请输入配置key"></el-input>
+        </el-form-item>
+         <el-form-item label="配置密钥" prop="app_secret">
+          <span v-if="mode == 'show'">{{ form.app_secret }}</span>
+          <el-input v-else v-model="form.app_secret" placeholder="请输入配置密钥"></el-input>
+        </el-form-item>
+       
       </el-form>
       <template #footer>
         <div v-hasPermi="['machmange:config:edit']">
@@ -50,31 +57,37 @@ export default {
       mode: "show",
       form: {
         url:"",
-        userId: "",
-        chinaKey: "",
+        deptId: "",
+        app_key: "",
         projectId: "",
+        app_secret:""
       },
       rules: {
-        userId: {
+        url: {
+          required: true,
+          message: "请输入服务地址",
+          trigger: "blur",
+        },
+        deptId: {
           required: true,
           message: "请输入用户ID",
           trigger: "blur",
         },
-        chinaKey: {
+        app_key: {
           required: true,
           message: "请输入配置key",
           trigger: "blur",
         },
+        app_secret: {
+          required: true,
+          message: "请输入配置密钥",
+          trigger: "blur",
+        },
         projectId: {
           required: true,
           message: "请输入项目ID",
           trigger: "blur",
         },
-        url: {
-          required: true,
-          message: "请输入服务地址",
-          trigger: "blur",
-        },
       },
     };
   },
@@ -93,9 +106,10 @@ export default {
   methods: {
     doEdit() {
       this.mode = "edit";
-      this.form.userId = this.cfgInfo?.userId || "";
-      this.form.chinaKey = this.cfgInfo?.chinaKey || "";
+      this.form.deptId = this.cfgInfo?.deptId || "";
+      this.form.app_key = this.cfgInfo?.app_key || "";
       this.form.projectId = this.cfgInfo?.projectId || "";
+      this.form.app_secret = this.cfgInfo?.app_secret || "";
       this.form.url = this.cfgInfo?.url || "";
     },
     doSave() {
@@ -137,9 +151,10 @@ export default {
         if (this.cfgData) {
           this.cfgInfo = this.$tryToJson(this.cfgData.paramData, null);
         }
-        this.form.userId = this.cfgInfo?.userId || "未配置";
-        this.form.chinaKey = this.cfgInfo?.chinaKey || "未配置";
+        this.form.deptId = this.cfgInfo?.deptId || "未配置";
+        this.form.app_key = this.cfgInfo?.app_key || "未配置";
         this.form.projectId = this.cfgInfo?.projectId || "未配置";
+        this.form.app_secret = this.cfgInfo?.app_secret || "未配置";
         this.form.url = this.cfgInfo?.url || "未配置";
         cb && cb();
       });
diff --git a/yanzhu-ui-vue3/src/views/machmange/materConfig/index.vue b/yanzhu-ui-vue3/src/views/machmange/materConfig/index.vue
index 566bfc53..f87dd986 100644
--- a/yanzhu-ui-vue3/src/views/machmange/materConfig/index.vue
+++ b/yanzhu-ui-vue3/src/views/machmange/materConfig/index.vue
@@ -6,25 +6,18 @@
           <span v-if="mode == 'show'">{{ form.url }}</span>
           <el-input v-else v-model="form.url" placeholder="请输入服务地址"></el-input>
         </el-form-item>
-
-        <el-form-item label="部门ID" prop="deptId">
-          <span v-if="mode == 'show'">{{ form.deptId }}</span>
-          <el-input v-else v-model="form.deptId" placeholder="请输入用户ID"></el-input>
+        <el-form-item label="用户ID" prop="userId">
+          <span v-if="mode == 'show'">{{ form.userId }}</span>
+          <el-input v-else v-model="form.userId" placeholder="请输入用户ID"></el-input>
         </el-form-item>
-         <el-form-item label="项目ID" prop="projectId">
+        <el-form-item label="配置key" prop="chinaKey">
+          <span v-if="mode == 'show'">{{ form.chinaKey }}</span>
+          <el-input v-else v-model="form.chinaKey" placeholder="请输入配置key"></el-input>
+        </el-form-item>
+        <el-form-item label="项目ID" prop="projectId">
           <span v-if="mode == 'show'">{{ form.projectId }}</span>
           <el-input v-else v-model="form.projectId" placeholder="请输入项目ID"></el-input>
         </el-form-item>
-
-        <el-form-item label="配置key" prop="app_key">
-          <span v-if="mode == 'show'">{{ form.app_key }}</span>
-          <el-input v-else v-model="form.app_key" placeholder="请输入配置key"></el-input>
-        </el-form-item>
-         <el-form-item label="配置密钥" prop="app_secret">
-          <span v-if="mode == 'show'">{{ form.app_secret }}</span>
-          <el-input v-else v-model="form.app_secret" placeholder="请输入配置密钥"></el-input>
-        </el-form-item>
-       
       </el-form>
       <template #footer>
         <div v-hasPermi="['machmange:config:edit']">
@@ -57,37 +50,31 @@ export default {
       mode: "show",
       form: {
         url:"",
-        deptId: "",
-        app_key: "",
+        userId: "",
+        chinaKey: "",
         projectId: "",
-        app_secret:""
       },
       rules: {
-        url: {
-          required: true,
-          message: "请输入服务地址",
-          trigger: "blur",
-        },
-        deptId: {
+        userId: {
           required: true,
           message: "请输入用户ID",
           trigger: "blur",
         },
-        app_key: {
+        chinaKey: {
           required: true,
           message: "请输入配置key",
           trigger: "blur",
         },
-        app_secret: {
-          required: true,
-          message: "请输入配置密钥",
-          trigger: "blur",
-        },
         projectId: {
           required: true,
           message: "请输入项目ID",
           trigger: "blur",
         },
+        url: {
+          required: true,
+          message: "请输入服务地址",
+          trigger: "blur",
+        },
       },
     };
   },
@@ -106,10 +93,9 @@ export default {
   methods: {
     doEdit() {
       this.mode = "edit";
-      this.form.deptId = this.cfgInfo?.deptId || "";
-      this.form.app_key = this.cfgInfo?.app_key || "";
+      this.form.userId = this.cfgInfo?.userId || "";
+      this.form.chinaKey = this.cfgInfo?.chinaKey || "";
       this.form.projectId = this.cfgInfo?.projectId || "";
-      this.form.app_secret = this.cfgInfo?.app_secret || "";
       this.form.url = this.cfgInfo?.url || "";
     },
     doSave() {
@@ -151,10 +137,9 @@ export default {
         if (this.cfgData) {
           this.cfgInfo = this.$tryToJson(this.cfgData.paramData, null);
         }
-        this.form.deptId = this.cfgInfo?.deptId || "未配置";
-        this.form.app_key = this.cfgInfo?.app_key || "未配置";
+        this.form.userId = this.cfgInfo?.userId || "未配置";
+        this.form.chinaKey = this.cfgInfo?.chinaKey || "未配置";
         this.form.projectId = this.cfgInfo?.projectId || "未配置";
-        this.form.app_secret = this.cfgInfo?.app_secret || "未配置";
         this.form.url = this.cfgInfo?.url || "未配置";
         cb && cb();
       });
diff --git a/yanzhu-ui-vue3/src/views/manage/plan/bimSelectTools3.js b/yanzhu-ui-vue3/src/views/manage/plan/bimSelectTools3.js
index c60036a9..d9afa993 100644
--- a/yanzhu-ui-vue3/src/views/manage/plan/bimSelectTools3.js
+++ b/yanzhu-ui-vue3/src/views/manage/plan/bimSelectTools3.js
@@ -126,7 +126,11 @@ function clearAllSelection(that) {
 }
 
 function initBim(that) {
-  let tmps = that.allBimData.filter((it) => it.id == that.plan.id);
+  let planId = -1;
+  if (that.plan) {
+    planId = that.plan.id;
+  }
+  let tmps = that.allBimData.filter((it) => it.id == planId);
   if (tmps.length > 0) {
     tmps[0].bim.forEach((it) => {
       if (
@@ -183,7 +187,7 @@ function partLoadModel(that) {
         url,
         modelId,
         obj[modelId].join("#"),
-        (res) => {},
+        (res) => { },
         (res) => {
           setTimeout(() => {
             if (that.viewPoint) {
@@ -608,22 +612,47 @@ function makePlanTree(that) {
   that.planTreeKey++;
 }
 
+function resetModel(that, cb) {
+  let api = bimSelectionDlgApi;
+  that.hideParts = [];
+  that.readlyParts = [];
+  that.hideFeatures = [];
+  that.allBimData = that.planList.filter((d) => d.hasBim);
+  that.models.forEach(model => {
+    api.Model.setVisible(model.modelId, true);
+    api.Model.original(model.modelId);
+    that.$refs.tree.setChecked(model.modelId, true, true)
+    setTimeout(() => {
+      cb && cb();
+    }, 1000)
+  });
+}
+
 //根据选择的计划显示构件
 function showPlanFeatchure(that) {
   let api = bimSelectionDlgApi;
-  if (that.plan.hasBim) {
-    //已绑定BIM模型 显示已绑定的构件
-    let featureIds = that.plan.bim.map((it) => it.featureId);
-    if (featureIds.length > 0) {
-      let tmpsIds2 = featureIds.splice(0, 1000);
-      api.Feature.showFeatures(tmpsIds2.join("#"));
-      that.selectItems = that.plan.bim.map((it) => it);
-      featureIds = that.plan.bim.map((it) => it.featureId);
-      api.Feature.setColor(featureIds.join("#"), "rgba(255,0,255,1)");
+  resetModel(that, () => {
+    if (that.plan.hasBim) {
+      //已绑定BIM模型 显示已绑定的构件
+      let featureIds = that.plan.bim.map((it) => it.featureId);
+      if (featureIds.length > 0) {
+        let tmpsIds2 = featureIds.splice(0, 1000);
+        api.Feature.showFeatures(tmpsIds2.join("#"));
+        setFeatueVisible(featureIds, true);
+        initBim(that)
+        //that.selectItems = that.plan.bim.map((it) => it);
+
+        featureIds = that.plan.bim.map((it) => it.featureId);
+        api.Feature.setColor(featureIds.join("#"), "rgba(255,0,255,1)");
+      }
+    } else {
+      that.selectItems = [];
+      //未绑定BIM模型 显示所有可以绑定的构件
+
+      initBim(that)
+      setFeatueVisible(that.readlyParts,false)
     }
-  } else {
-    //未绑定BIM模型 显示所有可以绑定的构件
-  }
+  });
 }
 
 export default {
diff --git a/yanzhu-ui-vue3/src/views/manage/plan/bimSelectionDialog3.vue b/yanzhu-ui-vue3/src/views/manage/plan/bimSelectionDialog3.vue
index 537e3e57..471c92d7 100644
--- a/yanzhu-ui-vue3/src/views/manage/plan/bimSelectionDialog3.vue
+++ b/yanzhu-ui-vue3/src/views/manage/plan/bimSelectionDialog3.vue
@@ -309,14 +309,22 @@ export default {
       });
     },
     doSave() {
+      if(!this.plan){
+        ElMessage.error("请选择计划");
+        return;
+      }
+      let text=
+          this.selectItems.length > 0 ? JSON.stringify(this.selectItems) : ""
       updateBimInfo({
         id: this.plan.id,
-        text:
-          this.selectItems.length > 0 ? JSON.stringify(this.selectItems) : "",
+        text:text,
       }).then((res) => {
         if (res.success) {
+          this.plan.bimId=text;
+          this.plan.bim=this.$tryToJson(text||"[]",[]);
+          this.plan.hasBim=this.plan && this.plan.bim.length>0;
           ElMessage.success("保存成功");
-          this.show = false;
+          bimTools.showPlanFeatchure(this)
           this.$emit("success");
         } else {
           ElMessage.error("保存失败");
@@ -353,6 +361,9 @@ export default {
         case 5:
           bimTools.selectTreeData(this);
           break;
+        case 6:
+          this.doSave();
+          break;
       }
     },
     showDialog(planList) {
@@ -476,10 +487,9 @@ export default {
         } else {
           this.models.forEach((it) => {
             this.addModel(it.modelId, () => {
-              this.$refs.tree.setChecked(it.modelId, true);
+              this.$refs.tree.setChecked(it.modelId, true,true);
             });
           });
-          this.$refs.tree.setChecked("root", true);
         }
       });
     },
@@ -655,7 +665,7 @@ export default {
       position: absolute;
       bottom: 6vh;
       left: 50%;
-      margin-left: -120px;
+      margin-left: -140px;
       background: #274754;
       border-radius: 4px;