flx:修改水泥作业地图

.env.development

@@ -21,7 +21,7 @@ VITE_API_URL = 'http://192.168.34.221:8111' #雄哥本地
 # 演示平台
 # VITE_API_URL = 'http://jxj.zhgdyun.com:9809'
 # 百色七参数线上地址
-VITE_API_URL = 'http://101.43.164.214:11111'
+# VITE_API_URL = 'http://101.43.164.214:11111'
 # 七参数标准版(测试平台)
 # VITE_API_URL = 'http://jxj.zhgdyun.com:15551'
 # 七参数标准版(测试平台)

src/views/sevenLargeScreen/cementMixingPileMonitor/centerBottom.vue

@@ -1,63 +1,144 @@
 <template>
   <Card title="作业地图">
-    <!-- <div class="select-right">
-      <div>历史记录</div>
-    </div> -->
-    <el-scrollbar class="box">
-      <div class="box-item">
-        <div>设备名称:</div>
-        <div>{{ towerSituationData.devName || "--" }}</div>
-      </div>
-      <div class="box-item">
-        <div>设备型号:</div>
-        <div>{{ towerSituationData.devModel || "--" }}</div>
-      </div>
-      <div class="box-item">
-        <div>设备编号:</div>
-        <div>{{ towerSituationData.boundWindSpeed || "--" }}</div>
-      </div>
-      <div class="box-item">
-        <div>安装时间:</div>
-        <div>{{ towerSituationData.controlVoltage || "--" }}</div>
-      </div>
-    </el-scrollbar>
+    <div
+      id="echartsSafe"
+      ref="riskTrendLineCharts"
+      style="width: 100%; height: 100%"
+    ></div>
   </Card>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from "vue";
+import { onMounted, ref, nextTick } from "vue";
 // import * as echarts from "echarts";
 import { getBridgeCraneDevListApi } from "@/api/modules/tower";
 // import Card from "@/components/card.vue";
 import Card from "@/components/card.vue";
+import * as echarts from "echarts";
 import { GlobalStore } from "@/stores";
 const store = GlobalStore();
 const emit = defineEmits(["messageToParent"]);
-let towerSituationData = ref({} as any);
 const noiseList = ref([] as any[]);
-const towerValue = ref(null);
-const onBridgeCraneChange = () => {
-  towerSituationData.value = noiseList.value.find(
-    (item) => item.devId === towerValue.value
-  );
-  emit("messageToParent", towerSituationData.value);
-};
+
 const getTowerNumAndAlarmList = async () => {
   const res: any = await getBridgeCraneDevListApi({
     projectSn: store.sn,
   });
   if (res.result) {
     noiseList.value = res.result;
-    if (res.result instanceof Array && res.result.length > 0) {
-      towerValue.value = res.result[0].devId;
-      onBridgeCraneChange();
-    }
     console.log("塔吊左上今日塔机数据", res.result);
   }
 };
+const riskTrendLineCharts = ref(null) as any;
+function drawEchart(el: any) {
+  const echartsTest = echarts.init(el);
 
-onMounted(async () => {
-  await getTowerNumAndAlarmList();
+  var data1 = [];
+  for (var i = 0; i < 50; i++) {
+    var x = Math.random() * 100;
+    var y = Math.random() * 100;
+    data1.push({
+      name: i,
+      value: [x, y, 1],
+    });
+  }
+
+  var data2 = [];
+  for (var i = 0; i < 50; i++) {
+    var x = Math.random() * 100;
+    var y = Math.random() * 100;
+    data2.push({
+      name: i,
+      value: [x, y, 1],
+    });
+  }
+
+  var data3 = [];
+  for (var i = 0; i < 50; i++) {
+    var x = Math.random() * 100;
+    var y = Math.random() * 100;
+    data3.push({
+      name: i,
+      value: [x, y, 1],
+    });
+  }
+
+  let option = {
+    color: ["#7652D6", "#F6313F", "#0286FE"],
+    tooltip: {},
+    legend: {
+      // orient: "vertical",
+      right: 10,
+      textStyle: {
+        //图例文字的样式
+        color: "#fff",
+        fontSize: 16,
+      },
+    },
+    xAxis: {
+      type: "value",
+      min: 0,
+      max: 100,
+      show: false,
+    },
+    yAxis: {
+      type: "value",
+      min: 0,
+      max: 100,
+      show: false,
+    },
+    series: [
+      {
+        name: "未施工",
+        type: "scatter",
+        data: data1,
+        itemStyle: {
+          color: "#7652D6",
+        },
+      },
+      {
+        name: "未完成",
+        type: "scatter",
+        data: data2,
+        itemStyle: {
+          color: "#F6313F",
+        },
+      },
+      {
+        name: "已完成",
+        type: "scatter",
+        data: data3,
+        itemStyle: {
+          color: "#0286FE",
+        },
+      },
+    ],
+    dataZoom: [
+      {
+        type: "inside",
+        start: 0,
+        end: 20,
+      },
+      {
+        start: 0,
+        end: 20,
+      },
+    ],
+  };
+
+  echartsTest.setOption(option);
+  window.addEventListener("resize", () => {
+    echartsTest.resize();
+  });
+  echartsTest.on("click", function (params) {
+    // 此处一般写：click事件触发后的回调，来完成额外的功能
+    console.log(11, params);
+  });
+}
+onMounted(() => {
+  nextTick(() => {
+    drawEchart(riskTrendLineCharts.value);
+  });
 });
 </script>