折线图修改
This commit is contained in:
xixi
parent
2cbc151da5
commit
b3ed8112bb
10
src/App.vue
10
src/App.vue
@ -6,9 +6,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
name: 'App'
|
||||
// created() {
|
||||
// (function () {
|
||||
// function setRootFontSize() {
|
||||
@ -40,7 +40,6 @@ export default {
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* body{
|
||||
width: 1920px;
|
||||
height: 928px;
|
||||
@ -49,10 +48,9 @@ export default {
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,76 +1,78 @@
|
||||
import request from '@/utils/request'
|
||||
let baseUrl = 'http://219.147.99.164:8082'
|
||||
export function getBumen() {
|
||||
return request({
|
||||
url: `${baseUrl}/servicecity/app/data-external-release/get-case-report-count-info?dataCatalog=dept`,
|
||||
method: 'GET'
|
||||
})
|
||||
export function getBumen () {
|
||||
return request({
|
||||
url: `${baseUrl}/servicecity/app/data-external-release/get-case-report-count-info?dataCatalog=dept`,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
export function getJiezhen() {
|
||||
return request({
|
||||
url: `${baseUrl}/servicecity/app/data-external-release/get-case-report-count-info?dataCatalog=street`,
|
||||
method: 'GET'
|
||||
})
|
||||
export function getJiezhen () {
|
||||
return request({
|
||||
url: `${baseUrl}/servicecity/app/data-external-release/get-case-report-count-info?dataCatalog=street`,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
export function getGqyajzb() {
|
||||
return request({
|
||||
url: `${baseUrl}/servicecity/app/data-external-release/get-community-report-case`,
|
||||
method: 'GET'
|
||||
})
|
||||
export function getGqyajzb () {
|
||||
return request({
|
||||
url: `${baseUrl}/servicecity/app/data-external-release/get-community-report-case`,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
export function getRysshyqk() {
|
||||
return request({
|
||||
url: `${baseUrl}/servicecity/app/data-external-release/get-user-dynamic-position`,
|
||||
method: 'GET'
|
||||
})
|
||||
export function getRysshyqk () {
|
||||
return request({
|
||||
// url: `${baseUrl}/servicecity/app/data-external-release/get-user-dynamic-position`,
|
||||
// url: `${baseUrl}/servicecity/app/data-external-release/get-case-handle-year`,
|
||||
url: `http://192.168.0.4:7022/servicecity/app/data-external-release/get-case-handle-year`,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
export function getAjlx() {
|
||||
return request({
|
||||
url: `${baseUrl}/servicecity/app/data-external-release/get-case-type-top10`,
|
||||
method: 'GET'
|
||||
})
|
||||
export function getAjlx () {
|
||||
return request({
|
||||
url: `${baseUrl}/servicecity/app/data-external-release/get-case-type-top10`,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
export function getAjjz() {
|
||||
return request({
|
||||
url: `${baseUrl}/servicecity/app/data-external-release/get-7day-report-case`,
|
||||
method: 'GET'
|
||||
})
|
||||
export function getAjjz () {
|
||||
return request({
|
||||
url: `${baseUrl}/servicecity/app/data-external-release/get-7day-report-case`,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
export function getAjclmyd() {
|
||||
return request({
|
||||
url: `${baseUrl}/servicecity/app/data-external-release/get-grade-ratio`,
|
||||
method: 'GET'
|
||||
})
|
||||
export function getAjclmyd () {
|
||||
return request({
|
||||
url: `${baseUrl}/servicecity/app/data-external-release/get-grade-ratio`,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
export function getGyfajqktj() {
|
||||
return request({
|
||||
url: `${baseUrl}/servicecity/app/data-external-release/get-month-report-case`,
|
||||
method: 'GET'
|
||||
})
|
||||
export function getGyfajqktj () {
|
||||
return request({
|
||||
url: `${baseUrl}/servicecity/app/data-external-release/get-month-report-case`,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
export function getAjdt() {
|
||||
return request({
|
||||
url: `${baseUrl}/servicecity/app/data-external-release/get-report-case-dynamic`,
|
||||
method: 'GET'
|
||||
})
|
||||
export function getAjdt () {
|
||||
return request({
|
||||
url: `${baseUrl}/servicecity/app/data-external-release/get-report-case-dynamic`,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
export function getDitu() {
|
||||
return request({
|
||||
url: `${baseUrl}/servicecity/app/data-external-release/list-case-in-map`,
|
||||
method: 'GET'
|
||||
})
|
||||
export function getDitu () {
|
||||
return request({
|
||||
url: `${baseUrl}/servicecity/app/data-external-release/list-case-in-map`,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
export function getErjiye() {
|
||||
return request({
|
||||
url: `${baseUrl}/servicecity/route/bigdata/list-case-info-ajlx.html`,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
export function getErjiye () {
|
||||
return request({
|
||||
url: `${baseUrl}/servicecity/route/bigdata/list-case-info-ajlx.html`,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
@ -3,140 +3,154 @@
|
||||
<div ref="line" class="line"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
// import '@/utils/echa.js'
|
||||
import { getRysshyqk } from '@/api/ddzhxt.js'
|
||||
export default {
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
data: [],
|
||||
times: [],
|
||||
number: [],
|
||||
rysshyqkUrl:'http://219.147.99.164:8082/servicecity/route/bigdata/list-hour-user-rysshyqk.html',
|
||||
// number: [], 老数据
|
||||
// 新数据
|
||||
bossCount: [],
|
||||
zgyCount: [],
|
||||
rysshyqkUrl: 'http://219.147.99.164:8082/servicecity/route/bigdata/list-hour-user-rysshyqk.html'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
created() {
|
||||
created () {
|
||||
this.getRysshyqk()
|
||||
// setTimeout(() => {
|
||||
// this.gr()
|
||||
|
||||
// }, 300);
|
||||
|
||||
},
|
||||
mounted() {
|
||||
mounted () {
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
methods: {
|
||||
fn(url) {
|
||||
fn (url) {
|
||||
// eslint-disable-next-line no-undef
|
||||
layer.open({
|
||||
type: 2,
|
||||
content: url,
|
||||
content: url,
|
||||
area: ['80%', '80%'],
|
||||
title:'' ,
|
||||
});
|
||||
title: ''
|
||||
})
|
||||
},
|
||||
gr() {
|
||||
let myChart = this.$echarts.init(this.$refs.line);
|
||||
gr () {
|
||||
let myChart = this.$echarts.init(this.$refs.line)
|
||||
// 用于清除定时器
|
||||
var tootipTimer = null;
|
||||
var tootipTimer = null
|
||||
let option = {
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "7%",
|
||||
bottom: "5%",
|
||||
top: "10%",
|
||||
containLabel: true,
|
||||
left: '3%',
|
||||
right: '7%',
|
||||
bottom: '5%',
|
||||
top: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
type: 'category',
|
||||
data: this.times,
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
}, // x轴刻度的颜色
|
||||
color: '#fff'
|
||||
} // x轴刻度的颜色
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
borderWidth: 0,
|
||||
trigger: "axis",
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: "line",
|
||||
},
|
||||
type: 'line'
|
||||
}
|
||||
// formatter: function (param) {
|
||||
// return + param.name ;
|
||||
// }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: this.number,
|
||||
type: "line",
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: "#e1e3eb",
|
||||
},
|
||||
data: this.bossCount,
|
||||
type: 'line'
|
||||
// 是否开启平滑
|
||||
// smooth: true,
|
||||
// 折线区域是面积及颜色
|
||||
// areaStyle: {
|
||||
// color: '#e1e3eb'
|
||||
// }
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
{
|
||||
data: this.zgyCount,
|
||||
type: 'line'
|
||||
// smooth: true,
|
||||
// areaStyle: {
|
||||
// color: '#e1e3eb'
|
||||
// }
|
||||
}
|
||||
]
|
||||
}
|
||||
myChart.setOption(option)
|
||||
let sizeFun = function () {
|
||||
myChart.resize();
|
||||
};
|
||||
window.addEventListener("resize", sizeFun);
|
||||
tootipTimer && tootipTimer.clearLoop();
|
||||
tootipTimer = null;
|
||||
myChart.resize()
|
||||
}
|
||||
window.addEventListener('resize', sizeFun)
|
||||
tootipTimer && tootipTimer.clearLoop()
|
||||
tootipTimer = null
|
||||
// 调用轮播的方法
|
||||
tootipTimer = window.loopShowTooltip(myChart, option, {
|
||||
interval: 2000, // 轮播间隔时间
|
||||
loopSeries: true, // 是否开启轮播循环
|
||||
});
|
||||
loopSeries: true // 是否开启轮播循环
|
||||
})
|
||||
},
|
||||
async getRysshyqk() {
|
||||
async getRysshyqk () {
|
||||
try {
|
||||
const res = await getRysshyqk()
|
||||
this.data = res.data.list
|
||||
// console.log(this.data);
|
||||
this.data = res.data.countClass
|
||||
console.log(res)
|
||||
this.data.forEach(item => {
|
||||
this.times.push(item.time)
|
||||
this.number.push(item.value)
|
||||
this.times.push(item.dateTime)
|
||||
this.bossCount.push(item.bossCount)
|
||||
this.zgyCount.push(item.zgyCount)
|
||||
})
|
||||
this.$nextTick(() => {
|
||||
this.gr()
|
||||
})
|
||||
this.$nextTick(()=>{
|
||||
this.gr();
|
||||
})
|
||||
} catch (error) {
|
||||
console.log('数据获取失败');
|
||||
console.log('数据获取失败')
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container9 {
|
||||
/* border: 1px solid #00ffff; */
|
||||
@ -148,4 +162,4 @@ export default {
|
||||
height: 21.5749vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -32,18 +32,19 @@
|
||||
|
||||
<script>
|
||||
|
||||
import calendar from "@/components/ddzhxt/calendar.vue";
|
||||
import ajqk from "@/components/ddzhxt/ajqk.vue";
|
||||
import gqyajzb from "@/components/ddzhxt/gqyajzb.vue";
|
||||
import ajlx from "@/components/ddzhxt/ajlx.vue";
|
||||
import ajjz from "@/components/ddzhxt/ajjz.vue";
|
||||
import ajclmyd from "@/components/ddzhxt/ajclmyd.vue";
|
||||
import gyfajqktj from "@/components/ddzhxt/gyfajqktj.vue";
|
||||
import ditu from "@/components/ddzhxt/ditu.vue";
|
||||
import rysshyqk from "@/components/ddzhxt/rysshyqk.vue";
|
||||
import titles from "@/components/ddzhxt/titles.vue";
|
||||
import ajdt from "@/components/ddzhxt/ajdt.vue";
|
||||
import { getBumen, getJiezhen, getErjiye } from "@/api/ddzhxt.js"
|
||||
import calendar from '@/components/ddzhxt/calendar.vue'
|
||||
import ajqk from '@/components/ddzhxt/ajqk.vue'
|
||||
import gqyajzb from '@/components/ddzhxt/gqyajzb.vue'
|
||||
import ajlx from '@/components/ddzhxt/ajlx.vue'
|
||||
import ajjz from '@/components/ddzhxt/ajjz.vue'
|
||||
import ajclmyd from '@/components/ddzhxt/ajclmyd.vue'
|
||||
import gyfajqktj from '@/components/ddzhxt/gyfajqktj.vue'
|
||||
import ditu from '@/components/ddzhxt/ditu.vue'
|
||||
import rysshyqk from '@/components/ddzhxt/rysshyqk.vue'
|
||||
import titles from '@/components/ddzhxt/titles.vue'
|
||||
import ajdt from '@/components/ddzhxt/ajdt.vue'
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import { getBumen, getJiezhen, getErjiye } from '@/api/ddzhxt.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -57,23 +58,23 @@ export default {
|
||||
ditu,
|
||||
rysshyqk,
|
||||
titles,
|
||||
ajdt,
|
||||
ajdt
|
||||
},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
data: '',
|
||||
data2: '',
|
||||
ajqkUrl:'http://219.147.99.164:8082/servicecity/route/bigdata/list-case-info-ajlx.html',
|
||||
gqyajzbUrl:'http://219.147.99.164:8082/servicecity/route/bigdata/list-case-info-gqyajzb.html',
|
||||
rysshyqkUrl:'http://219.147.99.164:8082/servicecity/route/bigdata/list-hour-user-rysshyqk.html',
|
||||
ajlxUrl:'http://219.147.99.164:8082/servicecity/route/bigdata/list-case-info-ajlxtop10.html',
|
||||
ajjzUrl:'http://219.147.99.164:8082/servicecity/route/bigdata/list-case-info-7dayajjz.html',
|
||||
ajclmydUrl:'http://219.147.99.164:8082/servicecity/route/bigdata/list-grade-ratio-ajmyd.html',
|
||||
gyfajqktjUrl:'http://219.147.99.164:8082/servicecity/route/bigdata/list-report-case-gyfajqk.html',
|
||||
ajqkUrl: 'http://219.147.99.164:8082/servicecity/route/bigdata/list-case-info-ajlx.html',
|
||||
gqyajzbUrl: 'http://219.147.99.164:8082/servicecity/route/bigdata/list-case-info-gqyajzb.html',
|
||||
rysshyqkUrl: 'http://219.147.99.164:8082/servicecity/route/bigdata/list-hour-user-rysshyqk.html',
|
||||
ajlxUrl: 'http://219.147.99.164:8082/servicecity/route/bigdata/list-case-info-ajlxtop10.html',
|
||||
ajjzUrl: 'http://219.147.99.164:8082/servicecity/route/bigdata/list-case-info-7dayajjz.html',
|
||||
ajclmydUrl: 'http://219.147.99.164:8082/servicecity/route/bigdata/list-grade-ratio-ajmyd.html',
|
||||
gyfajqktjUrl: 'http://219.147.99.164:8082/servicecity/route/bigdata/list-report-case-gyfajqk.html'
|
||||
// windowContent: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
created () {
|
||||
this.getBumen()
|
||||
this.getJiezhen()
|
||||
document.title = '案件信息'
|
||||
@ -85,62 +86,61 @@ export default {
|
||||
// });
|
||||
},
|
||||
methods: {
|
||||
async getBumen() {
|
||||
async getBumen () {
|
||||
try {
|
||||
const { data: { data } } = await getBumen()
|
||||
// console.log(data);
|
||||
this.data = data
|
||||
} catch (error) {
|
||||
console.log('数据获取失败');
|
||||
console.log('数据获取失败')
|
||||
}
|
||||
|
||||
},
|
||||
async getJiezhen() {
|
||||
async getJiezhen () {
|
||||
try {
|
||||
const { data: { data } } = await getJiezhen()
|
||||
// console.log(data);
|
||||
this.data2 = data
|
||||
} catch (error) {
|
||||
console.log('数据获取失败');
|
||||
console.log('数据获取失败')
|
||||
}
|
||||
|
||||
},
|
||||
fn(url) {
|
||||
fn (url) {
|
||||
// const res = await getErjiye()
|
||||
// console.log(res.data);
|
||||
// console.log(res.data);
|
||||
// console.log(123);
|
||||
// this.windowContent = res.data;
|
||||
// eslint-disable-next-line no-undef
|
||||
layer.open({
|
||||
type: 2,
|
||||
// content: '<div style="color:#00ffff; font-size:50px;">大数据统计分析系统</div>',//这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
|
||||
// content: 'static/html/list-case-info-ajlx.html',
|
||||
content: url, //`<iframe src="data:text/html;charset=utf-8,${}"></iframe>`, //'http://127.0.0.1/servicecity/route/bigdata/list-case-info-ajlx.html',
|
||||
content: url, // `<iframe src="data:text/html;charset=utf-8,${}"></iframe>`, //'http://127.0.0.1/servicecity/route/bigdata/list-case-info-ajlx.html',
|
||||
area: ['85%', '80%'],
|
||||
title:'' ,
|
||||
title: ''
|
||||
// skin: 'demo-class'
|
||||
});
|
||||
})
|
||||
// window.open('http://219.147.99.164:8082/servicecity/route/bigdata/list-case-info-ajlx.html')
|
||||
// this.$alert(res, {
|
||||
// dangerouslyUseHTMLString: true
|
||||
// });
|
||||
},
|
||||
fn2(imgSrc) {
|
||||
fn2 (imgSrc) {
|
||||
// eslint-disable-next-line no-undef
|
||||
layer.open({
|
||||
type: 1,
|
||||
content: `<div style="padding:15px"><img src="${imgSrc}" style="width:100%"/></div>`,
|
||||
area: ['85%', '80%'],
|
||||
title:'' ,
|
||||
title: ''
|
||||
// skin: 'demo-class'
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
|
||||
.ddzhxt {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
@ -325,5 +325,5 @@ export default {
|
||||
.layui-layer-page .layui-layer-content{
|
||||
background-color: rgb(3, 15, 90);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</style>
|
||||
|
||||
@ -6,44 +6,44 @@ import zhdjxt from '@/pages/zhdjxt/zhdjxts.vue'
|
||||
import jcxxxt from '@/pages/jcxxxt/jcxxxts.vue'
|
||||
import detailDitu from '@/components/ddzhxt/detail-ditu.vue'
|
||||
|
||||
Router.prototype.openUrl = function(url, type) {
|
||||
window.open(url, !type ? '_self': type);
|
||||
Router.prototype.openUrl = function (url, type) {
|
||||
window.open(url, !type ? '_self' : type)
|
||||
}
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
export default new Router({
|
||||
routes: [{
|
||||
path: '/',
|
||||
name: 'ddzhxt',
|
||||
component: ddzhxt,
|
||||
// meta:{
|
||||
// title:'ddzhxt'
|
||||
// }
|
||||
},
|
||||
{
|
||||
path: '/zhdjxt',
|
||||
name: 'zhdjxt',
|
||||
component: zhdjxt,
|
||||
// meta:{
|
||||
// title:'zhdjxt'
|
||||
// }
|
||||
},
|
||||
{
|
||||
path: '/jcxxxt',
|
||||
name: 'jcxxxt',
|
||||
component: jcxxxt,
|
||||
// meta:{
|
||||
// title:'jcxxxt'
|
||||
// }
|
||||
},
|
||||
{
|
||||
path: '/detailDitu',
|
||||
name: 'detailDitu',
|
||||
component: detailDitu,
|
||||
// meta:{
|
||||
// title:'jcxxxt'
|
||||
// }
|
||||
},
|
||||
]
|
||||
})
|
||||
routes: [{
|
||||
path: '/',
|
||||
name: 'ddzhxt',
|
||||
component: ddzhxt
|
||||
// meta:{
|
||||
// title:'ddzhxt'
|
||||
// }
|
||||
},
|
||||
{
|
||||
path: '/zhdjxt',
|
||||
name: 'zhdjxt',
|
||||
component: zhdjxt
|
||||
// meta:{
|
||||
// title:'zhdjxt'
|
||||
// }
|
||||
},
|
||||
{
|
||||
path: '/jcxxxt',
|
||||
name: 'jcxxxt',
|
||||
component: jcxxxt
|
||||
// meta:{
|
||||
// title:'jcxxxt'
|
||||
// }
|
||||
},
|
||||
{
|
||||
path: '/detailDitu',
|
||||
name: 'detailDitu',
|
||||
component: detailDitu
|
||||
// meta:{
|
||||
// title:'jcxxxt'
|
||||
// }
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user