工作管理继续联调

src/api/workManagement.js

@@ -12,7 +12,7 @@ const deleteProjectByids = basePart + '/simulationProject/deleteProjectByids'; /
 const selectProjectDetailsById = basePart + '/simulationProject/selectProjectDetailsById'; // 获取手动运行项目工作详情
 const selectProjectTaskList = basePart + '/simulationProject/selectProjectTaskList'; // 获取手动运行项目工作详情-任务列表
 const selectProjectReportById = basePart + '/simulationProject/selectProjectReportById'; // 获取手动运行项目工作详情-测试报告
-
+const selectProjectTaskById = basePart + '/simulationProject/selectProjectTaskById'; // 获取手动运行项目工作详情-任务详情
 
 
 export default {
@@ -27,5 +27,6 @@ export default {
 
     selectProjectDetailsById,
     selectProjectTaskList,
-    selectProjectReportById
+    selectProjectReportById,
+    selectProjectTaskById
 }

src/axios/filter.js

@@ -40,7 +40,7 @@ Vue.use(VueAxios, axios);
 axios.defaults.baseURL = ''; //项目的的基础url
 axios.defaults.headers.common['Authorization'] = ""; //请求token信息配置
 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //请求type设置
-axios.defaults.timeout = 24000; //在超时前，所有请求都会等待24秒
+axios.defaults.timeout = 30000; //在超时前，所有请求都会等待24秒
 axios.defaults.withCredentials = true;
 
 // 添加请求拦截器

src/components/echarts/lineChart.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="linechart" id="aa"></div>
+    <div class="linechart" :id="id" style="width: 100%; height: 100%"></div>
 </template>
 
 <script>
@@ -8,6 +8,10 @@ import echarts from "echarts";
 export default {
     name: "lineChart",
     props: {
+        id: {
+            default: "a",
+            type: String,
+        },
         LineChartData: {
             text: String, //标题  不需要标题可不传
             titleSize: {
@@ -27,6 +31,7 @@ export default {
         return {
             tipData: [], //线数据
             showData: [], //展示数据
+            charts: "",
             // text: this.LineChartData.text, //大标题
             // titleSize: this.LineChartData.titleSize, //标题大小
             // download: this.LineChartData.download,
@@ -48,7 +53,7 @@ export default {
         // import * as echarts from "echarts";
 
         // 基于准备好的dom，初始化echarts实例
-        let myChart = this.$echarts.init(document.getElementById("aa"));
+        this.charts = this.$echarts.init(document.getElementById(this.id));
 
         let option = {
             xAxis: {
@@ -59,11 +64,26 @@ export default {
                 {
                     data: [10, 22, 28, 23, 19],
                     type: "line",
-                    smooth: true,
+                    // smooth: true,
+                    lineStyle: {
+                        normal: {
+                            color: "#3397FF",
+                        },
+                    },
+                },
+                {
+                    data: [20, 42, 18, 13, 39],
+                    type: "line",
+                    // smooth: true,
+                    lineStyle: {
+                        normal: {
+                            color: "#67C239",
+                        },
+                    },
                 },
             ],
         };
-        myChart.setOption(option);
+        this.charts.setOption(option);
     },
     methods: {
         //绘制图表
@@ -159,14 +179,16 @@ export default {
             this.drawLine();
         },
     },
+    destroyed() {
+        console.log("destroyed");
+        this.charts.dispose();
+    },
 };
 </script>
 
 
 <style lang='less' scoped>
 .linechart {
-    width: 100%;
-    height: 300px;
     margin: 0 auto;
 }
 </style>

src/components/echarts/lineChart1.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="linechart" id="ee"></div>
+    <div class="linechart" :id="id" style="width: 100%; height: 100%"></div>
 </template>
 
 <script>
@@ -8,6 +8,10 @@ import echarts from "echarts";
 export default {
     name: "lineChart",
     props: {
+        id: {
+            default: "a",
+            type: String,
+        },
         LineChartData: {
             text: String, //标题  不需要标题可不传
             titleSize: {
@@ -27,6 +31,7 @@ export default {
         return {
             tipData: [], //线数据
             showData: [], //展示数据
+            charts: "",
             // text: this.LineChartData.text, //大标题
             // titleSize: this.LineChartData.titleSize, //标题大小
             // download: this.LineChartData.download,
@@ -48,22 +53,27 @@ export default {
         // import * as echarts from "echarts";
 
         // 基于准备好的dom，初始化echarts实例
-        let myChart = this.$echarts.init(document.getElementById("ee"));
+        this.charts = this.$echarts.init(document.getElementById(this.id));
 
         let option = {
             xAxis: {
-                data: ["A", "B", "C", "D", "E"],
+                data: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
             },
             yAxis: {},
             series: [
                 {
-                    data: [10, 22, 28, 23, 19],
+                    data: [10, 22, 28, 23, 19, 99, 81],
                     type: "line",
                     smooth: true,
+                    lineStyle: {
+                        normal: {
+                            color: "#3397FF",
+                        },
+                    },
                 },
             ],
         };
-        myChart.setOption(option);
+        this.charts.setOption(option);
     },
     methods: {
         //绘制图表
@@ -159,14 +169,16 @@ export default {
             this.drawLine();
         },
     },
+    destroyed() {
+        console.log("destroyed");
+        this.charts.dispose();
+    },
 };
 </script>
 
 
 <style lang='less' scoped>
 .linechart {
-    width: 900px;
-    height: 300px;
     margin: 0 auto;
 }
 </style>

src/components/echarts/lineChart2.vue

@@ -0,0 +1,189 @@
+<template>
+    <div class="linechart" :id="id" style="width: calc(100vw - 360px); height: calc(36vh);"></div>
+</template>
+
+<script>
+import echarts from "echarts";
+
+export default {
+    name: "lineChart",
+    props: {
+        id: {
+            default: "a",
+            type: String,
+        },
+        LineChartData: {
+            text: String, //标题  不需要标题可不传
+            titleSize: {
+                //标题大小
+                type: Number,
+                default: 20,
+            },
+            download: {
+                //是否显示下载按钮
+                type: Boolean,
+                default: false,
+            },
+            data: [],
+        },
+    },
+    data() {
+        return {
+            tipData: [], //线数据
+            showData: [], //展示数据
+            charts: "",
+            // text: this.LineChartData.text, //大标题
+            // titleSize: this.LineChartData.titleSize, //标题大小
+            // download: this.LineChartData.download,
+        };
+    },
+    computed: {
+        text() {
+            return this.LineChartData.text;
+        },
+        titleSize() {
+            return this.LineChartData.titleSize;
+        },
+        download() {
+            return this.LineChartData.download;
+        },
+    },
+    mounted() {
+        // this.drawLine();
+        // import * as echarts from "echarts";
+
+        // 基于准备好的dom，初始化echarts实例
+        this.charts = this.$echarts.init(document.getElementById(this.id));
+
+        let option = {
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
+            },
+            yAxis: {},
+            series: [
+                {
+                    data: [60, 72, 48, 63, 39, 99, 81],
+                    type: "line",
+                    smooth: true,
+                    lineStyle: {
+                        normal: {
+                            color: "#3397FF",
+                        },
+                    },
+                    areaStyle: {
+                        color: "rgba(51,151,255,0.2)",
+                    }
+                },
+            ],
+        };
+        this.charts.setOption(option);
+    },
+    methods: {
+        //绘制图表
+        drawLine() {
+            // 基于准备好的dom，初始化echarts实例
+            let id = "echartBar" + Math.random() * 1000;
+            this.$el.setAttribute("id", id);
+            let myChartContainer = document.getElementById(id);
+            // let myChartChina = echarts.init(myChartContainer);
+            let myChartChina = echarts.init("aa");
+            // 绘制图表
+            let optionMap = {
+                //折线图配置数据
+                color: ["#6cacaf", "#e4a526", "#e4391d", "#a1cb37", "#8c97cb"],
+                title: {
+                    x: "center",
+                    text: this.text,
+                    textStyle: {
+                        fontSize: this.titleSize,
+                    },
+                },
+                tooltip: {
+                    trigger: "axis",
+                },
+                legend: {
+                    top: [30],
+                    data: this.tipData,
+                },
+                grid: {
+                    left: "3%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                toolbox: {
+                    show: this.download,
+                    top: [5],
+                    right: [20],
+                    feature: {
+                        saveAsImage: {},
+                    },
+                },
+                xAxis: {
+                    interval: ["0"], //标签显示间隔
+                    type: "category",
+                    boundaryGap: false,
+                    data: [
+                        "1月",
+                        "2月",
+                        "3月",
+                        "4月",
+                        "5月",
+                        "6月",
+                        "7月",
+                        "8月",
+                        "9月",
+                        "10月",
+                        "11月",
+                        "12月",
+                    ], //x轴数据
+                },
+                yAxis: {
+                    name: "(万元)",
+                    nameGap: [10],
+                    type: "value",
+                },
+                series: this.showData,
+            };
+            myChartChina.setOption(optionMap);
+            window.onresize = function () {
+                myChartChina.resize();
+            };
+        },
+    },
+    watch: {
+        "LineChartData.data": function (val) {
+            this.tipData = [];
+            this.showData = [];
+            for (let i = 0; i < val.length; i++) {
+                let obj = {
+                    //折线图需要的数据结构
+                    name: "",
+                    type: "line",
+                    data: [],
+                };
+                obj.name = val[i].name;
+                this.tipData.push(val[i].name);
+                for (let j = 0; j < val[i].monthlySales.length; j++) {
+                    obj.data.push(parseFloat(val[i].monthlySales[j]));
+                }
+                this.showData.push(obj);
+            }
+            this.drawLine();
+        },
+    },
+    destroyed() {
+        console.log("destroyed");
+        this.charts.dispose();
+    },
+};
+</script>
+
+
+<style lang='less' scoped>
+.linechart {
+    margin: 0 auto;
+}
+</style>

src/components/echarts/lineChart3.vue

@@ -0,0 +1,189 @@
+<template>
+    <div class="linechart" :id="id" style="width: calc(100vw - 360px); height: calc(36vh);"></div>
+</template>
+
+<script>
+import echarts from "echarts";
+
+export default {
+    name: "lineChart",
+    props: {
+        id: {
+            default: "a",
+            type: String,
+        },
+        LineChartData: {
+            text: String, //标题  不需要标题可不传
+            titleSize: {
+                //标题大小
+                type: Number,
+                default: 20,
+            },
+            download: {
+                //是否显示下载按钮
+                type: Boolean,
+                default: false,
+            },
+            data: [],
+        },
+    },
+    data() {
+        return {
+            tipData: [], //线数据
+            showData: [], //展示数据
+            charts: "",
+            // text: this.LineChartData.text, //大标题
+            // titleSize: this.LineChartData.titleSize, //标题大小
+            // download: this.LineChartData.download,
+        };
+    },
+    computed: {
+        text() {
+            return this.LineChartData.text;
+        },
+        titleSize() {
+            return this.LineChartData.titleSize;
+        },
+        download() {
+            return this.LineChartData.download;
+        },
+    },
+    mounted() {
+        // this.drawLine();
+        // import * as echarts from "echarts";
+
+        // 基于准备好的dom，初始化echarts实例
+        this.charts = this.$echarts.init(document.getElementById(this.id));
+
+        let option = {
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
+            },
+            yAxis: {},
+            series: [
+                {
+                    data: [30, 42, 48, 36, 39, 69, 51],
+                    type: "line",
+                    smooth: true,
+                    lineStyle: {
+                        normal: {
+                            color: "#3397FF",
+                        },
+                    },
+                    areaStyle: {
+                        color: "rgba(51,151,255,0.2)",
+                    }
+                },
+            ],
+        };
+        this.charts.setOption(option);
+    },
+    methods: {
+        //绘制图表
+        drawLine() {
+            // 基于准备好的dom，初始化echarts实例
+            let id = "echartBar" + Math.random() * 1000;
+            this.$el.setAttribute("id", id);
+            let myChartContainer = document.getElementById(id);
+            // let myChartChina = echarts.init(myChartContainer);
+            let myChartChina = echarts.init("aa");
+            // 绘制图表
+            let optionMap = {
+                //折线图配置数据
+                color: ["#6cacaf", "#e4a526", "#e4391d", "#a1cb37", "#8c97cb"],
+                title: {
+                    x: "center",
+                    text: this.text,
+                    textStyle: {
+                        fontSize: this.titleSize,
+                    },
+                },
+                tooltip: {
+                    trigger: "axis",
+                },
+                legend: {
+                    top: [30],
+                    data: this.tipData,
+                },
+                grid: {
+                    left: "3%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                toolbox: {
+                    show: this.download,
+                    top: [5],
+                    right: [20],
+                    feature: {
+                        saveAsImage: {},
+                    },
+                },
+                xAxis: {
+                    interval: ["0"], //标签显示间隔
+                    type: "category",
+                    boundaryGap: false,
+                    data: [
+                        "1月",
+                        "2月",
+                        "3月",
+                        "4月",
+                        "5月",
+                        "6月",
+                        "7月",
+                        "8月",
+                        "9月",
+                        "10月",
+                        "11月",
+                        "12月",
+                    ], //x轴数据
+                },
+                yAxis: {
+                    name: "(万元)",
+                    nameGap: [10],
+                    type: "value",
+                },
+                series: this.showData,
+            };
+            myChartChina.setOption(optionMap);
+            window.onresize = function () {
+                myChartChina.resize();
+            };
+        },
+    },
+    watch: {
+        "LineChartData.data": function (val) {
+            this.tipData = [];
+            this.showData = [];
+            for (let i = 0; i < val.length; i++) {
+                let obj = {
+                    //折线图需要的数据结构
+                    name: "",
+                    type: "line",
+                    data: [],
+                };
+                obj.name = val[i].name;
+                this.tipData.push(val[i].name);
+                for (let j = 0; j < val[i].monthlySales.length; j++) {
+                    obj.data.push(parseFloat(val[i].monthlySales[j]));
+                }
+                this.showData.push(obj);
+            }
+            this.drawLine();
+        },
+    },
+    destroyed() {
+        console.log("destroyed");
+        this.charts.dispose();
+    },
+};
+</script>
+
+
+<style lang='less' scoped>
+.linechart {
+    margin: 0 auto;
+}
+</style>

src/components/echarts/pieChart.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="linechart" id="bb"></div>
+    <div class="linechart" :id="id" style="width: 100%; height: 100%"></div>
 </template>
 
 <script>
@@ -9,7 +9,16 @@ export default {
     name: "pieChart", //
     components: {},
     data() {
-        return {};
+        return {
+            charts: "",
+        };
+    },
+
+    props: {
+        id: {
+            default: "a",
+            type: String,
+        },
     },
 
     computed: {},
@@ -18,38 +27,184 @@ export default {
 
     mounted() {
         // 基于准备好的dom，初始化echarts实例
-        let myChart = this.$echarts.init(document.getElementById("bb"));
+        this.charts = this.$echarts.init(document.getElementById(this.id));
 
         let option = {
+            tooltip: {
+                //提示框，可以在全局也可以在
+                trigger: "item", //提示框的样式
+                formatter: "{a} <br/>{b}: {c} ({d}%)",
+                color: "#000", //提示框的背景色
+                textStyle: {
+                    //提示的字体样式
+                    color: "#ffffff",
+                },
+            },
             series: [
                 {
                     type: "pie",
                     data: [
                         {
                             value: 335,
-                            name: "直接访问",
+                            name: "图例一",
+                            itemStyle: {
+                                normal: {
+                                    color: "#5B8FF9",
+                                },
+                            },
                         },
                         {
-                            value: 234,
-                            name: "联盟广告",
+                            value: 1234,
+                            name: "图例二",
+                            itemStyle: {
+                                normal: {
+                                    color: "#61DDAA",
+                                },
+                            },
                         },
                         {
-                            value: 1548,
-                            name: "搜索引擎",
+                            value: 548,
+                            name: "图例三",
+                            itemStyle: {
+                                normal: {
+                                    color: "#65789B",
+                                },
+                            },
                         },
+                        {
+                            value: 153,
+                            name: "图例四",
+                            itemStyle: {
+                                normal: {
+                                    color: "#F6BD16",
+                                },
+                            },
+                        },
+                    ],
+                },
+            ],
+        };
+
+        let option1 = {
+            legend: {
+                orient: "vertical",
+                x: "right",
+                // y:'center',
+                data: ["图例一", "图例二", "图例三", "图例四"],
+            },
+            series: [
+                {
+                    type: "pie",
+                    radius: ["50%", "70%"],
+                    avoidLabelOverlap: false,
+                    color: ["#5B8FF9", "#61DDAA", "#65789B", "#F6BD16"],
+                    label: {
+                        show: false,
+                        position: "center",
+                        emphasis: {
+                            show: true,
+                        },
+                    },
+                    labelLine: {
+                        show: false,
+                    },
+                    emphasis: {
+                        label: {
+                            show: true,
+                            fontSize: "30",
+                            fontWeight: "bold",
+                        },
+                    },
+                    data: [
+                        { value: 335, name: "图例一" },
+                        { value: 310, name: "图例二" },
+                        { value: 234, name: "图例三" },
+                        { value: 135, name: "图例四" },
                     ],
                 },
             ],
         };
-        myChart.setOption(option);
+
+        let option2 = {
+            tooltip: {
+                //提示框，可以在全局也可以在
+                trigger: "item", //提示框的样式
+                formatter: "{a} <br/>{b}: {c} ({d}%)",
+                color: "#000", //提示框的背景色
+                textStyle: {
+                    //提示的字体样式
+                    color: "#ffffff",
+                },
+            },
+            legend: {
+                //图例
+                orient: "vertical", //图例的布局，竖直    horizontal为水平
+                x: "right", //图例显示在右边
+                data: [
+                    "图例一", "图例二", "图例三", "图例四"
+                ],
+                textStyle: {
+                    //图例文字的样式
+                    color: "#333", //文字颜色
+                    fontSize: 12, //文字大小
+                },
+            },
+            series: [
+                {
+                    name: "访问来源",
+                    type: "pie", //环形图的type和饼图相同
+                    radius: ["50%", "70%"], //饼图的半径，第一个为内半径，第二个为外半径
+                    avoidLabelOverlap: false,
+                    color: ["#5B8FF9", "#61DDAA", "#65789B", "#F6BD16"],
+                    label: {
+                        normal: {
+                            //正常的样式
+                            show: true,
+                            position: "left",
+                        },
+                        emphasis: {
+                            //选中时候的样式
+                            show: true,
+                            textStyle: {
+                                fontSize: "20",
+                                fontWeight: "bold",
+                            },
+                        },
+                    }, //提示文字
+                    labelLine: {
+                        normal: {
+                            show: false,
+                        },
+                    },
+                    data: [
+                        { value: 335, name: "图例一" },
+                        { value: 310, name: "图例二" },
+                        { value: 234, name: "图例三" },
+                        { value: 135, name: "图例四" },
+                    ],
+                },
+            ],
+        };
+
+        if (this.id === "pieB") {
+            this.charts.setOption(option2);
+        } else {
+            this.charts.setOption(option);
+        }
+
+        // window.onresize = function () {
+        //     this.charts.resize();
+        // };
+    },
+    destroyed() {
+        console.log("destroyed");
+        this.charts.dispose();
     },
 };
 </script>
 
 <style lang='less' scoped>
 .linechart {
-    width: 100%;
-    height: 120px;
     margin: 0 auto;
 }
 </style>

src/components/echarts/pieChart1.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="linechart" id="cc"></div>
+    <div class="linechart" :id="id" style="width: calc(33vw - 180px); height: calc(24vh);"></div>
 </template>
 
 <script>
@@ -9,7 +9,16 @@ export default {
     name: "pieChart", //
     components: {},
     data() {
-        return {};
+        return {
+            charts: "",
+        };
+    },
+
+    props: {
+        id: {
+            default: "a",
+            type: String,
+        },
     },
 
     computed: {},
@@ -18,38 +27,184 @@ export default {
 
     mounted() {
         // 基于准备好的dom，初始化echarts实例
-        let myChart = this.$echarts.init(document.getElementById("cc"));
+        this.charts = this.$echarts.init(document.getElementById(this.id));
 
         let option = {
+            tooltip: {
+                //提示框，可以在全局也可以在
+                trigger: "item", //提示框的样式
+                formatter: "{a} <br/>{b}: {c} ({d}%)",
+                color: "#000", //提示框的背景色
+                textStyle: {
+                    //提示的字体样式
+                    color: "#ffffff",
+                },
+            },
             series: [
                 {
                     type: "pie",
                     data: [
                         {
                             value: 335,
-                            name: "直接访问",
+                            name: "图例一",
+                            itemStyle: {
+                                normal: {
+                                    color: "#5B8FF9",
+                                },
+                            },
                         },
                         {
-                            value: 234,
-                            name: "联盟广告",
+                            value: 1234,
+                            name: "图例二",
+                            itemStyle: {
+                                normal: {
+                                    color: "#61DDAA",
+                                },
+                            },
                         },
                         {
-                            value: 1548,
-                            name: "搜索引擎",
+                            value: 548,
+                            name: "图例三",
+                            itemStyle: {
+                                normal: {
+                                    color: "#65789B",
+                                },
+                            },
                         },
+                        {
+                            value: 153,
+                            name: "图例四",
+                            itemStyle: {
+                                normal: {
+                                    color: "#F6BD16",
+                                },
+                            },
+                        },
+                    ],
+                },
+            ],
+        };
+
+        let option1 = {
+            legend: {
+                orient: "vertical",
+                x: "right",
+                // y:'center',
+                data: ["图例一", "图例二", "图例三", "图例四"],
+            },
+            series: [
+                {
+                    type: "pie",
+                    radius: ["50%", "70%"],
+                    avoidLabelOverlap: false,
+                    color: ["#5B8FF9", "#61DDAA", "#65789B", "#F6BD16"],
+                    label: {
+                        show: false,
+                        position: "center",
+                        emphasis: {
+                            show: true,
+                        },
+                    },
+                    labelLine: {
+                        show: false,
+                    },
+                    emphasis: {
+                        label: {
+                            show: true,
+                            fontSize: "30",
+                            fontWeight: "bold",
+                        },
+                    },
+                    data: [
+                        { value: 335, name: "图例一" },
+                        { value: 310, name: "图例二" },
+                        { value: 234, name: "图例三" },
+                        { value: 135, name: "图例四" },
                     ],
                 },
             ],
         };
-        myChart.setOption(option);
+
+        let option2 = {
+            tooltip: {
+                //提示框，可以在全局也可以在
+                trigger: "item", //提示框的样式
+                formatter: "{a} <br/>{b}: {c} ({d}%)",
+                color: "#000", //提示框的背景色
+                textStyle: {
+                    //提示的字体样式
+                    color: "#ffffff",
+                },
+            },
+            legend: {
+                //图例
+                orient: "vertical", //图例的布局，竖直    horizontal为水平
+                x: "right", //图例显示在右边
+                data: [
+                    "图例一", "图例二", "图例三", "图例四"
+                ],
+                textStyle: {
+                    //图例文字的样式
+                    color: "#333", //文字颜色
+                    fontSize: 12, //文字大小
+                },
+            },
+            series: [
+                {
+                    name: "访问来源",
+                    type: "pie", //环形图的type和饼图相同
+                    radius: ["50%", "70%"], //饼图的半径，第一个为内半径，第二个为外半径
+                    avoidLabelOverlap: false,
+                    color: ["#5B8FF9", "#61DDAA", "#65789B", "#F6BD16"],
+                    label: {
+                        normal: {
+                            //正常的样式
+                            show: true,
+                            position: "left",
+                        },
+                        emphasis: {
+                            //选中时候的样式
+                            show: true,
+                            textStyle: {
+                                fontSize: "20",
+                                fontWeight: "bold",
+                            },
+                        },
+                    }, //提示文字
+                    labelLine: {
+                        normal: {
+                            show: false,
+                        },
+                    },
+                    data: [
+                        { value: 335, name: "图例一" },
+                        { value: 310, name: "图例二" },
+                        { value: 234, name: "图例三" },
+                        { value: 135, name: "图例四" },
+                    ],
+                },
+            ],
+        };
+
+        if (this.id === "pieB") {
+            this.charts.setOption(option2);
+        } else {
+            this.charts.setOption(option);
+        }
+
+        // window.onresize = function () {
+        //     this.charts.resize();
+        // };
+    },
+    destroyed() {
+        console.log("destroyed");
+        this.charts.dispose();
     },
 };
 </script>
 
 <style lang='less' scoped>
 .linechart {
-    width: 100%;
-    height: 120px;
     margin: 0 auto;
 }
 </style>

src/router/index.js

@@ -101,6 +101,9 @@ const router = new VueRouter({
   mode: "history",
   base: process.env.BASE_URL,
   routes,
+  scrollBehavior(to, from, savedPosition) {
+    return {x: 0, y: 0}
+}
 });
 
 export default router;

src/views/algorithmsLibrary/algorithmsLibraryList.vue

@@ -4,7 +4,7 @@
             <template slot="searchItem1">
                 <span class="label">ID</span>
                 <el-input
-                    v-model="searchParams.id"
+                    v-model="searchParams.algorithmCode"
                     size="small"
                     clearable
                     placeholder="请输入"
@@ -111,10 +111,10 @@ export default {
     components: { searchLayout, tableList },
     data() {
         return {
-            activeName: "1",
+            activeName: "2",
             searchParams: {
                 //搜索参数
-                id: "", // ID
+                algorithmCode: "", // ID
                 algorithmName: "", // 算法名称
                 description: "", // 算法描述
                 validationStatus: "", // 校验状态
@@ -125,7 +125,7 @@ export default {
                 //表格列
                 {
                     label: "ID",
-                    prop: "id",
+                    prop: "algorithmCode",
                 },
                 {
                     label: "算法名称",
@@ -204,7 +204,7 @@ export default {
         },
         doReset() {
             this.searchParams = {
-                id: "",
+                algorithmCode: "",
                 algorithmName: "",
                 description: "",
                 validationStatus: "",

src/views/mainPage.vue

@@ -73,8 +73,8 @@
                 <div class="titlePanel">
                     <div class="titlePanelBor">日访问人数</div>
                 </div>
-                <div>
-                    <line-chart></line-chart>
+                <div class="chartABox">
+                    <line-chart1 id="lineA"></line-chart1>
                 </div>
             </div>
 
@@ -134,13 +134,13 @@
                         @tab-click="pageControlA"
                     >
                         <el-tab-pane label="运行项目" name="1">
-                            <div>
-                                <line-chart></line-chart>
+                            <div class="chartBBox">
+                                <line-chart2 id="chartB"></line-chart2>
                             </div>
                         </el-tab-pane>
                         <el-tab-pane label="运行任务" name="2">
-                            <div>
-                                <line-chart1></line-chart1>
+                            <div class="chartBBox">
+                                <line-chart3 id="chartC"></line-chart3>
                             </div>
                         </el-tab-pane>
                     </el-tabs>
@@ -151,18 +151,24 @@
                 <div class="titlePanel">
                     <div class="titlePanelBor">状态统计</div>
                 </div>
-                <div class="pieBox">
+                <div class="piesBox">
                     <div class="shadowBox">
                         <div class="title">项目运行状态统计</div>
-                        <pie-chart></pie-chart>
+                        <div class="pieBox">
+                            <pie-chart1 id="pieA"></pie-chart1>
+                        </div>
                     </div>
                     <div class="shadowBox shadowBoxB">
                         <div class="title">任务运行状态统计</div>
-                        <pie-chart1></pie-chart1>
+                        <div class="pieBox">
+                            <pie-chart1 id="pieC"></pie-chart1>
+                        </div>
                     </div>
                     <div class="shadowBox">
                         <div class="title">评测等级分布</div>
-                        <pie-chart2></pie-chart2>
+                        <div class="pieBox">
+                            <pie-chart1 id="pieD"></pie-chart1>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -175,6 +181,8 @@ import toolbarTab from "@/components/toolbar/toolbarTab";
 import tableList from "@/components/grid/TableList";
 import LineChart from "../components/echarts/lineChart";
 import LineChart1 from "../components/echarts/lineChart1";
+import LineChart2 from "../components/echarts/lineChart2";
+import LineChart3 from "../components/echarts/lineChart3";
 import pieChart from "../components/echarts/pieChart";
 import pieChart1 from "../components/echarts/pieChart1";
 import pieChart2 from "../components/echarts/pieChart2";
@@ -186,6 +194,8 @@ export default {
         tableList,
         LineChart,
         LineChart1,
+        LineChart2,
+        LineChart3,
         pieChart,
         pieChart1,
         pieChart2,
@@ -246,11 +256,11 @@ export default {
                 },
                 {
                     label: "剩余容量",
-                    prop: "endDateStr",
+                    prop: "endDateStr1",
                 },
                 {
                     label: "执行任务数量",
-                    prop: "projectDateStr",
+                    prop: "projectDateStr1",
                 },
             ],
             columnsA: [
@@ -314,14 +324,37 @@ export default {
                 data: [
                     {
                         id: 1,
-                        ktName: "kjdhfkjsdhfkjsjhdfksdjhfkhwoieyrhfisdhfksjhdf",
-                        jbSource: "收到就好付款时间的回复可见收到货覅无痕",
+                        ktName: "127.0.0.1",
+                        jbSource: "收到就好付款时",
+                        startDateStr: "12%",
+                        endDateStr: "32%",
+                        projectDateStr: "35",
+                        cgInfos: "48%",
+                        endDateStr1: "50",
+                        projectDateStr1: "42",
+                    },
+                    {
+                        id: 2,
+                        ktName: "127.0.0.1",
+                        jbSource: "收付款时间的回复可",
+                        startDateStr: "1%",
+                        endDateStr: "2%",
+                        projectDateStr: "3",
+                        cgInfos: "24%",
+                        endDateStr1: "15",
+                        projectDateStr1: "6",
+                    },
+                    {
+                        id: 3,
+                        ktName: "127.0.0.1",
+                        jbSource: "收间的回复可",
+                        startDateStr: "12%",
+                        endDateStr: "24%",
+                        projectDateStr: "13",
+                        cgInfos: "4%",
+                        endDateStr1: "5",
+                        projectDateStr1: "16",
                     },
-                    { id: 2 },
-                    { id: 3 },
-                    { id: 4 },
-                    { id: 5 },
-                    { id: 6 },
                 ],
                 // data: this.$api.scientificStatistics.typeProjectStatistics,
                 param: {},
@@ -508,13 +541,14 @@ export default {
             }
         }
 
-        .pieBox {
+        .piesBox {
             display: flex;
 
             > div {
                 flex: 1;
                 width: 30%;
             }
+
             .title {
                 padding-top: 24px;
                 padding-bottom: 24px;
@@ -532,5 +566,13 @@ export default {
     /deep/ .el-tabs__item.is-active {
         color: @themeColor;
     }
+
+    .chartABox {
+        height: calc(36vh);
+    }
+
+    .chartBBox {
+        height: calc(36vh);
+    }
 }
 </style>

src/views/modelLibrary/components/handleConfigList.vue

@@ -221,6 +221,7 @@ export default {
     components: {},
     data() {
         return {
+            // isActive: false,
             isActiveA: false,
             isActiveB: false,
             isActiveC: false,
@@ -235,7 +236,7 @@ export default {
                 sensorName: "",
                 sensorDescription: "",
                 sensorId: "",
-                sensorType: ""
+                sensorType: "",
             },
             rules: {
                 sensorId: [
@@ -287,6 +288,23 @@ export default {
          * index传感器索引
          */
         add(type, index) {
+            switch (index) {
+                case 0:
+                    if (!this.isActiveA) this.isActiveA = true;
+                    break;
+                case 1:
+                    if (!this.isActiveB) this.isActiveB = true;
+                    break;
+                case 2:
+                    if (!this.isActiveC) this.isActiveC = true;
+                    break;
+                case 3:
+                    if (!this.isActiveE) this.isActiveE = true;
+                    break;
+                default:
+                    break;
+            }
+            
             let apis = [
                 this.$api.modelLibrary.getMyCameraList,
                 this.$api.modelLibrary.getMyOgtList,
@@ -305,7 +323,7 @@ export default {
                 if (res.code == 200 && res.info) {
                     this.sensorNameList = res.info;
                     this.dialogVisible = true;
-                    this.$nextTick(()=>{
+                    this.$nextTick(() => {
                         this.$refs.form.resetFields();
                         this.form.sensorName = "";
                         this.form.sensorType = type;
@@ -336,6 +354,7 @@ export default {
                     let type = this.currentType;
                     this.$emit("addOne", info, type);
                     this.dialogVisible = false;
+                    this.configHandle(type, 0);
                 }
             });
         },
@@ -352,7 +371,7 @@ export default {
     },
 
     mounted() {
-        this.isActive = this.isActiveA;
+        // this.isActive = this.isActiveA;
     },
 };
 </script>
@@ -428,24 +447,24 @@ export default {
         }
 
         .sensorIconA {
-            background: url("../../../assets/common/image/sensor/001.png") center
-                no-repeat;
+            background: url("../../../assets/common/image/sensor/001.png")
+                center no-repeat;
         }
         .sensorIconB {
-            background: url("../../../assets/common/image/sensor/002.png") center
-                no-repeat;
+            background: url("../../../assets/common/image/sensor/002.png")
+                center no-repeat;
         }
         .sensorIconC {
-            background: url("../../../assets/common/image/sensor/003.png") center
-                no-repeat;
+            background: url("../../../assets/common/image/sensor/003.png")
+                center no-repeat;
         }
         .sensorIconD {
-            background: url("../../../assets/common/image/sensor/004.png") center
-                no-repeat;
+            background: url("../../../assets/common/image/sensor/004.png")
+                center no-repeat;
         }
         .sensorIconE {
-            background: url("../../../assets/common/image/sensor/005.png") center
-                no-repeat;
+            background: url("../../../assets/common/image/sensor/005.png")
+                center no-repeat;
         }
 
         .sensorIcon {

src/views/modelLibrary/sensorModel.vue

@@ -245,8 +245,11 @@ export default {
         padding-top: 15px;
 
         .model {
+            flex: 1;
             min-width: 300px;
-            padding-left: 40px;
+            // padding-left: 40px;
+            padding-left: 10%;
+            padding-right: 10%;
         }
     }
 

src/views/modelLibrary/vehicleConfigurationDetail.vue

@@ -38,7 +38,11 @@
                     </el-select>
                 </el-form-item> -->
                 <el-form-item label="车辆名称:" prop="vehicleId">
-                    <el-select v-model="form.vehicleId" @change="vehicleChange">
+                    <el-select
+                        v-model="form.vehicleId"
+                        @change="vehicleChange"
+                        filterable
+                    >
                         <el-option
                             v-for="item in vehicleNameList"
                             :label="item.vehicleName"
@@ -189,7 +193,6 @@ export default {
             callback();
         };
         return {
-            confId: "l2s2d3k4j5fl90898",
             vehicleNameList: [],
             form: {
                 id: "",
@@ -217,7 +220,7 @@ export default {
                 configDescription: [
                     { required: true, message: "请输入", trigger: "blur" },
                 ],
-                vehicleName: [
+                vehicleId: [
                     {
                         required: true,
                         message: "请选择",
@@ -331,6 +334,16 @@ export default {
                     }
 
                     // if(!validateSensorsList) return;
+                    // console.log(this.configList);
+                    // console.log(Object.keys(this.configList));
+                    // console.log(Object.values(this.configList));
+                    // console.log(Object.entries(this.configList));
+
+
+
+
+
+                    // return;
 
                     let data = Object.assign({}, this.form, {
                         configSensors: this.configList,
@@ -360,7 +373,7 @@ export default {
                 this.configList[type] = [];
             }
             //若直接传info即this.form，可能是由于传入了响应式，造成数据会变动
-            this.configList[type].push({ ...info });
+            this.configList[type].unshift({ ...info });
         },
         delOne(type, index) {
             this.configList[type].splice(index, 1);
@@ -392,10 +405,10 @@ export default {
 
     mounted() {
         this.getMyVehicleList();
-        if (this.$route.query.formData) {
+        if (this.$route.query.id) {
             let id = "";
-            this.form.id = id = this.$route.query.formData.id;
-            this.form.share = this.$route.query.formData.share;
+            this.form.id = id = this.$route.query.id;
+            this.form.share = this.$route.query.share;
 
             if (id) {
                 this.$axios({
@@ -448,7 +461,9 @@ export default {
     margin-top: 30px;
 
     .model {
-        width: 400px;
+        // width: 400px;
+        flex: 1;
+        margin: 0 10%;
     }
 
     .conditions {

src/views/modelLibrary/vehicleConfigurationList.vue

@@ -131,7 +131,7 @@ export default {
                 vehicleName: "", // 车辆名称
                 vehicleDescription: "", // 车辆描述
             },
-            activeName: "1",
+            activeName: "2",
             columns: [
                 {
                     label: "配置ID",
@@ -179,7 +179,7 @@ export default {
                 // firstRequest: false,
                 data: this.$api.modelLibrary.getConfigPageList,
                 param: {
-                    share: "1",
+                    share: "0",
                 },
             },
         };
@@ -219,14 +219,12 @@ export default {
             this.$router.push({
                 path: "/vehicleConfigurationDetail",
                 query: {
-                    formData: {
-                        id: row.id,
-                        share: row.share,
-                    },
+                    id: row.id,
+                    share: row.share,
                 },
             });
         },
-        delOne(row){
+        delOne(row) {
             this.$confirm("确认是否删除？", "提示", {
                 confirmButtonText: "确定",
                 cancelButtonText: "取消",

src/views/sceneLibrary/gradingRule.vue

@@ -126,10 +126,10 @@ export default {
     },
 
     mounted() {
-        if (this.$route.query.formData) {
+        if (this.$route.query.rulesId) {
             let rulesId = "";
-            this.form.rulesId = rulesId = this.$route.query.formData.rulesId;
-            this.form.share = this.share = this.$route.query.formData.share;
+            this.form.rulesId = rulesId = this.$route.query.rulesId;
+            this.form.share = this.share = this.$route.query.share;
 
             if (rulesId) {
                 this.$axios({

src/views/sceneLibrary/gradingRulesList.vue

@@ -127,7 +127,7 @@ export default {
     components: { searchLayout, tableList, toolbarTab },
     data() {
         return {
-            activeName: "1",
+            activeName: "2",
             searchParams: {
                 //搜索参数
                 rulesCode: "", //规则Id
@@ -178,7 +178,7 @@ export default {
                 data: this.$api.sceneLibrary.queryScoringRulesList,
                 param: {
                     packageId: "11111111",
-                    share: "1",
+                    share: "0",
                 },
             },
             dialogVisible: false,
@@ -283,10 +283,8 @@ export default {
                 //     share: row.share,
                 // },
                 query: {
-                    formData: {
-                        rulesId: row.rulesId,
-                        share: row.share,
-                    },
+                    rulesId: row.rulesId,
+                    share: row.share,
                 },
             });
         },

src/views/sceneLibrary/scenarioTestPackageManagementList.vue

@@ -111,7 +111,7 @@ export default {
                 yearMax: "", // 结束时间
             },
             searchDate: "", // 创建时间
-            activeName: "1",
+            activeName: "2",
             columns: [
                 {
                     label: "指标ID",
@@ -153,7 +153,7 @@ export default {
                 // firstRequest: false,
                 data: this.$api.sceneLibrary.queryScenePackageList,
                 param: {
-                    share: "1",
+                    share: "0",
                 },
             },
         };

src/views/sceneLibrary/scenePacketList.vue

@@ -313,7 +313,10 @@ export default {
 
     methods: {
         viewTree() {
-            this.$router.push({ path: "/templateView" });
+            this.$router.push({
+                path: "/templateView",
+                query: { packageId: this.packageId },
+            });
         },
         delRow(row) {
             this.$confirm("确认是否删除？", "提示", {
@@ -611,7 +614,7 @@ export default {
             });
 
             node.sceneNum = sceneNum;
-            
+
             if (node.parentId === "0") {
                 return;
             }

src/views/sceneLibrary/templateView.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="templateViewPanel">
-        <div class="nodeBox">
+        <!-- <div class="nodeBox">
             <div class="node">1</div>
         </div>
         <div class="nodeBox">
@@ -18,7 +18,12 @@
             <div class="node">3-2</div>
             <div class="node">3-3</div>
             <div class="node">3-4</div>
-        </div>
+        </div> -->
+        <el-tree
+            :data="data"
+            :props="defaultProps"
+            @node-click="handleNodeClick"
+        ></el-tree>
     </div>
 </template>
 
@@ -29,19 +34,106 @@ export default {
     name: "templateView", // 模板预览
     components: {},
     data() {
-        return {};
+        return {
+            // data: [],
+            data: [
+                {
+                    label: "一级 1",
+                    children: [
+                        {
+                            label: "二级 1-1",
+                            children: [
+                                {
+                                    label: "三级 1-1-1",
+                                },
+                            ],
+                        },
+                    ],
+                },
+                {
+                    label: "一级 2",
+                    children: [
+                        {
+                            label: "二级 2-1",
+                            children: [
+                                {
+                                    label: "三级 2-1-1",
+                                },
+                            ],
+                        },
+                        {
+                            label: "二级 2-2",
+                            children: [
+                                {
+                                    label: "三级 2-2-1",
+                                },
+                            ],
+                        },
+                    ],
+                },
+                {
+                    label: "一级 3",
+                    children: [
+                        {
+                            label: "二级 3-1",
+                            children: [
+                                {
+                                    label: "三级 3-1-1",
+                                },
+                            ],
+                        },
+                        {
+                            label: "二级 3-2",
+                            children: [
+                                {
+                                    label: "三级 3-2-1",
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+            defaultProps: {
+                children: "children",
+                label: "label",
+            },
+        };
     },
 
     computed: {},
 
-    methods: {},
+    methods: {
+        handleNodeClick(data) {
+            console.log(data);
+        },
+    },
+
+    mounted() {
+        if (this.$route.query.packageId) {
+            this.packageId = this.$route.query.packageId;
 
-    // mounted() {},
+            if (this.packageId) {
+                this.$axios({
+                    method: "post",
+                    url: this.$api.sceneLibrary.queryScenePackageSublistList,
+                    data: {
+                        packageId: this.packageId,
+                    },
+                }).then((res) => {
+                    if (res.code == 200 && res.info) {
+                        // this.data = res.info;
+                    } else {
+                        this.$message.error(res.message || "获取信息失败");
+                    }
+                });
+            }
+        }
+    },
 };
 </script>
 
 <style lang='less' scoped>
-.templateViewPanel {
+.templateViewPanel1 {
     display: flex;
     align-items: center;
     justify-content: center;

src/views/workManagement/evaluationReport.vue

@@ -270,34 +270,20 @@ export default {
     }
 
     .colorfulTable {
-        /deep/ .el-table_2_column_7 {
-            background-color: #c1db69;
-        }
-        /deep/ .el-table_2_column_7:hover {
-            background-color: #c1db69;
-        }
-        /deep/ .el-table_2_column_8 {
-            background-color: #faf54a;
-        }
-        /deep/ .el-table_2_column_9 {
-            background-color: #ff9d33;
-        }
-        /deep/ .el-table_2_column_10 {
-            background-color: #f56c6c;
-        }
-
-        /deep/ .el-table__cell:hover,
-        /deep/ .el-table__row:hover {
-            background-color: transparent !important;
+        /deep/ .el-table__body .el-table__row:first-child {
+            .el-table_2_column_7 {
+                background-color: #c1db69;
+            }
+            .el-table_2_column_8 {
+                background-color: #faf54a;
+            }
+            .el-table_2_column_9 {
+                background-color: #ff9d33;
+            }
+            .el-table_2_column_10 {
+                background-color: #f56c6c;
+            }
         }
     }
-
-    /deep/
-        .el-table--enable-row-hover
-        .el-table__body
-        tr:hover
-        > td.el-table__cell {
-        background-color: transparent !important;
-    }
 }
 </style>

src/views/workManagement/manualRunProjectList.vue

@@ -120,30 +120,38 @@
                 <template v-slot="scope">
                     <i
                         v-if="scope.row.nowRunState === '20'"
-                        @click="addMarkDia(scope.row)"
+                        @click="stopRow(scope.row.id)"
                         class="el-icon-video-pause elIcon"
-                        title="停用"
+                        title="中止"
                     ></i>
                     <i
-                        v-if="scope.row.nowRunState === '10'"
+                        v-if="
+                            scope.row.nowRunState === '10' ||
+                            scope.row.nowRunState === '40'
+                        "
                         @click="delRow(scope.row.id)"
                         class="el-icon-delete elIcon"
                         title="删除"
                     ></i>
                     <i
-                        v-if="scope.row.nowRunState === '30'"
-                        @click="viewRow(scope.row)"
+                        @click="viewRow(scope.row.id)"
                         class="el-icon-view elIcon"
                         title="查看"
                     ></i>
                     <i
-                        v-if="scope.row.nowRunState === '10'"
-                        @click="addMarkDia(scope.row)"
+                        v-if="
+                            scope.row.nowRunState === '10' ||
+                            scope.row.nowRunState === '40'
+                        "
+                        @click="runRow(scope.row.id)"
                         class="el-icon-video-play elIcon"
                         title="运行"
                     ></i>
                     <i
-                        v-if="scope.row.nowRunState === '10'"
+                        v-if="
+                            scope.row.nowRunState === '10' ||
+                            scope.row.nowRunState === '40'
+                        "
                         @click="editRow(scope.row)"
                         class="el-icon-edit-outline elIcon"
                         title="编辑"
@@ -324,6 +332,52 @@ export default {
                 },
             });
         },
+        runRow(id) {
+            this.$confirm("确认是否运行？", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            }).then(() => {
+                this.$axios({
+                    method: "post",
+                    url: this.$api.workManagement.updateProjectNowRunState,
+                    data: {
+                        id,
+                        nowRunState: "20",
+                    },
+                }).then((res) => {
+                    if (res.code == 200) {
+                        this.$message.success("运行成功");
+                    } else {
+                        this.$message.error(res.message || "运行失败");
+                    }
+                    this.doSearch();
+                });
+            });
+        },
+        stopRow(id) {
+            this.$confirm("确认是否中止？", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            }).then(() => {
+                this.$axios({
+                    method: "post",
+                    url: this.$api.workManagement.updateProjectNowRunState,
+                    data: {
+                        id,
+                        nowRunState: "40",
+                    },
+                }).then((res) => {
+                    if (res.code == 200) {
+                        this.$message.success("中止成功");
+                    } else {
+                        this.$message.error(res.message || "中止失败");
+                    }
+                    this.doSearch();
+                });
+            });
+        },
         delRow(ids) {
             this.$confirm("确认是否删除？", "提示", {
                 confirmButtonText: "确定",
@@ -367,8 +421,8 @@ export default {
             this.delRow(arr.join(","));
         },
 
-        viewRow() {
-            this.$router.push({ path: "/projectInfo", query: { id: row.id } });
+        viewRow(id) {
+            this.$router.push({ path: "/projectInfo", query: { id } });
         },
         addMarkDia() {},
         downRow(row) {

src/views/workManagement/projectInfo.vue

@@ -108,11 +108,11 @@
             </div>
             <div class="box">
                 <div class="boxContentA">
-                    <div class="pie">
-                        <pie-chart key="1"></pie-chart>
+                    <div class="chart">
+                        <pie-chart id="pieA"></pie-chart>
                     </div>
-                    <div class="pie">
-                        <pie-chart key="2"></pie-chart>
+                    <div class="chart">
+                        <pie-chart id="pieB"></pie-chart>
                     </div>
                 </div>
                 <div>
@@ -382,8 +382,9 @@ export default {
             padding: 45px 0;
         }
 
-        .pie {
+        .chart {
             width: 50%;
+            height: calc(20vh);
         }
     }
 }

src/views/workManagement/taskInfo.vue

@@ -7,33 +7,31 @@
             <div class="contentBox">
                 <div class="info">
                     <span>任务ID:</span>
-                    <b>6546857987654324687</b>
+                    <b>{{ info.taskId }}</b>
                 </div>
                 <div class="info">
                     <span>开始时间:</span>
-                    <b>2022-01-01</b>
+                    <b>{{ info.runStartTime }}</b>
                 </div>
                 <div class="info">
                     <span>执行状态:</span>
-                    <b>进行中</b>
+                    <b>{{ info.runState }}</b>
                 </div>
                 <div class="info">
                     <span>场景描述:</span>
-                    <b
-                        >仿真云平台系统仿真云平台系统仿真云平台系统仿真云平台系统仿真云平台系统</b
-                    >
+                    <b>{{ info.sceneDescribe }}</b>
                 </div>
                 <div class="info">
                     <span>场景名称:</span>
-                    <b>仿真云平台系统</b>
+                    <b>{{ info.sceneName }}</b>
                 </div>
                 <div class="info">
                     <span>结束时间:</span>
-                    <b>2022-08-01</b>
+                   <b>{{ info.runEndTime }}</b>
                 </div>
                 <div class="info">
                     <span>完成状态:</span>
-                    <b>优秀</b>
+                    <b>{{ info.finishState }}</b>
                 </div>
             </div>
         </div>
@@ -45,8 +43,8 @@
             <div class="contentBox">
                 <div class="content">
                     <img
-                        src="../../assets/common/image/car.png"
-                        width="300px"
+                        src="../../assets/common/image/others/3.png"
+                        width="100%"
                     />
                 </div>
             </div>
@@ -59,27 +57,27 @@
             <div class="contentBox">
                 <div class="info">
                     <span>里程(千米):</span>
-                    <b>888</b>
+                    <b>{{ info.mileage }}</b>
                 </div>
                 <div class="info">
                     <span>最大速度(千米/小时):</span>
-                    <b>180</b>
+                    <b>{{ info.maximunSpeed }}</b>
                 </div>
                 <div class="info">
                     <span>最大减速度(千米/小时):</span>
-                    <b>90</b>
+                    <b>{{ info.maximumDeceleration }}</b>
                 </div>
                 <div class="info">
                     <span>平均速度(千米/小时):</span>
-                    <b>81</b>
+                    <b>{{ info.averageVelocity }}</b>
                 </div>
                 <div class="info">
                     <span>最小速度(千米/小时):</span>
-                    <b>60</b>
+                    <b>{{ info.minimunVelocity }}</b>
                 </div>
                 <div class="info">
                     <span>最大摆角速度(弧度/秒):</span>
-                    <b>1.2</b>
+                    <b>{{ info.maximumSwingSpeed }}</b>
                 </div>
             </div>
         </div>
@@ -91,16 +89,24 @@
             <div class="contentBox">
                 <div class="content">
                     <div class="tip">
-                        自车速度方差:XXXXXXXXXXXXXXXXXXXXXXXXXXX
+                        自车速度方差：{{info.speedVariance}}
                     </div>
-                    <tableList :columns="columns" :getDataWay="getDataWay">
+                    <tableList
+                        :columns="columns"
+                        :getDataWay="getDataWay"
+                        class="colorfulTable"
+                    >
                     </tableList>
                 </div>
                 <div class="content">
                     <div class="tip">
-                        自车横摆角速度均方根:XXXXXXXXXXXXXXXXXXXXXXXXXXX
+                        自车横摆角速度均方根：{{info.swingSpeedMeanSquareRoot}}
                     </div>
-                    <tableList :columns="columnsA" :getDataWay="getDataWayA">
+                    <tableList
+                        :columns="columnsA"
+                        :getDataWay="getDataWayA"
+                        class="colorfulTable"
+                    >
                     </tableList>
                 </div>
             </div>
@@ -112,10 +118,34 @@
             </div>
             <div class="contentBox">
                 <div class="content">
-                    <img
-                        src="../../assets/common/image/car.png"
-                        width="300px"
-                    />
+                    <div class="chart">
+                        <div class="title">变化曲线</div>
+                        <line-chart id="lineA"></line-chart>
+                    </div>
+                    <div class="chart">
+                        <div class="title">变化曲线</div>
+                        <line-chart id="lineB"></line-chart>
+                    </div>
+                    <div class="chart">
+                        <div class="title">变化曲线</div>
+                        <line-chart id="lineC"></line-chart>
+                    </div>
+                    <div class="chart">
+                        <div class="title">变化曲线</div>
+                        <line-chart id="lineD"></line-chart>
+                    </div>
+                    <div class="chart">
+                        <div class="title">变化曲线</div>
+                        <line-chart id="lineE"></line-chart>
+                    </div>
+                    <div class="chart">
+                        <div class="title">变化曲线</div>
+                        <line-chart id="lineF"></line-chart>
+                    </div>
+                    <div class="chart">
+                        <div class="title">变化曲线</div>
+                        <line-chart id="lineG"></line-chart>
+                    </div>
                 </div>
             </div>
         </div>
@@ -124,12 +154,15 @@
 
 <script>
 import tableList from "@/components/grid/TableList";
+import lineChart from "@/components/echarts/lineChart";
 
 export default {
     name: "taskInfo", // 任务详情
-    components: { tableList },
+    components: { tableList, lineChart },
     data() {
         return {
+            id: "",
+            info: {},
             columns: [
                 {
                     label: "方差范围",
@@ -199,7 +232,28 @@ export default {
 
     methods: {},
 
-    // mounted() {},
+    mounted() {
+        if (this.$route.query.id) {
+            this.id = this.$route.query.id;
+
+            if (this.id) {
+                this.$axios({
+                    method: "post",
+                    url: this.$api.workManagement.selectProjectTaskById,
+                    data: {
+                        id: this.id,
+                        taskId: "1",
+                    },
+                }).then((res) => {
+                    if (res.code == 200 && res.info) {
+                        this.info = res.info;
+                    } else {
+                        this.$message.error(res.message || "获取信息失败");
+                    }
+                });
+            }
+        }
+    },
 };
 </script>
 
@@ -305,14 +359,49 @@ export default {
             margin: 0 10px;
         }
 
-        .bgA {
-            background-color: #a3e432;
+        .colorfulTable {
+            /deep/ .el-table__body {
+                .el-table__row:first-child {
+                    td:last-child {
+                        background-color: #a3e432;
+                    }
+                }
+
+                .el-table__row:nth-child(2) {
+                    td:last-child {
+                        background-color: #f4e015;
+                    }
+                }
+
+                .el-table__row:last-child {
+                    td:last-child {
+                        background-color: #f56c6c;
+                    }
+                }
+            }
         }
-        .bgB {
-            background-color: #f4e015;
+    }
+
+    .boxE {
+        // .contentBox {
+        //     flex-wrap: wrap;
+        // }
+
+        .content {
+            display: flex;
+            flex: 1;
+            flex-wrap: wrap;
         }
-        .bgC {
-            background-color: #f56c6c;
+
+        .chart {
+            width: 33%;
+            height: calc(25vh);
+            margin-bottom: 60px;
+
+            .title {
+                text-align: center;
+                color: @themeColor;
+            }
         }
     }
 }