Jelajahi Sumber

大屏 界面修改

zhanghao 1 bulan lalu
induk
melakukan
41a57082a5

+ 72 - 59
src/views/pad/engineering/main.vue

@@ -39,34 +39,10 @@
       </div>
     </div>
     <div class="middle flex-column">
-      <!-- <div class="menu-area flex-row align-items-center space-between">
-        <div v-for="(item, index) in dataList" :key="index" class="rate-area">
-          <img src="@/assets/images/main/rate_bg.png" class="icon" alt="" />
-          <div class="rate">
-            <div class="rate-data">
-              <div class="data">{{ item.num }}</div>
-              <div class="unit">{{ item.unit }}</div>
-            </div>
-          </div>
-          <div class="desc">{{ item.name }}</div>
-        </div>
-      </div> -->
-<!--      <province
-        v-if="showMap"
-        ref="province"
-        height="850px"
-        @mapClick="onMapClick"
-      ></province>-->
-      <Map @transmit="transmit" v-if="showMap" :list1="list1" :list2="list2" ref="map"></Map>
-      <div
-        v-if="showLocal"
-        class="img-area flex-row align-items-center flex-center"
-      >
-        <img class="build" src="@/assets/images/build.png" alt="" />
-      </div>
+      <Map @changeMenuFlag="changeMenuFlag" @transmit="transmit" @changeCurCompany="changeCurCompany" v-if="showMap" :list1="list1" :list2="list2" ref="map"></Map>
 
       <!-- 返回按钮 -->
-<!--      <div class="bottom-area flex-row align-items-center space-between">
+      <div class="bottom-area flex-row align-items-center space-between" v-if="menuFlag">
         <div class="bottom-left flex-row align-items-center">
           <div class="left-item">
             <el-cascader
@@ -75,6 +51,8 @@
               @change="handleCompanyChange"
               placeholder="单位"
               :show-all-levels="false"
+              popper-class="dropDown"
+              clearable
             >
               <template slot-scope="{ node, data }">
                 <div style="display: flex; align-items: center">
@@ -94,38 +72,11 @@
                       background: rgb(255, 180, 74);
                     "
                   ></span>
-                  <span
-                    v-else-if="data.value.length == 5 && data.value != '10001'"
-                    style="
-                      display: inline-block;
-                      width: 10px;
-                      height: 10px;
-                      border-radius: 50%;
-                      margin-right: 10px;
-                      background: rgb(74, 194, 29);
-                    "
-                  ></span>
-                  <span
-                    v-else-if="data.value.length == 7"
-                    style="
-                      display: inline-block;
-                      width: 10px;
-                      height: 10px;
-                      border-radius: 50%;
-                      margin-right: 10px;
-                      background: rgb(99, 235, 255);
-                    "
-                  ></span>
                   <span>{{ data.label }}</span>
                 </div>
-                &lt;!&ndash; <div
-                    v-if="data.level == 2"
-                    style="width: 1.5vh;height: 1.5vh;background-color: red;border-radius: 60%;margin-top:10px;margin-left:10px;float:right"
-                  ></div> &ndash;&gt;
               </template>
             </el-cascader>
           </div>
-          <div class="office" disabled>办公区</div>
         </div>
         <div class="bottom-right">
           <img
@@ -135,7 +86,7 @@
             class="back"
           />
         </div>
-      </div>-->
+      </div>
     </div>
     <div class="right">
       <div class="right-cont">
