优化项目详情的饼图

src/components/echarts/pieChart.vue

@@ -11,6 +11,21 @@ export default {
     data() {
         return {
             charts: "",
+            colors: [
+                "#5B8FF9",
+                "#61DDAA",
+                "#65789B",
+                "#F6BD16",
+
+                "#FF5C5C",
+                "#4671C6",
+                "#7CCE7A",
+                "#FFC655",
+                "#4BC2DF",
+                "#00A476",
+                "#FF7D46",
+                "#A45DB2",
+            ],
         };
     },
 
@@ -19,360 +34,80 @@ export default {
             default: "a",
             type: String,
         },
+        stateName: {
+            default: "name",
+            type: String,
+        },
+        stateList: {
+            default: function () {
+                return [];
+            },
+            type: Array,
+        },
     },
 
-    computed: {},
-
-    methods: {},
-
-    mounted() {
-        // 基于准备好的dom，初始化echarts实例
-        this.charts = this.$echarts.init(document.getElementById(this.id));
+    watch: {
+        stateList(val) {
+            if (val.length > 0) {
+                this.initStateList();
+            }
+        },
+    },
 
-        let option = {
-            tooltip: {
-                //提示框，可以在全局也可以在
-                trigger: "item", //提示框的样式
-                formatter: "{a} <br/>{b}: {c} ({d}%)",
-                color: "#000", //提示框的背景色
-                textStyle: {
-                    //提示的字体样式
-                    color: "#ffffff",
-                },
-            },
-            series: [
-                {
-                    type: "pie",
-                    data: [
-                        {
-                            value: 335,
-                            name: "图例一",
-                            itemStyle: {
-                                normal: {
-                                    color: "#5B8FF9",
-                                },
-                            },
-                        },
-                        {
-                            value: 1234,
-                            name: "图例二",
-                            itemStyle: {
-                                normal: {
-                                    color: "#61DDAA",
-                                },
-                            },
-                        },
-                        {
-                            value: 548,
-                            name: "图例三",
-                            itemStyle: {
-                                normal: {
-                                    color: "#65789B",
-                                },
-                            },
-                        },
-                        {
-                            value: 153,
-                            name: "图例四",
-                            itemStyle: {
-                                normal: {
-                                    color: "#F6BD16",
-                                },
-                            },
-                        },
-                    ],
-                },
-            ],
-        };
+    methods: {
+        initStateList() {
+            let stateList = this.stateList;
 
-        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: "图例四" },
-                    ],
-                },
-            ],
-        };
+            let data = [];
 
-        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: {
+            for (let index = 0; index < stateList.length; index++) {
+                const element = stateList[index];
+                data[index] = {
+                    value: element.num,
+                    name: element[this.stateName] + "\n" + element.num,
+                    itemStyle: {
                         normal: {
-                            //正常的样式
-                            show: true,
-                            position: "left",
-                        },
-                        emphasis: {
-                            //选中时候的样式
-                            show: true,
-                            textStyle: {
-                                fontSize: "20",
-                                fontWeight: "bold",
-                            },
-                        },
-                    }, //提示文字
-                    labelLine: {
-                        normal: {
-                            show: false,
+                            color: this.colors[index],
                         },
                     },
-                    data: [
-                        { value: 335, name: "图例一" },
-                        { value: 310, name: "图例二" },
-                        { value: 234, name: "图例三" },
-                        { value: 135, name: "图例四" },
-                    ],
-                },
-            ],
-        };
+                };
+            }
 
-        let optionX = {
-            tooltip: {
-                //提示框，可以在全局也可以在
-                trigger: "item", //提示框的样式
-                formatter: "{a} <br/>{b}: {c} ({d}%)",
-                color: "#000", //提示框的背景色
-                textStyle: {
-                    //提示的字体样式
-                    color: "#ffffff",
-                },
-            },
-            series: [
-                {
-                    type: "pie",
-                    // radius: '55%',
-                    data: [
-                        {
-                            value: 335,
-                            name: "未执行",
-                            itemStyle: {
-                                normal: {
-                                    color: "#5B8FF9",
-                                },
-                            },
-                        },
-                        {
-                            value: 1234,
-                            name: "执行中",
-                            itemStyle: {
-                                normal: {
-                                    color: "#61DDAA",
-                                },
-                            },
-                        },
-                        {
-                            value: 548,
-                            name: "已中止",
-                            itemStyle: {
-                                normal: {
-                                    color: "#65789B",
-                                },
-                            },
-                        },
-                        {
-                            value: 153,
-                            name: "已完成",
-                            itemStyle: {
-                                normal: {
-                                    color: "#F6BD16",
-                                },
-                            },
-                        },
-                    ],
-                    top: 10,
-                },
-            ],
-        };
-
-        let optionY = {
-            tooltip: {
-                //提示框，可以在全局也可以在
-                trigger: "item", //提示框的样式
-                formatter: "{a} <br/>{b}: {c} ({d}%)",
-                color: "#000", //提示框的背景色
-                textStyle: {
-                    //提示的字体样式
-                    color: "#ffffff",
-                },
-            },
-            series: [
-                {
-                    type: "pie",
-                    // radius: '55%',
-                    data: [
-                        {
-                            value: 435,
-                            name: "未执行",
-                            itemStyle: {
-                                normal: {
-                                    color: "#5B8FF9",
-                                },
-                            },
-                        },
-                        {
-                            value: 234,
-                            name: "执行中",
-                            itemStyle: {
-                                normal: {
-                                    color: "#61DDAA",
-                                },
-                            },
-                        },
-                        {
-                            value: 138,
-                            name: "已中止",
-                            itemStyle: {
-                                normal: {
-                                    color: "#65789B",
-                                },
-                            },
-                        },
-                        {
-                            value: 753,
-                            name: "已完成",
-                            itemStyle: {
-                                normal: {
-                                    color: "#F6BD16",
-                                },
-                            },
-                        },
-                    ],
-                    top: 10,
-                },
-            ],
-        };
-
-        let optionZ = {
-            tooltip: {
-                //提示框，可以在全局也可以在
-                trigger: "item", //提示框的样式
-                formatter: "{a} <br/>{b}: {c} ({d}%)",
-                color: "#000", //提示框的背景色
-                textStyle: {
-                    //提示的字体样式
-                    color: "#ffffff",
-                },
-            },
-            series: [
-                {
-                    type: "pie",
-                    // radius: '55%',
-                    data: [
-                        {
-                            value: 855,
-                            name: "优秀(G)",
-                            itemStyle: {
-                                normal: {
-                                    color: "#5B8FF9",
-                                },
-                            },
-                        },
-                        {
-                            value: 693,
-                            name: "良好(A)",
-                            itemStyle: {
-                                normal: {
-                                    color: "#61DDAA",
-                                },
-                            },
-                        },
-                        {
-                            value: 548,
-                            name: "一般(M)",
-                            itemStyle: {
-                                normal: {
-                                    color: "#65789B",
-                                },
-                            },
-                        },
-                        {
-                            value: 153,
-                            name: "较差(P)",
-                            itemStyle: {
-                                normal: {
-                                    color: "#F6BD16",
-                                },
-                            },
-                        },
-                    ],
-                    top: 10,
+            let option = {
+                tooltip: {
+                    //提示框，可以在全局也可以在
+                    trigger: "item", //提示框的样式
+                    // formatter: "{a} <br/>{b}: {c} ({d}%)",
+                    formatter: "{a} <br/>{b}:{d}%",
+                    color: "#000", //提示框的背景色
+                    textStyle: {
+                        //提示的字体样式
+                        color: "#ffffff",
+                    },
                 },
-            ],
-        };
+                series: [
+                    {
+                        name: "状态统计",
+                        type: "pie",
+                        // radius: '55%',
+                        data,
+                        top: 10,
+                    },
+                ],
+            };
 
-        if (this.id === "pieB") {
-            this.charts.setOption(option2);
-        } else if (this.id === "pieX") {
-            this.charts.setOption(optionX);
-        } else if (this.id === "pieY") {
-            this.charts.setOption(optionY);
-        } else if (this.id === "pieZ") {
-            this.charts.setOption(optionZ);
-        } else {
             this.charts.setOption(option);
-        }
+        },
+    },
+
+    mounted() {
+        this.charts = this.$echarts.init(document.getElementById(this.id));
 
-        // window.onresize = function () {
-        //     this.charts.resize();
-        // };
+        this.$nextTick(() => {
+            window.addEventListener("resize", () => {
+                this.charts.resize();
+            });
+        });
     },
     destroyed() {
         console.log("destroyed");

src/components/echarts/pieChartX.vue

@@ -0,0 +1,588 @@
+<template>
+    <div class="linechart" :id="id" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+//import  from '';
+
+export default {
+    name: "pieChart", //
+    components: {},
+    data() {
+        return {
+            charts: "",
+            colors: [
+                "#5B8FF9",
+                "#61DDAA",
+                "#65789B",
+                "#F6BD16",
+
+                "#FF5C5C",
+                "#4671C6",
+                "#7CCE7A",
+                "#FFC655",
+                "#4BC2DF",
+                "#00A476",
+                "#FF7D46",
+                "#A45DB2",
+            ],
+        };
+    },
+
+    props: {
+        id: {
+            default: "a",
+            type: String,
+        },
+        stateList: {
+            default: function () {
+                return [];
+            },
+            type: Array,
+        },
+    },
+
+    watch: {
+        stateList(val) {
+            if (val.length > 0) {
+                this.initStateList();
+            }
+        },
+    },
+
+    methods: {
+        initStateList() {
+            let stateList = this.stateList;
+
+            let data = [];
+
+            for (let index = 0; index < stateList.length; index++) {
+                const element = stateList[index];
+                data[index] = {
+                    value: element.num,
+                    name: element.stateName,
+                    itemStyle: {
+                        normal: {
+                            color: this.colors[index],
+                        },
+                    },
+                };
+            }
+
+            let option = {
+                tooltip: {
+                    //提示框，可以在全局也可以在
+                    trigger: "item", //提示框的样式
+                    formatter: "{a} <br/>{b}: {c} ({d}%)",
+                    color: "#000", //提示框的背景色
+                    textStyle: {
+                        //提示的字体样式
+                        color: "#ffffff",
+                    },
+                },
+                series: [
+                    {
+                        name: "状态统计",
+                        type: "pie",
+                        // radius: '55%',
+                        data,
+                        top: 10,
+                    },
+                ],
+            };
+
+            this.charts.setOption(option);
+        },
+    },
+
+    mounted() {
+        // 基于准备好的dom，初始化echarts实例
+        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: "图例一",
+                            itemStyle: {
+                                normal: {
+                                    color: "#5B8FF9",
+                                },
+                            },
+                        },
+                        {
+                            value: 1234,
+                            name: "图例二",
+                            itemStyle: {
+                                normal: {
+                                    color: "#61DDAA",
+                                },
+                            },
+                        },
+                        {
+                            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: "图例四" },
+                    ],
+                },
+            ],
+        };
+
+        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: "图例四" },
+                    ],
+                },
+            ],
+        };
+
+        let optionX = {
+            tooltip: {
+                //提示框，可以在全局也可以在
+                trigger: "item", //提示框的样式
+                formatter: "{a} <br/>{b}: {c} ({d}%)",
+                color: "#000", //提示框的背景色
+                textStyle: {
+                    //提示的字体样式
+                    color: "#ffffff",
+                },
+            },
+            series: [
+                {
+                    name: "状态统计",
+                    type: "pie",
+                    // radius: '55%',
+                    data: [
+                        {
+                            value: 335,
+                            name: "未执行\n12%",
+                            itemStyle: {
+                                normal: {
+                                    color: "#5B8FF9",
+                                },
+                            },
+                        },
+                        {
+                            value: 1234,
+                            name: "执行中",
+                            itemStyle: {
+                                normal: {
+                                    color: "#61DDAA",
+                                },
+                            },
+                        },
+                        {
+                            value: 548,
+                            name: "已中止",
+                            itemStyle: {
+                                normal: {
+                                    color: "#65789B",
+                                },
+                            },
+                        },
+                        {
+                            value: 153,
+                            name: "已完成",
+                            itemStyle: {
+                                normal: {
+                                    color: "#F6BD16",
+                                },
+                            },
+                        },
+                        {
+                            value: 453,
+                            name: "已完成3",
+                            itemStyle: {
+                                normal: {
+                                    color: "#FF5C5C",
+                                },
+                            },
+                        },
+                        {
+                            value: 553,
+                            name: "已完成2",
+                            itemStyle: {
+                                normal: {
+                                    color: "#4671C6",
+                                },
+                            },
+                        },
+                        {
+                            value: 753,
+                            name: "已完成1",
+                            itemStyle: {
+                                normal: {
+                                    color: "#FF7D46",
+                                },
+                            },
+                        },
+                        {
+                            value: 253,
+                            name: "已完成12",
+                            itemStyle: {
+                                normal: {
+                                    color: "#A45DB2",
+                                },
+                            },
+                        },
+                    ],
+                    top: 10,
+                },
+            ],
+        };
+
+        let optionY = {
+            tooltip: {
+                //提示框，可以在全局也可以在
+                trigger: "item", //提示框的样式
+                formatter: "{a} <br/>{b}: {c} ({d}%)",
+                color: "#000", //提示框的背景色
+                textStyle: {
+                    //提示的字体样式
+                    color: "#ffffff",
+                },
+            },
+            series: [
+                {
+                    type: "pie",
+                    // radius: '55%',
+                    data: [
+                        {
+                            value: 435,
+                            name: "未执行",
+                            itemStyle: {
+                                normal: {
+                                    color: "#5B8FF9",
+                                },
+                            },
+                        },
+                        {
+                            value: 234,
+                            name: "执行中",
+                            itemStyle: {
+                                normal: {
+                                    color: "#61DDAA",
+                                },
+                            },
+                        },
+                        {
+                            value: 138,
+                            name: "已中止",
+                            itemStyle: {
+                                normal: {
+                                    color: "#65789B",
+                                },
+                            },
+                        },
+                        {
+                            value: 753,
+                            name: "已完成",
+                            itemStyle: {
+                                normal: {
+                                    color: "#F6BD16",
+                                },
+                            },
+                        },
+                    ],
+                    top: 10,
+                },
+            ],
+        };
+
+        let optionZ = {
+            tooltip: {
+                //提示框，可以在全局也可以在
+                trigger: "item", //提示框的样式
+                formatter: "{a} <br/>{b}: {c} ({d}%)",
+                color: "#000", //提示框的背景色
+                textStyle: {
+                    //提示的字体样式
+                    color: "#ffffff",
+                },
+            },
+            series: [
+                {
+                    type: "pie",
+                    // radius: '55%',
+                    data: [
+                        {
+                            value: 855,
+                            name: "优秀(G)",
+                            itemStyle: {
+                                normal: {
+                                    color: "#5B8FF9",
+                                },
+                            },
+                        },
+                        {
+                            value: 693,
+                            name: "良好(A)",
+                            itemStyle: {
+                                normal: {
+                                    color: "#61DDAA",
+                                },
+                            },
+                        },
+                        {
+                            value: 548,
+                            name: "一般(M)",
+                            itemStyle: {
+                                normal: {
+                                    color: "#65789B",
+                                },
+                            },
+                        },
+                        {
+                            value: 153,
+                            name: "较差(P)",
+                            itemStyle: {
+                                normal: {
+                                    color: "#F6BD16",
+                                },
+                            },
+                        },
+                    ],
+                    top: 10,
+                },
+            ],
+        };
+
+        let optionD = {
+            tooltip: {
+                trigger: "item",
+                formatter: "{a} <br/>{b}: {c} ({d}%)",
+            },
+            legend: {
+                orient: "vertical",
+                bottom: 10,
+                left: 10,
+                data: ["SAT111", "托福", "雅思"],
+            },
+            series: [
+                {
+                    name: "国外考试分类",
+                    type: "pie",
+                    selectedMode: "single",
+                    // radius: [0, "50%"],
+                    center: ["55%", "50%"],
+                    label: {
+                        position: "inner",
+                    },
+                    labelLine: {
+                        show: false,
+                    },
+                    color: ["#7C8FFF", "#FF855F", "#FFCB64"],
+                    data: [
+                        { value: 335, name: "SATawe" },
+                        { value: 1579, name: "托福" },
+                        { value: 1548, name: "雅思" },
+                    ],
+                },
+                {
+                    name: "国外考试中心",
+                    type: "pie",
+                    // radius: ["40%", "55%"],
+                    center: ["55%", "50%"],
+                    labelLine: {
+                        length: 30, //第一段线长
+                        length2: 100, //第二段线长
+                    },
+                    label: {
+                        formatter: function (pram) {
+                            return (
+                                "{a|" +
+                                pram.data.type +
+                                " " +
+                                pram.percent +
+                                "% }"
+                            );
+                        },
+                        padding: [0, -100, 20, -100], //关键代码！关键代码！关键代码！
+                        rich: {
+                            a: {
+                                fontSize: 14,
+                                color: "#000",
+                                fontWeight: 500,
+                                lineHeight: 32,
+                                align: "right",
+                            },
+                        },
+                    },
+                    color: [
+                        "#627DF3",
+                        "#A3B0FE",
+                        "#F96B3C",
+                        "#FFAB97",
+                        "#FBBD39",
+                        "#FFDB98",
+                    ],
+                    data: [
+                        { value: 135, name: "SAT完成任务", type: "SATrt" },
+                        { value: 200, name: "SAT未完成任务", type: "SATgh" },
+                        { value: 1000, name: "托福完成任务", type: "托福11" },
+                        { value: 579, name: "托福未完成任务", type: "托福" },
+                        { value: 1048, name: "雅思完成任务", type: "雅思" },
+                        { value: 500, name: "雅思未完成任务", type: "雅思" },
+                    ],
+                },
+            ],
+        };
+
+        if (this.id === "pieB") {
+            this.charts.setOption(option2);
+        } else if (this.id === "pieX") {
+            this.charts.setOption(optionX);
+            // this.charts.setOption(optionD);
+        } else if (this.id === "pieY") {
+            this.charts.setOption(optionY);
+        } else if (this.id === "pieZ") {
+            this.charts.setOption(optionZ);
+        }
+        else {
+            this.charts.setOption(optionX);
+        }
+
+        // if (this.id === "projectInfoPieA") {
+        //     this.initStateList();
+        // }
+
+        // window.onresize = function () {
+        //     this.charts.resize();
+        // };
+
+        this.$nextTick(() => {
+            window.addEventListener("resize", () => {
+                this.charts.resize();
+            });
+        });
+    },
+    destroyed() {
+        console.log("destroyed");
+        this.charts.dispose();
+    },
+};
+</script>
+
+<style lang='less' scoped>
+.linechart {
+    margin: 0 auto;
+}
+</style>

