xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of git.zdool.com:xs/ggfwjsc

This commit is contained in:
lnn19986213 2024-04-17 13:45:35 +08:00
parent 626deb9ccc b238a4ee46
commit 8ee2a4f4a1
2 changed files with 464 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

218
src/view/echarts_education/edCSR.vue Normal file
View File

@ -0,0 +1,218 @@
<template>
<div ref="chart" style="width: 100%;height: calc(100% - 70px)"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
// 局部引入echarts核心模块
import * as echarts from "echarts";
const chart = ref(); // 创建DOM引用
const data = [20, 20, 50, 80, 70, 10, 30];
// const lineData = [150, 230, 224, 218, 135, 147, 260];
// const max = data
// .concat(lineData)
// .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
// // 背景颜色
const color = [
{
type: "linear",
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(17, 193, 255, 1)",
},
{
offset: 0.5,
color: "rgba(17, 193, 255, 0.5)",
},
{
offset: 1,
color: "rgba(17, 193, 255, 0.20)",
},
],
},
];
const option = {
tooltip: {
trigger: "axis",
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#3F82F7", //提示文字标题颜色
},
},
},
legend: {
// data: ["上门服务时长", "上门服务次数"],
// top: "8%",
textStyle: {
fontSize: 12,
color: "#ffffff",
},
},
grid: {
top: "8%",
left: "5%",
right: "3%",
bottom: "0%",
containLabel: true,
color: "#ffffff",
},
calculable: true,
// color: "rgba(0, 252, 255, 1)",
color,
xAxis: [
{
type: "category",
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
},
},
axisTick: {
show: false, // 设置轴刻度不显示
},
data: ["东华街道", "龙洲街道","湖镇镇","詹家镇","小南海镇",],
},
{
type: "category",
show: false,
data: ["东华街道", "龙洲街道","湖镇镇","詹家镇","小南海镇",],
},
],
yAxis: [
{
type: "value",
scale: true,
// name: "时长/小时",
// max: data.length,
splitLine: {
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
},
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
},
},
axisLine: {
//y轴线的颜色以及宽度
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
type: "solid",
},
},
},
// {
// type: "value",
// scale: true,
// // name: "次数/次",
// min: 0,
// max: max,
// splitLine: {//分割线配置
// show: false,
// lineStyle: {
// color: "#ffffff",
// width: 1,
// },
// },
// axisLabel: {//y轴文字的配置
// textStyle: {
// color: "#ffffff",
// },
// },
// axisLine: {
// //y轴线的颜色以及宽度
// show: false,
// lineStyle: {
// color: "#ffffff",
// width: 1,
// type: "solid",
// },
// },
// },
],
series: [
{
// name: "上门服务时长",
data: data,
barWidth: 20,
type: "bar",
},
// {
// // name: "上门服务次数",
// data: lineData,
// type: "line", //线状图
// itemStyle: {
// borderColor: "#00FCFF",
// borderWidth: 1,
// color: "#00FCFF",
// },
// },
{
xAxisIndex: 1,
itemStyle: {
color: "rgba(180, 180, 180, 0.2)", //外阴影背景
},
// data: data.map(() => max),
data: data,
barWidth: 40, //外阴影背景宽
emphasis: {
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(64, 247, 176, 0.25)",
},
{
offset: 1,
color: "rgba(17, 34, 64, 0.25)",
},
],
},
},
},
type: "bar",
},
],
};
// 使用生命钩子
onMounted(() => {
// 基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.getElementById('main'));
// Vue3中： 需要引入
var myChart = echarts.init(chart.value);
// init(); // vue3.2没有this
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 单图表响应式: 跟随浏览器大小改变
// window.addEventListener("resize", () => {
// myChart.resize();
// });
});
</script>
<style scoped></style>

261
src/view/education.vue
View File

