Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
F
founder_vue
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
常超
founder_vue
Commits
3159dde6
Commit
3159dde6
authored
Dec 29, 2022
by
liuguorong93
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
本年度全国警犬复训统计 样式
parent
0110a636
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
224 additions
and
0 deletions
+224
-0
src/views/sjfx/components/messageRemind.vue
+17
-0
src/views/sjfx/components/retrainingCount.vue
+182
-0
src/views/sjfx/sjfx.vue
+11
-0
src/views/sjfx/style/sjfxStyle.scss
+14
-0
No files found.
src/views/sjfx/components/messageRemind.vue
0 → 100644
View file @
3159dde6
<
template
>
<div
class=
"messageClass"
>
123
</div>
</
template
>
<
script
>
export
default
{
data
()
{
return
{};
},
mounted
()
{},
methods
:
{},
};
</
script
>
<
style
scoped
lang=
"scss"
>
@import
"../style/sjfxStyle.scss"
;
</
style
>
src/views/sjfx/components/retrainingCount.vue
0 → 100644
View file @
3159dde6
<
template
>
<div
class=
"retrainingClass"
v-resize=
"resizes"
>
<div
class=
"topTitle topTitleEchart"
>
本年度全国警犬复训统计
</div>
<div
class=
"myCharts"
id=
"myEacherForRetrainingCount"
></div>
</div>
</
template
>
<
script
>
import
resize
from
"vue-resize-directive"
;
export
default
{
directives
:
{
resize
,
},
data
()
{
return
{
myChart
:
null
,
legendData
:
[
"复训数"
],
xAxisData
:
[
"1月"
,
"2月"
,
"3月"
,
"4月"
,
"5月"
,
"6月"
,
"7月"
,
"8月"
,
"9月"
,
"10月"
,
"11月"
,
"12月"
,
],
};
},
mounted
()
{
this
.
drawEcharts
();
},
methods
:
{
resizes
()
{
if
(
this
.
myChart
&&
typeof
this
.
myChart
===
"object"
)
this
.
myChart
.
resize
();
},
drawEcharts
()
{
if
(
this
.
myChart
)
this
.
myChart
.
dispose
();
this
.
myChart
=
this
.
$echarts
.
init
(
document
.
getElementById
(
"myEacherForRetrainingCount"
)
);
let
options
=
{
tooltip
:
{
trigger
:
"axis"
,
axisPointer
:
{
type
:
"none"
,
// shadow
shadowStyle
:
{
color
:
"rgba(28, 143, 250, 0.1)"
,
},
},
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
:
{
top
:
20
,
right
:
0
,
padding
:
[
0
,
0
,
24
,
0
],
itemGap
:
20
,
itemWidth
:
10
,
itemHeight
:
10
,
textStyle
:
{
color
:
"#5E5E5E"
,
fontSize
:
12
,
},
data
:
this
.
legendData
,
},
grid
:
{
left
:
0
,
right
:
0
,
bottom
:
35
,
top
:
"25%"
,
containLabel
:
true
,
},
xAxis
:
[
{
type
:
"category"
,
offset
:
10
,
axisLabel
:
{
show
:
true
,
fontSize
:
12
,
color
:
"#5E5E5E"
,
fontFamily
:
"Microsoft YaHei"
,
// interval: 0,
// rotate: 30,
},
axisTick
:
{
show
:
false
,
},
axisLine
:
{
lineStyle
:
{
color
:
"#E5E5E5"
,
},
},
data
:
this
.
xAxisData
,
},
],
yAxis
:
[
{
type
:
"value"
,
axisLabel
:
{
show
:
true
,
fontSize
:
12
,
color
:
"#9AA1A9"
,
fontFamily
:
"Microsoft YaHei"
,
},
axisLine
:
{
show
:
false
,
},
axisTick
:
{
show
:
false
,
},
splitLine
:
{
show
:
true
,
lineStyle
:
{
color
:
"#E5E5E5"
,
},
},
},
],
series
:
[
{
name
:
"复训数"
,
type
:
"line"
,
smooth
:
true
,
// emphasis: {
// itemStyle: {
// borderColor: "#3C9FF8",
// },
// },
areaStyle
:
{
color
:
new
this
.
$echarts
.
graphic
.
LinearGradient
(
0
,
0
,
0
,
1
,
[
{
offset
:
0
,
color
:
"rgba(60, 159, 248, 0.5)"
,
},
{
offset
:
0.5
,
color
:
"rgba(60, 159, 248, 0.3)"
,
},
{
offset
:
1
,
color
:
"rgba(60, 159, 248, 0.1)"
,
},
]),
},
itemStyle
:
{
color
:
"#3C9FF8"
,
},
data
:
[
12
,
43
,
121
,
0
,
4
,
99
,
1
,
23
,
212
,
43
,
5
,
311
],
},
],
};
this
.
myChart
.
setOption
(
options
);
},
},
};
</
script
>
<
style
scoped
lang=
"scss"
>
@import
"../style/sjfxStyle.scss"
;
</
style
>
src/views/sjfx/sjfx.vue
View file @
3159dde6
...
...
@@ -2,17 +2,28 @@
<div
class=
"sjfxClass"
>
<topContent></topContent>
<allDogCount></allDogCount>
<div
class=
"spaceBetween"
style=
"margin-top: 20px;width: 100%;height: 280px;"
>
<retrainingCount></retrainingCount>
<messageRemind></messageRemind>
</div>
</div>
</
template
>
<
script
>
import
topContent
from
"./components/topContent.vue"
;
import
allDogCount
from
"./components/allDogCount.vue"
;
import
retrainingCount
from
"./components/retrainingCount.vue"
;
import
messageRemind
from
"./components/messageRemind.vue"
;
export
default
{
components
:
{
topContent
,
allDogCount
,
retrainingCount
,
messageRemind
,
},
data
()
{
return
{};
...
...
src/views/sjfx/style/sjfxStyle.scss
View file @
3159dde6
...
...
@@ -100,6 +100,20 @@
position
:
relative
;
}
.retrainingClass
{
width
:
calc
(
100%
-
450px
);
height
:
280px
;
background
:
#FFFFFF
;
border-radius
:
8px
;
}
.messageClass
{
width
:
435px
;
height
:
280px
;
background
:
#FFFFFF
;
border-radius
:
8px
;
}
.topTitle
{
width
:
100%
;
height
:
48px
;
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment