任务详情的折线图

src/components/echarts/lineChartTaskInfo.vue

@@ -0,0 +1,124 @@
+<template>
+    <div class="linechart" :id="id" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+export default {
+    name: "lineChartTaskInfo",
+    props: {
+        id: {
+            default: "lineChartA",
+            type: String,
+        },
+        xList: {
+            default: function () {
+                return [];
+            },
+            type: Array,
+        },
+        yList: {
+            default: function () {
+                return [];
+            },
+            type: Array,
+        },
+        yUnit: {
+            default: "",
+            type: String,
+        },
+    },
+
+    data() {
+        return {
+            tipData: [], //线数据
+            showData: [], //展示数据
+            charts: "",
+        };
+    },
+
+    watch: {
+        yList(val) {
+            if (val.length > 0) {
+                this.initStateList();
+            }
+        },
+    },
+
+    methods: {
+        initStateList() {
+            let xData = this.xList;
+            let yData = this.yList;
+
+            let option = {
+                tooltip: {
+                    //提示框，可以在全局也可以在
+                    trigger: "item", //提示框的样式
+                    formatter: "{b}: {c}",
+                    color: "#000", //提示框的背景色
+                    textStyle: {
+                        //提示的字体样式
+                        color: "#ffffff",
+                    },
+                },
+                xAxis: {
+                    name: "t(s)",
+                    type: "category",
+                    boundaryGap: false,
+                    data: xData,
+                },
+                yAxis: {
+                    name: this.yUnit,
+                },
+                series: [
+                    {
+                        data: yData,
+                        type: "line",
+                        smooth: true,
+                        symbol: "circle",
+                        symbolSize: 6,
+                        lineStyle: {
+                            normal: {
+                                width: 1.5,
+                                color: "#3397FF",
+                            },
+                        },
+                        itemStyle: {
+                            normal: {
+                                color: "#3397FF",
+                            },
+                        },
+                    },
+                ],
+                grid: {
+                    top: "30px",
+                    left: "30px",
+                    right: "40px",
+                    bottom: "10%",
+                    containLabel: true,
+                },
+            };
+            this.charts.setOption(option);
+        },
+    },
+
+    mounted() {
+        this.charts = this.$echarts.init(document.getElementById(this.id));
+
+        this.$nextTick(() => {
+            window.addEventListener("resize", () => {
+                this.charts.resize();
+            });
+        });
+    },
+
+    destroyed() {
+        this.charts.dispose();
+    },
+};
+</script>
+
+<style lang='less' scoped>
+.linechart {
+    margin: 0 auto;
+}
+</style>

src/views/workManagement/taskInfo.vue

@@ -126,31 +126,73 @@
                 <div class="content">
                     <div class="chart">
                         <div class="title">加速度变化曲线</div>
-                        <line-chart id="taskInfoLineA"></line-chart>
+                            <!-- v-show="yListA.length > 0" -->
+                        <line-chart-task-info
+                            id="taskInfoLineA"
+                            :xList="xList"
+                            :yList="yListA"
+                            yUnit="m/s²"
+                        ></line-chart-task-info>
                     </div>
                     <div class="chart">
                         <div class="title">距车道中心线距离变化曲线</div>
-                        <line-chart id="taskInfoLineB"></line-chart>
+                            <!-- v-if="yListB.length > 0" -->
+                        <line-chart-task-info
+                            id="taskInfoLineB"
+                            :xList="xList"
+                            :yList="yListB"
+                            yUnit="m"
+                        ></line-chart-task-info>
                     </div>
                     <div class="chart">
                         <div class="title">刹车变化曲线</div>
-                        <line-chart id="taskInfoLineC"></line-chart>
+                            <!-- v-if="yListC.length > 0" -->
+                        <line-chart-task-info
+                            id="taskInfoLineC"
+                            :xList="xList"
+                            :yList="yListC"
+                            yUnit="百分比"
+                        ></line-chart-task-info>
                     </div>
                     <div class="chart">
                         <div class="title">方向盘转角变化曲线</div>
-                        <line-chart id="taskInfoLineD"></line-chart>
+                            <!-- v-if="yListD.length > 0" -->
+                        <line-chart-task-info
+                            id="taskInfoLineD"
+                            :xList="xList"
+                            :yList="yListD"
+                            yUnit="°"
+                        ></line-chart-task-info>
                     </div>
                     <div class="chart">
                         <div class="title">油门变化曲线</div>
-                        <line-chart id="taskInfoLineE"></line-chart>
+                            <!-- v-if="yListE.length > 0" -->
+                        <line-chart-task-info
+                            id="taskInfoLineE"
+                            :xList="xList"
+                            :yList="yListE"
+                            yUnit="百分比"
+                        ></line-chart-task-info>
                     </div>
                     <div class="chart">
                         <div class="title">横摆角速度变化曲线</div>
-                        <line-chart id="taskInfoLineF"></line-chart>
+                            <!-- v-if="yListF.length > 0" -->
+                        <line-chart-task-info
+                            id="taskInfoLineF"
+                            :xList="xList"
+                            :yList="yListF"
+                            yUnit="°/s"
+                        ></line-chart-task-info>
                     </div>
                     <div class="chart">
                         <div class="title">速度变化曲线</div>
-                        <line-chart id="taskInfoLineG"></line-chart>
+                            <!-- v-if="yListG.length > 0" -->
+                        <line-chart-task-info
+                            id="taskInfoLineG"
+                            :xList="xList"
+                            :yList="yListG"
+                            yUnit="m/s"
+                        ></line-chart-task-info>
                     </div>
                 </div>
             </div>
@@ -160,11 +202,11 @@
 
 <script>
 import tableList from "@/components/grid/TableList";
-import lineChart from "@/components/echarts/lineChart";
+import lineChartTaskInfo from "@/components/echarts/lineChartTaskInfo";
 
 export default {
     name: "taskInfo", // 任务详情
-    components: { tableList, lineChart },
+    components: { tableList, lineChartTaskInfo },
     data() {
         return {
             // id: "",
@@ -231,6 +273,14 @@ export default {
                 ],
                 param: {},
             },
+            xList: [],
+            yListA: [],
+            yListB: [],
+            yListC: [],
+            yListD: [],
+            yListE: [],
+            yListF: [],
+            yListG: [],
         };
     },
 
@@ -255,6 +305,16 @@ export default {
             }).then((res) => {
                 if (res.code == 200 && res.info) {
                     this.info = res.info;
+                    this.xList = res.info.curveData.time;
+
+
+                    this.yListA = res.info.curveData.acceleration;
+                    this.yListB = res.info.curveData.lane_offset;
+                    this.yListC = res.info.curveData.brake;
+                    this.yListD = res.info.curveData.steeting;
+                    this.yListE = res.info.curveData.throttle;
+                    this.yListF = res.info.curveData.yaw_rate;
+                    this.yListG = res.info.curveData.velocity;
                 } else {
                     this.$message.error(res.message || "获取信息失败");
                 }

vue.config.js

@@ -102,10 +102,10 @@ module.exports = {
             },
             '/simulation/resource/server': {
                 // target: 'http://10.15.12.73:7003', // 王志强
-                // target: 'http://10.15.12.88:7003', // 王耀栋
+                target: 'http://10.15.12.88:7003', // 王耀栋
                 // target: 'http://10.15.12.72:7003',  // 王晓峰
                 // target: 'http://10.15.12.87:7003',  // 赵艳
-                target: 'http://10.15.12.70',  // windowstest
+                // target: 'http://10.15.12.70',  // windowstest
                 // target: 'http://192.168.30.75',  // gq
                 // target: 'http://47.94.105.148',  // aliyun
                 changeOrigin: true,