@ -27,7 +27,7 @@
<ePieRose></ePieRose>
</div>
</div>
<div class="displayFlex">
<div class="displayFlex center_bg">
<div class="flex1">
<div class="yd_title center_1"></div>
<eGraph></eGraph>
@ -36,34 +36,78 @@
<div class="displayFlex right_bg">
<div class="flex1">
<div class="yd_title right_1"></div>
<div class="history">
<p>2002年至2009年担任浙江大学计算机学院和软件学院院长；</p>
<p>1984年获得浙江大学计算机应用专业硕士学位，之后留校任教；</p>
<p>1990年获得浙江大学计算机应用专业博士学位；</p>
<p>1994年至1996年担任浙江大学计算机系副系主任；</p>
<p>1997年至2002年担任浙江大学计算机系系主任；</p>
<p>2002年至2009年担任浙江大学计算机学院和软件学院院长；</p>
<div class="czr-sl">
<div class="historyimg historyimg1">
<span>覆盖医疗机构数量</span>
<span>22</span>
</div>
<div class="historyimg historyimg2">
<span>启用角色数量</span>
<span>101</span>
</div>
<!-- <img src="@/assets/eduImg/jyImg14.png" alt="" />
<img src="@/assets/eduImg/jyImg15.png" alt="" /> -->
</div>
<edCSR></edCSR>
</div>
<div class="flex11">
<div class="earlyWarning">
<div class="earlyWarning1">
<div>
<span class="green">16</span>
</div>
<img src="@/assets/eduImg/jyImg10.png" alt="" />
<div class="historyimg historyimg1">
<span>绿色预警</span>
</div>
</div>
<div class="earlyWarning1">
<div>
<span class="yellow">239</span>
</div>
<img src="@/assets/eduImg/jyImg9.png" alt="" />
<div class="historyimg historyimg2">
<span>黄色预警</span>
</div>
</div>
<div class="earlyWarning1">
<div>
<span class="red">139</span>
</div>
<img src="@/assets/eduImg/jyImg8.png" alt="" />
<div class="historyimg historyimg3">
<span>红色预警</span>
</div>
</div>
</div>
</div>
<div class="flex1">
<div class="yd_title">
<span class="text">职位</span>
<div style="display: flex; justify-content: center">
<div class="czr-bj">
<div class="czrBox">
<div class="situation situation1"></div>
</div>
<div class="czrBox">
<div class="situation situation2"></div>
</div>
<div class="czrBox">
<div class="situation situation3"></div>
</div>
</div>
</div>
<eBubble></eBubble>
<!-- <eBubble></eBubble> -->
</div>
</div>
</div>
</template>
<script setup>
import eBubble from "./echarts_education/bubble.vue";
import edCSR from "./echarts_education/edCSR.vue";
import ePie1 from "./echarts_education/pie1.vue";
import ePie2 from "./echarts_education/pie2.vue";
import ePie3 from "./echarts_education/pie3.vue";
import ePie4 from "./echarts_education/pie4.vue";
import ePieRose from "./echarts_education/pieRose.vue";
// import ePie2 from "./echarts/pie2.vue";
// import eGraph from "./echarts/graph.vue";
import { ref } from 'vue'
const value = ref('')
@ -124,7 +168,15 @@ const options = [
background-repeat: no-repeat;
background-size: 100% 100%;
}
.center_bg {
width: 582px;
box-sizing: border-box;
padding-left: 10px;
// margin-right: 28px;
background-image: url(@/assets/images/center_bg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.right_bg {
width: 642px;
box-sizing: border-box;
@ -402,6 +454,185 @@ const options = [
}
}
.yd_title {
// background-image: url(@/assets/img_04.png);
// background-repeat: no-repeat;
// background-size: 100% 100%;
box-sizing: border-box;
width: 94%;
height: 36px;
position: relative;
.text {
display: flex;
position: absolute;
font-size: 16px;
font-family: SourceHanSansCN;
font-weight: bold;
color: #ffffff;
position: absolute;
right: 5px;
top: 3px;
}
}
.mechanism {
background-image: url(@/assets/YLTitle/titleImg10.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.czr-sl {
display: flex;
.historyimg {
width: 255px;
height: 56px;
background-repeat: no-repeat;
background-size: 100% 100%;
margin-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 70px;
span {
font-weight: 400;
font-size: 16px;
color: #ffffff;
line-height: 22px;
letter-spacing: 2px;
text-align: left;
font-style: normal;
font-family: PingFangSC, PingFang SC;
padding-right: 10px;
}
}
.historyimg1 {
background-image: url(@/assets/eduImg/jyImg14.png);
margin-right: 10px;
}
.historyimg2 {
background-image: url(@/assets/eduImg/jyImg15.png);
}
}
.flex11 {
padding: 12px 0;
}
.earlyWarning {
height: calc(100% - 10px);
display: flex;
align-items: center;
justify-content: space-around;
.earlyWarning1 {
font-size: 26px;
color: #ffffff;
line-height: 30px;
letter-spacing: 1px;
text-align: center;
font-style: normal;
font-family: PangMenZhengDao;
display: flex;
flex-direction: column;
align-items: center;
img {
width: 136px;
height: 100px;
}
.green {
font-size: 26px;
font-weight: bold;
letter-spacing: 2px;
text-align: center;
font-style: normal;
font-family: DINAlternate, DINAlternate;
background-image: linear-gradient(180deg, #7be546 0%, #38ffb1 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.yellow {
font-size: 26px;
font-weight: bold;
letter-spacing: 2px;
text-align: center;
font-style: normal;
font-family: DINAlternate, DINAlternate;
background-image: linear-gradient(180deg, #ee8404 0%, #efd404 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.red {
font-size: 26px;
font-weight: bold;
letter-spacing: 2px;
text-align: center;
font-style: normal;
font-family: DINAlternate, DINAlternate;
background-image: linear-gradient(180deg, #ff3e00 0%, #ed5a2d 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.historyimg {
width: 133px;
height: 19px;
background-repeat: no-repeat;
background-size: 100% 100%;
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
span {
font-weight: 500;
font-size: 14px;
color: #ffffff;
letter-spacing: 4px;
font-style: normal;
font-family: PingFangSC, PingFang SC;
}
}
.historyimg1 {
background-image: url(@/assets/eduImg/jyImg4.png);
}
.historyimg2 {
background-image: url(@/assets/eduImg/jyImg6.png);
}
.historyimg3 {
background-image: url(@/assets/eduImg/jyImg5.png);
}
}
}
.czr-bj {
width: 529px;
height: calc(100% - 26px);
background: rgba(0, 103, 165, 0.18);
box-shadow: inset 0px 0px 58px 0px rgba(37, 175, 252, 0.47);
border-radius: 2px;
padding: 20px 0 0 14px;
// box-sizing: border-box;
.czrBox {
height: 8vh;
}
.situation {
width: 495px;
height: 26px;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.situation1 {
background-image: url(@/assets/eduImg/jyImg11.png);
}
.situation2 {
background-image: url(@/assets/eduImg/jyImg12.png);
}
.situation3 {
background-image: url(@/assets/eduImg/jyImg13.png);
}
};
.selectLint {
width: 100%;
display: flex;