@@ -301,8 +252,8 @@ export default {
   props: {},
   data() {
     return {
-      getProList:null,
-      appOrg: "10001",
+      menuFlag: true,
+      appOrg: "0000",
       num: 0,
       parest:[
         {name:"可研评审",num:0},{name:"初设评审",num:0},
@@ -332,6 +283,7 @@ export default {
       list2: [],
       imgUrl:'',
       curCompanyear:'',
+      getProList:'',
       curCompanMonth:null,
       showRes:0,
       showC:false,
@@ -384,7 +336,44 @@ export default {
       monitorInfo: {},
       monitorName: '',
       curCompany: [],
-      company: company,
+      company: [
+        {
+          "value": "10001",
+          "label": "国网山西省电力公司",
+          "children": [
+            {
+              "value": "10001",
+              "label": "山西省公司(本部)",
+              "poi": [112.316448, 38.000045],
+              "city": "山西省"
+            },
+            {
+              "value": "1A001",
+              "label": "国网营销服务中心",
+              "poi": [112.36677, 37.756826],
+              "city": "太原市"
+            },
+            {
+              "value": "1A002",
+              "label": "国网超高压变电分公司",
+              "poi": [112.555937, 37.785564],
+              "city": "太原市"
+            },
+            {
+              "value": "1A004",
+              "label": "国网电力科学技术研究院",
+              "poi": [112.567029, 37.858831],
+              "city": "太原市"
+            },
+            {
+              "value": "1A005",
+              "label": "国网山西省电力公司党校",
+              "poi": [112.56677, 38.056826],
+              "city": "太原市"
+            }
+          ]
+        }
+      ]
     };
   },
   created() {
@@ -399,11 +388,30 @@ export default {
   beforeDestroy() {},
   mounted() {},
   methods: {
+    handleCompanyChange(e){
+      this.$refs.map.getProject(e[1])
+      if (!e[1]){
+        this.transmit('0000')
+        return
+      }
+      this.transmit(e[1])
+    },
     transmit(appOrg){
+      if (appOrg === "0000"){
+        this.menuFlag = true
+        this.curCompany = []
+      }
       this.appOrg = appOrg
       this.getProjectNum();
       this.getProjectNumX();
     },
+    changeMenuFlag(){
+      this.menuFlag = false
+    },
+    changeCurCompany(){
+      this.curCompany = ['10001', '10001']
+      this.transmit('10001')
+    },
     //前期审批数量
     getProjectNum() {
       getProjectNum(this.appOrg).then((res) => {
@@ -588,8 +596,8 @@ export default {
       this.showCenter = false;
       this.showType = 0;
     },
-  //关闭监控视频
-  onCloseMonitor1() {
+    //关闭监控视频
+    onCloseMonitor1() {
       this.showCenter = false;
       this.showC = true;
       this.showType = 0;
@@ -721,6 +729,7 @@ export default {
     padding: 125px 0 0 0px;
     position: relative;
     .bottom-area {
+      width: 200px;
       position: absolute;
       right: 50px;
       left: 50px;
@@ -922,5 +931,9 @@ export default {
     // border-radius: 5px;
   }
 }
+
+.dropDown .el-cascader-panel{
+  height: 150px !important;
+}
 </style>
 

+ 72 - 3
src/views/pad/map/map.vue

@@ -168,6 +168,9 @@ export default {
   },
   data(){
     return{
+      charts: null,
+      childCharts: null,
+      childExCharts: null,
       backName: null,
       backAppOrg: null,
       sign: null,
@@ -346,6 +349,42 @@ export default {
   created () {},
   mounted() {},
   methods: {
+    getProject(appOrg){
+      this.projectList = []
+      if (!appOrg) {
+        this.setChartsOption(this.projectList)
+      }
+      else {
+        getProjectByAppOrg(appOrg).then((res) => {
+          if (Number(res.code) === 200) {
+            for (let it of res.data){
+              let coordinate = []
+              let obj = {}
+              coordinate.push(it.abscissa)
+              coordinate.push(it.ordinate)
+              obj.coordinate = coordinate
+              obj.name = it.projectName
+              obj.appOrg = it.appOrg
+              obj.subdivision = it.subdivision
+              this.projectList.push(obj)
+            }
+            this.setChartsOption(this.projectList)
+          }
+        })
+      }
+    },
+
+    setChartsOption(projectList){
+      if (this.charts){
+        this.charts.setOption({
+          series: [{ name: 'prj', type: 'scatter', data: projectList.map(({ name, coordinate }) => ({
+              name, // 点名称
+              value: coordinate // 经纬度坐标
+            }))
+          }]
+        });
+      }
+    },
     start(){
       this.$nextTick(() => {
         let i = 0
@@ -371,7 +410,7 @@ export default {
           show: true, // 是否显示 tooltip
           trigger: "item", // 触发类型,"item" 表示鼠标悬浮在图形上时触发
           formatter: (params) => // 格式化提示框内容
-            params.seriesType === "scatter"
+            params.seriesType === "scatter" && params.componentIndex === 0
               ? `在建项目:${params.data.x}<br/>施工项目:${params.data.y}`
               : params.name, // 如果是 scatter 图表,显示额外数据,否则显示地区名称
           backgroundColor: "rgba(66,85,87,0.71)", // 提示框背景颜色(半透明黑色)
@@ -462,6 +501,28 @@ export default {
               y, // 额外数据(施工项目数)
             })),
           },
+
+          {
+            type: "scatter", // 散点图(用于标注特殊位置)
+            coordinateSystem: "geo", // 使用 `geo` 作为坐标系
+            name: "prj",
+            symbol: "image://" + require("@/assets/images/main/map/shi.png"), // 自定义标记
+            symbolSize: 12, // 标记的大小
+            data: []
+          },
+
+          {
+            type: "scatter", // 散点图(用于标注特殊位置)
+            coordinateSystem: "geo", // 使用 `geo` 作为坐标系
+            name: "center",
+            symbol: "image://" + require("@/assets/images/build_icon.png"),
+            symbolSize: 40, // 标记的大小
+            data: [{
+              name: "山西省公司(本部)",
+              value: [112.416448, 37.900045],
+              appOrg: "10001"
+            }]
+          },
         ],
       };
       // 地图注册,第一个参数的名字必须和option.geo.map一致
@@ -472,7 +533,9 @@ export default {
         if (params.componentType === "geo") {
           // 点击的是地图区域
           console.log("Clicked map area: ", params.name);
-        } else if (params.componentType === "series") {
+        }
+        else if (params.componentType === "series" && params.componentIndex === 0) {
+          console.log(params)
           // 点击的是自定义图标(scatter)
           this.appOrg = params.data.appOrg
           this.$emit('transmit', this.appOrg)
@@ -480,6 +543,8 @@ export default {
           this.charts.dispose();
           // 重新初始化并设置新的配置项
           this.$nextTick(() => {
+            this.$emit('changeMenuFlag')
+            this.projectList = []
             getProjectByAppOrg(this.appOrg).then((res) => {
               if (Number(res.code) === 200) {
                 for (let it of res.data){
@@ -501,6 +566,10 @@ export default {
             })
           });
         }
+        else if(params.componentIndex === 3){
+          this.getProject('10001')
+          this.$emit('changeCurCompany')
+        }
       });
     },
     initChildren(cityName){
@@ -723,7 +792,7 @@ export default {
         this.childCharts.dispose();
         this.initCharts()
         this.showBack = false
-        this.appOrg = "10001"
+        this.appOrg = "0000"
         this.$emit('transmit', this.appOrg)
       }
       else {

+ 24 - 9
src/views/pad/map/mapTwo.vue

@@ -2,10 +2,10 @@
   <div style="width: 680px">
     <div ref="charts" style="width: 100%;height: 920px;margin-top: -80px"></div>
     <img
-        id="mapBackground"
-        src="@/assets/images/main/map_bg.jpg"
-        alt=""
-        style="display: none"
+      id="mapBackground"
+      src="@/assets/images/main/map_bg.jpg"
+      alt=""
+      style="display: none"
     />
     <img
       v-if="showBack"
@@ -54,7 +54,7 @@ export default {
         晋城市: 晋城市,
       },
       points:[
-        { name: "太原市", coordinate: [112.3493, 37.7570], appOrg: "1A003", x: "0", y: "2" },
+        { name: "太原市", coordinate: [111.6993, 38.0570], appOrg: "1A003", x: "0", y: "2" },
         { name: "大同市", coordinate: [113.3002, 40.0768], appOrg: "1B001", x: "0", y: "2" },
         { name: "阳泉市", coordinate: [113.6805, 37.7863], appOrg: "1C001", x: "0", y: "2" },
         { name: "长治市", coordinate: [113.1163, 36.1954], appOrg: "1D001", x: "0", y: "2" },
@@ -190,6 +190,19 @@ export default {
               y, // 额外数据(施工项目数)
             })),
           },
+
+          {
+            type: "scatter", // 散点图(用于标注特殊位置)
+            coordinateSystem: "geo", // 使用 `geo` 作为坐标系
+            name: "center",
+            symbol: "image://" + require("@/assets/images/build_icon.png"),
+            symbolSize: 40, // 标记的大小
+            data: [{
+              name: "山西省公司(本部)",
+              value: [112.416448, 37.900045],
+              appOrg: "10001"
+            }]
+          },
         ],
       };
       // 地图注册,第一个参数的名字必须和option.geo.map一致
@@ -200,18 +213,20 @@ export default {
         if (params.componentType === "geo") {
           // 点击的是地图区域
           console.log("Clicked map area: ", params.name);
-        } else if (params.componentType === "series") {
+        } else if (params.componentType === "series" && params.componentIndex < 2) {
           this.appOrg = params.data.appOrg
           this.$emit('transmit', this.appOrg)
           // 点击的是自定义图标(scatter)
           // 销毁当前图表实例
-          charts.dispose();
+          // charts.dispose();
           // 重新初始化并设置新的配置项
           this.$nextTick(() => {
-           // this.initChildren(params.name) // 重新初始化图表
-           this.initCharts();
+            // this.initChildren(params.name) // 重新初始化图表
+            // this.initCharts();
             this.showBack = true
           });
+        }else if(params.componentIndex === 2){
+          this.$emit('changeCurCompany')
         }
       });
     },

+ 1 - 1
src/views/pad/map/shanxi.json

@@ -6,7 +6,7 @@
       "properties": {
         "adcode": 140100,
         "name": "太原市",
-        "center": [112.549248, 37.857014],
+        "cp": [112.549248, 38.127014],
         "centroid": [112.322147, 37.960573],
         "childrenNum": 10,
         "level": "city",

+ 114 - 120
src/views/pad/official/main.vue

@@ -37,15 +37,9 @@
     </div>
     <div class="middle">
       <img src="@/assets/zhang/publicCar/officialCar.png" width="50" style="position: absolute;top: 125px;left: 20px;cursor: pointer">
-      <MapTwo @transmit="transmit" :mapData="mapData" ref="map"></MapTwo>
-<!--      <img
-        v-if="showLocal"
-        class="build"
-        src="@/assets/images/build.png"
-        alt=""
-      />-->
+      <MapTwo @transmit="transmit" @changeCurCompany="changeCurCompany" :mapData="mapData" ref="map"></MapTwo>
       <!-- 返回按钮 -->
-<!--      <div class="bottom-area flex-row align-items-center space-between">
+      <div class="bottom-area flex-row align-items-center space-between" v-if="menuFlag">
         <div class="bottom-left flex-row align-items-center">
           <div class="left-item">
             <el-cascader
@@ -54,6 +48,8 @@
               @change="handleCompanyChange"
               placeholder="单位"
               :show-all-levels="false"
+              popper-class="dropDown"
+              clearable
             >
               <template slot-scope="{ node, data }">
                 <div style="display: flex; align-items: center">
@@ -73,38 +69,11 @@
                       background: rgb(255, 180, 74);
                     "
                   ></span>
-                  <span
-                    v-else-if="data.value.length == 5 && data.value != '10001'"
-                    style="
-                      display: inline-block;
-                      width: 10px;
-                      height: 10px;
-                      border-radius: 50%;
-                      margin-right: 10px;
-                      background: rgb(74, 194, 29);
-                    "
-                  ></span>
-                  <span
-                    v-else-if="data.value.length == 7"
-                    style="
-                      display: inline-block;
-                      width: 10px;
-                      height: 10px;
-                      border-radius: 50%;
-                      margin-right: 10px;
-                      background: rgb(99, 235, 255);
-                    "
-                  ></span>
                   <span>{{ data.label }}</span>
                 </div>
-                &lt;!&ndash; <div
-                    v-if="data.level == 2"
-                    style="width: 1.5vh;height: 1.5vh;background-color: red;border-radius: 60%;margin-top:10px;margin-left:10px;float:right"
-                  ></div> &ndash;&gt;
               </template>
             </el-cascader>
           </div>
-          <div class="office" disabled>办公区</div>
         </div>
         <div class="bottom-right">
           <img
@@ -114,7 +83,7 @@
             class="back"
           />
         </div>
-      </div>-->
+      </div>
     </div>
     <div class="right">
       <div class="right-cont" v-if="rightShow">
@@ -229,16 +198,10 @@ export default {
     CarWarningDialog,
     CarStockDialog,
   },
-  // props: {
-  //   appOrg: {
-  //     type: String,
-  //     default: "0000",
-  //   },
-  // },
   data() {
     return {
+      menuFlag: true,
       total: 0,
-      alertType: null,
       dataList: [],
       mapData:[],
       flag: 0,
@@ -262,9 +225,47 @@ export default {
       showBack: false,
       showMap: true,
       showLocal: false,
-      appOrg: "10001",
+      appOrg: "0000",
+      alertType: null,
       curCompany: [],
-      company: company,
+      company: [
+        {
+          "value": "10001",
+          "label": "国网山西省电力公司",
+          "children": [
+            {
+              "value": "10001",
+              "label": "山西省公司(本部)",
+              "poi": [112.316448, 38.000045],
+              "city": "山西省"
+            },
+            {
+              "value": "1A001",
+              "label": "国网营销服务中心",
+              "poi": [112.36677, 37.756826],
+              "city": "太原市"
+            },
+            {
+              "value": "1A002",
+              "label": "国网超高压变电分公司",
+              "poi": [112.555937, 37.785564],
+              "city": "太原市"
+            },
+            {
+              "value": "1A004",
+              "label": "国网电力科学技术研究院",
+              "poi": [112.567029, 37.858831],
+              "city": "太原市"
+            },
+            {
+              "value": "1A005",
+              "label": "国网山西省电力公司党校",
+              "poi": [112.56677, 38.056826],
+              "city": "太原市"
+            }
+          ]
+        }
+      ]
     };
   },
   created() {
@@ -277,6 +278,20 @@ export default {
   beforeDestroy() {},
   mounted() {},
   methods: {
+    handleCompanyChange(e){
+      console.log(this.curCompany)
+      if (!e[1]){
+        this.transmit('0000')
+        return
+      }
+      this.transmit(e[1])
+    },
+
+    changeCurCompany(){
+      this.curCompany = ['10001', '10001']
+      this.transmit('10001')
+    },
+
     handlePageChangeX(page, pageSize){
       getCarDetail(this.appOrg, 1, pageSize, page).then(res => {
         if (Number(res.code) === 200) {
@@ -325,55 +340,55 @@ export default {
 
     resource(){
       getResource(this.appOrg).then(res => {
-          if (Number(res.code) === 200) {
-            this.resourceData = res.data
-            this.resourceData.cd = 5 - this.resourceData.totalCarNum.toString().length
-            this.resourceData.totalCarNum = this.resourceData.totalCarNum.toString().padStart(5, '0');
-            this.resourceData.percentageLack = (this.resourceData.totalCarNum !== 0) ? Math.round(((this.resourceData.totalCarNum - this.resourceData.establishmentsCarNum) / this.resourceData.totalCarNum) * 100) : 0;
-            this.resourceData.percentagePosess = (this.resourceData.totalCarNum !== 0) ? Math.round((this.resourceData.establishmentsCarNum / this.resourceData.totalCarNum) * 100) : 0;
-            this.carTypeNum = [
-              {
-                type: "商务车",
-                num: this.resourceData.carNumOne
-              },
-              {
-                type: "越野车",
-                num: this.resourceData.carNumTwo
-              },
-              {
-                type: "小轿车",
-                num: this.resourceData.carNumThree
-              },
-              {
-                type: "小型客车",
-                num: this.resourceData.carNumFour
-              },
-              {
-                type: "大型客车",
-                num: this.resourceData.carNumFive
-              }
-            ]
-            this.carUseNum = [
-                {
-                  type: "企业用车",
-                  num: this.resourceData.enterpriseCarNum
-                },
-                {
-                  type: "企业负责人用车",
-                  num: this.resourceData.headCarNum
-                }
-              ]
-            this.carActivationNum = [
-              {
-                type: "燃油汽车",
-                num: this.resourceData.oilCarNum
-              },
-              {
-                type: "新能源汽车",
-                num: this.resourceData.newPowerCarNum
-              }
-            ]
-          }
+        if (Number(res.code) === 200) {
+          this.resourceData = res.data
+          this.resourceData.cd = 5 - this.resourceData.totalCarNum.toString().length
+          this.resourceData.totalCarNum = this.resourceData.totalCarNum.toString().padStart(5, '0');
+          this.resourceData.percentageLack = (this.resourceData.totalCarNum !== 0) ? Math.round(((this.resourceData.totalCarNum - this.resourceData.establishmentsCarNum) / this.resourceData.totalCarNum) * 100) : 0;
+          this.resourceData.percentagePosess = (this.resourceData.totalCarNum !== 0) ? Math.round((this.resourceData.establishmentsCarNum / this.resourceData.totalCarNum) * 100) : 0;
+          this.carTypeNum = [
+            {
+              type: "商务车",
+              num: this.resourceData.carNumOne
+            },
+            {
+              type: "越野车",
+              num: this.resourceData.carNumTwo
+            },
+            {
+              type: "小轿车",
+              num: this.resourceData.carNumThree
+            },
+            {
+              type: "小型客车",
+              num: this.resourceData.carNumFour
+            },
+            {
+              type: "大型客车",
+              num: this.resourceData.carNumFive
+            }
+          ]
+          this.carUseNum = [
+            {
+              type: "企业用车",
+              num: this.resourceData.enterpriseCarNum
+            },
+            {
+              type: "企业负责人用车",
+              num: this.resourceData.headCarNum
+            }
+          ]
+          this.carActivationNum = [
+            {
+              type: "燃油汽车",
+              num: this.resourceData.oilCarNum
+            },
+            {
+              type: "新能源汽车",
+              num: this.resourceData.newPowerCarNum
+            }
+          ]
+        }
       })
     },
     monitor(){
@@ -409,7 +424,6 @@ export default {
 
     chooseOp(title, alertType){
       this.op = title
-      this.closeDialog()
       this.alertType = alertType
       getWarnDetail(this.appOrg, alertType, 10, 0).then(res => {
         if (Number(res.code) === 200) {
@@ -432,7 +446,6 @@ export default {
     },
 
     chooseCost(){
-      this.closeDialog()
       getCarDetail(this.appOrg, 0, 10, 0).then(res => {
         if (Number(res.code) === 200) {
           this.dataList = res.data.list
@@ -448,7 +461,6 @@ export default {
     },
 
     chooseHealth(){
-      this.closeDialog()
       getCarDetail(this.appOrg, 1, 10, 0).then(res => {
         if (Number(res.code) === 200) {
           this.dataList = res.data.list
@@ -518,29 +530,6 @@ export default {
       this.$refs.province.reloadMap(this.curDeep);
     },
 
-    //选择公司
-    handleCompanyChange(e) {
-      console.log(e);
-      if (e && e.length > 0) {
-        if (e[1] == "10001") {
-          this.showMap = false;
-          this.showLocal = true;
-          this.showBack = true;
-        } else {
-          this.showMap = true;
-          this.showLocal = false;
-        }
-        let appOrg = e[e.length - 1];
-        this.appOrg = appOrg;
-      }
-      if(e[1] == "1A001" || e[1] == "1A002" || e[1] == "1A004" || e[1] == "1A005"){
-        this.showMap = true;
-        this.showLocal = false;
-        this.showBack = true;
-        // return;
-      }
-      this.$refs.province.chooseUnit(e);
-    },
   },
 };
 </script>
@@ -606,6 +595,7 @@ export default {
     padding: 125px 0 0 0px;
     position: relative;
     .bottom-area {
+      width: 200px;
       position: absolute;
       right: 50px;
       left: 50px;
@@ -778,5 +768,9 @@ export default {
     // border-radius: 5px;
   }
 }
+
+.dropDown .el-cascader-panel{
+  height: 150px !important;
+}
 </style>
 

+ 1 - 1
src/views/pad/official/resourceList.vue

@@ -13,7 +13,7 @@
             <div class="flex-column" style="width: 15%">车牌号</div>
             <div class="flex-column" style="width: 15%">预警类型</div>
             <div class="flex-column" style="width: 20%">预警起始时间</div>
-            <div class="flex-column" style="width: 20%">警终止时间</div>
+            <div class="flex-column" style="width: 20%">警终止时间</div>
           </div>
           <div class="flex-row" v-for="(item,index) in dataList" :key="index" @click="choose()">
             <div class="flex-column" style="width: 30%">{{item.appName}}</div>

+ 69 - 56
src/views/screen/engineering/main.vue

@@ -39,34 +39,10 @@
       </div>
     </div>
     <div class="middle flex-column">
-      <!-- <div class="menu-area flex-row align-items-center space-between">
-        <div v-for="(item, index) in dataList" :key="index" class="rate-area">
-          <img src="@/assets/images/main/rate_bg.png" class="icon" alt="" />
-          <div class="rate">
-            <div class="rate-data">
-              <div class="data">{{ item.num }}</div>
-              <div class="unit">{{ item.unit }}</div>
-            </div>
-          </div>
-          <div class="desc">{{ item.name }}</div>
-        </div>
-      </div> -->
-<!--      <province
-        v-if="showMap"
-        ref="province"
-        height="850px"
-        @mapClick="onMapClick"
-      ></province>-->
-      <Map @transmit="transmit" v-if="showMap" :list1="list1" :list2="list2" ref="map"></Map>
-      <div
-        v-if="showLocal"
-        class="img-area flex-row align-items-center flex-center"
-      >
-        <img class="build" src="@/assets/images/build.png" alt="" />
-      </div>
+      <Map @changeMenuFlag="changeMenuFlag" @transmit="transmit" @changeCurCompany="changeCurCompany" v-if="showMap" :list1="list1" :list2="list2" ref="map"></Map>
 
       <!-- 返回按钮 -->
-<!--      <div class="bottom-area flex-row align-items-center space-between">
+      <div class="bottom-area flex-row align-items-center space-between" v-if="menuFlag">
         <div class="bottom-left flex-row align-items-center">
           <div class="left-item">
             <el-cascader
@@ -75,6 +51,8 @@
               @change="handleCompanyChange"
               placeholder="单位"
               :show-all-levels="false"
+              popper-class="dropDown"
+              clearable
             >
               <template slot-scope="{ node, data }">
                 <div style="display: flex; align-items: center">
@@ -94,38 +72,11 @@
                       background: rgb(255, 180, 74);
                     "
                   ></span>
-                  <span
-                    v-else-if="data.value.length == 5 && data.value != '10001'"
-                    style="
-                      display: inline-block;
-                      width: 10px;
-                      height: 10px;
-                      border-radius: 50%;
-                      margin-right: 10px;
-                      background: rgb(74, 194, 29);
-                    "
-                  ></span>
-                  <span
-                    v-else-if="data.value.length == 7"
-                    style="
-                      display: inline-block;
-                      width: 10px;
-                      height: 10px;
-                      border-radius: 50%;
-                      margin-right: 10px;
-                      background: rgb(99, 235, 255);
-                    "
-                  ></span>
                   <span>{{ data.label }}</span>
                 </div>
-                &lt;!&ndash; <div
-                    v-if="data.level == 2"
-                    style="width: 1.5vh;height: 1.5vh;background-color: red;border-radius: 60%;margin-top:10px;margin-left:10px;float:right"
-                  ></div> &ndash;&gt;
               </template>
             </el-cascader>
           </div>
-          <div class="office" disabled>办公区</div>
         </div>
         <div class="bottom-right">
           <img
@@ -135,7 +86,7 @@
             class="back"
           />
         </div>
-      </div>-->
+      </div>
     </div>
     <div class="right">
       <div class="right-cont">
@@ -302,7 +253,8 @@ export default {
   props: {},
   data() {
     return {
-      appOrg: "10001",
+      menuFlag: true,
+      appOrg: "0000",
       num: 0,
       parest:[
         {name:"可研评审",num:0},{name:"初设评审",num:0},
@@ -385,7 +337,44 @@ export default {
       monitorInfo: {},
       monitorName: '',
       curCompany: [],
-      company: company,
+      company: [
+        {
+          "value": "10001",
+          "label": "国网山西省电力公司",
+          "children": [
+            {
+              "value": "10001",
+              "label": "山西省公司(本部)",
+              "poi": [112.316448, 38.000045],
+              "city": "山西省"
+            },
+            {
+              "value": "1A001",
+              "label": "国网营销服务中心",
+              "poi": [112.36677, 37.756826],
+              "city": "太原市"
+            },
+            {
+              "value": "1A002",
+              "label": "国网超高压变电分公司",
+              "poi": [112.555937, 37.785564],
+              "city": "太原市"
+            },
+            {
+              "value": "1A004",
+              "label": "国网电力科学技术研究院",
+              "poi": [112.567029, 37.858831],
+              "city": "太原市"
+            },
+            {
+              "value": "1A005",
+              "label": "国网山西省电力公司党校",
+              "poi": [112.56677, 38.056826],
+              "city": "太原市"
+            }
+          ]
+        }
+      ]
     };
   },
   created() {
@@ -400,11 +389,30 @@ export default {
   beforeDestroy() {},
   mounted() {},
   methods: {
+    handleCompanyChange(e){
+      this.$refs.map.getProject(e[1])
+      if (!e[1]){
+        this.transmit('0000')
+        return
+      }
+      this.transmit(e[1])
+    },
     transmit(appOrg){
+      if (appOrg === "0000"){
+        this.menuFlag = true
+        this.curCompany = []
+      }
       this.appOrg = appOrg
       this.getProjectNum();
       this.getProjectNumX();
     },
+    changeMenuFlag(){
+      this.menuFlag = false
+    },
+    changeCurCompany(){
+      this.curCompany = ['10001', '10001']
+      this.transmit('10001')
+    },
     //前期审批数量
     getProjectNum() {
       getProjectNum(this.appOrg).then((res) => {
@@ -722,6 +730,7 @@ export default {
     padding: 125px 0 0 0px;
     position: relative;
     .bottom-area {
+      width: 200px;
       position: absolute;
       right: 50px;
       left: 50px;
@@ -923,5 +932,9 @@ export default {
     // border-radius: 5px;
   }
 }
+
+.dropDown .el-cascader-panel{
+  height: 150px !important;
+}
 </style>
 

+ 72 - 3
src/views/screen/map/map.vue

@@ -168,6 +168,9 @@ export default {
   },
   data(){
     return{
+      charts: null,
+      childCharts: null,
+      childExCharts: null,
       backName: null,
       backAppOrg: null,
       sign: null,
@@ -346,6 +349,42 @@ export default {
   created () {},
   mounted() {},
   methods: {
+    getProject(appOrg){
+      this.projectList = []
+      if (!appOrg) {
+        this.setChartsOption(this.projectList)
+      }
+      else {
+        getProjectByAppOrg(appOrg).then((res) => {
+          if (Number(res.code) === 200) {
+            for (let it of res.data){
+              let coordinate = []
+              let obj = {}
+              coordinate.push(it.abscissa)
+              coordinate.push(it.ordinate)
+              obj.coordinate = coordinate
+              obj.name = it.projectName
+              obj.appOrg = it.appOrg
+              obj.subdivision = it.subdivision
+              this.projectList.push(obj)
+            }
+            this.setChartsOption(this.projectList)
+          }
+        })
+      }
+    },
+
+    setChartsOption(projectList){
+      if (this.charts){
+        this.charts.setOption({
+          series: [{ name: 'prj', type: 'scatter', data: projectList.map(({ name, coordinate }) => ({
+              name, // 点名称
+              value: coordinate // 经纬度坐标
+            }))
+          }]
+        });
+      }
+    },
     start(){
       this.$nextTick(() => {
         let i = 0
@@ -371,7 +410,7 @@ export default {
           show: true, // 是否显示 tooltip
           trigger: "item", // 触发类型,"item" 表示鼠标悬浮在图形上时触发
           formatter: (params) => // 格式化提示框内容
-              params.seriesType === "scatter"
+              params.seriesType === "scatter" && params.componentIndex === 0
                   ? `在建项目:${params.data.x}<br/>施工项目:${params.data.y}`
                   : params.name, // 如果是 scatter 图表,显示额外数据,否则显示地区名称
           backgroundColor: "rgba(66,85,87,0.71)", // 提示框背景颜色(半透明黑色)
@@ -462,6 +501,28 @@ export default {
               y, // 额外数据(施工项目数)
             })),
           },
+
+          {
+            type: "scatter", // 散点图(用于标注特殊位置)
+            coordinateSystem: "geo", // 使用 `geo` 作为坐标系
+            name: "prj",
+            symbol: "image://" + require("@/assets/images/main/map/shi.png"), // 自定义标记
+            symbolSize: 12, // 标记的大小
+            data: []
+          },
+
+          {
+            type: "scatter", // 散点图(用于标注特殊位置)
+            coordinateSystem: "geo", // 使用 `geo` 作为坐标系
+            name: "center",
+            symbol: "image://" + require("@/assets/images/build_icon.png"),
+            symbolSize: 40, // 标记的大小
+            data: [{
+              name: "山西省公司(本部)",
+              value: [112.416448, 37.900045],
+              appOrg: "10001"
+            }]
+          },
         ],
       };
       // 地图注册,第一个参数的名字必须和option.geo.map一致
@@ -472,7 +533,9 @@ export default {
         if (params.componentType === "geo") {
           // 点击的是地图区域
           console.log("Clicked map area: ", params.name);
-        } else if (params.componentType === "series") {
+        }
+        else if (params.componentType === "series" && params.componentIndex === 0) {
+          console.log(params)
           // 点击的是自定义图标(scatter)
           this.appOrg = params.data.appOrg
           this.$emit('transmit', this.appOrg)
@@ -480,6 +543,8 @@ export default {
           this.charts.dispose();
           // 重新初始化并设置新的配置项
           this.$nextTick(() => {
+            this.$emit('changeMenuFlag')
+            this.projectList = []
             getProjectByAppOrg(this.appOrg).then((res) => {
               if (Number(res.code) === 200) {
                 for (let it of res.data){
@@ -501,6 +566,10 @@ export default {
             })
           });
         }
+        else if(params.componentIndex === 3){
+          this.getProject('10001')
+          this.$emit('changeCurCompany')
+        }
       });
     },
     initChildren(cityName){
@@ -723,7 +792,7 @@ export default {
         this.childCharts.dispose();
         this.initCharts()
         this.showBack = false
-        this.appOrg = "10001"
+        this.appOrg = "0000"
         this.$emit('transmit', this.appOrg)
       }
       else {

+ 19 - 4
src/views/screen/map/mapTwo.vue

@@ -54,7 +54,7 @@ export default {
         晋城市: 晋城市,
       },
       points:[
-        { name: "太原市", coordinate: [112.3493, 37.7570], appOrg: "1A003", x: "0", y: "2" },
+        { name: "太原市", coordinate: [111.6993, 38.0570], appOrg: "1A003", x: "0", y: "2" },
         { name: "大同市", coordinate: [113.3002, 40.0768], appOrg: "1B001", x: "0", y: "2" },
         { name: "阳泉市", coordinate: [113.6805, 37.7863], appOrg: "1C001", x: "0", y: "2" },
         { name: "长治市", coordinate: [113.1163, 36.1954], appOrg: "1D001", x: "0", y: "2" },
@@ -190,6 +190,19 @@ export default {
               y, // 额外数据(施工项目数)
             })),
           },
+
+          {
+            type: "scatter", // 散点图(用于标注特殊位置)
+            coordinateSystem: "geo", // 使用 `geo` 作为坐标系
+            name: "center",
+            symbol: "image://" + require("@/assets/images/build_icon.png"),
+            symbolSize: 40, // 标记的大小
+            data: [{
+              name: "山西省公司(本部)",
+              value: [112.416448, 37.900045],
+              appOrg: "10001"
+            }]
+          },
         ],
       };
       // 地图注册,第一个参数的名字必须和option.geo.map一致
@@ -200,18 +213,20 @@ export default {
         if (params.componentType === "geo") {
           // 点击的是地图区域
           console.log("Clicked map area: ", params.name);
-        } else if (params.componentType === "series") {
+        } else if (params.componentType === "series" && params.componentIndex < 2) {
           this.appOrg = params.data.appOrg
           this.$emit('transmit', this.appOrg)
           // 点击的是自定义图标(scatter)
           // 销毁当前图表实例
-          charts.dispose();
+          // charts.dispose();
           // 重新初始化并设置新的配置项
           this.$nextTick(() => {
             // this.initChildren(params.name) // 重新初始化图表
-            this.initCharts();
+            // this.initCharts();
             this.showBack = true
           });
+        }else if(params.componentIndex === 2){
+          this.$emit('changeCurCompany')
         }
       });
     },

+ 1 - 1
src/views/screen/map/shanxi.json

@@ -6,7 +6,7 @@
       "properties": {
         "adcode": 140100,
         "name": "太原市",
-        "center": [112.549248, 37.857014],
+        "cp": [112.549248, 38.127014],
         "centroid": [112.322147, 37.960573],
         "childrenNum": 10,
         "level": "city",

+ 106 - 27
src/views/screen/official/main.vue

@@ -37,8 +37,53 @@
     </div>
     <div class="middle">
       <img src="@/assets/zhang/publicCar/officialCar.png" width="50" style="position: absolute;top: 125px;left: 20px;cursor: pointer">
-      <MapTwo @transmit="transmit" :mapData="mapData" ref="map"></MapTwo>
-
+      <MapTwo @transmit="transmit" @changeCurCompany="changeCurCompany" :mapData="mapData" ref="map"></MapTwo>
+      <!-- 返回按钮 -->
+      <div class="bottom-area flex-row align-items-center space-between" v-if="menuFlag">
+        <div class="bottom-left flex-row align-items-center">
+          <div class="left-item">
+            <el-cascader
+              v-model="curCompany"
+              :options="company"
+              @change="handleCompanyChange"
+              placeholder="单位"
+              :show-all-levels="false"
+              popper-class="dropDown"
+              clearable
+            >
+              <template slot-scope="{ node, data }">
+                <div style="display: flex; align-items: center">
+                  <img
+                    v-if="data.label == '山西省公司(本部)'"
+                    src="../../../assets/images/main/tiaozhuanlouyu.png"
+                    style="width: 15px; margin-right: 10px"
+                  />
+                  <span
+                    v-else-if="data.value == '1A001' || data.value == '1A002' || data.value == '1A004' || data.value == '1A005'"
+                    style="
+                      display: inline-block;
+                      width: 10px;
+                      height: 10px;
+                      border-radius: 50%;
+                      margin-right: 10px;
+                      background: rgb(255, 180, 74);
+                    "
+                  ></span>
+                  <span>{{ data.label }}</span>
+                </div>
+              </template>
+            </el-cascader>
+          </div>
+        </div>
+        <div class="bottom-right">
+          <img
+            v-if="showBack"
+            @click="onBack"
+            src="@/assets/images/main/back.png"
+            class="back"
+          />
+        </div>
+      </div>
     </div>
     <div class="right">
       <div class="right-cont" v-if="rightShow">
@@ -155,6 +200,7 @@ export default {
   },
   data() {
     return {
+      menuFlag: true,
       total: 0,
       dataList: [],
       mapData:[],
@@ -179,10 +225,47 @@ export default {
       showBack: false,
       showMap: true,
       showLocal: false,
-      appOrg: "10001",
+      appOrg: "0000",
       alertType: null,
       curCompany: [],
-      company: company,
+      company: [
+        {
+          "value": "10001",
+          "label": "国网山西省电力公司",
+          "children": [
+            {
+              "value": "10001",
+              "label": "山西省公司(本部)",
+              "poi": [112.316448, 38.000045],
+              "city": "山西省"
+            },
+            {
+              "value": "1A001",
+              "label": "国网营销服务中心",
+              "poi": [112.36677, 37.756826],
+              "city": "太原市"
+            },
+            {
+              "value": "1A002",
+              "label": "国网超高压变电分公司",
+              "poi": [112.555937, 37.785564],
+              "city": "太原市"
+            },
+            {
+              "value": "1A004",
+              "label": "国网电力科学技术研究院",
+              "poi": [112.567029, 37.858831],
+              "city": "太原市"
+            },
+            {
+              "value": "1A005",
+              "label": "国网山西省电力公司党校",
+              "poi": [112.56677, 38.056826],
+              "city": "太原市"
+            }
+          ]
+        }
+      ]
     };
   },
   created() {
@@ -195,6 +278,20 @@ export default {
   beforeDestroy() {},
   mounted() {},
   methods: {
+    handleCompanyChange(e){
+      console.log(this.curCompany)
+      if (!e[1]){
+        this.transmit('0000')
+        return
+      }
+      this.transmit(e[1])
+    },
+
+    changeCurCompany(){
+      this.curCompany = ['10001', '10001']
+      this.transmit('10001')
+    },
+
     handlePageChangeX(page, pageSize){
       getCarDetail(this.appOrg, 1, pageSize, page).then(res => {
         if (Number(res.code) === 200) {
@@ -433,29 +530,6 @@ export default {
       this.$refs.province.reloadMap(this.curDeep);
     },
 
-    //选择公司
-    handleCompanyChange(e) {
-      console.log(e);
-      if (e && e.length > 0) {
-        if (e[1] == "10001") {
-          this.showMap = false;
-          this.showLocal = true;
-          this.showBack = true;
-        } else {
-          this.showMap = true;
-          this.showLocal = false;
-        }
-        let appOrg = e[e.length - 1];
-        this.appOrg = appOrg;
-      }
-      if(e[1] == "1A001" || e[1] == "1A002" || e[1] == "1A004" || e[1] == "1A005"){
-        this.showMap = true;
-        this.showLocal = false;
-        this.showBack = true;
-        // return;
-      }
-      this.$refs.province.chooseUnit(e);
-    },
   },
 };
 </script>
@@ -520,6 +594,7 @@ export default {
     padding: 125px 0 0 0px;
     position: relative;
     .bottom-area {
+      width: 200px;
       position: absolute;
       right: 50px;
       left: 50px;
@@ -692,5 +767,9 @@ export default {
     // border-radius: 5px;
   }
 }
+
+.dropDown .el-cascader-panel{
+  height: 150px !important;
+}
 </style>
 

+ 1 - 1
src/views/screen/official/resourceList.vue

@@ -13,7 +13,7 @@
             <div class="flex-column" style="width: 15%">车牌号</div>
             <div class="flex-column" style="width: 15%">预警类型</div>
             <div class="flex-column" style="width: 20%">预警起始时间</div>
-            <div class="flex-column" style="width: 20%">警终止时间</div>
+            <div class="flex-column" style="width: 20%">警终止时间</div>
           </div>
           <div class="flex-row" v-for="(item,index) in dataList" :key="index" @click="choose()">
             <div class="flex-column" style="width: 30%">{{item.appName}}</div>