This commit is contained in:
parent
4b067de443
commit
8291c24806
|
|
@ -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 |
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue