Tenlion/btgxq-dashuju
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

折线图修改

Browse Source
This commit is contained in:
xixi 2024-04-22 11:16:09 +08:00
parent 2cbc151da5
commit b3ed8112bb
5 changed files with 216 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/App.vue
View File

@ -6,9 +6,9 @@
</template> </template>
<script> <script>
export default { export default {
name: 'App', name: 'App'
// created() { // created() {
// (function () { // (function () {
// function setRootFontSize() { // function setRootFontSize() {
@ -40,7 +40,6 @@ export default {
} }
/* body{ /* body{
width: 1920px; width: 1920px;
height: 928px; height: 928px;
@ -49,10 +48,9 @@ export default {
font-family: 'Avenir', Helvetica, Arial, sans-serif; font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;
color: #2c3e50; color: #2c3e50;
} }
</style> </style>

114
src/api/ddzhxt.js
View File

@ -1,76 +1,78 @@
import request from '@/utils/request' import request from '@/utils/request'
let baseUrl = 'http://219.147.99.164:8082' let baseUrl = 'http://219.147.99.164:8082'
export function getBumen() { export function getBumen () {
return request({ return request({
url: `${baseUrl}/servicecity/app/data-external-release/get-case-report-count-info?dataCatalog=dept`, url: `${baseUrl}/servicecity/app/data-external-release/get-case-report-count-info?dataCatalog=dept`,
method: 'GET' method: 'GET'
}) })
} }
export function getJiezhen() { export function getJiezhen () {
return request({ return request({
url: `${baseUrl}/servicecity/app/data-external-release/get-case-report-count-info?dataCatalog=street`, url: `${baseUrl}/servicecity/app/data-external-release/get-case-report-count-info?dataCatalog=street`,
method: 'GET' method: 'GET'
}) })
} }
export function getGqyajzb() { export function getGqyajzb () {
return request({ return request({
url: `${baseUrl}/servicecity/app/data-external-release/get-community-report-case`, url: `${baseUrl}/servicecity/app/data-external-release/get-community-report-case`,
method: 'GET' method: 'GET'
}) })
} }
export function getRysshyqk() { export function getRysshyqk () {
return request({ return request({
url: `${baseUrl}/servicecity/app/data-external-release/get-user-dynamic-position`, // url: `${baseUrl}/servicecity/app/data-external-release/get-user-dynamic-position`,
method: 'GET' // 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() { export function getAjlx () {
return request({ return request({
url: `${baseUrl}/servicecity/app/data-external-release/get-case-type-top10`, url: `${baseUrl}/servicecity/app/data-external-release/get-case-type-top10`,
method: 'GET' method: 'GET'
}) })
} }
export function getAjjz() { export function getAjjz () {
return request({ return request({
url: `${baseUrl}/servicecity/app/data-external-release/get-7day-report-case`, url: `${baseUrl}/servicecity/app/data-external-release/get-7day-report-case`,
method: 'GET' method: 'GET'
}) })
} }
export function getAjclmyd() { export function getAjclmyd () {
return request({ return request({
url: `${baseUrl}/servicecity/app/data-external-release/get-grade-ratio`, url: `${baseUrl}/servicecity/app/data-external-release/get-grade-ratio`,
method: 'GET' method: 'GET'
}) })
} }
export function getGyfajqktj() { export function getGyfajqktj () {
return request({ return request({
url: `${baseUrl}/servicecity/app/data-external-release/get-month-report-case`, url: `${baseUrl}/servicecity/app/data-external-release/get-month-report-case`,
method: 'GET' method: 'GET'
}) })
} }
export function getAjdt() { export function getAjdt () {
return request({ return request({
url: `${baseUrl}/servicecity/app/data-external-release/get-report-case-dynamic`, url: `${baseUrl}/servicecity/app/data-external-release/get-report-case-dynamic`,
method: 'GET' method: 'GET'
}) })
} }
export function getDitu() { export function getDitu () {
return request({ return request({
url: `${baseUrl}/servicecity/app/data-external-release/list-case-in-map`, url: `${baseUrl}/servicecity/app/data-external-release/list-case-in-map`,
method: 'GET' method: 'GET'
}) })
} }
export function getErjiye() { export function getErjiye () {
return request({ return request({
url: `${baseUrl}/servicecity/route/bigdata/list-case-info-ajlx.html`, url: `${baseUrl}/servicecity/route/bigdata/list-case-info-ajlx.html`,
method: 'GET' method: 'GET'
}) })
} }

140
src/components/ddzhxt/rysshyqk.vue
View File

@ -3,140 +3,154 @@
<div ref="line" class="line"></div> <div ref="line" class="line"></div>
</div> </div>
</template> </template>
<script> <script>
// import '@/utils/echa.js' // import '@/utils/echa.js'
import { getRysshyqk } from '@/api/ddzhxt.js' import { getRysshyqk } from '@/api/ddzhxt.js'
export default { export default {
data() { data () {
return { return {
data: [], data: [],
times: [], times: [],
number: [], // number: [], 老数据
rysshyqkUrl:'http://219.147.99.164:8082/servicecity/route/bigdata/list-hour-user-rysshyqk.html', // 新数据
bossCount: [],
zgyCount: [],
rysshyqkUrl: 'http://219.147.99.164:8082/servicecity/route/bigdata/list-hour-user-rysshyqk.html'
} }
}, },
computed: { computed: {
}, },
created() { created () {
this.getRysshyqk() this.getRysshyqk()
// setTimeout(() => { // setTimeout(() => {
// this.gr() // this.gr()
// }, 300); // }, 300);
}, },
mounted() { mounted () {
}, },
watch: { watch: {
}, },
methods: { methods: {
fn(url) { fn (url) {
// eslint-disable-next-line no-undef
layer.open({ layer.open({
type: 2, type: 2,
content: url, content: url,
area: ['80%', '80%'], area: ['80%', '80%'],
title:'' , title: ''
}); })
}, },
gr() { gr () {
let myChart = this.$echarts.init(this.$refs.line); let myChart = this.$echarts.init(this.$refs.line)
// 用于清除定时器 // 用于清除定时器
var tootipTimer = null; var tootipTimer = null
let option = { let option = {
grid: { grid: {
left: "3%", left: '3%',
right: "7%", right: '7%',
bottom: "5%", bottom: '5%',
top: "10%", top: '10%',
containLabel: true, containLabel: true
}, },
xAxis: { xAxis: {
type: "category", type: 'category',
data: this.times, data: this.times,
axisTick: { axisTick: {
alignWithLabel: true, alignWithLabel: true,
lineStyle: { lineStyle: {
color: "#fff", color: '#fff'
}, // x轴刻度的颜色 } // x轴刻度的颜色
}, },
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: "#fff", color: '#fff'
}, }
}, }
}, },
yAxis: { yAxis: {
type: "value", type: 'value',
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: "#fff", color: '#fff'
}, }
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "#fff", color: '#fff'
}, }
}, }
}, },
tooltip: { tooltip: {
show: true, show: true,
borderWidth: 0, borderWidth: 0,
trigger: "axis", trigger: 'axis',
axisPointer: { axisPointer: {
type: "line", type: 'line'
}, }
// formatter: function (param) { // formatter: function (param) {
// return + param.name ; // return + param.name ;
// } // }
}, },
series: [ series: [
{ {
data: this.number, data: this.bossCount,
type: "line", type: 'line'
smooth: true, // 是否开启平滑
areaStyle: { // smooth: true,
color: "#e1e3eb", // 折线区域是面积及颜色
}, // areaStyle: {
// color: '#e1e3eb'
// }
}, },
], {
}; data: this.zgyCount,
myChart.setOption(option); type: 'line'
// smooth: true,
// areaStyle: {
// color: '#e1e3eb'
// }
}
]
}
myChart.setOption(option)
let sizeFun = function () { let sizeFun = function () {
myChart.resize(); myChart.resize()
}; }
window.addEventListener("resize", sizeFun); window.addEventListener('resize', sizeFun)
tootipTimer && tootipTimer.clearLoop(); tootipTimer && tootipTimer.clearLoop()
tootipTimer = null; tootipTimer = null
// 调用轮播的方法 // 调用轮播的方法
tootipTimer = window.loopShowTooltip(myChart, option, { tootipTimer = window.loopShowTooltip(myChart, option, {
interval: 2000, // 轮播间隔时间 interval: 2000, // 轮播间隔时间
loopSeries: true, // 是否开启轮播循环 loopSeries: true // 是否开启轮播循环
}); })
}, },
async getRysshyqk() { async getRysshyqk () {
try { try {
const res = await getRysshyqk() const res = await getRysshyqk()
this.data = res.data.list this.data = res.data.countClass
// console.log(this.data); console.log(res)
this.data.forEach(item => { this.data.forEach(item => {
this.times.push(item.time) this.times.push(item.dateTime)
this.number.push(item.value) this.bossCount.push(item.bossCount)
this.zgyCount.push(item.zgyCount)
})
this.$nextTick(() => {
this.gr()
}) })
this.$nextTick(()=>{
this.gr();
})
} catch (error) { } catch (error) {
console.log('数据获取失败'); console.log('数据获取失败')
} }
} }
}, }
}; }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.container9 { .container9 {
/* border: 1px solid #00ffff; */ /* border: 1px solid #00ffff; */
@ -148,4 +162,4 @@ export default {
height: 21.5749vh; height: 21.5749vh;
} }
} }
</style> </style>

