This commit is contained in:
姚宇浩 2024-06-19 11:45:42 +08:00
parent 4b067de443
commit 8291c24806
6 changed files with 269 additions and 8 deletions

View File

@ -5,6 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>公共服务一体化驾驶舱</title>
<script src="https://webapi.amap.com/maps?v=2.0&key=92c48d6015b3c1a023a22506c2581e6d"></script>
</head>
<body>
<div id="app"></div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

View File

@ -79,12 +79,18 @@
</div>
</div>
<div style="width: 100%; height: 200px; margin: 20px 0">
<img
src="../assets/images/sjfx/minImg.jpg"
style="width: 100%; height: 100%"
alt=""
/>
<div class="jypx">
<div class="minPieImg2">就业培训</div>
<jypx></jypx>
<div class="jypx_right">
<div class="jypx_right_item" v-for="item in jypxList">
<img :src="item.img" alt="" />
<div class="jypx_right_item_right">
<div class="jypx_name">{{ item.name }}</div>
<div class="jypx_value">{{ item.value }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex1">
@ -124,7 +130,7 @@
<i></i>
</div>
</div>
<img src="@/assets/images/sjfx/map.png" alt="" class="map" />
<Map class="map"></Map>
</div>
</div>
</div>
@ -141,6 +147,7 @@ import {
} from "vue";
import right2 from "./echart_analyze/right2.vue";
import right1 from "./echart_analyze/right1.vue";
import jypx from "./echart_analyze/jypx.vue";
import http from "@/utils/request.js";
import Pie3dMt from "./echart_analyze/pie3dMt.vue";
import Pie3dMt2 from "./echart_analyze/pie3dMt2.vue";
@ -153,8 +160,23 @@ import ViewDataimg from "@/assets/images/sjfx/sjfx.png";
import ViewDataimg1 from "@/assets/images/sjfx/sjfx1.png";
import ViewDataimg2 from "@/assets/images/sjfx/sjfx2.png";
import ViewDataimg3 from "@/assets/images/sjfx/sjfx3.png";
import jypx1 from "@/assets/images/sjfx/pxrc.png";
import jypx2 from "@/assets/images/sjfx/gygws.png";
import Map from "./echart_analyze/map.vue";
const showR = ref(false); //loading
//
const jypxList = reactive([
{
name: "培训人次",
value: "5000",
img: jypx1,
},
{
name: "公益岗位数",
value: "3815",
img: jypx2,
},
]);
const data = reactive({
datashow: null,
backgroundImageUrl: ViewDataimg,
@ -694,4 +716,67 @@ onBeforeUnmount(() => {
z-index: 2;
}
}
//
.jypx {
width: 100%;
height: 200px;
margin: 20px 0;
position: relative;
display: flex;
align-items: center;
}
.minPieImg2 {
position: absolute;
width: 137px;
height: 20px;
background-image: url(@/assets/images/sjfx/minPieT.png);
background-repeat: no-repeat;
background-size: 100% 100%;
text-align: center;
font-size: 16px;
color: #ffffff;
line-height: 22px;
letter-spacing: 4px;
top: 185px;
left: 25px;
z-index: 2;
}
.jypx_right {
display: flex;
flex-direction: column;
margin-left: 35px;
.jypx_right_item {
display: flex;
align-items: center;
img {
width: 70px;
height: 60px;
}
.jypx_right_item_right {
margin-left: 15px;
.jypx_name {
letter-spacing: 1px;
font-size: 18px;
line-height: 25px;
}
.jypx_value {
font-size: 22px;
color: #ffffff;
line-height: 30px;
letter-spacing: 1px;
}
}
}
.jypx_right_item:first-child {
margin-bottom: 20px;
.jypx_name {
color: #00ebff;
}
}
.jypx_right_item:last-child {
.jypx_name {
color: #a5cdff;
}
}
}
</style>

View File

@ -0,0 +1,130 @@
<template>
<div ref="chart" style="width: 60%; height: 180px"></div>
</template>
<script setup>
import { onBeforeMount, onMounted, reactive, ref } from "vue";
// echarts
import * as echarts from "echarts";
const chart = ref(); // DOM
const data = reactive({
list: [],
month: [],
option: {},
});
let datas = [
{
name: "制造业",
value: 36.3,
},
{
name: "服务业",
value: 22.8,
},
{
name: "食品医疗",
value: 18.7,
},
{
name: "科技",
value: 16.4,
},
{
name: "其他",
value: 5.8,
},
];
const getOption = () => {
data.option = {
title: {
//
text: "就业率", //
textStyle: {
//
color: "#fff",
fontSize: 16,
},
left: "24%", //
top: "38%", //
subtext: `100%`, //
subtextStyle: {
//
color: "#00FFFB",
fontSize: 22,
fontWeight: "bold",
},
textAlign: "center", //
},
legend: {
itemHeight: 8,
itemWidth: 8,
icon: "rect",
orient: "vertical",
top: "center",
right: "0%",
textStyle: {
align: "left",
color: "#ffffff",
verticalAlign: "middle",
rich: {
name: {
width: 80,
fontSize: 18,
},
value: {
width: 30,
align: "right",
fontFamily: "Medium",
fontSize: 20,
},
rate: {
width: 20,
align: "right",
fontSize: 18,
},
},
},
data: datas,
formatter: (name) => {
if (datas.length) {
const item = datas.filter((item) => item.name === name)[0];
return `{name|${name}}{value| ${item.value}} {rate| %}`;
}
},
},
tooltip: {
trigger: "item",
formatter: "{b}:{d}%",
},
series: [
{
name: "",
type: "pie",
radius: ["45%", "90%"],
center: ["25%", "50%"],
roseType: "radius",
label: {
show:false,
},
data: datas,
},
],
};
};
const setChart = () => {
var myChart = echarts.init(chart.value);
myChart.setOption(data.option);
};
// 使
onBeforeMount(() => {
setTimeout(() => {
getOption();
setChart();
}, 600);
});
</script>
<style scoped></style>

View File

@ -0,0 +1,45 @@
<template>
<div id="amap-container" class="amap-container" />
</template>
<script setup>
import {
ref,
reactive,
onMounted,
onBeforeMount,
onBeforeUnmount,
computed,
} from "vue";
const longAndLat = [108.94703, 34.25943];
const init = () => {
var map = new AMap.Map("amap-container", {
//
center: longAndLat,
resizeEnable: true,
//
mapStyle: "amap://styles/darkblue",
//
zoom: 12,
});
//
var trafficLayer = new AMap.TileLayer.Traffic({
zIndex: 10,
zooms: [7, 20],
});
trafficLayer.setMap(map);
};
onMounted(() => {
init();
});
</script>
<style lang="scss" scoped>
::v-deep .amap-logo {
display: none!important; ;
}
::v-deep .amap-copyright {
bottom:-100px;
display: none!important;;
}
</style>