修改

马宇豪

2023-10-19 02400ed870dd0adb9d865a1b383bab152018e6c1

修改

 .env.development

@@ -1,5 +1,5 @@
# 本地环境
ENV = 'development'

VITE_API_URL = 'http://121.239.169.41:9091'
VITE_API_URL = 'http://192.168.0.47:17080'
#线上正式环境接口地址

 .env.production

@@ -1,5 +1,5 @@
# 线上环境
ENV = 'production'

# 科学实验线上环境接口地址
# 线上环境打包接口地址
VITE_API_URL = 'http://121.239.169.27:7000'

 index.html

@@ -26,6 +26,6 @@
            })();
        </script>
        <script type="module" src="/src/main.ts"></script>
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=wsijQt8sLXrCW71YesmispvYHitfG9gv&s=1"></script>
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=Z4tYehNEVsdeMw3Mjspdn77pV50ffc8t"></script>
    </body>
</html>

 package.json

@@ -36,6 +36,7 @@
    "sortablejs": "^1.15.0",
    "splitpanes": "^3.1.1",
    "vue": "^3.2.36",
    "vue-baidu-map-3x": "^1.0.35",
    "vue-clipboard3": "^2.0.0",
    "vue-grid-layout": "^3.0.0-beta1",
    "vue-i18n": "^9.1.10",

 src/assets/loginPage/device-pic.png

Binary files differ

 src/assets/loginPage/equipment.JPG

Binary files differ

 src/assets/loginPage/map-bg.jpg

Binary files differ

 src/assets/loginPage/map-bg.png

Binary files differ

 src/assets/loginPage/panel-bg.png

 src/assets/loginPage/panel-bg2.png

Binary files differ

 src/assets/loginPage/rollingBall.gif

Binary files differ

 src/assets/loginPage/watersys.JPG

Binary files differ

 src/assets/warningScreen/map-bg.png

 src/views/bigScreen/components/screen.vue

@@ -26,7 +26,7 @@
        </div>
      </div>
      <div class="main-content">
        <div id="bigMap"></div>
<!--        <div id="bigMap"></div>-->
        <div class="main-left">
          <div class="left-top withFilter">
            <div class="chart-head">
@@ -96,6 +96,15 @@
          </div>
        </div>
        <div class="main-middle">
<!--          <div class="bigMap">-->
<!--            <div id="bigMap"></div>-->
<!--          </div>-->
            <baidu-map class="bigMap" ak="Z4tYehNEVsdeMw3Mjspdn77pV50ffc8t" v="3.0" type="API" :scroll-wheel-zoom="true" :center="{lng: 85.057805, lat: 45.62550}" :zoom="16" @ready="initMap">
              <bm-map-type :map-types="['BMAP_SATELLITE_MAP','BMAP_NORMAL_MAP' ]" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
              <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
              <bm-polygon :path="polygonPath" stroke-color="blue" fillColor="blue" :fillOpacity="0.4" :stroke-weight="1"/>
            </baidu-map>
<!--          </div>-->
          <div class="mid-bottom">
            <div class="chart-head">
              <div class="chart-tit">气象信息</div>
@@ -230,6 +239,8 @@
import AMapLoader from '@amap/amap-jsapi-loader'
import { shallowRef } from '@vue/reactivity'
import { storeToRefs } from 'pinia';

import {BaiduMap, BmMapType, BmNavigation, BmPolygon} from 'vue-baidu-map-3x'
import { useUserInfo } from '/@/stores/userInfo';
import {bigScreenApi} from "/@/api/bigScreen";
// 定义接口来定义对象的类型
@@ -263,8 +274,12 @@
  yellowNum: null | number
  redNum: null | number
  weatherData: Array<any>
  polygonPath: Array<location>
}

interface location{
  lng: number | null
  lat: number | null
}
interface gasType {
  name: string
  id: number | null
@@ -272,7 +287,7 @@

export default defineComponent({
    name: 'bigScreen',
    components: { },
    components: {BaiduMap, BmMapType, BmNavigation, BmPolygon },
    props:{
      isFull: Boolean
    },
@@ -311,7 +326,8 @@
          warningGas: {},
          dialogWarning: false,
          countTime: 1,
          weatherData: []
          weatherData: [],
          polygonPath: []
        });
        const router = useRouter();
        const gasN = ref("eChartgasN" + Date.now() + Math.random())
@@ -326,6 +342,9 @@
          second: '2-digit',
        };

        const updatePolygonPath = (e) => {
          state.polygonPath = e.target.getPath()
        };
        // 页面加载时
        onMounted(() => {
          getGasData()
@@ -349,12 +368,21 @@
          setInterval(() => {
            getDateTime();
          }, 1000);
          initMap()
          // initMap()
        })

        onUnmounted(()=>{
          destroyedWs()
        })

        const initMap=()=>{
            state.polygonPath = [
              { lng: 85.047805, lat: 45.62550 },
              { lng: 85.047505, lat: 45.62350 },
              { lng: 85.057205, lat: 45.62350 },
              { lng: 85.057005, lat: 45.62750 }
            ]
        }
        const toNdPage = () =>{
          router.push('/gasData')
        }
