|
@@ -9,24 +9,25 @@
|
|
<span :title="userInfo.orgName" class="yuan_name">{{
|
|
<span :title="userInfo.orgName" class="yuan_name">{{
|
|
userInfo.orgName
|
|
userInfo.orgName
|
|
}}</span>
|
|
}}</span>
|
|
- <span class="yuan_num">总人数</span>
|
|
|
|
|
|
+
|
|
<span class="yuan_people">{{ peopleData["总人数"] }}人</span>
|
|
<span class="yuan_people">{{ peopleData["总人数"] }}人</span>
|
|
</div>
|
|
</div>
|
|
- <div class="computer">
|
|
|
|
|
|
+ <!-- <div class="computer">
|
|
<div v-for="(item, key) in peopleData" :key="key">
|
|
<div v-for="(item, key) in peopleData" :key="key">
|
|
<div class="computer_detail" v-if="key != '总人数'">
|
|
<div class="computer_detail" v-if="key != '总人数'">
|
|
{{ key }}:{{ item }}人
|
|
{{ key }}:{{ item }}人
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- </div>
|
|
|
|
|
|
+ </div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="plan">
|
|
<div class="plan">
|
|
<div class="plan_inner">
|
|
<div class="plan_inner">
|
|
<span class="plan_top">近期测试</span>
|
|
<span class="plan_top">近期测试</span>
|
|
<div class="table_header">
|
|
<div class="table_header">
|
|
- <div class="detail">测试名称</div>
|
|
|
|
|
|
+ <div class="detail">计划名称</div>
|
|
<div class="detail">创建时间</div>
|
|
<div class="detail">创建时间</div>
|
|
|
|
+ <div class="detail">结束时间</div>
|
|
<div class="detail">状态</div>
|
|
<div class="detail">状态</div>
|
|
</div>
|
|
</div>
|
|
<div class="table_a">
|
|
<div class="table_a">
|
|
@@ -34,22 +35,54 @@
|
|
<div style="text-align: center; margin-top: 10px">暂无数据</div>
|
|
<div style="text-align: center; margin-top: 10px">暂无数据</div>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<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'
|
|
|
|
- ? '#ff7800'
|
|
|
|
- : item.planStatus == '2'
|
|
|
|
- ? '#2342ff'
|
|
|
|
- : '#333333',
|
|
|
|
- fontWeight: '700',
|
|
|
|
- }"
|
|
|
|
- >
|
|
|
|
- {{ planStatusFun(item) }}
|
|
|
|
|
|
+ <div
|
|
|
|
+ class="table_body"
|
|
|
|
+ v-for="(item, index) in tableData"
|
|
|
|
+ :key="item.id"
|
|
|
|
+ :style="{ backgroundColor: index % 2 == 0 ? '#ffffff' : '#F8F8F8' }"
|
|
|
|
+ >
|
|
|
|
+ <!-- <div :style="{backgroundColor:index ==0?'':'s'}">
|
|
|
|
+
|
|
|
|
+ </div> -->
|
|
|
|
+ <div class="detail" :title="item.planName">{{ item.planName }}</div>
|
|
|
|
+ <div class="detail">{{ item.createTime }}</div>
|
|
|
|
+ <div class="detail">{{ item.planEndTime }}</div>
|
|
|
|
+ <!-- item.planStatus -->
|
|
|
|
+ <div class="detail">
|
|
|
|
+ <!-- {{ planStatusFun(item) }} -->
|
|
|
|
+ <div
|
|
|
|
+ style="display: flex; justify-content: center; align-items: center"
|
|
|
|
+ v-if="item.planStatus == '3'"
|
|
|
|
+ >
|
|
|
|
+ <img
|
|
|
|
+ style="width: 16px"
|
|
|
|
+ src="../../assets/img/home/isCom.png"
|
|
|
|
+ alt=""
|
|
|
|
+ />
|
|
|
|
+ <div style="color: #333333">已完成</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div
|
|
|
|
+ style="display: flex; justify-content: center; align-items: center"
|
|
|
|
+ v-if="item.planStatus == '2'"
|
|
|
|
+ >
|
|
|
|
+ <img
|
|
|
|
+ style="width: 16px"
|
|
|
|
+ src="../../assets/img/home/isRun.png"
|
|
|
|
+ alt=""
|
|
|
|
+ />
|
|
|
|
+ <div style="color: #f6cb00">进行中</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div
|
|
|
|
+ style="display: flex; justify-content: center; align-items: center"
|
|
|
|
+ v-if="item.planStatus == '1'"
|
|
|
|
+ >
|
|
|
|
+ <img
|
|
|
|
+ style="width: 16px"
|
|
|
|
+ src="../../assets/img/home/isNo.png"
|
|
|
|
+ alt=""
|
|
|
|
+ />
|
|
|
|
+ <div style="color: #d52121">未开始</div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -58,168 +91,101 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="recently">
|
|
<div class="recently">
|
|
- <div class="recently_bottom">
|
|
|
|
- <div class="recently_bottom_font">
|
|
|
|
|
|
+ <!-- <div class="recently_bottom_font">
|
|
最近测试结果: {{ planData.planName }} <span
|
|
最近测试结果: {{ planData.planName }} <span
|
|
style="cursor: pointer; color: #00bf78"
|
|
style="cursor: pointer; color: #00bf78"
|
|
@click="queryDetail"
|
|
@click="queryDetail"
|
|
>查看详情</span
|
|
>查看详情</span
|
|
>
|
|
>
|
|
- </div>
|
|
|
|
- <div class="block">
|
|
|
|
- <!-- <div class="block_left" style="">
|
|
|
|
- <div class="chart_wrap">
|
|
|
|
- <PieChart :options="options1" chartId="myPieChart1" chartName="完成度" />
|
|
|
|
- </div>
|
|
|
|
- <div class="chart_wrap">
|
|
|
|
- <PieChart :options="options2" chartId="myPieChart2" chartName="焦虑" />
|
|
|
|
- </div>
|
|
|
|
- <div class="chart_wrap">
|
|
|
|
- <PieChart :options="options3" chartId="myPieChart3" chartName="抑郁" />
|
|
|
|
- </div>
|
|
|
|
- <div class="chart_wrap">
|
|
|
|
- <PieChart :options="options4" chartId="myPieChart4" chartName="压力" />
|
|
|
|
- </div>
|
|
|
|
- <div class="chart_wrap">
|
|
|
|
- <PieChart :options="options5" chartId="myPieChart5" chartName="精神障碍" />
|
|
|
|
- </div>
|
|
|
|
- <div class="chart_wrap">
|
|
|
|
- <PieChart
|
|
|
|
- :options="options6"
|
|
|
|
- chartId="myPieChart6"
|
|
|
|
- chartName="存在心理健康情况"
|
|
|
|
- />
|
|
|
|
- </div>
|
|
|
|
- </div> -->
|
|
|
|
- <div class="block_left" style="">
|
|
|
|
- <div class="chart_wrap">
|
|
|
|
- <PieChart :options="options1" chartId="myPieChart10" chartName="完成度" />
|
|
|
|
- </div>
|
|
|
|
- <div class="chart_wrap" style="">
|
|
|
|
- <PieChart
|
|
|
|
- :options="options6"
|
|
|
|
- chartId="myPieChart15"
|
|
|
|
- chartName="存在心理健康情况"
|
|
|
|
- />
|
|
|
|
- </div>
|
|
|
|
- <div class="chart_wrap">
|
|
|
|
- <PieChart :options="options2" chartId="myPieChart11" chartName="焦虑" />
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <!-- <div class="chart_wrap">
|
|
|
|
- <PieChart :options="options4" chartId="myPieChart4" chartName="压力" />
|
|
|
|
- </div>
|
|
|
|
- <div class="chart_wrap">
|
|
|
|
- <PieChart :options="options5" chartId="myPieChart5" chartName="精神障碍" />
|
|
|
|
- </div>
|
|
|
|
- <div class="chart_wrap">
|
|
|
|
- <PieChart
|
|
|
|
- :options="options6"
|
|
|
|
- chartId="myPieChart6"
|
|
|
|
- chartName="存在心理健康情况"
|
|
|
|
- />
|
|
|
|
- </div> -->
|
|
|
|
|
|
+ </div> -->
|
|
|
|
+
|
|
|
|
+ <div class="block_left">
|
|
|
|
+ <div class="block_ren">
|
|
|
|
+ <div class="re">最近测评结果</div>
|
|
|
|
+ <div class="detail">
|
|
|
|
+ <img
|
|
|
|
+ @click="queryDetail"
|
|
|
|
+ style="width: 120px; cursor: pointer"
|
|
|
|
+ src="../../assets//img/home/detail.png"
|
|
|
|
+ alt=""
|
|
|
|
+ />
|
|
</div>
|
|
</div>
|
|
- <div class="block_left" style="">
|
|
|
|
- <!-- <div class="chart_wrap">
|
|
|
|
- <PieChart :options="options1" chartId="myPieChart1" chartName="完成度" />
|
|
|
|
- </div>
|
|
|
|
- <div class="chart_wrap">
|
|
|
|
- <PieChart :options="options2" chartId="myPieChart2" chartName="焦虑" />
|
|
|
|
- </div>
|
|
|
|
- <div class="chart_wrap">
|
|
|
|
- <PieChart :options="options3" chartId="myPieChart3" chartName="抑郁" />
|
|
|
|
- </div> -->
|
|
|
|
- <div class="chart_wrap">
|
|
|
|
- <PieChart :options="options3" chartId="myPieChart12" chartName="抑郁" />
|
|
|
|
- </div>
|
|
|
|
- <div class="chart_wrap">
|
|
|
|
- <PieChart :options="options4" chartId="myPieChart13" chartName="压力" />
|
|
|
|
- </div>
|
|
|
|
- <div class="chart_wrap">
|
|
|
|
- <PieChart :options="options5" chartId="myPieChart14" chartName="精神障碍" />
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
|
|
+ </div>
|
|
|
|
+ <div style="width: 100%">
|
|
|
|
+ <div class="block_table">
|
|
|
|
+ <div class="block_detail">计划名称</div>
|
|
|
|
+ <div class="block_detail">测试人数</div>
|
|
|
|
+ <div class="block_detail">测试时间</div>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
- <!-- <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>
|
|
|
|
- <div v-if="planData.hasOwnProperty('planName')" class="profession">
|
|
|
|
- {{ planData["planName"] }}计划总分等级人数
|
|
|
|
- </div>
|
|
|
|
- <div v-else class="profession">计划总分等级人数</div>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
|
|
+ <div class="block_body">
|
|
<div
|
|
<div
|
|
v-if="planData.hasOwnProperty('planName')"
|
|
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%;
|
|
|
|
- "
|
|
|
|
|
|
+ style="display: flex; padding-left: 20px; padding-right: 20px;flex:1"
|
|
>
|
|
>
|
|
- <span style="text-align: center">暂无数据</span>
|
|
|
|
|
|
+ <!-- <div style='width:20px'></div> -->
|
|
|
|
+ <div class="block_detail" >
|
|
|
|
+ <!-- {{ planData.planName }} -->
|
|
|
|
+ <span class="plan_dp" :title="planData.planName"> {{ planData.planName }}</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="block_detail" >
|
|
|
|
+
|
|
|
|
+ <span class="plan_dp" :title="planData.userNum"> {{ planData.userNum }}</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="block_detail" >
|
|
|
|
+ <span class="plan_dp" :title="planData.createTime"> {{ planData.createTime }}</span>
|
|
|
|
+ </div>
|
|
</div>
|
|
</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 v-else style="width: 100%; text-align: center; margin-top: 10px">
|
|
|
|
+ <div>暂无数据</div>
|
|
</div>
|
|
</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
|
|
|
|
+ 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"
|
|
>
|
|
>
|
|
- 暂无数据
|
|
|
|
- </div>
|
|
|
|
- </div> -->
|
|
|
|
|
|
+ </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>
|
|
- <PlanReport ref="register" />
|
|
|
|
|
|
+ <PlanReport ref="register" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
@@ -317,6 +283,7 @@ export default {
|
|
type: "inside", //放大缩小x轴数值
|
|
type: "inside", //放大缩小x轴数值
|
|
},
|
|
},
|
|
yAxis: {
|
|
yAxis: {
|
|
|
|
+ max: 100,
|
|
type: "value",
|
|
type: "value",
|
|
boundaryGap: [0, 0.01],
|
|
boundaryGap: [0, 0.01],
|
|
minInterval: 1,
|
|
minInterval: 1,
|
|
@@ -327,10 +294,39 @@ export default {
|
|
data: [],
|
|
data: [],
|
|
barWidth: "15", //修改柱状图的宽度
|
|
barWidth: "15", //修改柱状图的宽度
|
|
itemStyle: {
|
|
itemStyle: {
|
|
- color: "#CCFFD7",
|
|
|
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
|
+ //前四个参数用于配置渐变色的起止位置,这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
|
|
|
|
+ //通过修改前4个参数,可以实现不同的渐变方向
|
|
|
|
+ /*第五个参数则是一个数组,用于配置颜色的渐变过程。
|
|
|
|
+ 每项为一个对象,包含offset和color两个参数
|
|
|
|
+ */
|
|
|
|
+ 0,
|
|
|
|
+ 0,
|
|
|
|
+ 0,
|
|
|
|
+ 1,
|
|
|
|
+ [
|
|
|
|
+ {
|
|
|
|
+ //代表渐变色从正上方开始
|
|
|
|
+ offset: 0, //offset范围是0~1,用于表示位置,0是指0%处的颜色
|
|
|
|
+ color: "#644BFD",
|
|
|
|
+ }, //柱图渐变色
|
|
|
|
+ {
|
|
|
|
+ offset: 1, //指100%处的颜色
|
|
|
|
+ color: "#00F6E3",
|
|
|
|
+ },
|
|
|
|
+ ]
|
|
|
|
+ ),
|
|
borderWidth: 2,
|
|
borderWidth: 2,
|
|
- borderColor: "#2EE053",
|
|
|
|
- barBorderRadius: [10, 10, 0, 0], //修改柱状图圆角
|
|
|
|
|
|
+ // borderColor: "#2EE053",
|
|
|
|
+ barBorderRadius: [10, 10, 10, 10], //修改柱状图圆角
|
|
|
|
+ },
|
|
|
|
+ label: {
|
|
|
|
+ show: true,
|
|
|
|
+ position: "top",
|
|
|
|
+ color: "#006FFF",
|
|
|
|
+ formatter: function (params) {
|
|
|
|
+ return params.value + "%";
|
|
|
|
+ },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
],
|
|
@@ -411,7 +407,7 @@ export default {
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
queryDetail() {
|
|
queryDetail() {
|
|
- console.log(this.planData)
|
|
|
|
|
|
+ console.log(this.planData);
|
|
this.$refs.register.open(this.planData);
|
|
this.$refs.register.open(this.planData);
|
|
},
|
|
},
|
|
//根据组织编号查询总人数
|
|
//根据组织编号查询总人数
|
|
@@ -433,6 +429,7 @@ export default {
|
|
this.$http.get(url, {}, (res) => {
|
|
this.$http.get(url, {}, (res) => {
|
|
if (res && res.code == 200) {
|
|
if (res && res.code == 200) {
|
|
this.tableData = res.data.content;
|
|
this.tableData = res.data.content;
|
|
|
|
+ debugger;
|
|
// this.total = res.data.totalElements;
|
|
// this.total = res.data.totalElements;
|
|
} else {
|
|
} else {
|
|
// this.$toast.fail(res.msg);
|
|
// this.$toast.fail(res.msg);
|
|
@@ -453,8 +450,8 @@ export default {
|
|
return (
|
|
return (
|
|
key == "planName" ||
|
|
key == "planName" ||
|
|
key == "planOrgName" ||
|
|
key == "planOrgName" ||
|
|
- key == "createDate" ||
|
|
|
|
- key == "userNum"||
|
|
|
|
|
|
+ key == "createTime" ||
|
|
|
|
+ key == "userNum" ||
|
|
key == "id"
|
|
key == "id"
|
|
);
|
|
);
|
|
});
|
|
});
|
|
@@ -503,38 +500,29 @@ export default {
|
|
{},
|
|
{},
|
|
(res) => {
|
|
(res) => {
|
|
let dimensionList = res.data;
|
|
let dimensionList = res.data;
|
|
- this.options1 = [
|
|
|
|
- { value: this.completeNum + this.unComplete, name: "已完成人数" },
|
|
|
|
- { value: this.unComplete, name: "未完成占比" },
|
|
|
|
- ];
|
|
|
|
-
|
|
|
|
- this.options2 = [
|
|
|
|
- { value: this.completeNum - dimensionList[0]["焦虑"], name: "焦虑" },
|
|
|
|
- { value: parseInt(dimensionList[0]["焦虑"]), name: "焦虑占比" },
|
|
|
|
- ];
|
|
|
|
-
|
|
|
|
- this.options3 = [
|
|
|
|
- { value: this.completeNum, name: "已完成人数" },
|
|
|
|
- { value: parseInt(dimensionList[1]["抑郁"]), name: "抑郁占比" },
|
|
|
|
- ];
|
|
|
|
-
|
|
|
|
- this.options4 = [
|
|
|
|
- { value: this.completeNum, name: "已完成人数" },
|
|
|
|
- { value: parseInt(dimensionList[2]["压力"]), name: "压力占比" },
|
|
|
|
- ];
|
|
|
|
|
|
|
|
- this.options5 = [
|
|
|
|
- { value: this.completeNum, name: "已完成人数" },
|
|
|
|
- { value: parseInt(dimensionList[3]["精神障碍"]), name: "精神障碍占比" },
|
|
|
|
- ];
|
|
|
|
-
|
|
|
|
- this.options6 = [
|
|
|
|
- {
|
|
|
|
- value: this.completeNum,
|
|
|
|
- name: "已完成人数",
|
|
|
|
- },
|
|
|
|
- { value: this.completeNum- this.abnormalNum, name: "心理健康占比" },
|
|
|
|
- ];
|
|
|
|
|
|
+ let nameList = [];
|
|
|
|
+ nameList.push("心理健康");
|
|
|
|
+ nameList.push("抑郁");
|
|
|
|
+ nameList.push("压力");
|
|
|
|
+ nameList.push("焦虑");
|
|
|
|
+ nameList.push("精神障碍");
|
|
|
|
+ let scoreList = [];
|
|
|
|
+ scoreList.push(
|
|
|
|
+ parseInt(((this.completeNum - this.abnormalNum) / this.completeNum) * 100)
|
|
|
|
+ );
|
|
|
|
+ scoreList.push((parseInt(dimensionList[1]["抑郁"]) / this.completeNum) * 100);
|
|
|
|
+ scoreList.push((parseInt(dimensionList[2]["压力"]) / this.completeNum) * 100);
|
|
|
|
+ scoreList.push((parseInt(dimensionList[0]["焦虑"]) / this.completeNum) * 100);
|
|
|
|
+ scoreList.push(
|
|
|
|
+ (parseInt(dimensionList[3]["精神障碍"]) / this.completeNum) * 100
|
|
|
|
+ );
|
|
|
|
+ this.echarts_zhu = this.$refs.echarts_zhu;
|
|
|
|
+ this.option.xAxis.data = nameList;
|
|
|
|
+ this.option.series[0].data = scoreList;
|
|
|
|
+ debugger;
|
|
|
|
+ let myChart1 = echarts.init(this.echarts_zhu);
|
|
|
|
+ myChart1.setOption(this.option);
|
|
}
|
|
}
|
|
);
|
|
);
|
|
},
|
|
},
|
|
@@ -555,6 +543,7 @@ export default {
|
|
this.echarts_zhu = this.$refs.echarts_zhu;
|
|
this.echarts_zhu = this.$refs.echarts_zhu;
|
|
this.option.xAxis.data = nameList;
|
|
this.option.xAxis.data = nameList;
|
|
this.option.series[0].data = scoreList;
|
|
this.option.series[0].data = scoreList;
|
|
|
|
+ debugger;
|
|
let myChart1 = echarts.init(this.echarts_zhu);
|
|
let myChart1 = echarts.init(this.echarts_zhu);
|
|
myChart1.setOption(this.option);
|
|
myChart1.setOption(this.option);
|
|
}
|
|
}
|
|
@@ -652,11 +641,11 @@ export default {
|
|
border-radius: 2px;
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
.table_a::-webkit-scrollbar-thumb {
|
|
.table_a::-webkit-scrollbar-thumb {
|
|
- background: #40a0ff49;
|
|
|
|
|
|
+ background: #afafaf49;
|
|
border-radius: 10px;
|
|
border-radius: 10px;
|
|
}
|
|
}
|
|
.table_a::-webkit-scrollbar-thumb:hover {
|
|
.table_a::-webkit-scrollbar-thumb:hover {
|
|
- background: #40a0ff;
|
|
|
|
|
|
+ background: #b6b6b6;
|
|
}
|
|
}
|
|
.pp {
|
|
.pp {
|
|
display: flex;
|
|
display: flex;
|
|
@@ -664,7 +653,7 @@ export default {
|
|
/* justify-content: center; */
|
|
/* justify-content: center; */
|
|
height: 100%;
|
|
height: 100%;
|
|
width: 100%;
|
|
width: 100%;
|
|
- background-color: #ffffff;
|
|
|
|
|
|
+ background-color: #f7f7f7;
|
|
// background-color: aqua;
|
|
// background-color: aqua;
|
|
.general_situation {
|
|
.general_situation {
|
|
height: 260px;
|
|
height: 260px;
|
|
@@ -672,15 +661,19 @@ export default {
|
|
display: flex;
|
|
display: flex;
|
|
min-width: 980px;
|
|
min-width: 980px;
|
|
.number_people {
|
|
.number_people {
|
|
|
|
+ background: url(../../assets/img/home/bg.png) no-repeat;
|
|
|
|
+ background-size: cover;
|
|
border-radius: 20px;
|
|
border-radius: 20px;
|
|
- flex: 6;
|
|
|
|
- background-color: #48d68e;
|
|
|
|
|
|
+ flex: 5;
|
|
|
|
+ // background-color: #48d68e;
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
.number_people_top {
|
|
.number_people_top {
|
|
margin-top: 20px;
|
|
margin-top: 20px;
|
|
margin-left: 20px;
|
|
margin-left: 20px;
|
|
color: #ffffff;
|
|
color: #ffffff;
|
|
|
|
+ font-size: 24px;
|
|
|
|
+ letter-spacing: 3px;
|
|
margin-bottom: 20px;
|
|
margin-bottom: 20px;
|
|
font-weight: 700;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
@@ -688,11 +681,9 @@ export default {
|
|
display: flex;
|
|
display: flex;
|
|
color: #ffffff;
|
|
color: #ffffff;
|
|
.out {
|
|
.out {
|
|
- width: 150px;
|
|
|
|
- height: 150px;
|
|
|
|
border-radius: 20px;
|
|
border-radius: 20px;
|
|
margin-left: 20px;
|
|
margin-left: 20px;
|
|
- background-color: #7fe2b0;
|
|
|
|
|
|
+ // background-color: #7fe2b0;
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
.yuan_name {
|
|
.yuan_name {
|
|
@@ -701,20 +692,16 @@ export default {
|
|
white-space: nowrap;
|
|
white-space: nowrap;
|
|
margin-left: 20px;
|
|
margin-left: 20px;
|
|
margin-top: 20px;
|
|
margin-top: 20px;
|
|
- color: #000000;
|
|
|
|
- font-size: 20px;
|
|
|
|
- }
|
|
|
|
- .yuan_num {
|
|
|
|
- margin-left: 20px;
|
|
|
|
- margin-top: 20px;
|
|
|
|
- color: #000000;
|
|
|
|
- font-size: 14px;
|
|
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ letter-spacing: 3px;
|
|
|
|
+ font-size: 32px;
|
|
}
|
|
}
|
|
.yuan_people {
|
|
.yuan_people {
|
|
margin-left: 20px;
|
|
margin-left: 20px;
|
|
margin-top: 20px;
|
|
margin-top: 20px;
|
|
color: #ffffff;
|
|
color: #ffffff;
|
|
- font-size: 30px;
|
|
|
|
|
|
+ font-size: 60px;
|
|
|
|
+ letter-spacing: 3px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.computer {
|
|
.computer {
|
|
@@ -737,17 +724,19 @@ export default {
|
|
.plan {
|
|
.plan {
|
|
display: flex;
|
|
display: flex;
|
|
// height:30%;
|
|
// height:30%;
|
|
- flex: 4;
|
|
|
|
|
|
+ flex: 10;
|
|
|
|
|
|
.plan_inner {
|
|
.plan_inner {
|
|
padding: 20px;
|
|
padding: 20px;
|
|
border-radius: 20px;
|
|
border-radius: 20px;
|
|
margin-left: 20px;
|
|
margin-left: 20px;
|
|
- background-color: #f7f7f7;
|
|
|
|
|
|
+ background-color: #ffffff;
|
|
display: flex;
|
|
display: flex;
|
|
width: 100%;
|
|
width: 100%;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
.plan_top {
|
|
.plan_top {
|
|
|
|
+ font-size: 24px;
|
|
|
|
+ letter-spacing: 3px;
|
|
font-weight: 700;
|
|
font-weight: 700;
|
|
color: #000000;
|
|
color: #000000;
|
|
margin-bottom: 20px;
|
|
margin-bottom: 20px;
|
|
@@ -756,9 +745,13 @@ export default {
|
|
.table_header {
|
|
.table_header {
|
|
display: flex;
|
|
display: flex;
|
|
// justify-content: space-around;
|
|
// justify-content: space-around;
|
|
- background-color: #ffffff;
|
|
|
|
|
|
+ background-color: #00bf78;
|
|
|
|
+ border-radius: 20px;
|
|
line-height: 40px;
|
|
line-height: 40px;
|
|
font-weight: 700;
|
|
font-weight: 700;
|
|
|
|
+ font-size: 18px;
|
|
|
|
+ letter-spacing: 3px;
|
|
|
|
+ color: #ffffff;
|
|
.detail {
|
|
.detail {
|
|
flex: 1;
|
|
flex: 1;
|
|
text-align: center;
|
|
text-align: center;
|
|
@@ -769,8 +762,13 @@ export default {
|
|
.table_body {
|
|
.table_body {
|
|
display: flex;
|
|
display: flex;
|
|
// justify-content: space-around;
|
|
// justify-content: space-around;
|
|
- line-height: 30px;
|
|
|
|
|
|
+ line-height: 40px;
|
|
.detail {
|
|
.detail {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ width: 100%;
|
|
flex: 1;
|
|
flex: 1;
|
|
text-align: center;
|
|
text-align: center;
|
|
}
|
|
}
|
|
@@ -781,92 +779,119 @@ export default {
|
|
}
|
|
}
|
|
.recently {
|
|
.recently {
|
|
width: 100%;
|
|
width: 100%;
|
|
- // height: 100%;
|
|
|
|
- // overflow: auto;
|
|
|
|
|
|
+ background-color: #f7f7f7;
|
|
height: calc(100% - 260px);
|
|
height: calc(100% - 260px);
|
|
- // background-color: #000000;
|
|
|
|
- .recently_bottom {
|
|
|
|
- height: calc(100% - 20px);
|
|
|
|
- margin-top: 20px;
|
|
|
|
- // margin-bottom:20px;
|
|
|
|
- background-color: #f7f7f7;
|
|
|
|
- width: 100%;
|
|
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: row;
|
|
|
|
+ align-items: center;
|
|
|
|
+ margin-top: 20px;
|
|
|
|
+
|
|
|
|
+ .block_left {
|
|
|
|
+ // box-sizing: border-box;
|
|
|
|
+ // padding:10px;
|
|
border-radius: 20px;
|
|
border-radius: 20px;
|
|
|
|
+
|
|
display: flex;
|
|
display: flex;
|
|
|
|
+ // padding-left: 10px;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
|
+ // padding: 10px;
|
|
|
|
+ flex: 5;
|
|
|
|
+ background-color: #ffffff;
|
|
|
|
+ height: 100%;
|
|
|
|
+ width: 100%;
|
|
|
|
+ align-items: center;
|
|
|
|
+ // background-color: #ffffff;
|
|
|
|
+ .block_ren {
|
|
|
|
+ padding-top: 10px;
|
|
|
|
|
|
- .recently_bottom_font {
|
|
|
|
- padding: 10px;
|
|
|
|
- font-weight: 700;
|
|
|
|
- background-color: #ffffff;
|
|
|
|
- }
|
|
|
|
- .block {
|
|
|
|
|
|
+ // padding-right: 20px;
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: 100%;
|
|
|
|
display: flex;
|
|
display: flex;
|
|
- flex-direction: column;
|
|
|
|
|
|
+ justify-content: space-between;
|
|
align-items: center;
|
|
align-items: center;
|
|
- .block_left {
|
|
|
|
|
|
+ .re {
|
|
|
|
+ letter-spacing: 3px;
|
|
|
|
+ padding: 0 20px;
|
|
|
|
+ color: #222222;
|
|
|
|
+ font-weight: 700;
|
|
|
|
+ font-size: 24px;
|
|
|
|
+ }
|
|
|
|
+ .detail {
|
|
|
|
+ padding: 0 20px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .chart_wrap {
|
|
|
|
+ flex: 1;
|
|
|
|
+ // height: 450px;
|
|
|
|
+ }
|
|
|
|
+ .block_table {
|
|
|
|
+ margin-top: 10px;
|
|
|
|
+ margin-left: 20px;
|
|
|
|
+ margin-right: 20px;
|
|
|
|
+ background-color: #f8f8f8;
|
|
|
|
+ border-radius: 20px;
|
|
|
|
+
|
|
|
|
+ display: flex;
|
|
|
|
+
|
|
|
|
+ .block_detail {
|
|
|
|
+ font-weight: 700;
|
|
|
|
+ padding: 10px;
|
|
|
|
+ flex: 1;
|
|
display: flex;
|
|
display: flex;
|
|
- padding-left: 10px;
|
|
|
|
- flex-direction: row;
|
|
|
|
- // padding: 10px;
|
|
|
|
- flex: 6;
|
|
|
|
- // background-color: #000000;
|
|
|
|
- height: 100%;
|
|
|
|
- width: 100%;
|
|
|
|
- align-items: center;
|
|
|
|
- background-color: #ffffff;
|
|
|
|
- .chart_wrap {
|
|
|
|
- flex: 1;
|
|
|
|
- // height: 450px;
|
|
|
|
- }
|
|
|
|
- .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;
|
|
|
|
- }
|
|
|
|
|
|
+ justify-content: center;
|
|
}
|
|
}
|
|
- .block_right {
|
|
|
|
- flex: 4;
|
|
|
|
- // background-color: #d32d2d;
|
|
|
|
- height: 100%;
|
|
|
|
|
|
+ }
|
|
|
|
+ .block_body {
|
|
|
|
+ width: 100%;
|
|
|
|
+ display: flex;
|
|
|
|
+
|
|
|
|
+ .block_detail {
|
|
|
|
+ background-color: #ffffff;
|
|
|
|
+ text-align: center;
|
|
|
|
+ line-height: 36px;
|
|
display: flex;
|
|
display: flex;
|
|
- flex-direction: column;
|
|
|
|
- .block_avg {
|
|
|
|
- margin-left: 20px;
|
|
|
|
- font-weight: 700;
|
|
|
|
- }
|
|
|
|
- .block_lei {
|
|
|
|
- flex: 1;
|
|
|
|
- // background-color: #000000;
|
|
|
|
- margin-left: 20px;
|
|
|
|
|
|
+ flex: 1;
|
|
|
|
+ width: 100%;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+
|
|
|
|
+ .plan_dp{
|
|
|
|
+ text-align: center;
|
|
|
|
+ // flex: 1;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ // width: 100%;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .profession {
|
|
|
|
+ font-weight: 700;
|
|
|
|
+ }
|
|
|
|
+ .echarts_style {
|
|
|
|
+ width: 100%;
|
|
|
|
+ flex: 1;
|
|
|
|
+ // background-color: #000000;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .block_right {
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+
|
|
|
|
+ flex: 10;
|
|
|
|
+ // background-color: #d32d2d;
|
|
|
|
+ height: 100%;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ background-color: #f7f7f7;
|
|
|
|
+ .block_avg {
|
|
|
|
+ margin-left: 20px;
|
|
|
|
+ font-weight: 700;
|
|
|
|
+ }
|
|
|
|
+ .block_lei {
|
|
|
|
+ flex: 1;
|
|
|
|
+ // background-color: #000000;
|
|
|
|
+ margin-left: 20px;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|