src/views/page/pageMenu.vue

@@ -175,7 +175,7 @@ export default {
             // console.log(index, indexPath);
             this.opened = indexPath[0];
 
-            console.log(this.activeMenu);
+            // console.log(this.activeMenu);
 
             // 如果是首页 手动关闭其他菜单
             if (index === this.menus[0]) {
@@ -211,7 +211,7 @@ export default {
     },
 
     mounted() {
-        console.log(this.$route);
+        // console.log(this.$route);
 
         let menuKind = this.$route.meta.menuKind;
 

src/views/sceneLibrary/components/treeItem.vue

@@ -1,59 +0,0 @@
-<template>
-    <li>
-        <div :class="{ bold: isFolder }" @click="toggle" @dblclick="makeFolder">
-            {{ item.name }}
-            <!-- <span v-if="isFolder">[{{ isOpen ? "-" : "+" }}]</span> -->
-        </div>
-        <ul v-show="isOpen" v-if="isFolder">
-            <tree-item
-                class="item"
-                v-for="(child, index) in item.children"
-                :key="index"
-                :item="child"
-                @make-folder="$emit('make-folder', $event)"
-                @add-item="$emit('add-item', $event)"
-            ></tree-item>
-            <li class="add" @click="$emit('add-item', item)">+</li>
-        </ul>
-    </li>
-</template>
-
-<script>
-//import  from '';
-
-export default {
-    name: "treeItem", //
-    components: {},
-    props: {
-        item: Object,
-    },
-    data: function () {
-        return {
-            isOpen: true,
-        };
-    },
-    computed: {
-        isFolder: function () {
-            return this.item.children && this.item.children.length;
-        },
-    },
-    methods: {
-        toggle: function () {
-            if (this.isFolder) {
-                this.isOpen = !this.isOpen;
-            }
-        },
-        makeFolder: function () {
-            if (!this.isFolder) {
-                this.$emit("make-folder", this.item);
-                this.isOpen = true;
-            }
-        },
-    },
-
-    // mounted() {},
-};
-</script>
-
-<style lang='less' scoped>
-</style>

src/views/sceneLibrary/components/viewTree.vue

@@ -1,82 +0,0 @@
-<template>
-    <div>
-        <ul id="demo">
-            <tree-item
-                class="item"
-                :item="treeData"
-                @make-folder="makeFolder"
-                @add-item="addItem"
-            ></tree-item>
-        </ul>
-    </div>
-</template>
-
-<script>
-import treeItem from "./treeItem";
-
-export default {
-    name: "viewTree", //
-    components: { treeItem },
-    data() {
-        return {
-            treeData: {
-                name: "My Tree",
-                children: [
-                    {
-                        name: "child folder",
-                        children: [
-                            {
-                                name: "child folder",
-                                children: [
-                                    {
-                                        name: "hello",
-                                    },
-                                    {
-                                        name: "wat",
-                                    },
-                                ],
-                            },
-                            {
-                                name: "hello",
-                            },
-                            {
-                                name: "wat",
-                            },
-                            {
-                                name: "child folder",
-                                children: [
-                                    {
-                                        name: "hello",
-                                    },
-                                    {
-                                        name: "wat",
-                                    },
-                                ],
-                            },
-                        ],
-                    },
-                ],
-            },
-        };
-    },
-
-    computed: {},
-
-    methods: {
-        makeFolder: function (item) {
-            this.$set(item, "children", []);
-            this.addItem(item);
-        },
-        addItem: function (item) {
-            item.children.push({
-                name: "new stuff",
-            });
-        },
-    },
-
-    // mounted() {},
-};
-</script>
-
-<style lang='less' scoped>
-</style>

src/views/workManagement/projectInfo.vue

@@ -126,13 +126,21 @@
                     <div class="chart">
                         <div class="pieTitle">任务运行状态统计:</div>
                         <div class="pie">
-                            <pie-chart id="pieX"></pie-chart>
+                            <pie-chart
+                                id="projectInfoPieA"
+                                :stateList="stateList"
+                                stateName="stateName"
+                            ></pie-chart>
                         </div>
                     </div>
                     <div class="chart">
                         <div class="pieTitle">结果动态统计:</div>
                         <div class="pie">
-                            <pie-chart id="pieZ"></pie-chart>
+                            <pie-chart
+                                id="projectInfoPieB"
+                                :stateList="resultList"
+                                stateName="resultName"
+                            ></pie-chart>
                         </div>
                     </div>
                 </div>
@@ -242,6 +250,8 @@ export default {
             downImgSrc: require("@/assets/common/image/others/noDoc.png"),
             // modelImgSrc: require("@/assets/common/image/others/carTopView.png"), // 车辆图片地址
             modelImgSrc: "", // 车辆图片地址
+            stateList: [], // 任务运行状态统计数据
+            resultList: [],
         };
     },
 
@@ -307,6 +317,9 @@ export default {
                         } else {
                             this.downImgSrc = require("@/assets/common/image/others/noDoc.png");
                         }
+
+                        this.stateList = res.info.stateList;
+                        this.resultList = res.info.resultList;
                     } else {
                         this.$message.error(res.message || "获取信息失败");
                     }
@@ -445,7 +458,7 @@ export default {
             }
 
             .pie {
-                height: calc(30vh);
+                height: calc(40vh);
             }
         }
     }

vue.config.js

@@ -89,8 +89,8 @@ module.exports = {
                 // target: 'http://10.15.12.70/simulation',
                 // target: 'http://10.15.12.70:7001', // 登录
                 // target: 'http://10.15.12.73:7003',  // 王志强
-                // target: 'http://10.15.12.70', // windowstest
-                target: 'http://10.15.12.87:8001',  // 赵艳
+                target: 'http://10.15.12.70', // windowstest
+                // target: 'http://10.15.12.87:8001',  // 赵艳
                 // target: 'http://192.168.30.75',  // gq
                 // target: 'http://47.94.105.148',  // aliyun
                 // target: 'http://10.15.12.74:8001',
@@ -102,9 +102,9 @@ 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.87:7003',  // 赵艳
                 // target: 'http://10.15.12.70',  // windowstest
                 // target: 'http://192.168.30.75',  // gq
                 // target: 'http://47.94.105.148',  // aliyun