82
src/pages/ddzhxt/ddzhxts.vue
View File

@ -32,18 +32,19 @@
<script> <script>
import calendar from "@/components/ddzhxt/calendar.vue"; import calendar from '@/components/ddzhxt/calendar.vue'
import ajqk from "@/components/ddzhxt/ajqk.vue"; import ajqk from '@/components/ddzhxt/ajqk.vue'
import gqyajzb from "@/components/ddzhxt/gqyajzb.vue"; import gqyajzb from '@/components/ddzhxt/gqyajzb.vue'
import ajlx from "@/components/ddzhxt/ajlx.vue"; import ajlx from '@/components/ddzhxt/ajlx.vue'
import ajjz from "@/components/ddzhxt/ajjz.vue"; import ajjz from '@/components/ddzhxt/ajjz.vue'
import ajclmyd from "@/components/ddzhxt/ajclmyd.vue"; import ajclmyd from '@/components/ddzhxt/ajclmyd.vue'
import gyfajqktj from "@/components/ddzhxt/gyfajqktj.vue"; import gyfajqktj from '@/components/ddzhxt/gyfajqktj.vue'
import ditu from "@/components/ddzhxt/ditu.vue"; import ditu from '@/components/ddzhxt/ditu.vue'
import rysshyqk from "@/components/ddzhxt/rysshyqk.vue"; import rysshyqk from '@/components/ddzhxt/rysshyqk.vue'
import titles from "@/components/ddzhxt/titles.vue"; import titles from '@/components/ddzhxt/titles.vue'
import ajdt from "@/components/ddzhxt/ajdt.vue"; import ajdt from '@/components/ddzhxt/ajdt.vue'
import { getBumen, getJiezhen, getErjiye } from "@/api/ddzhxt.js" // eslint-disable-next-line no-unused-vars
import { getBumen, getJiezhen, getErjiye } from '@/api/ddzhxt.js'
export default { export default {
components: { components: {
@ -57,23 +58,23 @@ export default {
ditu, ditu,
rysshyqk, rysshyqk,
titles, titles,
ajdt, ajdt
}, },
data() { data () {
return { return {
data: '', data: '',
data2: '', data2: '',
ajqkUrl:'http://219.147.99.164:8082/servicecity/route/bigdata/list-case-info-ajlx.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', 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', 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', 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', 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', 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', gyfajqktjUrl: 'http://219.147.99.164:8082/servicecity/route/bigdata/list-report-case-gyfajqk.html'
// windowContent: '' // windowContent: ''
} }
}, },
created() { created () {
this.getBumen() this.getBumen()
this.getJiezhen() this.getJiezhen()
document.title = '案件信息' document.title = '案件信息'
@ -85,62 +86,61 @@ export default {
// }); // });
}, },
methods: { methods: {
async getBumen() { async getBumen () {
try { try {
const { data: { data } } = await getBumen() const { data: { data } } = await getBumen()
// console.log(data); // console.log(data);
this.data = data this.data = data
} catch (error) { } catch (error) {
console.log('数据获取失败'); console.log('数据获取失败')
} }
}, },
async getJiezhen() { async getJiezhen () {
try { try {
const { data: { data } } = await getJiezhen() const { data: { data } } = await getJiezhen()
// console.log(data); // console.log(data);
this.data2 = data this.data2 = data
} catch (error) { } catch (error) {
console.log('数据获取失败'); console.log('数据获取失败')
} }
}, },
fn(url) { fn (url) {
// const res = await getErjiye() // const res = await getErjiye()
// console.log(res.data); // console.log(res.data);
// console.log(123); // console.log(123);
// this.windowContent = res.data; // this.windowContent = res.data;
// eslint-disable-next-line no-undef
layer.open({ layer.open({
type: 2, type: 2,
// content: '<div style="color:#00ffff; font-size:50px;">大数据统计分析系统</div>',//这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no'] // 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: '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%'], area: ['85%', '80%'],
title:'' , title: ''
// skin: 'demo-class' // skin: 'demo-class'
}); })
// window.open('http://219.147.99.164:8082/servicecity/route/bigdata/list-case-info-ajlx.html') // window.open('http://219.147.99.164:8082/servicecity/route/bigdata/list-case-info-ajlx.html')
// this.$alert(res, { // this.$alert(res, {
// dangerouslyUseHTMLString: true // dangerouslyUseHTMLString: true
// }); // });
}, },
fn2(imgSrc) { fn2 (imgSrc) {
// eslint-disable-next-line no-undef
layer.open({ layer.open({
type: 1, type: 1,
content: `<div style="padding:15px"><img src="${imgSrc}" style="width:100%"/></div>`, content: `<div style="padding:15px"><img src="${imgSrc}" style="width:100%"/></div>`,
area: ['85%', '80%'], area: ['85%', '80%'],
title:'' , title: ''
// skin: 'demo-class' // skin: 'demo-class'
}); })
} }
} }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.ddzhxt { .ddzhxt {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
@ -325,5 +325,5 @@ export default {
.layui-layer-page .layui-layer-content{ .layui-layer-page .layui-layer-content{
background-color: rgb(3, 15, 90); background-color: rgb(3, 15, 90);
} }
</style> </style>

72
src/router/index.js
View File

@ -6,44 +6,44 @@ import zhdjxt from '@/pages/zhdjxt/zhdjxts.vue'
import jcxxxt from '@/pages/jcxxxt/jcxxxts.vue' import jcxxxt from '@/pages/jcxxxt/jcxxxts.vue'
import detailDitu from '@/components/ddzhxt/detail-ditu.vue' import detailDitu from '@/components/ddzhxt/detail-ditu.vue'
Router.prototype.openUrl = function(url, type) { Router.prototype.openUrl = function (url, type) {
window.open(url, !type ? '_self': type); window.open(url, !type ? '_self' : type)
} }
Vue.use(Router) Vue.use(Router)
export default new Router({ export default new Router({
routes: [{ routes: [{
path: '/', path: '/',
name: 'ddzhxt', name: 'ddzhxt',
component: ddzhxt, component: ddzhxt
// meta:{ // meta:{
// title:'ddzhxt' // title:'ddzhxt'
// } // }
}, },
{ {
path: '/zhdjxt', path: '/zhdjxt',
name: 'zhdjxt', name: 'zhdjxt',
component: zhdjxt, component: zhdjxt
// meta:{ // meta:{
// title:'zhdjxt' // title:'zhdjxt'
// } // }
}, },
{ {
path: '/jcxxxt', path: '/jcxxxt',
name: 'jcxxxt', name: 'jcxxxt',
component: jcxxxt, component: jcxxxt
// meta:{ // meta:{
// title:'jcxxxt' // title:'jcxxxt'
// } // }
}, },
{ {
path: '/detailDitu', path: '/detailDitu',
name: 'detailDitu', name: 'detailDitu',
component: detailDitu, component: detailDitu
// meta:{ // meta:{
// title:'jcxxxt' // title:'jcxxxt'
// } // }
}, }
] ]
}) })