云词图

components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     BarCom: typeof import('./src/components/echartsCom/barCom.vue')['default']
+    CloudWords: typeof import('./src/components/echartsCom/CloudWords.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     EquipmentDialog: typeof import('./src/components/customCom/equipmentDialog.vue')['default']

env/.env

@@ -2,7 +2,4 @@
 VITE_PORT = 8888
 # 自动打开浏览器
 VITE_OPEN = true
-# 百度地图key 
+
-VITE_AK = "cClgLBaLgGUdQDilX9dGvieL"
-# 百度地图版本
-VITE_AK_v = "2"

env/.env.dev

@@ -4,8 +4,5 @@ VITE_BUILD_MODE = 'dev'
 
 # 开发环境接口地址
 VITE_API_URL = '/proxyApi'
-# 百度地图key 
+# 代理地址
-VITE_AK = "cClgLBaLgGUdQDilX9dGvieL"
+VITE_proxyTarget = "http://10.40.92.229:8080"
-
-# 百度地图版本
-VITE_AK_v = "2"

index.html

@@ -11,4 +11,5 @@
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
+
 </html>

src/App.vue

@@ -8,5 +8,9 @@
 
 <style lang="scss">
 @import url("./style/css/reset.css");
+body {
+   font-family:"Microsoft Yahei"!important;
+}
 
+ 
 </style>

src/components/customCom/hotProvider.vue

@@ -1,14 +1,18 @@
 <template>
     <div class="provider_list">
         <div class="provider_title">
-            <div class="pro_title">
+            <div class="sub_title" @click="subTab('provider')" :class="{
+                'activeSub': subActive == 'provider'
+            }">
                 热门供应商
             </div>
-            <div class="sub_title">
+            <div class="sub_title" @click="subTab('hotEquipment')" :class="{
+                'activeSub': subActive == 'hotEquipment'
+            }">
                 热门装备
             </div>
         </div>
-        <div class="provider_content">
+        <div class="provider_content" v-if="subActive == 'provider'">
             <div class="provider_item" v-for="(item, index) in providerInfo.list" :key="index">
                 <div class="provider_item_left">
                     <div class="pro_item_icon" :class="{ 'inThree': item.v_index <= 3, 'afterThree': item.v_index > 3 }">
@@ -24,9 +28,13 @@
                 </div>
             </div>
         </div>
+        <div class="cloud_words_out" v-else>
+            <CloudWords></CloudWords>
+        </div>
     </div>
 </template>
 <script setup lang="ts">
+import CloudWords from "components/echartsCom/CloudWords.vue"
 const providerInfo = reactive({
     list: [
         {
@@ -73,6 +81,11 @@ const providerInfo = reactive({
     ]
 })
 
+const subActive = ref("hotEquipment")
+//  provider hotEquipment
+const subTab = (type: any) => {
+    subActive.value = type
+}
 
 
 
@@ -91,11 +104,6 @@ const providerInfo = reactive({
     justify-content: flex-start;
     align-items: center;
 
-    .pro_title {
-        font-size: 18px;
-        color: $main-color;
-        padding-top: 20px;
-    }
 
     .sub_title {
         font-size: 12px;
@@ -104,6 +112,12 @@ const providerInfo = reactive({
         padding-left: 26px;
 
     }
+
+    .activeSub {
+        font-size: 18px;
+        color: $main-color;
+        padding-top: 20px;
+    }
 }
 
 .provider_content {
@@ -151,4 +165,11 @@ const providerInfo = reactive({
     }
 
 }
+
+.cloud_words_out {
+    width: 292px;
+    height: 340px;
+    margin-top: 12px;
+    background-color:  background-color: rgba($color: #011B37, $alpha: 0.6);;
+}
 </style>

src/components/echartsCom/CloudWords.vue

@@ -0,0 +1,169 @@
+<template>
+    <div style="width: 100%; height: 100%" id="cludWordEchart"></div>
+</template>
+
+<script setup lang="ts">
+import * as echarts from 'echarts'
+import jsonData from "./jsonData/china.json"
+import { fa } from 'element-plus/es/locale';
+let myChart: any = null
+const randomData = () => {
+    var a = Math.random();
+    if (a > 0 && a <= 0.333)
+        return 0;
+    if (a > 0.333 && a <= 0.666)
+        return 90;
+    return -90;
+}
+
+const colorData = (value: any) => {
+    let colorData = []
+    if (value > 500) {
+        colorData = ["#FB6716", "bold", "黑体"];
+    } else if (value > 450 && value <= 500) {
+        colorData = ["#62ECFE", "bold", "黑体"];
+    } else if (value > 400 && value <= 450) {
+        colorData = ["#FF8F00", "bold", "黑体"];
+    } else if (value > 350 && value <= 400) {
+        colorData = ["#3773FF", "bold", "黑体"];
+    } else if (value > 300 && value <= 350) {
+        colorData = ['rgba(#62ECFE,0.6)', "normal", "黑体"];
+    } else if (value > 250 && value <= 300) {
+        colorData = ['rgba(#FF8F00,0.6)', "normal", "黑体"];
+    } else if (value > 200 && value <= 250) {
+        colorData = ['rgba(#3773FF,0.6)', "normal", "黑体"];
+    }else{
+        colorData = ["#fff", "normal", "黑体"];
+    }
+    return colorData
+}
+
+//110  35  14/18
+var geoCoordMap: any = {
+    "挖掘机": [108.99, 36.04],
+    "洒水车": [113.53, 44.3],
+    "牵引车": [106.21, 27.35],
+    "平地机": [95.61, 44.57],
+    "应用支撑": [104.58, 39.69],
+    "掘地机": [101.39, 47.5],
+    "自卸车": [97.53, 31.89],
+    "叉车": [112.46, 31.65],
+    "开钩机": [92.65, 36.0],
+    "数据基础": [122.15, 32.99],
+    "其他设备": [123.89, 40.34],
+
+};
+
+//0-500
+var data = [
+    { name: "挖掘机", value: 501 },
+    { name: "洒水车", value: 400 },
+    { name: "牵引车", value: 460 },
+    { name: "平地机", value: 300 },
+    { name: "应用支撑", value: 360 },
+    { name: "掘地机", value: 460 },
+    { name: "自卸车", value: 330 },
+    { name: "叉车", value: 210 },
+    { name: "开钩机", value: 200 },
+    { name: "数据基础", value: 440 },
+    { name: "其他设备", value: 240 },
+];
+
+
+
+var convertData = function (data: any) {
+    var res = [];
+    for (var i = 0; i < data.length; i++) {
+        var geoCoord = geoCoordMap[data[i].name];
+        if (geoCoord) {
+            res.push({
+                label: {
+                    normal: {
+                        color: colorData(data[i].value)[0],
+                        fontSize: data[i].value / 40 + 6,
+                        fontWeight: colorData(data[i].value)[1],
+                        fontFamily: colorData(data[i].value)[2],
+                        //rotate: randomData(),
+                    },
+                },
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+            });
+        }
+    }
+    return res;
+};
+
+const option: any = {
+    title: {
+        text: '热力图',
+        left: 'center',
+        textStyle: {
+            color: '#fff'
+        },
+        show: false
+    },
+    visualMap: {
+        type: "continuous",
+        show: false,
+        calculable: true,
+        min: 0,
+        max: 500,
+        inRange: {
+            color: ['#0e2a3f'],
+        }
+    },
+
+    backgroundColor: '#0e2a3f',
+    geo: {
+        center: [106, 36],
+        zoom: 1.5,
+        silent: true,
+        map: 'china',
+        roam: false,
+        itemStyle: {
+            normal: {
+                areaColor: '#0e2a3f',
+                borderColor: '#0e2a3f'
+            },
+        }
+    },
+    series: [{
+        name: '散点',
+        type: 'scatter',
+        coordinateSystem: 'geo',
+        data: convertData(data),
+        symbolSize: 0.1,
+        label: {
+            normal: {
+                formatter: '{b}',
+                position: 'inside',
+                show: true,
+            },
+            emphasis: {
+                show: true,
+            }
+        },
+    }, {
+        name: 'AQI',
+        type: 'heatmap',
+        coordinateSystem: 'geo',
+        data: convertData(data),
+        blurSize: 100,
+        minOpacity: 0.03,
+        maxOpacity: 0.9,
+    },
+
+    ]
+};
+onMounted(() => {
+    echarts.registerMap('china', jsonData)
+    const lineEchartDomEl = document.getElementById("cludWordEchart");
+    myChart = echarts.init(lineEchartDomEl);
+    myChart.setOption(option);
+
+})
+
+</script>
+
+<style scoped></style>

src/http/api/myInfo.ts

@@ -1,5 +1,15 @@
 import { post } from '../index'
 
 export function apiTest() {
-    return post('/userms/ut/userCardInfo/getCardInfo/v1', {})
+    return post('system/user/getInfo', {})
 }
+
+export function apiNoticeAdd() {
+    return post('system/notice/add', {
+        "noticeTitle": "测试",
+        "noticeType": "1",
+        "noticeContent": "测试内容",
+        "status": "0"
+    })
+}
+

src/http/index.ts

@@ -15,7 +15,7 @@ const service = axios.create({
 
 service.interceptors.request.use(
     (config) => {
-       
+        config.headers['Authorization'] = "eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6IjE2ZjZiYjQwLWQzNGItNGEwYS04YTVhLTkwZTA2YTdiNTliOSIsInVzZXJuYW1lIjoiYWRtaW4ifQ.cn0uGP3voRu4wTz-x-7J_tgOzEpMHv92GMhMZ66AwTjt4za6I49kzjAucOsRAE9I-R7y-r57HkUL6StJySzeRg"
         return config
     },
     (error) => {

src/style/css/reset.css

@@ -25,6 +25,7 @@ footer, header, hgroup, menu, nav, section {
 }
 body {
 	line-height: 1;
+ 
 }
 ol, ul {
 	list-style: none;
@@ -45,4 +46,6 @@ table {
 #app {
     width: 100vw;
     height: 100vh;
+ 
+    	
 }

src/views/Index.vue

@@ -53,4 +53,8 @@ const toPage = (item: any) => {
 
     margin-bottom: 12px;
 }
+
+
+
+
 </style>

src/views/echarts/index.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="out_echart">
 
-<mapLine></mapLine>
+    <!-- <mapLine></mapLine> -->
+    <div style="width: 303px;height: 400px;">
+      <CloudWords></CloudWords>
+
+    </div>
 
     <!-- <div class="echart_row_1">
       <div class="echart_cell">
@@ -58,10 +62,25 @@ import barCom from "../../components/echartsCom/barCom.vue"
 import Pie3dCom from "../../components/echartsCom/Pie3dCom.vue"
 import hotProvider from "../../components/customCom/hotProvider.vue"
 import mapLine from "components/mapBaidu/mapLine.vue"
+import CloudWords from "components/echartsCom/CloudWords.vue"
+import { apiTest,apiNoticeAdd } from "http/api/myInfo"
+onMounted(() => {
+  testAjax()
+  setTimeout(() => {
+    testAddPost()
+  }, 2000);
+})
 
+const testAjax = async () => {
+  const res = await apiTest()
+  console.log("res====ajax",res)
+}
 
-
+const testAddPost= async () =>{
-
+  const res = await apiNoticeAdd()
+  console.log("res====ajax",res)
+  
+}
 
 
 

src/views/screen/sharePlatform.vue

@@ -156,7 +156,7 @@ import barCom from "../../components/echartsCom/barCom.vue"
 import Pie3dCom from "../../components/echartsCom/Pie3dCom.vue"
 import hotProvider from "../../components/customCom/hotProvider.vue"
 import equipmentLeasing from "../../components/customCom/equipmentLeasing.vue"
-import { getImg } from "@/utils/index"
+import { getImg } from "utils/index"
 const equipmentCountInfo: any = reactive({
     listCount: ['9', '9', '9', '9'],
     selfCount: "999",
@@ -344,7 +344,7 @@ const barComPropsHorizontal = reactive({
     width: 100%;
     height: 108px;
     background-image: url("../../assets/img/top_title.png");
-    background-size: cover;
+    background-size: contain;
     background-repeat: no-repeat;
     font-size: 40px;
     padding-top: 29px;

vite.config.ts

@@ -7,8 +7,6 @@ import vueJsx from '@vitejs/plugin-vue-jsx'
 import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver  } from 'unplugin-vue-components/resolvers'
 import { createHtmlPlugin } from 'vite-plugin-html'
-import moment from 'moment'
-import { env } from 'node:process'
 
 
 // @ts-ignore
@@ -82,7 +80,7 @@ export default ({ mode }: any) => {
       // open: envInfo.VITE_OPEN,
       proxy: {
         '/proxyApi': {
-          target: 'https://test.com',
+          target: envInfo.VITE_proxyTarget,
           secure: false,
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/proxyApi/, ''),
@@ -128,7 +126,7 @@ export default ({ mode }: any) => {
     },
     envDir: 'env',
     build: {
-      outDir: 'dist/' + pjson.name,
+      outDir: 'dist/' + pjson.name +'-'+envInfo.VITE_BUILD_MODE,
       emptyOutDir: true,
       terserOptions: {
         compress: {