@@ -896,84 +924,6 @@
        });
      }

      const map = shallowRef(null)
      const initMap=()=> {
        let m = map.value
        window._AMapSecurityConfig = {
          securityJsCode: "456045075984862a9806587f0d7fee3c",
        };
        AMapLoader.load({
          key: '5dbeedfa28e0d7fffb59684446569773', // 申请好的Web端开发者Key，首次调用 load 时必填
          version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: [] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        })
            .then(AMap => {
              if (AMap && typeof AMap.Map === 'function') {
                m = new AMap.Map('bigMap', {
                  viewMode: '3D',
                  mapStyle: 'amap://styles/normal',
                  zoom: 18,
                  center: [85.057805, 45.62550],
                  layers:[
                    // new AMap.TileLayer.RoadNet({}),
                    // new AMap.TileLayer.Satellite()
                  ],
                  zooms:[2,20],
                })

                AMap.plugin(["AMap.DistrictSearch","AMap.ToolBar","AMap.ControlBar"],()=> {
                  var district = new AMap.DistrictSearch({
                    extensions: "all",
                    subdistrict: 0,
                    level: "district",
                  });
                  district.search("克拉玛依市", function (status, result) {
                    //   // 外多边形坐标数组和内多边形坐标数组
                    var outer = [
                      new AMap.LngLat(-360, 90, true),
                      new AMap.LngLat(-360, -90, true),
                      new AMap.LngLat(360, -90, true),
                      new AMap.LngLat(360, 90, true),
                    ]; // 使得遮盖填充反向
                    var holes = result.districtList[0].boundaries; // 得到该区域的边界坐标集合

                    var pathArray = [outer];
                    pathArray.push.apply(pathArray, holes);
                    var polygon = new AMap.Polygon({
                      pathL: pathArray,
                      //线条颜色，使用16进制颜色代码赋值。默认值为#006600
                      strokeColor: "#11feee",
                      strokeWeight: 3,
                      fillColor: "#051342",
                      fillOpacity: 1,
                      strokeStyle: "solid",
                      strokeDasharray: [2, 2],
                    });
                    polygon.setPath(pathArray)
                    m.add(polygon);
                  })
                  m.addControl(new AMap.ToolBar({
                    position: {
                      top: '20px',
                      left: 'calc(25% + 5px)'
                    }
                  }))
                  m.addControl(new AMap.ControlBar({
                    position: {
                      top: '20px',
                      right: 'calc(25% + 5px)'
                    }
                  }))
                })

              } else {
                console.error('AMap 或 AMap.Map 不可用');
              }
            })
            .catch(e => {
              console.log('加载高德地图时出错：', e)
            })
      }
      // 当前时间
      const getDateTime = () => {
        const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
@@ -1019,7 +969,8 @@
          config,
          gasN,
          gasT,
          map,
          initMap,
          updatePolygonPath,
          toNdPage,
          toTlPage,
          timeChange,
@@ -1150,7 +1101,7 @@
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  //position: relative;

  &>div{
    height: 100%;
@@ -1529,24 +1480,6 @@
    }
  }

  #bigMap{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;

    :deep(.amap-logo){
      display: none!important;
      visibility: hidden!important;
    }

    :deep(.amap-copyright) {
      display: none!important;
      visibility: hidden!important;
    }
  }

  .main-left{
    z-index: 9;
    width: calc(25% - 5px);
@@ -1563,14 +1496,55 @@
      background-size: 100% 100%;
    }
  }
  //#bigMap{
  //position: absolute;
  //width: 100%;
  //height: 100%;
  //left: 0;
  //top: 0;

  //  :deep(.amap-logo){
  //    display: none!important;
  //    visibility: hidden!important;
  //  }
  //
  //  :deep(.amap-copyright) {
  //    display: none!important;
  //    visibility: hidden!important;
  //  }
  //}
  //.main-middle{
  //  width: calc(50% - 10px);
  //  height: calc((100%/3) - (20px/3));
  //  z-index: 9;
  //  .mid-bottom{
  //    width: 100%;
  //    height: 100%;
  //    background: url("../../../assets/warningScreen/chart-bg4.png") no-repeat center;
  //    background-size: 100% 100%;
  //  }
  //}
  .main-middle{
    width: calc(50% - 10px);
    height: calc((100%/3) - (20px/3));
    z-index: 9;
    .bigMap{
      width: 100%;
      height: calc((200% - 40px)/3 + 10px);
      padding: 15px;
      background: url('../../../assets/warningScreen/map-bg.png') no-repeat center;
      background-size: 100% 100%;
      :deep(.BMap_cpyCtrl){
        display: none!important;
        visibility: hidden!important;
      }

      :deep(.anchorBL) {
        display: none!important;
        visibility: hidden!important;
      }
    }
    .mid-bottom{
      width: 100%;
      height: 100%;
      height: calc((100%/3) - (20px/3));
      background: url("../../../assets/warningScreen/chart-bg4.png") no-repeat center;
      background-size: 100% 100%;
    }

 src/views/loginPage/component/accountLogin.vue

@@ -334,7 +334,7 @@

<style scoped lang="scss">
.login-content-form {
    margin-top: 4vh;
    margin-top: 30px;
    width: 100%;

    .el-input ::v-deep(.el-input__wrapper) {

 src/views/loginPage/loginPage.vue

@@ -8,7 +8,7 @@
            <div class="loginPanel">
                <div class="loginGroup">
                  <div style="width: 100%">
                    <div style="width:100%;text-align: center;font-size: 22px;color: #11FEEE">欢迎登录</div>
                    <div style="width:100%;text-align: center;font-size: 28px;color: #11FEEE">欢迎登录</div>
                      <AccountLogin />
                  </div>
                </div>
@@ -71,15 +71,6 @@
</script>

<style scoped lang="scss">
    @media screen and (min-width: 1366px){

    }
    @media screen and (min-width: 1024px) and (max-width: 1366px){

    }
    @media screen and (min-width: 960px) and (max-width: 1024px){

    }
.login-container {
    width: 100%;
    height: 100%;