This commit is contained in:
parent
4b067de443
commit
8291c24806
|
|
@ -5,6 +5,7 @@
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>公共服务一体化驾驶舱</title>
|
<title>公共服务一体化驾驶舱</title>
|
||||||
|
<script src="https://webapi.amap.com/maps?v=2.0&key=92c48d6015b3c1a023a22506c2581e6d"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<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>
|
</div>
|
||||||
|
|
||||||
<div style="width: 100%; height: 200px; margin: 20px 0">
|
<div class="jypx">
|
||||||
<img
|
<div class="minPieImg2">就业培训</div>
|
||||||
src="../assets/images/sjfx/minImg.jpg"
|
<jypx></jypx>
|
||||||
style="width: 100%; height: 100%"
|
<div class="jypx_right">
|
||||||
alt=""
|
<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>
|
</div>
|
||||||
<div class="flex1">
|
<div class="flex1">
|
||||||
|
|
@ -124,7 +130,7 @@
|
||||||
<i></i>
|
<i></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<img src="@/assets/images/sjfx/map.png" alt="" class="map" />
|
<Map class="map"></Map>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -141,6 +147,7 @@ import {
|
||||||
} from "vue";
|
} from "vue";
|
||||||
import right2 from "./echart_analyze/right2.vue";
|
import right2 from "./echart_analyze/right2.vue";
|
||||||
import right1 from "./echart_analyze/right1.vue";
|
import right1 from "./echart_analyze/right1.vue";
|
||||||
|
import jypx from "./echart_analyze/jypx.vue";
|
||||||
import http from "@/utils/request.js";
|
import http from "@/utils/request.js";
|
||||||
import Pie3dMt from "./echart_analyze/pie3dMt.vue";
|
import Pie3dMt from "./echart_analyze/pie3dMt.vue";
|
||||||
import Pie3dMt2 from "./echart_analyze/pie3dMt2.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 ViewDataimg1 from "@/assets/images/sjfx/sjfx1.png";
|
||||||
import ViewDataimg2 from "@/assets/images/sjfx/sjfx2.png";
|
import ViewDataimg2 from "@/assets/images/sjfx/sjfx2.png";
|
||||||
import ViewDataimg3 from "@/assets/images/sjfx/sjfx3.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 showR = ref(false); //loading
|
||||||
|
//就业培训
|
||||||
|
const jypxList = reactive([
|
||||||
|
{
|
||||||
|
name: "培训人次",
|
||||||
|
value: "5000",
|
||||||
|
img: jypx1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "公益岗位数",
|
||||||
|
value: "3815",
|
||||||
|
img: jypx2,
|
||||||
|
},
|
||||||
|
]);
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
datashow: null,
|
datashow: null,
|
||||||
backgroundImageUrl: ViewDataimg,
|
backgroundImageUrl: ViewDataimg,
|
||||||
|
|
@ -694,4 +716,67 @@ onBeforeUnmount(() => {
|
||||||
z-index: 2;
|
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>
|
</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