Skip to content

F
founder_vue
Commit 9d84848c by 赵鹏龙
Options

首页

parent 1e02c1f5
Showing with 540 additions and 54 deletions
package.json
......@@ -8,6 +8,7 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@amcharts/amcharts4": "^4.10.22",
"core-js": "^3.6.5",
"driver.js": "^0.9.8",
"echarts": "^4.9.0",
......
src/views/sy/index.vue
<template>
<div id="syBox" class="sy_box">
<div class="sy_box_head">
<div class="sy_box_head_title"></div>
</div>
<div class="sy_box_content">
<!-- 左侧部分 -->
<div class="sy_box_content_l">
<!-- 常用工具 -->
<div class="sy_box_content_l_t">
<div><img src="@/assets/img/sy_1.png" alt=""><span>常用工具</span></div>
<div class="sy_box_content_l_t_title">
<img src="@/assets/img/sy_1.png" alt="" />
<span class="sy_box_content_l_t_title_span">常用工具</span>
</div>
<div class="sy_box_content_l_t_box">
<div v-for="item in list1" class="sy_box_content_l_t_box_nr">
<img :src="item.imgUrl" alt="">
<span>{{item.name}}</span>
<div
v-for="(item, index) in list1"
class="sy_box_content_l_t_box_nr"
:key="index"
>
<div class="sy_box_content_l_t_box_nr_img">
<div class="sy_box_content_l_t_box_nr_img_border_div">
<img :src="item.imgUrl" alt="" />
</div>
</div>
<span class="sy_box_content_l_t_box_nr_text">{{
item.name
}}</span>
</div>
</div>
</div>
<div class="sy_box_content_l_m"></div>
<div class="sy_box_content_l_b"></div>
<!-- 左侧中间 -->
<div class="sy_box_content_l_m">
<!-- 鲜活展示 -->
<div class="sy_box_content_l_m_t">
<div class="sy_box_content_l_m_title">
<img src="@/assets/img/sy_1.png" alt="" />
<span class="sy_box_content_l_m_title_span">鲜活展示</span>
</div>
<div class="sy_box_content_l_m_show"></div>
</div>
<!-- 访问统计 -->
<div class="sy_box_content_l_m_b">
<div class="sy_box_content_l_m_b_title">
<img src="@/assets/img/sy_1.png" alt="" />
<span class="sy_box_content_l_m_b_title_span">访问统计</span>
</div>
<div class="sy_box_content_l_m_b_echarts">
<div
id="line-echarts"
class="sy_box_content_l_m_b_echarts_id"
></div>
</div>
</div>
</div>
<!-- 动态感知采集 -->
<div class="sy_box_content_l_b">
<div class="sy_box_content_l_b_title">
<img src="@/assets/img/sy_1.png" alt="" />
<span class="sy_box_content_l_b_title_span">动态感知采集</span>
</div>
<div class="sy_box_content_l_b_d">
<div class="sy_box_content_l_b_d_l">
<div id="pie-charts" class="sy_box_content_l_b_d_l_pie"></div>
</div>
<div class="sy_box_content_l_b_d_r">
<div
v-for="(item, index) in list2"
:key="index"
class="sy_box_content_l_b_d_item"
>
<img :src="item.imgUrl" />
<span style="color:#FEFEFE;">{{ item.name }}</span>
<br />
<span style="color:#FEFEFE;">{{ item.number }}</span>
</div>
</div>
</div>
</div>
</div>
<!-- 中间部分 -->
<div class="sy_box_content_m">
<!-- 上方统计部分 -->
<div class="sy_box_content_m_t"></div>
<!-- 下方基础数据统计 -->
<div class="sy_box_content_m_b"></div>
</div>
<div class="sy_box_content_r">
<div class="sy_box_content_r_t"></div>
<div class="sy_box_content_r_b"></div>
</div>
<div class="sy_box_content_m"></div>
<div class="sy_box_content_r"></div>
</div>
</div>
</template>
<script>
import echarts from "echarts";
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
am4core.useTheme(am4themes_animated);
export default {
name: 'index',
name: "index",
data() {
return {
list1: [
{
name: 'jhkjh',
imgUrl: require('@/assets/img/jc.png')
name: "刑事案件",
imgUrl: require("@/assets/img/jc.png")
},
{
name: 'jhkjh',
imgUrl: require('@/assets/img/jc.png')
name: "行政案件",
imgUrl: require("@/assets/img/jc.png")
},
{
name: 'jhkjh',
imgUrl: require('@/assets/img/jc.png')
name: "矛盾纠纷",
imgUrl: require("@/assets/img/jc.png")
},
{
name: 'jhkjh',
imgUrl: require('@/assets/img/jc.png')
name: "警情",
imgUrl: require("@/assets/img/jc.png")
}
],
label: [233, 233, 200, 180, 199, 233, 210, 180],
value: [233, 233, 200, 180, 199, 233, 210, 180],
list2: [
{
imgUrl: require("@/assets/img/sy_kk.png"),
name: "卡口",
number: 129
},
{
imgUrl: require("@/assets/img/sy_sp.png"),
name: "视频",
number: 129
},
{
imgUrl: require("@/assets/img/sy_wb.png"),
name: "网吧",
number: 129
},
{
imgUrl: require("@/assets/img/sy_ld.png"),
name: "旅店",
number: 129
}
]
};
},
mounted() {
this.initLineEcharts();
this.initPieEcharts();
},
methods: {
/**
* @description: 初始化线echarts图
* @param {*}
* @return {*}
* @author: 赵鹏龙
*/
initLineEcharts() {
let self = this;
let myChart = echarts.init(document.getElementById("line-echarts"));
let option = {
grid: {
top: "10px"
},
tooltip: {
trigger: "axis",
axisPointer: {
lineStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(255,255,255,0)" // 0% 处的颜色
},
{
offset: 0.5,
color: "rgba(255,255,255,1)" // 100% 处的颜色
},
{
offset: 1,
color: "rgba(255,255,255,0)" // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
}
},
xAxis: [
{
type: "category",
boundaryGap: false,
axisLabel: {
formatter: "{value}",
fontSize: 14,
margin: 20,
textStyle: {
color: "#7ec7ff"
}
},
axisLine: {
lineStyle: {
color: "#243753"
}
},
splitLine: {
show: false,
lineStyle: {
color: "#243753"
}
},
axisTick: {
show: false
},
data: self.label
}
],
yAxis: [
{
boundaryGap: false,
type: "value",
axisLabel: {
textStyle: {
color: "#7ec7ff"
}
},
nameTextStyle: {
color: "#fff",
fontSize: 12
},
splitLine: {
show: false,
lineStyle: {
color: "#243753"
}
},
axisLine: {
show: true,
lineStyle: {
color: "#283352"
}
},
axisTick: {
show: false
}
}
],
series: [
{
name: "报名",
type: "line",
smooth: true,
showSymbol: true,
symbolSize: 8,
zlevel: 3,
itemStyle: {
color: "#19a3df",
borderColor: "#a3c8d8"
},
lineStyle: {
normal: {
width: 6,
color: "#19a3df"
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(88,255,255,0.2)"
},
{
offset: 0.8,
color: "rgba(88,255,255,0)"
}
],
false
)
}
},
data: self.value
}
]
};
myChart.setOption(option);
},
initPieEcharts() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var chart = am4core.create("pie-charts", am4charts.PieChart3D);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
chart.data = [
{
country: "网吧",
litres: 1,
color: am4core.color("#773efd")
},
{
country: "卡口",
litres: 2,
color: am4core.color("#dd22fa")
},
{
country: "视频",
litres: 3,
color: am4core.color("#33d0e9")
},
{
country: "旅店",
litres: 4,
color: am4core.color("#184afd")
}
];
chart.depth = 100;
var series = chart.series.push(new am4charts.PieSeries3D());
series.dataFields.value = "litres";
series.dataFields.depthValue = "litres";
series.dataFields.category = "country";
series.angle = 50;
series.slices.template.cornerRadius = 5;
series.ticks.template.disabled = true;
series.alignLabels = false;
series.labels.template.text = "{value.percent.formatNumber('#.0')}%";
series.labels.template.radius = am4core.percent(-40);
series.labels.template.fill = am4core.color("white");
series.colors.step = 3;
console.log(series);
}
}
}
};
</script>
<style scoped lang="scss">
.sy_box {
height: 100vh;
.sy_box {
height: 100%;
background: url("../../assets/img/bg1.png") no-repeat center center;
.sy_box_head {
height: 60px;
background-color: #ccc;
.sy_box_head {
height: 60px;
background-color: #ccc;
background: url("../../assets/img/sy_header_bg.png") no-repeat center center;
background-size: 100%, 100%;
padding-top: 6px;
.sy_box_head_title {
width: 623px;
height: 52px;
margin: auto;
background: url("../../assets/img/tb856.png") no-repeat center center;
background-repeat: no-repeat;
background-size: contain;
}
}
.sy_box_content {
height: calc(100vh - 60px);
.sy_box_content_l {
width: 460px;
.sy_box_content {
min-height: calc(100vh - 88px);
margin-top: 20px;
display: flex;
.sy_box_content_l_t {
height: 216px;
.sy_box_content_l_t_box {
width: 460px;
display: flex;
flex-wrap: wrap;
background-color: #ccc;
.sy_box_content_l_t_box_nr {
height: 72px;
width: 216px;
background-color: #f22;
margin-right: 12px;
margin-bottom: 12px;
}
.sy_box_content_l {
width: 460px;
margin-left: 32px;
// 常用工具
.sy_box_content_l_t {
height: 216px;
background: url("../../assets/img/sy_2.png");
padding-top: 10px;
padding-left: 5px;
.sy_box_content_l_t_title {
font-size: 16px;
font-family: PingFang SC;
font-weight: 600;
color: #cee7f7;
line-height: 18px;
margin-top: 11px;
padding-left: 11px;
margin-bottom: 11px;
.sy_box_content_l_t_title_span {
margin-left: 13px;
}
}
.sy_box_content_l_m {
}
.sy_box_content_l_t_box {
width: 460px;
display: flex;
flex-wrap: wrap;
.sy_box_content_l_b {
.sy_box_content_l_t_box_nr {
height: 72px;
width: 216px;
margin-right: 12px;
margin-bottom: 12px;
background: url("../../assets/img/sy_inner_bg.png");
.sy_box_content_l_t_box_nr_img {
width: 54px;
height: 54px;
display: inline-block;
background: url("../../assets/img/sy_inner_box.png");
position: relative;
margin-left: 13px;
margin-top: 9px;
border-right: 2px solid rgba(91, 141, 187, 0.5);
border-bottom: 2px solid rgba(91, 141, 187, 0.5);
.sy_box_content_l_t_box_nr_img_border_div {
width: 46px;
height: 46px;
}
img {
width: 36px;
height: 36px;
/* margin: auto; */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.sy_box_content_l_t_box_nr_text {
display: inline-block;
height: 100%;
vertical-align: top;
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #cee7f7;
line-height: 72px;
padding-left: 16px;
}
}
}
}
// 鲜活展示
.sy_box_content_l_m {
width: 460px;
height: 453px;
background: linear-gradient(
180deg,
rgba(0, 38, 81, 0.4),
rgba(2, 18, 43, 0.8)
);
margin-top: 24px;
background: url(../../assets/img/sy_3.png);
.sy_box_content_l_m_t {
.sy_box_content_l_m_title {
font-size: 16px;
font-family: PingFang SC;
font-weight: 600;
color: #cee7f7;
line-height: 18px;
padding-top: 25px;
padding-left: 11px;
margin-bottom: 11px;
.sy_box_content_l_m_title_span {
margin-left: 13px;
}
}
.sy_box_content_l_m_show {
width: 356px;
height: 96px;
border: 1px solid #cee7f7;
margin: auto;
margin-top: 57px;
}
}
.sy_box_content_l_m_b {
.sy_box_content_l_m_b_title {
font-size: 16px;
font-family: PingFang SC;
font-weight: 600;
color: #cee7f7;
line-height: 18px;
padding-top: 25px;
padding-left: 11px;
margin-bottom: 11px;
.sy_box_content_l_m_b_title_span {
margin-left: 13px;
}
}
.sy_box_content_l_m_b_echarts {
width: 386px;
height: 200px;
margin: auto;
margin-top: 28px;
.sy_box_content_l_m_b_echarts_id {
width: 100%;
height: 100%;
}
}
}
}
// 动态感知采集
.sy_box_content_l_b {
width: 460px;
height: 220px;
background: linear-gradient(
180deg,
rgba(0, 38, 81, 0.4),
rgba(2, 18, 43, 0.8)
);
background: url("../../assets/img/sy_2.png");
margin-top: 25px;
.sy_box_content_l_b_title {
font-size: 16px;
font-family: PingFang SC;
font-weight: 600;
color: #cee7f7;
line-height: 18px;
padding-top: 25px;
padding-left: 11px;
margin-bottom: 11px;
.sy_box_content_l_b_title_span {
margin-left: 13px;
}
}
.sy_box_content_l_b_d {
height: 153px;
border: 1px solid #cee7f7;
display: flex;
.sy_box_content_l_b_d_l {
height: 100%;
width: 230px;
border-right: 1px solid #cee7f7;
.sy_box_content_l_b_d_l_pie {
width: 100%;
height: 100%;
background: url("../../assets/img/sy_echart_b.png");
}
}
.sy_box_content_l_b_d_r {
width: 230px;
.sy_box_content_l_b_d_item {
width: 100px;
height: 40px;
display: inline-block;
border: 1px solid #cee7f7;
margin-top: 15px;
margin-left: 10px;
}
}
}
}
}
.sy_box_content_m {
.sy_box_content_m {
width: 890px;
margin-left: 24px;
.sy_box_content_m_t {
}
.sy_box_content_m_b {
height: 220px;
background: url("../../assets/img/sy_6.png");
position: relative;
top: 727px;
}
}
.sy_box_content_r {
.sy_box_content_r {
width: 460px;
margin-left: 23px;
.sy_box_content_r_t {
height: 457px;
background: url("../../assets/img/sy_3.png");
}
.sy_box_content_r_b {
height: 457px;
margin-top: 33px;
background: url("../../assets/img/sy_3.png");
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment