Skip to content

F
founder_vue
Commit 3ed0824a by liuguorong93
Options

Merge branch 'dev_gabjq_dev2' into dev_gabjq

parents b0886af6 ed1952c8
Showing with 732 additions and 255 deletions
package.json
......@@ -11,7 +11,7 @@
"animate.css": "^4.1.1",
"core-js": "^3.6.5",
"driver.js": "^0.9.8",
"echarts": "^4.9.0",
"echarts": "^5.4.1",
"element-ui": "^2.4.5",
"file-saver": "^2.0.5",
"jquery": "^3.6.0",
......
src/api/menuDataApi/sjfxApi.js
......@@ -5,7 +5,7 @@ export let baseUrl = '/api'
export const getDataAnalysis = params =>
postJson(`${baseUrl}/policeDogScreen/dataAnalysis`, params)
// 数据分析--本年度全国警犬统计
// 数据分析--全国警犬统计
export const getqgDogCount = params =>
postJson(`${baseUrl}/homePage/getqgDogCount`, params)
......
src/main.js
......@@ -38,7 +38,7 @@ Vue.prototype.$driver = new Driver({
import Nsloading from "./components/Loading.vue";
Vue.prototype.$store = store;
//引入echarts
import echarts from 'echarts'
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
const LoadingCons = Vue.extend(Nsloading);
// 常用工具函数
......
src/router/modules/index.js
......@@ -20,15 +20,15 @@ export default [
},
component: () => import('@/views/login.vue')
},
{
path: '/Home',
name: 'Home',
meta: {
title: '工作桌面',
auth: '5'
},
component: () => import('@/views/Home.vue')
},
// {
// path: '/Home',
// name: 'Home',
// meta: {
// title: '工作桌面',
// auth: '5'
// },
// component: () => import('@/views/Home.vue')
// },
{
path: '/dataV',
name: 'dataV',
......
src/utils/cityData.js
This source diff could not be displayed because it is too large. You can view the blob instead.
src/views/Home.vue
<template>
<div id="dataVId">
<el-container class="home-page" direction="vertical">
<el-container
class="home-page"
direction="vertical"
>
<!-- 头 背景 -->
<div class="header">
<div class="header-title">
<img class="header-icon" :src="iconurl" />
<img
class="header-icon"
:src="iconurl"
/>
<div class="header-font">全国警犬态势分析</div>
</div>
<div
......@@ -30,13 +36,19 @@
<div class="border">
<!-- 头像-->
<div class="profile">
<img class="img" :src="profileurl" />
<img
class="img"
:src="profileurl"
/>
</div>
</div>
<!-- 总数统计-->
<div class="count">
<div class="title">全国警犬数</div>
<img :src="titleiconurl" class="img" />
<img
:src="titleiconurl"
class="img"
/>
<div class="font">{{ allCount }}</div>
</div>
</div>
......@@ -44,17 +56,26 @@
<div class="father-count">
<!-- 标题-->
<div class="all-title">
<img class="img" :src="alltitleurl" />
<img
class="img"
:src="alltitleurl"
/>
<div class="font">全国种犬数</div>
</div>
<!-- 种犬数据区-->
<div class="count-data" id="cgzqs"></div>
<div
class="count-data"
id="cgzqs"
></div>
</div>
<!-- 全国工作犬数-->
<div class="work-count">
<!-- 标题-->
<div class="all-title">
<img class="img" :src="alltitleurl" />
<img
class="img"
:src="alltitleurl"
/>
<div class="font">全国工作犬数</div>
</div>
<!-- 工作犬数据区-->
......@@ -64,9 +85,17 @@
<span class="zj">总计</span>
<span class="zjNum">{{ gzqTotal }}</span>
</div>
<div class="list" v-for="item in dogList" :key="item.id">
<div
class="list"
v-for="item in dogList"
:key="item.id"
>
<div>
<img :src="Icon" alt="" class="listicon" />
<img
:src="Icon"
alt=""
class="listicon"
/>
<span class="listdog">{{ item.name }}</span>
</div>
<span class="listNum">{{ item.counts }}</span>
......@@ -77,28 +106,50 @@
</div>
<!-- 地图区 -->
<div class="center">
<div id="mask" class="mask" style="display: none"></div>
<div id="loading" class="loading" style="display: none">
<div
id="mask"
class="mask"
style="display: none"
></div>
<div
id="loading"
class="loading"
style="display: none"
>
<div class="loading-icon">
<div class="loading-cut">
<div class="loading-donut"></div>
</div>
</div>
<div id="loading-text" class="loading-text">加载中……</div>
<div
id="loading-text"
class="loading-text"
>加载中……</div>
</div>
<!-- 圆环-->
<div class="ring-bg"></div>
<!-- 地图-->
<div class="map" id="map"></div>
<div
class="map"
id="map"
></div>
<!--map下区分犬种 -->
<div class="qf">
<div class="zq">
<img class="icon" :src="zqIcon" alt="" />
<img
class="icon"
:src="zqIcon"
alt=""
/>
<span class="dog">种犬</span>
</div>
<div class="gzq">
<img class="icon" :src="gzqIcon" alt="" />
<img
class="icon"
:src="gzqIcon"
alt=""
/>
<span class="dog">工作犬</span>
</div>
</div>
......@@ -163,8 +214,14 @@
>
</el-date-picker>
<!-- 搜索按钮-->
<div class="search-btn" @click="search">
<img :src="searchbtnurl" class="img" />
<div
class="search-btn"
@click="search"
>
<img
:src="searchbtnurl"
class="img"
/>
</div>
</div>
......@@ -176,13 +233,22 @@
</div>
<!-- 标题-->
<div class="all-title">
<img class="img" :src="alltitleurl" />
<img
class="img"
:src="alltitleurl"
/>
<div class="font">警犬出勤类型</div>
</div>
<div class="out" id="jqcqlx"></div>
<div
class="out"
id="jqcqlx"
></div>
<!-- 标题-->
<div class="all-title">
<img class="img" :src="alltitleurl" />
<img
class="img"
:src="alltitleurl"
/>
<div class="font">全国警犬出勤数top10</div>
</div>
<div class="top10">
......@@ -192,7 +258,11 @@
<span class="hfont hfont2">出勤次数</span>
<!-- <span class="hfont hfont3">行政区分</span> -->
</div>
<div class="Pro" v-for="(item, idx) in top10List" :key="idx">
<div
class="Pro"
v-for="(item, idx) in top10List"
:key="idx"
>
<div class="idx">
{{ item.administrative }}
</div>
......@@ -233,9 +303,9 @@
</template>
<script>
import "echarts/map/js/china.js";
import "echarts/map/js/province/guangdong";
import "echarts/map/js/province/heilongjiang";
// import "echarts/map/js/china.js";
// import "echarts/map/js/province/guangdong";
// import "echarts/map/js/province/heilongjiang";
import $ from "jquery";
// import '../api/zgxjxy.js'
// import "echarts/map/js/zgxjxy"
......
src/views/dataJq/dataV.vue
......@@ -25,7 +25,8 @@
<mapCount :qzCount="qzCount"></mapCount>
</div>
<div>
<mapBox></mapBox>
<!-- <mapBox></mapBox> -->
<mapBoxForBingTu></mapBoxForBingTu>
</div>
</div>
<div class="jqBoxS_con_rightCon">
......@@ -35,7 +36,10 @@
</div>
<!-- 工作犬专业方向统计 -->
<div style="margin-top: 20px">
<dogMajor :qzCount="qzCount"></dogMajor>
<dogMajor
:qzCount="qzCount"
v-if="qzCount.major"
></dogMajor>
</div>
</div>
</div>
......@@ -60,7 +64,8 @@ import dogMajor from "./dogMajor.vue";
// 中间内容
import mapCount from "./mapCount.vue";
// 地图
import mapBox from "./mapBox.vue";
// import mapBox from "./mapBox.vue";
import mapBoxForBingTu from "./mapBoxForBingTu.vue";
import { postRequest } from "@/api/dogView.js";
export default {
components: {
......@@ -71,7 +76,8 @@ export default {
qgPhTop,
dogMajor,
mapCount,
mapBox,
// mapBox,
mapBoxForBingTu,
},
data() {
return {
......
src/views/dataJq/dogCount.vue
......@@ -61,63 +61,57 @@ export default {
name: "h",
value: 5,
itemStyle: {
normal: {
//颜色渐变
color: new this.$echarts.graphic.LinearGradient(
1,
1,
1,
0, //(上-下 渐变)
//颜色渐变
color: new this.$echarts.graphic.LinearGradient(
1,
1,
1,
0, //(上-下 渐变)
[
{ offset: 0, color: "#323947" },
{ offset: 0.5, color: "#6f6853" },
{ offset: 1, color: "#ffc64e" },
]
),
},
[
{ offset: 0, color: "#323947" },
{ offset: 0.5, color: "#6f6853" },
{ offset: 1, color: "#ffc64e" },
]
),
},
},
{
name: "x",
value: 5,
itemStyle: {
normal: {
//颜色渐变
color: new this.$echarts.graphic.LinearGradient(
0,
0,
1,
0, //(上-下 渐变)
//颜色渐变
color: new this.$echarts.graphic.LinearGradient(
0,
0,
1,
0, //(上-下 渐变)
[
{ offset: 0, color: "#3c354a" },
{ offset: 0.5, color: "#9e5856" },
{ offset: 1, color: "#fa654f" },
]
),
},
[
{ offset: 0, color: "#3c354a" },
{ offset: 0.5, color: "#9e5856" },
{ offset: 1, color: "#fa654f" },
]
),
},
},
{
name: "y",
value: 5,
itemStyle: {
normal: {
//颜色渐变
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1, //(上-下 渐变)
//颜色渐变
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1, //(上-下 渐变)
[
{ offset: 0, color: "#243e5e" },
{ offset: 0.5, color: "#3f759e" },
{ offset: 1, color: "#4db7f8" },
]
),
},
[
{ offset: 0, color: "#243e5e" },
{ offset: 0.5, color: "#3f759e" },
{ offset: 1, color: "#4db7f8" },
]
),
},
},
];
......
src/views/dataJq/dogMajor.vue
......@@ -13,7 +13,6 @@
</template>
<script>
import echarts from "echarts";
export default {
props: {
qzCount: {
......@@ -23,128 +22,106 @@ export default {
},
data() {
return {
offsetZero: [
"rgba(78, 187, 255, 1)",
"rgba(241, 166, 54, 1)",
"rgba(255, 102, 78, 1)",
"rgba(46, 223, 209, 1)",
"rgba(255, 172, 39, 1)",
],
offsetOne: [
"rgba(134, 223, 255, 0.05)",
"rgba(241, 166, 54, 0.05)",
"rgba(255, 102, 78, 0.05)",
"rgba(46, 223, 209, 0.05)",
"rgba(255, 172, 39, 0.05)",
myChart: null,
colorDatas: [
"#5DECE8",
"#F57B92",
"#F58B4E",
"#FBDD62",
"#A29BF0",
"#FFEC97",
"#398DDB",
"#3EBEC2",
"#5D52D6",
"#1D51D8",
"#B52AB5",
"#6EF9AA",
"#3BC568",
"#F25555",
"#B4FB62",
"#FFBB01",
],
seriesDatas: [],
};
},
mounted() {
this.getData();
},
methods: {
xyrzyRender(_name, _value) {
// console.log("_name, _value", _name, _value);
//案件性质发案分析
// debugger;
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("dogMajors"));
// 绘制图表
myChart.setOption({
// color: ["#4db7f8", "#fa654f", "#ffc64e"],
xAxis: {
type: "category",
data: _name,
axisLabel: {
textStyle: {
color: "#B8BDC6",
fontSize: "14px",
},
show: true,
interval: 0,
// rotate: '-60px',
margin: 6,
},
axisLine: {
lineStyle: {
color: "#2C4E86",
},
getData() {
for (let key in this.qzCount.major) {
this.seriesDatas.push({
name: key,
value: this.qzCount.major[key],
});
}
setTimeout(() => {
this.drawEcharts();
}, 1);
},
drawEcharts() {
if (this.myChart) this.myChart.dispose();
this.myChart = this.$echarts.init(document.getElementById("dogMajors"));
let options = {
color: this.colorDatas,
tooltip: {
trigger: "item",
backgroundColor: "#FFFFFF",
padding: [12, 8],
extraCssText:
"box-shadow: 0px 8px 24px -8px rgba(0,0,0,0.08), 0px 16px 24px 0px rgba(0,0,0,0.08), 0px 8px 24px 0px rgba(0,0,0,0.08);",
textStyle: {
color: "#242424",
fontSize: 12,
},
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#2C4E86",
},
},
axisLine: {
show: false,
legend: {
type: "scroll",
orient: "horizontal",
left: "center",
align: "left",
bottom: 30,
itemWidth: 10,
itemHeight: 10,
itemGap: 10,
textStyle: {
fontSize: 12,
color: "#fff",
fontFamily: "Microsoft YaHei",
},
axisLabel: {
textStyle: {
color: "#d7e7ff00",
},
width: 250,
pageIconColor: "#fff",
pageIconInactiveColor: "#fff",
pageTextStyle: {
color: "#fff",
},
},
series: [
{
barWidth: 24,
data: _value,
type: "bar",
name: "工作犬专业方向统计",
type: "pie",
radius: "60%",
center: ["50%", "42%"],
label: {
show: false,
},
emphasis: {
scale: false,
},
itemStyle: {
normal: {
label: {
formatter: "{c}",
show: true,
position: "top",
textStyle: {
fontWeight: "bolder",
fontSize: "12",
color: "#fff",
},
},
},
borderColor: "#fff",
borderWidth: 2,
},
data: this.seriesDatas,
},
],
});
};
myChart.resize({
width: $("#dogMajors").width(),
height: $("#dogMajors").height(),
});
myChart.off("click");
myChart.on("click", function (params) {});
this.myChart.setOption(options);
},
},
mounted() {
setTimeout(() => {
let _name = [],
_value = [];
let index = 0;
for (let item in this.qzCount.major) {
_name.push(item);
_value.push({
name: item,
value: this.qzCount.major[item],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: this.offsetZero[index],
},
{
offset: 1,
color: this.offsetOne[index],
},
]),
},
});
index++;
}
this.xyrzyRender(_name, _value);
}, 1000);
},
};
</script>
......
src/views/dataJq/dogPh.vue
......@@ -51,14 +51,25 @@ export default {
const colorList = ["#4D88FE", "#50CCCB", "#FFBF3C"];
let option = {
tooltip: {
trigger: "item", // item、axis、none
trigger: "item",
backgroundColor: "#FFFFFF",
padding: [12, 8],
extraCssText:
"box-shadow: 0px 8px 24px -8px rgba(0,0,0,0.08), 0px 16px 24px 0px rgba(0,0,0,0.08), 0px 8px 24px 0px rgba(0,0,0,0.08);",
textStyle: {
color: "#242424",
fontSize: 12,
},
},
legend: {
bottom: 10,
itemGap: 20,
itemWidth: 14,
itemWidth: 10,
itemHeight: 10,
itemGap: 10,
textStyle: {
color: "#f7fcff",
fontSize: 12,
color: "#fff",
fontFamily: "Microsoft YaHei",
},
},
series: [
......@@ -71,12 +82,10 @@ export default {
show: false,
},
itemStyle: {
normal: {
borderColor: "#fff",
borderWidth: 2,
color: function (params) {
return colorList[params.dataIndex];
},
borderColor: "#fff",
borderWidth: 2,
color: function (params) {
return colorList[params.dataIndex];
},
},
data: this.seriesDatas,
......
src/views/dataJq/mapBox.vue
......@@ -23,7 +23,7 @@
// require("echarts/lib/chart/map");
import * as city from "@/utils/cityData.js";
import $ from "jquery";
import "echarts/map/js/china.js";
// import "echarts/map/js/china.js";
import { jsonRequest } from "@/api/dogView.js";
export default {
......
src/views/dataJq/mapBoxForBingTu.vue 0 → 100644
<template>
<div
style="position: relative"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
>
<!-- 回退 -->
<div
id="on-back"
class="back"
v-show="showBack"
@click="goBack"
>回退</div>
<div
id="myEacherForMap"
style="width:66.08333rem;height: 50.3333rem"
></div>
</div>
</template>
<script>
import * as city from "@/utils/cityData.js";
import { jsonRequest } from "@/api/dogView.js";
export default {
data() {
return {
showBack: false,
loading: false,
fileName: "china",
myChart: null,
colorDatas: [
"rgb(255, 84, 84)",
"rgb(255, 158, 84)",
"rgb(49, 255, 162)",
"rgb(49, 174, 255)",
],
options: {
geo: {
map: "",
aspectScale: 0.75,
roam: true,
zoom: 1.1,
itemStyle: {
areaColor: "#1b8cff",
color: "#fff",
borderColor: "#fff",
borderWidth: 0.4,
borderType: "solid",
// shadowBlur: 10,
// shadowColor: 'transparent',//'#0c3662',
// shadowOffsetX: 10,
// shadowOffsetY: 3,
opacity: 1,
},
label: {
show: true,
color: "#fff",
align: "center",
verticalAlign: "middle",
},
emphasis: {
label: {
show: true,
color: "#fff",
},
itemStyle: {
areaColor: "#0c3662",
},
},
z: 3,
},
series: [],
},
log: ["china"],
provinces: [],
dataArr: [],
};
},
created() {
this.provinces = city.provinceCode;
},
mounted() {
this.getDatas();
},
methods: {
getMapData(e) {
let arr = [];
return new Promise((resolve) => {
jsonRequest("/homePage/getQgMapNum", {
unitcode: e ? e + "000000" : "",
}).then((res) => {
if (e == undefined || e == "undefined") {
resolve(res);
} else {
for (let i = 0; i < res.data.rows.length; i++) {
if (res.data.rows[i].dognum != 0) {
arr.push(res.data.rows[i]);
}
}
res.data.rows = arr;
resolve(res);
}
});
});
},
drawEcharts() {
if (this.myChart) this.myChart.dispose();
this.loading = true;
$.getJSON(`/map/${this.fileName}.json`, (data) => {
if (data && data.features && data.features.length) {
this.loading = false;
this.$echarts.registerMap(this.fileName, data);
this.myChart = this.$echarts.init(
document.getElementById("myEacherForMap")
);
this.options.series = [];
this.options.geo.map = this.fileName;
let levelFlag = "1";
if (this.fileName === "china") {
if (this.options.color) delete this.options.color;
if (this.options.tooltip) delete this.options.tooltip;
if (this.options.legend) delete this.options.legend;
this.options.series.push({
type: "scatter",
coordinateSystem: "geo",
data: this.dataArr,
roam: true,
zoom: 1.1,
z: 4,
label: {
show: true,
color: "#333333",
width: 13,
height: 30,
align: "left",
fontSize: 16,
fontWeight: "600",
fontFamily: "sans-serif",
padding: [2, 50, 3, 40],
lineHeight: 30,
backgroundColor: {
image: require("@/assets/img/show-god.png"),
},
formatter(e) {
return `${e.data.count}`;
},
},
itemStyle: {
color: "rgba(0,0,0,0)",
opacity: 1,
},
});
levelFlag = "1";
} else {
if (this.dataArr && this.dataArr.length) {
this.options.color = this.colorDatas;
this.options.tooltip = {
trigger: "item",
backgroundColor: "#FFFFFF",
padding: [12, 8],
extraCssText:
"box-shadow: 0px 8px 24px -8px rgba(0,0,0,0.08), 0px 16px 24px 0px rgba(0,0,0,0.08), 0px 8px 24px 0px rgba(0,0,0,0.08);",
textStyle: {
color: "#242424",
fontSize: 12,
},
};
this.options.legend = {
orient: "vertical",
left: 0,
bottom: 20,
itemWidth: 10,
itemHeight: 10,
itemGap: 15,
textStyle: {
fontSize: 12,
color: "#FFFFFF",
fontFamily: "Microsoft YaHei",
},
data: ["一级工作犬", "二级工作犬", "三级工作犬", "普通工作犬"],
};
this.dataArr.forEach((itemArr) => {
this.options.series.push({
type: "pie",
coordinateSystem: "geo",
label: {
show: true,
color: "#000",
fontSize: 12,
fontFamily: "Microsoft YaHei",
formatter: (params) => {
return params.value + "头";
},
},
labelLine: {
show: true,
},
z: 4,
animationDuration: 0,
radius: 25,
center: [itemArr.value[0], itemArr.value[1]],
data: [
{
name: "一级工作犬",
value: itemArr.dognum1,
},
{
name: "二级工作犬",
value: itemArr.dognum2,
},
{
name: "三级工作犬",
value: itemArr.dognum3,
},
{
name: "普通工作犬",
value: itemArr.dognum4,
},
],
});
});
levelFlag = this.dataArr[0].lev;
}
}
this.myChart.setOption(this.options);
this.myChart.on("click", async (param) => {
if (param.componentType !== "geo" || levelFlag === "3") return;
// this.loading = true;
for (let i = 0; i < this.provinces.length; i++) {
if (this.provinces[i].name.indexOf(param.name) != -1) {
let res = await this.getMapData(this.provinces[i].key);
if (
res.code === 200 &&
res.success &&
res.data &&
res.data.rows &&
res.data.rows.length
) {
let e = this.provinces[i].key;
if (e === "china") {
this.showBack = false;
} else {
this.showBack = true;
}
this.log.push(e);
this.fileName = e;
this.getDataArr(res.data.rows);
this.drawEcharts();
} else {
this.$message.error("该区域没有数据，不支持地图下钻！");
this.loading = false;
}
}
}
});
}
});
},
async goBack() {
this.loading = true;
if (this.log && this.log.length) {
this.log.pop();
this.fileName = this.log[this.log.length - 1];
} else {
this.fileName = "china";
this.log = ["china"];
}
let res = await this.getMapData(
this.fileName === "china" ? "" : this.fileName
);
if (
res.code === 200 &&
res.success &&
res.data &&
res.data.rows &&
res.data.rows.length
) {
let datas = res.data.rows;
this.getDataArr(datas);
if (this.fileName === "china") {
this.showBack = false;
} else {
this.showBack = true;
}
this.drawEcharts();
}
},
async getDatas() {
let res = await this.getMapData();
if (
res.code === 200 &&
res.success &&
res.data &&
res.data.rows &&
res.data.rows.length
) {
let datas = res.data.rows;
this.getDataArr(datas);
this.drawEcharts();
}
},
getDataArr(datas) {
this.dataArr = datas.map((item) => {
if (item.dognum != 0) {
return {
name: item.dwName,
value: [parseFloat(item.jd), parseFloat(item.wd)],
count: item.dognum,
dognum1: item.dognum1,
dognum2: item.dognum2,
dognum3: item.dognum3,
dognum4: item.dognum4,
lev: item.lev,
};
}
});
},
},
};
</script>
<style lang="scss" scoped>
.back {
position: absolute;
top: 20px;
right: 0;
color: #fff;
font-size: 16px;
z-index: 999;
cursor: pointer;
}
</style>
src/views/sjfx/components/allDogCount.vue
......@@ -3,7 +3,7 @@
class="dogCountClass"
v-resize="resizes"
>
<div class="topTitle topTitleEchart">本年度全国警犬统计</div>
<div class="topTitle topTitleEchart">全国警犬统计</div>
<div
class="myCharts"
id="myEacherForAllDogCount"
......
src/views/sjfx/components/topContent.vue
......@@ -7,17 +7,12 @@
<p class="top03 ellipsis1">
<span
class="span01"
:class="gzqObj.Tbzt1 === 'up' ? 'upColor' : 'downColor'"
:class="getColor(gzqObj.Tbzt1)"
>{{ gzqObj.Tb1 ? gzqObj.Tb1 : '0.00%' }}</span>
<img
src="../images/up@2x.png"
:src="getImgUrl(gzqObj.Tbzt1)"
class="img01"
v-if="gzqObj.Tbzt1 === 'up'"
/>
<img
src="../images/down@2x.png"
class="img01"
v-else
v-if="gzqObj.Tbzt1 !== 'like'"
/>
<span class="span02">同比去年</span>
</p>
......@@ -36,17 +31,12 @@
<p class="top03 ellipsis1">
<span
class="span01"
:class="tyqObj.Tbzt2 === 'up' ? 'upColor' : 'downColor'"
:class="getColor(tyqObj.Tbzt2)"
>{{ tyqObj.Tb2 ? tyqObj.Tb2 : '0.00%' }}</span>
<img
src="../images/up@2x.png"
:src="getImgUrl(tyqObj.Tbzt2)"
class="img01"
v-if="tyqObj.Tbzt2 === 'up'"
/>
<img
src="../images/down@2x.png"
class="img01"
v-else
v-if="tyqObj.Tbzt2 !== 'like'"
/>
<span class="span02">同比去年</span>
</p>
......@@ -65,19 +55,14 @@
<p class="top03 ellipsis1">
<span
class="span01"
:class="zqObj.Tbzt3 === 'up' ? 'upColor' : 'downColor'"
:class="getColor(zqObj.Tbzt3)"
>
{{ zqObj.Tb3 ? zqObj.Tb3 : '0.00%' }}
</span>
<img
src="../images/up@2x.png"
class="img01"
v-if="zqObj.Tbzt3 === 'up'"
/>
<img
src="../images/down@2x.png"
:src="getImgUrl(zqObj.Tbzt3)"
class="img01"
v-else
v-if="zqObj.Tbzt3 !== 'like'"
/>
<span class="span02">同比去年</span>
</p>
......@@ -96,17 +81,12 @@
<p class="top03 ellipsis1">
<span
class="span01"
:class="jsryObj.Tbzt4 === 'up' ? 'upColor' : 'downColor'"
:class="getColor(jsryObj.Tbzt4)"
>{{ jsryObj.Tb4 ? jsryObj.Tb4 : '0.00%' }}</span>
<img
src="../images/up@2x.png"
:src="getImgUrl(jsryObj.Tbzt4)"
class="img01"
v-if="jsryObj.Tbzt4 === 'up'"
/>
<img
src="../images/down@2x.png"
class="img01"
v-else
v-if="jsryObj.Tbzt4 !== 'like'"
/>
<span class="span02">同比去年</span>
</p>
......@@ -148,6 +128,36 @@ export default {
}
});
},
getColor(flag) {
let color = "";
switch (flag) {
case "up":
color = "upColor";
break;
case "down":
color = "downColor";
break;
case "like":
color = "likeColor";
break;
default:
color = "likeColor";
break;
}
return color;
},
getImgUrl(flag) {
let imgUrl = "";
switch (flag) {
case "up":
imgUrl = require("../images/up@2x.png");
break;
case "down":
imgUrl = require("../images/down@2x.png");
break;
}
return imgUrl;
},
},
};
</script>
......
src/views/sjfx/components/workDogCount.vue
......@@ -109,8 +109,8 @@ export default {
fontSize: 12,
color: "#5E5E5E",
fontFamily: "Microsoft YaHei",
// interval: 0,
// rotate: 30,
interval: 0,
rotate: 30,
},
axisTick: {
show: false,
......
src/views/sjfx/style/sjfxStyle.scss
......@@ -65,16 +65,21 @@
color: #30BE1A;
}
.likeColor {
color: #242424;
}
.span02 {
font-size: 12px;
color: #8B8B8B;
font-weight: 400;
margin-left: 4px;
}
.img01 {
width: 13px;
height: 13px;
margin: -3px 4px 0 1px;
margin: -3px 0 0 1px;
}
}
}
......
src/views/sy/Home2.vue
<template>
<div id="dataVId">
<el-container class="home-page" direction="vertical">
<el-container
class="home-page"
direction="vertical"
>
<!-- 头 背景 -->
<div class="header">
<div class="header-title">
<img class="header-icon" :src="iconurl" />
<img
class="header-icon"
:src="iconurl"
/>
<div class="header-font">全国警犬态势分析</div>
</div>
<div
......@@ -30,13 +36,19 @@
<div class="border">
<!-- 头像-->
<div class="profile">
<img class="img" :src="profileurl" />
<img
class="img"
:src="profileurl"
/>
</div>
</div>
<!-- 总数统计-->
<div class="count">
<div class="title">全国警犬数</div>
<img :src="titleiconurl" class="img" />
<img
:src="titleiconurl"
class="img"
/>
<div class="font">{{ allCount }}</div>
</div>
</div>
......@@ -44,17 +56,26 @@
<div class="father-count">
<!-- 标题-->
<div class="all-title">
<img class="img" :src="alltitleurl" />
<img
class="img"
:src="alltitleurl"
/>
<div class="font">全国种犬数</div>
</div>
<!-- 种犬数据区-->
<div class="count-data" id="cgzqs"></div>
<div
class="count-data"
id="cgzqs"
></div>
</div>
<!-- 全国工作犬数-->
<div class="work-count">
<!-- 标题-->
<div class="all-title">
<img class="img" :src="alltitleurl" />
<img
class="img"
:src="alltitleurl"
/>
<div class="font">全国工作犬数</div>
</div>
<!-- 工作犬数据区-->
......@@ -64,9 +85,17 @@
<span class="zj">总计</span>
<span class="zjNum">{{ gzqTotal }}</span>
</div>
<div class="list" v-for="item in dogList" :key="item.id">
<div
class="list"
v-for="item in dogList"
:key="item.id"
>
<div>
<img :src="Icon" alt="" class="listicon" />
<img
:src="Icon"
alt=""
class="listicon"
/>
<span class="listdog">{{ item.name }}</span>
</div>
<span class="listNum">{{ item.counts }}</span>
......@@ -80,15 +109,26 @@
<!-- 圆环-->
<div class="ring-bg"></div>
<!-- 地图-->
<div class="map" id="map"></div>
<div
class="map"
id="map"
></div>
<!--map下区分犬种 -->
<div class="qf">
<div class="zq">
<img class="icon" :src="zqIcon" alt="" />
<img
class="icon"
:src="zqIcon"
alt=""
/>
<span class="dog">种犬</span>
</div>
<div class="gzq">
<img class="icon" :src="gzqIcon" alt="" />
<img
class="icon"
:src="gzqIcon"
alt=""
/>
<span class="dog">工作犬</span>
</div>
</div>
......@@ -128,8 +168,14 @@
>
</el-date-picker>
<!-- 搜索按钮-->
<div class="search-btn" @click="search">
<img :src="searchbtnurl" class="img" />
<div
class="search-btn"
@click="search"
>
<img
:src="searchbtnurl"
class="img"
/>
</div>
</div>
......@@ -141,13 +187,22 @@
</div>
<!-- 标题-->
<div class="all-title">
<img class="img" :src="alltitleurl" />
<img
class="img"
:src="alltitleurl"
/>
<div class="font">警犬出勤类型</div>
</div>
<div class="out" id="jqcqlx"></div>
<div
class="out"
id="jqcqlx"
></div>
<!-- 标题-->
<div class="all-title">
<img class="img" :src="alltitleurl" />
<img
class="img"
:src="alltitleurl"
/>
<div class="font">全国警犬出勤数top10</div>
</div>
<div class="top10">
......@@ -157,7 +212,11 @@
<span class="hfont hfont2">出勤次数</span>
<!-- <span class="hfont hfont3">行政区分</span> -->
</div>
<div class="Pro" v-for="(item, idx) in top10List" :key="idx">
<div
class="Pro"
v-for="(item, idx) in top10List"
:key="idx"
>
<div class="idx">
{{ item.administrative }}
</div>
......@@ -198,7 +257,7 @@
</template>
<script>
import "echarts/map/js/china.js";
// import "echarts/map/js/china.js";
// import ecConfig from 'echarts/config';
import {
getTopTen,
......@@ -1092,9 +1151,9 @@ export default {
//中国地图
initOption() {
let self = this;
get('JsonData/china1.json', function (chinaJson) {
get("JsonData/china1.json", function (chinaJson) {
// console.log(chinaJson);
})
});
this.optionMap = {
// backgroundColor: "#0F1938",
// tooltip: {
......
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