|
|
@@ -1,11 +1,705 @@
|
|
|
<template>
|
|
|
- <div class="pp">
|
|
|
- <img style="width:90%;" src="../../assets/report/home2.png" />
|
|
|
+ <div class="pp">
|
|
|
+ <!-- <img style="width:90%;" src="../../assets/report/home2.png" /> -->
|
|
|
+ <div class="general_situation">
|
|
|
+ <div class="number_people">
|
|
|
+ <div class="number_people_top">人数统计</div>
|
|
|
+ <div class="number_people_yuan">
|
|
|
+ <div class="out">
|
|
|
+ <span class="yuan_name">科技学院</span>
|
|
|
+ <span class="yuan_num">总人数</span>
|
|
|
+ <span class="yuan_people">{{ peopleData["总人数"] }}人</span>
|
|
|
+ </div>
|
|
|
+ <div class="computer">
|
|
|
+ <div v-for="(item, key) in peopleData" :key="key">
|
|
|
+ <div class="computer_detail" v-if="key != '总人数'">
|
|
|
+ {{ key }}：{{ item }}人
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="plan">
|
|
|
+ <div class="plan_inner">
|
|
|
+ <span class="plan_top">计划状态</span>
|
|
|
+ <div class="table_header">
|
|
|
+ <div class="detail">测试名称</div>
|
|
|
+ <div class="detail">创建时间</div>
|
|
|
+ <div class="detail">状态</div>
|
|
|
+ </div>
|
|
|
+ <div class="table_a">
|
|
|
+ <div v-if="tableData.length == 0">
|
|
|
+ <div style="text-align: center; margin-top: 10px">暂无数据</div>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <div class="table_body" v-for="item in tableData" :key="item.id">
|
|
|
+ <div class="detail">{{ item.planName }}</div>
|
|
|
+ <div class="detail">{{ item.createDate }}</div>
|
|
|
+ <div
|
|
|
+ class="detail"
|
|
|
+ :style="{
|
|
|
+ color:
|
|
|
+ item.planStatus == '1'
|
|
|
+ ? '#EE6060'
|
|
|
+ : item.planStatus == '2'
|
|
|
+ ? '#073CFF'
|
|
|
+ : '#5ADE6C',
|
|
|
+ fontWeight: '700',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{ planStatusFun(item) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div class="recently">
|
|
|
+ <div class="recently_bottom">
|
|
|
+ <div class="recently_bottom_font">最近测试结果</div>
|
|
|
+ <div class="block">
|
|
|
+ <div class="block_left">
|
|
|
+ <div>
|
|
|
+ <div class="block_table">
|
|
|
+ <div class="block_detail">计划名称</div>
|
|
|
+ <div class="block_detail">专业</div>
|
|
|
+ <div class="block_detail">测试时间</div>
|
|
|
+ <div class="block_detail">测试人数</div>
|
|
|
+ </div>
|
|
|
+ <div class="block_body">
|
|
|
+ <div
|
|
|
+ v-if="planData.hasOwnProperty('planName')"
|
|
|
+ style="display: flex; flex: 1"
|
|
|
+ >
|
|
|
+ <div class="block_detail" v-for="(item, key) in planData" :key="key">
|
|
|
+ {{ item }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else style="width: 100%; text-align: center; margin-top: 10px">
|
|
|
+ <div>暂无数据</div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="block_detail">测试专业</div>
|
|
|
+ <div class="block_detail">测试人数</div>
|
|
|
+ <div class="block_detail">测试时间</div> -->
|
|
|
+ </div>
|
|
|
+ <div v-if="planData.hasOwnProperty('planName')" class="profession">
|
|
|
+ {{ planData["planName"] }}计划总分等级人数
|
|
|
+ </div>
|
|
|
+ <div v-else class="profession">计划总分等级人数</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ v-if="planData.hasOwnProperty('planName')"
|
|
|
+ class="echarts_style"
|
|
|
+ ref="echarts_zhu"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ v-else
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100%;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <span style="text-align: center">暂无数据</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="block_right">
|
|
|
+ <div class="block_avg">
|
|
|
+ 各个专业维度平均分
|
|
|
+ <el-select
|
|
|
+ v-model="profession"
|
|
|
+ placeholder="请选择"
|
|
|
+ @change="professionChange"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in professionOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div v-if="profession != ''" class="block_lei" ref="echarts_lei"></div>
|
|
|
+ <div
|
|
|
+ v-else
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 暂无数据
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
-<style scoped>
|
|
|
-.pp{
|
|
|
+<script>
|
|
|
+import { oSessionStorage } from "../../utils/utils";
|
|
|
+import * as echarts from "echarts";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableData: [],
|
|
|
+ pageSize: 10,
|
|
|
+ pageNum: 1,
|
|
|
+ userInfo: {},
|
|
|
+ echarts_zhu: "",
|
|
|
+ option: {},
|
|
|
+
|
|
|
+ echarts_lei: "",
|
|
|
+ option_lei: {},
|
|
|
+ //获取总人数字段
|
|
|
+ //返回的总人数字段
|
|
|
+ peopleData: {},
|
|
|
+ //返回的最新的计划字段
|
|
|
+ planData: {},
|
|
|
+ planId: "",
|
|
|
+
|
|
|
+ //组织下已选的专业
|
|
|
+ profession: "",
|
|
|
+ //组织下专业
|
|
|
+
|
|
|
+ professionOptions: [],
|
|
|
+
|
|
|
+ //各个维度平均分的数组
|
|
|
+ avgData: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.userInfo = JSON.parse(oSessionStorage.getItem("userInfo"));
|
|
|
+ //查询最新人数统计
|
|
|
+ this.queryAllPeople();
|
|
|
+ //查询最新计划
|
|
|
+ this.findNewPlan();
|
|
|
+ //查询最近计划
|
|
|
+ this.searchList();
|
|
|
+
|
|
|
+ this.option = {
|
|
|
+ title: {
|
|
|
+ text: "",
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow",
|
|
|
+ },
|
|
|
+ // formatter: function (arg) {
|
|
|
+ // console.log("arg");
|
|
|
+ // console.log(arg);
|
|
|
+ // return "我就是提示的内容";
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ legend: {},
|
|
|
+ grid: {
|
|
|
+ left: "3%",
|
|
|
+ right: "4%",
|
|
|
+ bottom: "3%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: [],
|
|
|
+ // axisLabel: {
|
|
|
+ // width: 40, //设置内容宽度
|
|
|
+ // // overflow:'break',
|
|
|
+ // overflow: "truncate",
|
|
|
+ // },
|
|
|
+ // axisLabel: {
|
|
|
+ // formatter: function (params) {
|
|
|
+ // return "中等分值";
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ dataZoom: {
|
|
|
+ type: "inside", //放大缩小x轴数值
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ boundaryGap: [0, 0.01],
|
|
|
+ minInterval: 1,
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "bar",
|
|
|
+ data: [],
|
|
|
+ barWidth: '15',//修改柱状图的宽度
|
|
|
+ itemStyle: {
|
|
|
+ color: "#CCFFD7",
|
|
|
+ borderWidth: 2,
|
|
|
+ borderColor: "#2EE053",
|
|
|
+ barBorderRadius:[10,10,0,0] //修改柱状图圆角
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ // echarts.init(this.echarts_zhu).setOption(this.option);
|
|
|
+
|
|
|
+ this.option_lei = {
|
|
|
+ radar: {
|
|
|
+ // shape: 'circle',
|
|
|
+ indicator: [
|
|
|
+ { name: "Sales", max: 100 },
|
|
|
+ { name: "Administration", max: 100 },
|
|
|
+ { name: "Information Technology", max: 100 },
|
|
|
+ { name: "Customer Support", max: 100 },
|
|
|
+ { name: "Development", max: 100 },
|
|
|
+ { name: "Marketing", max: 100 },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ // label:{
|
|
|
+ // show:true,
|
|
|
+ // textStyle:{
|
|
|
+ // color:'#000000'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ name: {
|
|
|
+ //修改indicator文字的颜色
|
|
|
+ textStyle: {
|
|
|
+ color: "#000000",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#000000",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ type: "radar",
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: [20, 30, 40, 50, 60, 70],
|
|
|
+ name: "",
|
|
|
+ itemStyle: {
|
|
|
+ //该数值区域样式设置
|
|
|
+ //边框及原点颜色
|
|
|
+ normal: {
|
|
|
+ color: "#FF1E00", //背景颜色，还需设置areaStyle
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(255,225,0,.3)", //边框颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // label: {
|
|
|
+ // //显示value中具体的数值
|
|
|
+ // normal: {
|
|
|
+ // show: true,
|
|
|
+ // textStyle: {
|
|
|
+ // //更改数值样式
|
|
|
+ // color: "orange",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ areaStyle: {
|
|
|
+ //设置区域背景颜色透明度
|
|
|
+ normal: {
|
|
|
+ width: 1,
|
|
|
+ opacity: 0.3,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ this.getOrg();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //根据组织编号查询总人数
|
|
|
+ queryAllPeople() {
|
|
|
+ let url = `/user/countUserByOrgNo?orgNo=${this.userInfo.orgNo}`;
|
|
|
+ this.$http.get(url, {}, (res) => {
|
|
|
+ if (res && res.code == 200) {
|
|
|
+ this.peopleData = res.data;
|
|
|
+ // this.tableData = res.data.content;
|
|
|
+ // this.total = res.data.totalElements;
|
|
|
+ } else {
|
|
|
+ // this.$toast.fail(res.msg);
|
|
|
+ this.$message.error(res.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ searchList() {
|
|
|
+ let url = `/plan/findListByPage?pageSize=${this.pageSize}&pageNum=${this.pageNum}&orgNo=${this.userInfo.orgNo}`;
|
|
|
+ this.$http.get(url, {}, (res) => {
|
|
|
+ if (res && res.code == 200) {
|
|
|
+ this.tableData = res.data.content;
|
|
|
+ // this.total = res.data.totalElements;
|
|
|
+ } else {
|
|
|
+ // this.$toast.fail(res.msg);
|
|
|
+ this.$message.error(res.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //查询最新结束的计划
|
|
|
+ findNewPlan() {
|
|
|
+ let url = `/plan/findNewCompletedPlan?orgNo=${this.userInfo.orgNo}`;
|
|
|
+ this.$http.get(url, {}, (res) => {
|
|
|
+ if (res && res.code == 200) {
|
|
|
+ console.log("最新结束数计划");
|
|
|
+ console.log(res.data);
|
|
|
+
|
|
|
+ if (res.data != null) {
|
|
|
+ this.planId = res.data.id;
|
|
|
+ let list = Object.entries(res.data);
|
|
|
+ //开始过滤
|
|
|
+ let list1 = list.filter(([key, val]) => {
|
|
|
+ return (
|
|
|
+ key == "planName" ||
|
|
|
+ key == "planOrgName" ||
|
|
|
+ key == "createDate" ||
|
|
|
+ key == "userNum"
|
|
|
+ );
|
|
|
+ });
|
|
|
+ let list2 = Object.fromEntries(list1);
|
|
|
+ console.log(JSON.stringify(list2));
|
|
|
+ this.planData = list2;
|
|
|
+
|
|
|
+ //调用各个专业不同总分人数
|
|
|
+ this.isScore();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // this.$toast.fail(res.msg);
|
|
|
+ this.$message.error(res.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //各个专业不同总分人数
|
|
|
+ isScore() {
|
|
|
+ let url = `/plan/countTotalNumber?planId=${this.planId}`;
|
|
|
+ this.$http.get(url, {}, (res) => {
|
|
|
+ console.log("isScore");
|
|
|
+ console.log(res);
|
|
|
+ if (res.code == 200) {
|
|
|
+ console.log(res.data);
|
|
|
+ let nameList = [];
|
|
|
+ let scoreList = [];
|
|
|
+ for (const item in res.data) {
|
|
|
+ //
|
|
|
+ nameList.push(item);
|
|
|
+ scoreList.push(res.data[item]);
|
|
|
+ }
|
|
|
+ // nameList= ["中等", "高等", "低等", "多喝", "大"]
|
|
|
+ console.log("namelist");
|
|
|
+ // console.log(nameList)
|
|
|
+ this.echarts_zhu = this.$refs.echarts_zhu;
|
|
|
+ this.option.xAxis.data = nameList;
|
|
|
+ this.option.series[0].data = scoreList;
|
|
|
+ let myChart1 = echarts.init(this.echarts_zhu);
|
|
|
+ myChart1.setOption(this.option);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //获取子组织
|
|
|
+ getOrg() {
|
|
|
+ let url = `/org/findChildOrg?orgNo=${this.userInfo.orgNo}`;
|
|
|
+ this.$http.get(url, {}, (res) => {
|
|
|
+ if (res && res.code == 200) {
|
|
|
+ console.log("获取子组织");
|
|
|
+ console.log(res.data);
|
|
|
+ if (res.data.length > 0) {
|
|
|
+ let list = [];
|
|
|
+ for (let i = 0; i < res.data.length; i++) {
|
|
|
+ let obj = { value: "", label: "" };
|
|
|
+ obj.value = res.data[i].orgNo;
|
|
|
+ obj.label = res.data[i].orgName;
|
|
|
+ list.push(obj);
|
|
|
+ }
|
|
|
+ this.professionOptions = list;
|
|
|
+ this.profession = list[0].value;
|
|
|
+ //然后根据选择的这个选项、、查询具体数据
|
|
|
+ this.queryDetailScore(list[0].value);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // this.$toast.fail(res.msg);
|
|
|
+ this.$message.error(res.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //查看各个组织下各个维度的平均得分
|
|
|
+ queryDetailScore(val) {
|
|
|
+ let url = `/userRecordScore/findAvgScoreByOrgNo?orgNo=${val}`;
|
|
|
+ this.$http.get(url, {}, (res) => {
|
|
|
+ console.log("isScore");
|
|
|
+ console.log(res);
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.avgData = res.data;
|
|
|
+ let nameList = [];
|
|
|
+ let scoreList = [];
|
|
|
+ //设置总共维度
|
|
|
+ for (let i = 0; i < res.data.length; i++) {
|
|
|
+ let obj = { name: res.data[i].name, max: 100, color: "#000000" };
|
|
|
+ nameList.push(obj);
|
|
|
+ scoreList.push(res.data[i].score);
|
|
|
+ }
|
|
|
+ //测试计划---
|
|
|
+ //修改option
|
|
|
+ this.echarts_lei = this.$refs.echarts_lei;
|
|
|
+ this.option_lei.radar.indicator = nameList;
|
|
|
+ this.option_lei.series[0].data[0].value = scoreList;
|
|
|
+
|
|
|
+ echarts.init(this.echarts_lei).setOption(this.option_lei);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //选择的专业改变后接着调用
|
|
|
+ professionChange(val) {
|
|
|
+ this.queryDetailScore(val);
|
|
|
+ },
|
|
|
+ //状态---
|
|
|
+ planStatusFun(val) {
|
|
|
+ console.log(val);
|
|
|
+ let planStatus = val.planStatus;
|
|
|
+ if (planStatus == "1") {
|
|
|
+ return "未开始";
|
|
|
+ } else if (planStatus == "2") {
|
|
|
+ return "进行中";
|
|
|
+ } else if (planStatus == "3") {
|
|
|
+ return "已完成";
|
|
|
+ } else {
|
|
|
+ return val.planStatus;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.computer::-webkit-scrollbar {
|
|
|
+ width: 6px;
|
|
|
+}
|
|
|
+.computer::-webkit-scrollbar-track {
|
|
|
+ background: rgb(239, 239, 239);
|
|
|
+ border-radius: 2px;
|
|
|
+}
|
|
|
+.computer::-webkit-scrollbar-thumb {
|
|
|
+ background: #40a0ff49;
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+.computer::-webkit-scrollbar-thumb:hover {
|
|
|
+ background: #40a0ff;
|
|
|
+}
|
|
|
+
|
|
|
+.table_a::-webkit-scrollbar {
|
|
|
+ width: 6px;
|
|
|
+}
|
|
|
+.table_a::-webkit-scrollbar-track {
|
|
|
+ background: rgb(239, 239, 239);
|
|
|
+ border-radius: 2px;
|
|
|
+}
|
|
|
+.table_a::-webkit-scrollbar-thumb {
|
|
|
+ background: #40a0ff49;
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+.table_a::-webkit-scrollbar-thumb:hover {
|
|
|
+ background: #40a0ff;
|
|
|
+}
|
|
|
+.pp {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ /* justify-content: center; */
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #ffffff;
|
|
|
+ // background-color: aqua;
|
|
|
+ .general_situation {
|
|
|
+ height: 260px;
|
|
|
+ width: 100%;
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
+ min-width: 980px;
|
|
|
+ .number_people {
|
|
|
+ border-radius: 20px;
|
|
|
+ flex: 6;
|
|
|
+ background-color: #48d68e;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .number_people_top {
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-left: 20px;
|
|
|
+ color: #ffffff;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .number_people_yuan {
|
|
|
+ display: flex;
|
|
|
+ color: #ffffff;
|
|
|
+ .out {
|
|
|
+ width: 150px;
|
|
|
+ height: 150px;
|
|
|
+ border-radius: 20px;
|
|
|
+ margin-left: 20px;
|
|
|
+ background-color: #7fe2b0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .yuan_name {
|
|
|
+ margin-left: 20px;
|
|
|
+ margin-top: 20px;
|
|
|
+ color: #000000;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ .yuan_num {
|
|
|
+ margin-left: 20px;
|
|
|
+ margin-top: 20px;
|
|
|
+ color: #000000;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .yuan_people {
|
|
|
+ margin-left: 20px;
|
|
|
+ margin-top: 20px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .computer {
|
|
|
+ max-height: 140px;
|
|
|
+ // height: 140px;
|
|
|
+ overflow-y: auto;
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: start;
|
|
|
+ .computer_detail {
|
|
|
+ width: 140px;
|
|
|
+ // height: 20px;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .plan {
|
|
|
+ display: flex;
|
|
|
+ // height:30%;
|
|
|
+ flex: 4;
|
|
|
+
|
|
|
+ .plan_inner {
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 20px;
|
|
|
+ margin-left: 20px;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ flex-direction: column;
|
|
|
+ .plan_top {
|
|
|
+ font-weight: 700;
|
|
|
+ color: #000000;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ //表头
|
|
|
+ .table_header {
|
|
|
+ display: flex;
|
|
|
+ // justify-content: space-around;
|
|
|
+ background-color: #ffffff;
|
|
|
+ line-height: 40px;
|
|
|
+ font-weight: 700;
|
|
|
+ .detail {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table_a {
|
|
|
+ overflow-y: auto;
|
|
|
+ .table_body {
|
|
|
+ display: flex;
|
|
|
+ // justify-content: space-around;
|
|
|
+ line-height: 30px;
|
|
|
+ .detail {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .recently {
|
|
|
+ width: 100%;
|
|
|
+ // height: 100%;
|
|
|
+ // overflow: auto;
|
|
|
+ height: calc(100% - 260px);
|
|
|
+ // background-color: #000000;
|
|
|
+ .recently_bottom {
|
|
|
+ height: calc(100% - 20px);
|
|
|
+ margin-top: 20px;
|
|
|
+ // margin-bottom:20px;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .recently_bottom_font {
|
|
|
+ padding: 10px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .block {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ .block_left {
|
|
|
+ display: flex;
|
|
|
+ padding-left: 10px;
|
|
|
+ flex-direction: column;
|
|
|
+ // padding: 10px;
|
|
|
+ flex: 6;
|
|
|
+ // background-color: #000000;
|
|
|
+ height: 100%;
|
|
|
+ .block_table {
|
|
|
+ display: flex;
|
|
|
+ background-color: #ffffff;
|
|
|
+ .block_detail {
|
|
|
+ font-weight: 700;
|
|
|
+ padding: 10px;
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .block_body {
|
|
|
+ display: flex;
|
|
|
+ .block_detail {
|
|
|
+ justify-content: center;
|
|
|
+ padding: 10px;
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .profession {
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .echarts_style {
|
|
|
+ width: 100%;
|
|
|
+ flex: 1;
|
|
|
+ // background-color: #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .block_right {
|
|
|
+ flex: 4;
|
|
|
+ // background-color: #d32d2d;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .block_avg {
|
|
|
+ margin-left: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .block_lei {
|
|
|
+ flex: 1;
|
|
|
+ // background-color: #000000;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
