|
@@ -0,0 +1,503 @@
|
|
|
+<template>
|
|
|
+ <div class="out">
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ width="80%"
|
|
|
+ style="border-radius: 40px"
|
|
|
+ >
|
|
|
+ <div slot="title" id="el-com">
|
|
|
+ <p style="text-align: center; font-weight: 700; margin-bottom: 20px">不同专业对比</p>
|
|
|
+ <p class="data_asyni">数据对比</p>
|
|
|
+ <div class="table-content">
|
|
|
+ <div ref="echarts_ld" style="width: 70vw; height: 100vh"></div>
|
|
|
+ </div>
|
|
|
+ <!-- <p class="data_asyni">选择计划对比</p> -->
|
|
|
+ <p class="data_asyni" style="margin-top:20px">选择维度</p>
|
|
|
+
|
|
|
+ <div class="table-content">
|
|
|
+ <el-radio-group
|
|
|
+ class="data_asyni"
|
|
|
+ v-model="radio"
|
|
|
+ size="mini"
|
|
|
+ v-if="radioList.length > 0"
|
|
|
+ @input="singleFun"
|
|
|
+ >
|
|
|
+ <el-radio v-for="item in radioList" :key="item" :label="item">{{
|
|
|
+ item
|
|
|
+ }}</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ <div ref="echarts_plan" style="width: 70vw; height: 100vh"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+//引入echarts组件
|
|
|
+import * as echarts from "echarts";
|
|
|
+import { Loading } from "element-ui";
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ planInfo: {},
|
|
|
+ dialogVisible: false,
|
|
|
+ compareVisible: false,
|
|
|
+
|
|
|
+ echarts_ld: "",
|
|
|
+ option_w: {},
|
|
|
+
|
|
|
+ echarts_plan: "",
|
|
|
+ groupData: [],
|
|
|
+ radioList: [],
|
|
|
+ radio: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.echarts_ld = this.$refs.echarts_ld;
|
|
|
+ this.echarts_plan = this.$refs.echarts_plan;
|
|
|
+ this.option_w = {
|
|
|
+ title: {},
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {},
|
|
|
+ grid: {
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "value",
|
|
|
+ boundaryGap: [0, 0.01],
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "专业1",
|
|
|
+ type: "bar",
|
|
|
+ data: [0],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "专业2",
|
|
|
+ type: "bar",
|
|
|
+ data: [0],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ // const myChart = echarts.init(this.echarts_ld);
|
|
|
+ // myChart.setOption(this.option_w);
|
|
|
+
|
|
|
+ this.option_plan = {
|
|
|
+ title: {},
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {},
|
|
|
+ grid: {
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "value",
|
|
|
+ boundaryGap: [0, 0.01],
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: ["人生意义--中等"],
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "专业1",
|
|
|
+ type: "bar",
|
|
|
+ data: [0, 23489, 29034, 104970, 131744, 0],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "专业2",
|
|
|
+ type: "bar",
|
|
|
+ data: [19325, 23438, 31000, 121594, 134141, 681807],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ // setTimeout(() => {
|
|
|
+ // myChart.resize();
|
|
|
+ // }, 2000);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ open(val) {
|
|
|
+ this.planInfo = val;
|
|
|
+ this.dialogVisible = true;
|
|
|
+ this.radio = "";
|
|
|
+ this.getChannel();
|
|
|
+ this.searchList();
|
|
|
+ },
|
|
|
+ //进来先查询下组织架构
|
|
|
+ //查询出来组织架构
|
|
|
+ //与专业进行对比
|
|
|
+ getChannel() {
|
|
|
+ this.$http.get(`/org/findAllOrgByPOrgNo`, {}, (res) => {
|
|
|
+ // this.$toast.success({message:'成功'});
|
|
|
+ if (res && res.code == 200) {
|
|
|
+ //将值赋值给list
|
|
|
+ if (res.data.length > 0) {
|
|
|
+ this.groupData = res.data;
|
|
|
+ //得到的组织架构数据
|
|
|
+ console.log(res.data);
|
|
|
+ } else {
|
|
|
+ this.groupData = [];
|
|
|
+ }
|
|
|
+ // this.channelList = res.data;
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //进来调用已选列表接口
|
|
|
+ searchList() {
|
|
|
+ let loadingInstance = Loading.service({
|
|
|
+ text: "loading",
|
|
|
+ background: "rgba(0, 0, 0, 0.4)",
|
|
|
+ target: document.querySelector("#el-com"),
|
|
|
+ });
|
|
|
+ //&orgNo=${this.planInfo.planOrgNo}
|
|
|
+ let url = `/plan/countByOrgNoAndDimension?planId=${this.planInfo.id}`;
|
|
|
+ this.$http.get(url, {}, (res) => {
|
|
|
+ console.log(res);
|
|
|
+ if (res && res.code == 200) {
|
|
|
+ this.allData = res.data;
|
|
|
+ //获取到数据后进行加工
|
|
|
+ //Y轴展示的内容字段
|
|
|
+ //循环全部数据得到全部维度和全部专业的问题
|
|
|
+ this.allFun();
|
|
|
+ this.singleFun(this.radio);
|
|
|
+ // console.log(tabList)
|
|
|
+ this.$nextTick(() => {
|
|
|
+ // 以服务的方式调用的 Loading 需要异步关闭
|
|
|
+ loadingInstance.close();
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ // this.$toast.fail(res.msg);
|
|
|
+ this.$nextTick(() => {
|
|
|
+ // 以服务的方式调用的 Loading 需要异步关闭
|
|
|
+ loadingInstance.close();
|
|
|
+ });
|
|
|
+ this.$message.error(res.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //渲染第一个图表
|
|
|
+ allFun() {
|
|
|
+ let data = JSON.parse(JSON.stringify(this.allData));
|
|
|
+ let tabList = [];
|
|
|
+ //先判断就有几个专业
|
|
|
+ let proList = [];
|
|
|
+ //储存每个专业的值
|
|
|
+ let proAll = [];
|
|
|
+
|
|
|
+ //储存数据为格式化的数据--各个专业的数据
|
|
|
+ let formatterPro = [];
|
|
|
+ let radioArr = [];
|
|
|
+ //储存全部一级数据
|
|
|
+ for (let item in data) {
|
|
|
+ // console.log(item)
|
|
|
+
|
|
|
+ if (this.radio == "") {
|
|
|
+ this.radio = item;
|
|
|
+ }
|
|
|
+ radioArr.push(item);
|
|
|
+ for (let item1 in data[item]) {
|
|
|
+ // console.log(item+'-'+itemInner);
|
|
|
+ tabList.push(item + "-" + item1);
|
|
|
+ for (let item2 in data[item][item1]) {
|
|
|
+ // console.log(item2)
|
|
|
+ proList.push(item2);
|
|
|
+ let obj = { name: item2, value: data[item][item1][item2] };
|
|
|
+ proAll.push(obj);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.radioList = radioArr;
|
|
|
+ //针对 专业数组进行去重
|
|
|
+
|
|
|
+ let prolistFin = proList.filter((item, index, proList) => {
|
|
|
+ return proList.indexOf(item) == index;
|
|
|
+ });
|
|
|
+ //
|
|
|
+ //输出全部指标
|
|
|
+ //循环得到专业指标
|
|
|
+ for (let i = 0; i < prolistFin.length; i++) {
|
|
|
+ let lin = [];
|
|
|
+ for (let j = 0; j < proAll.length; j++) {
|
|
|
+ if (proAll[j].name == prolistFin[i]) {
|
|
|
+ //
|
|
|
+ lin.push(proAll[j].value);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ formatterPro.push(lin);
|
|
|
+ }
|
|
|
+ //储存的需要渲染的数据
|
|
|
+ console.log("需要渲染的数据");
|
|
|
+ console.log(formatterPro);
|
|
|
+
|
|
|
+ //设置data数据
|
|
|
+ this.option_w.yAxis.data = tabList;
|
|
|
+ //设置各个专业的数据
|
|
|
+ //将设置为汉语专业
|
|
|
+ //
|
|
|
+ let prolistFinName = [];
|
|
|
+ console.log(prolistFin);
|
|
|
+ console.log(JSON.stringify(this.groupData));
|
|
|
+ for (let i = 0; i < prolistFin.length; i++) {
|
|
|
+ //
|
|
|
+ for (let j = 0; j < this.groupData.length; j++) {
|
|
|
+ if (prolistFin[i] === this.groupData[j].orgNo) {
|
|
|
+ prolistFinName.push(this.groupData[j].orgName);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let series = [];
|
|
|
+ for (let i = 0; i < prolistFinName.length; i++) {
|
|
|
+ //
|
|
|
+ let obj = {
|
|
|
+ name: prolistFinName[i],
|
|
|
+ type: "bar",
|
|
|
+ data: formatterPro[i],
|
|
|
+ };
|
|
|
+ series.push(obj);
|
|
|
+ }
|
|
|
+ this.option_w.series = series;
|
|
|
+ //重新渲染柱状图
|
|
|
+ let myChart = echarts.init(this.echarts_ld);
|
|
|
+ myChart.setOption(this.option_w);
|
|
|
+ },
|
|
|
+ singleFun(val) {
|
|
|
+ let data = JSON.parse(JSON.stringify(this.allData));
|
|
|
+ let tabList = [];
|
|
|
+ //先判断就有几个专业
|
|
|
+ let proList = [];
|
|
|
+ //储存每个专业的值
|
|
|
+ let proAll = [];
|
|
|
+
|
|
|
+ //储存数据为格式化的数据--各个专业的数据
|
|
|
+ let formatterPro = [];
|
|
|
+ for (let item in data) {
|
|
|
+ // console.log(item)
|
|
|
+ if (item == val) {
|
|
|
+ for (let item1 in data[item]) {
|
|
|
+ // console.log(item+'-'+itemInner);
|
|
|
+ // tabList.push(item + "-" + item1);
|
|
|
+ tabList.push(item1);
|
|
|
+ for (let item2 in data[item][item1]) {
|
|
|
+ //
|
|
|
+ // console.log(item2)
|
|
|
+ proList.push(item2);
|
|
|
+ let obj = { name: item2, value: data[item][item1][item2] };
|
|
|
+ proAll.push(obj);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //针对 专业数组进行去重
|
|
|
+
|
|
|
+ let prolistFin = proList.filter((item, index, proList) => {
|
|
|
+ return proList.indexOf(item) == index;
|
|
|
+ });
|
|
|
+ //输出全部指标
|
|
|
+ //循环得到专业指标
|
|
|
+ for (let i = 0; i < prolistFin.length; i++) {
|
|
|
+ let lin = [];
|
|
|
+ for (let j = 0; j < proAll.length; j++) {
|
|
|
+ if (proAll[j].name == prolistFin[i]) {
|
|
|
+ //
|
|
|
+ lin.push(proAll[j].value);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(lin);
|
|
|
+ formatterPro.push(lin);
|
|
|
+ }
|
|
|
+ //储存的需要渲染的数据
|
|
|
+ console.log("需要渲染的数据");
|
|
|
+ console.log(formatterPro);
|
|
|
+
|
|
|
+ //设置data数据
|
|
|
+ this.option_plan.yAxis.data = tabList;
|
|
|
+
|
|
|
+ let prolistFinName = [];
|
|
|
+ for (let i = 0; i < prolistFin.length; i++) {
|
|
|
+ //
|
|
|
+ for (let j = 0; j < this.groupData.length; j++) {
|
|
|
+ if (prolistFin[i] == this.groupData[j].orgNo) {
|
|
|
+ prolistFinName.push(this.groupData[j].orgName);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //设置各个专业的数据
|
|
|
+ let series = [];
|
|
|
+ for (let i = 0; i < prolistFinName.length; i++) {
|
|
|
+ //
|
|
|
+ let obj = {
|
|
|
+ name: prolistFinName[i],
|
|
|
+ type: "bar",
|
|
|
+ data: formatterPro[i],
|
|
|
+ };
|
|
|
+ series.push(obj);
|
|
|
+ }
|
|
|
+ this.option_plan.series = series;
|
|
|
+ //重新渲染柱状图
|
|
|
+ let myChart = echarts.init(this.echarts_plan);
|
|
|
+ myChart.setOption(this.option_plan);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.out/deep/ .el-dialog {
|
|
|
+ border-radius: 20px !important;
|
|
|
+ background-color: #f7f7f7 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.pag_class /deep/ .el-input__inner {
|
|
|
+ width: 100% !important;
|
|
|
+}
|
|
|
+
|
|
|
+.compare_class {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ .compare_user1 {
|
|
|
+ flex: 1;
|
|
|
+ margin-right: 10px;
|
|
|
+ background-color: #f1f7ff;
|
|
|
+ padding: 20px 20px;
|
|
|
+ border-radius: 20px;
|
|
|
+ .compare_user1_out {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ width: 100px;
|
|
|
+ }
|
|
|
+ .compare_user1_info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ height: 100px;
|
|
|
+ margin-left: 30px;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .compare_group {
|
|
|
+ font-size: 20px;
|
|
|
+ margin-top: 20px;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .compare_group_detail {
|
|
|
+ margin-top: 20px;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #006fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .compare_user2 {
|
|
|
+ margin-left: 10px;
|
|
|
+ flex: 1;
|
|
|
+ background-color: #fff4f2;
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 20px 20px;
|
|
|
+ .compare_user1_out {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ width: 100px;
|
|
|
+ }
|
|
|
+ .compare_user1_info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ height: 100px;
|
|
|
+ margin-left: 30px;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .compare_group {
|
|
|
+ font-size: 20px;
|
|
|
+ margin-top: 20px;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .compare_group_detail {
|
|
|
+ margin-top: 20px;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #ff3014;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.compare_plan {
|
|
|
+ margin-top: 40px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ .compare_plan_out1 {
|
|
|
+ flex: 1;
|
|
|
+ margin-right: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .compare_plan_time {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .compare_plan_out2 {
|
|
|
+ margin-left: 10px;
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .compare_plan_time {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.compare_score {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ .compare_score_inner {
|
|
|
+ padding-left: 20px;
|
|
|
+ flex: 1;
|
|
|
+ .compare_score_left {
|
|
|
+ color: #006fff;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 20px;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ }
|
|
|
+ .compare_score_right {
|
|
|
+ color: #ff3014;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 20px;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ }
|
|
|
+ .compare_result {
|
|
|
+ font-size: 20px;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.data_asyni {
|
|
|
+ font-size: 20px;
|
|
|
+ padding-left: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.table-content {
|
|
|
+ padding-top: 20px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 20px;
|
|
|
+}
|
|
|
+</style>
|