Skip to content

Y
yuji-dataview
Commit 00df0431 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

质量安全

parent e22bc3ea
Show whitespace changes
Inline Side-by-side
Showing with 974 additions and 261 deletions
index.html
View file @ 00df0431
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<title>Dataview Project</title> <title>渔技大屏</title>
<style> <style>
html { html {
font-size: 1.6vh; font-size: 1.6vh;
......
src/App.vue
View file @ 00df0431
<template> <template>
<div id="app" :style="style"> <div id="app">
<m-loader v-show="$store.state.showLoading"/> <m-loader v-show="$store.state.showLoading"/>
<m-title hideDate hideTime :bgImg="require('@/assets/images/title-bg3.png')"/> <m-title hideDate hideTime :bgImg="require('@/assets/images/title-bg3.png')"/>
<m-animate enter="zoomIn" leave="zoomOut"> <m-animate enter="zoomIn" leave="zoomOut">
...@@ -11,22 +11,22 @@ ...@@ -11,22 +11,22 @@
<script> <script>
export default { export default {
name: 'App', name: 'App',
computed: { // computed: {
style() { // style() {
return this.$route.path === '/quality-safety' // return this.$route.path === '/quality-safety'
? ({'background-size': '110%', 'background-position': '90% -50%'}) // ? ({'background-size': '110%', 'background-position': '90% -50%'})
: ({'background-size': '100%', 'background-position': '50% 50%'}) // : ({'background-size': '100%', 'background-position': '50% 50%'})
} // }
}, // },
} }
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
#app #app
background url('./assets/images/bg.png') no-repeat background url('./assets/images/bg.png') no-repeat
transition background 1s // transition background 1s
// background-size 110% background-size 110%
// background-position 90% -50% background-position 90% -50%
.router-view .router-view
height calc(100% - 4rem) height calc(100% - 4rem)
</style> </style>
......
src/assets/css/reset.styl
View file @ 00df0431
...@@ -51,9 +51,11 @@ $color-main = #5BD5FF ...@@ -51,9 +51,11 @@ $color-main = #5BD5FF
width .8rem width .8rem
height 2rem height 2rem
border-radius 1rem border-radius 1rem
.ivu-select-small.ivu-select-multiple
.ivu-tag
display none
.custom-select .custom-select
position absolute position absolute
top 1rem top 1rem
right 1rem right .5rem
width 7rem width 7rem
src/components/MonitorComponents/MonitorChart/monitor-chart.vue
View file @ 00df0431
...@@ -71,6 +71,7 @@ export default { ...@@ -71,6 +71,7 @@ export default {
init() { init() {
this.formatData() this.formatData()
const chart = echarts.init(this.$refs.chart) const chart = echarts.init(this.$refs.chart)
chart.clear()
chart.setOption(this.setting) chart.setOption(this.setting)
}, },
......
src/components/MonitorComponents/MonitorTitle/monitor-title.vue
View file @ 00df0431
...@@ -57,7 +57,7 @@ export default { ...@@ -57,7 +57,7 @@ export default {
{name: '稻鱼种养'}, {name: '稻鱼种养'},
{name: '海洋牧场'}, {name: '海洋牧场'},
{name: '水产价格', title: '水产品价格分析', path: '/fishing-price'}, {name: '水产价格', title: '水产品价格分析', path: '/fishing-price'},
{name: '苗种数据'}, {name: '苗种'},
], ],
} }
}, },
......
src/main.js
View file @ 00df0431
...@@ -5,7 +5,7 @@ import Vue from 'vue' ...@@ -5,7 +5,7 @@ import Vue from 'vue'
import App from './App' import App from './App'
import router from './router' import router from './router'
import store from './store' import store from './store'
import {Row, Col, Select, Option, DatePicker, Icon, Slider} from 'view-design' import {Row, Col, Select, Option, DatePicker, Icon, Slider, Circle} from 'view-design'
import ajax from '@/server/ajax' import ajax from '@/server/ajax'
import api from '@/server/api' import api from '@/server/api'
import common from '@/util/common' import common from '@/util/common'
...@@ -30,6 +30,7 @@ Vue.component('Option', Option) ...@@ -30,6 +30,7 @@ Vue.component('Option', Option)
Vue.component('DatePicker', DatePicker) Vue.component('DatePicker', DatePicker)
Vue.component('Icon', Icon) Vue.component('Icon', Icon)
Vue.component('Slider', Slider) Vue.component('Slider', Slider)
Vue.component('i-circle', Circle)
/* eslint-disable no-new */ /* eslint-disable no-new */
new Vue({ new Vue({
el: '#app', el: '#app',
......
src/views/components/disease/consultation-sum.vue
View file @ 00df0431
<template> <template>
<div class="consultation-sum"> <div class="consultation-sum">
<div> <div>
<p>区域会诊统计</p><span>单位：个</span> <p>区域会诊统计<span>单位：个</span></p>
<div class="list-wrapper"> <div class="list-wrapper">
<div v-for="(item, index) in areas" :key="item.name"> <div v-for="(item, index) in areas" :key="item.name">
<p>{{index + 1}}.{{item.name}}</p> <p :title="item.name">{{index + 1}}.{{item.name}}</p>
<div class="bar-wrapper"><div :style="`width:${item.rate}%;background-color:${colors[index] || '#25add1'}`"></div></div> <div class="bar-wrapper"><div :style="`width:${item.rate}%;background-color:${colors[index] || '#25add1'}`"></div></div>
<m-count :value="item.count" :decimal="0"/> <m-count :value="item.count" :decimal="0"/>
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<p>病种会诊统计</p><span>单位：个</span> <p>病种会诊统计<span>单位：个</span></p>
<div class="list-wrapper"> <div class="list-wrapper">
<div v-for="(item, index) in areas" :key="item.name"> <div v-for="(item, index) in diseases" :key="item.name">
<p>{{index + 1}}.{{item.name}}</p> <p :title="item.name">{{index + 1}}.{{item.name}}</p>
<div class="bar-wrapper"><div :style="`width:${item.rate}%;background-color:${colors[index] || '#25add1'}`"></div></div> <div class="bar-wrapper"><div :style="`width:${item.rate}%;background-color:${colors[index] || '#25add1'}`"></div></div>
<m-count :value="item.count" :decimal="0"/> <m-count :value="item.count" :decimal="0"/>
</div> </div>
...@@ -77,10 +77,15 @@ export default { ...@@ -77,10 +77,15 @@ export default {
>p >p
color $edgeColor color $edgeColor
font-weight bold font-weight bold
display flex
align-items center
justify-content space-between
margin-bottom .6rem
>span >span
display block display block
text-align right color #ccc
font-size .9rem font-size .9rem
margin-right 1rem
.list-wrapper .list-wrapper
height 80% height 80%
overflow-y scroll overflow-y scroll
...@@ -90,6 +95,11 @@ export default { ...@@ -90,6 +95,11 @@ export default {
align-items center align-items center
justify-content space-between justify-content space-between
line-height 2.5 line-height 2.5
p
max-width 55%
overflow hidden
white-space nowrap
text-overflow ellipsis
.bar-wrapper .bar-wrapper
flex 1 flex 1
margin 0 .5rem margin 0 .5rem
......
src/views/components/disease/disease-forecast.vue
View file @ 00df0431
...@@ -129,7 +129,7 @@ export default { ...@@ -129,7 +129,7 @@ export default {
}, },
series: [], series: [],
dataZoom: [{ dataZoom: [{
start: 50, start: 0,
end: 100, end: 100,
backgroundColor: '#105179', backgroundColor: '#105179',
fillerColor: '#46b9ef', fillerColor: '#46b9ef',
...@@ -186,6 +186,7 @@ export default { ...@@ -186,6 +186,7 @@ export default {
.disease-forecast .disease-forecast
width 100% width 100%
height 100% height 100%
overflow hidden
>.chart >.chart
width 100% width 100%
height 95% height 95%
......
src/views/components/disease/disease-map.vue
View file @ 00df0431
...@@ -64,7 +64,7 @@ export default { ...@@ -64,7 +64,7 @@ export default {
return ({data}) => { return ({data}) => {
const {data: info} = data const {data: info} = data
return ` return `
<div class="disease-map-tooltip-info"> <div class="map-tooltip-info">
<h3>${data.name}</h3> <h3>${data.name}</h3>
<p><span>联系人：</span>${info.name}</p> <p><span>联系人：</span>${info.name}</p>
<p><span>联系电话：</span>${info.phone}</p> <p><span>联系电话：</span>${info.phone}</p>
...@@ -240,7 +240,7 @@ export default { ...@@ -240,7 +240,7 @@ export default {
z-index 99 z-index 99
</style> </style>
<style lang="stylus"> <style lang="stylus">
.disease-map-tooltip-info .map-tooltip-info
color $edgeColor color $edgeColor
padding 1rem padding 1rem
border .1rem solid $edgeColor border .1rem solid $edgeColor
......
src/views/components/disease/special-monitoring.vue
View file @ 00df0431
...@@ -52,6 +52,7 @@ export default { ...@@ -52,6 +52,7 @@ export default {
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgba(91,213,255,0.1)' color: 'rgba(91,213,255,0.1)'
...@@ -71,7 +72,7 @@ export default { ...@@ -71,7 +72,7 @@ export default {
// name: '单位：个', // name: '单位：个',
max: 150, max: 150,
min: 0, min: 0,
interval: 30, // interval: 30,
axisLine: { axisLine: {
show: false, show: false,
}, },
...@@ -96,7 +97,7 @@ export default { ...@@ -96,7 +97,7 @@ export default {
// name: '单位：个', // name: '单位：个',
max: 350, max: 350,
min: 0, min: 0,
interval: 70, // interval: 70,
axisLine: { axisLine: {
show: false, show: false,
}, },
...@@ -158,6 +159,9 @@ export default { ...@@ -158,6 +159,9 @@ export default {
{name: '阳性监测点数量', itemStyle: {color: 'gold'}, type: 'line', data: list.map(item => item.data1)}, {name: '阳性监测点数量', itemStyle: {color: 'gold'}, type: 'line', data: list.map(item => item.data1)},
{name: '阳性样品数量', itemStyle: {color: 'red'}, yAxisIndex: 1, type: 'line', data: list.map(item => item.data2)}, {name: '阳性样品数量', itemStyle: {color: 'red'}, yAxisIndex: 1, type: 'line', data: list.map(item => item.data2)},
] ]
const max = Math.max(...list.map(item => item.data1), ...list.map(item => item.data2))
this.option.yAxis[0].max = max
this.option.yAxis[1].max = max
this.chart.setOption(this.option) this.chart.setOption(this.option)
}, },
} }
......
src/views/components/disease/team-build.vue
View file @ 00df0431
<template> <template>
<div class="team-build"> <div class="team-build">
<div v-if="showChart"> <div>
<m-chart :data="data" :config="config"/> <!-- <m-chart :data="data" :config="config"/> -->
<div v-for="item in data" :key="item.name">
<span>{{item.name}}:</span>
<m-count :value="item.value" :decimal="0" :color="item.color"/> 人
</div> </div>
<div v-if="showChart"> </div>
<div class="chart-wrapper" v-if="showChart">
<p>能力建设</p>
<span>单位：次</span>
<div>
<m-chart :data="data2" :config="config2" :options="{xAxis: {splitLine: {show: false}}, yAxis: {splitLine: {show: false}}}"/> <m-chart :data="data2" :config="config2" :options="{xAxis: {splitLine: {show: false}}, yAxis: {splitLine: {show: false}}}"/>
</div> </div>
</div>
<Select v-model="area" @on-change="handleChange" class="custom-select" size="small" transfer> <Select v-model="area" @on-change="handleChange" class="custom-select" size="small" transfer>
<Option v-for="item in options" :key="item" :value="item">{{item}}</Option> <Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
</Select> </Select>
...@@ -49,20 +57,10 @@ export default { ...@@ -49,20 +57,10 @@ export default {
showChart: false, showChart: false,
area: '华北地区', area: '华北地区',
options: ['华北地区', '华东地区', '华南地区', '华西地区', '华中地区'], options: ['华北地区', '华东地区', '华南地区', '华西地区', '华中地区'],
config: {
colors: ['#535af1', '#39d655', '#ffd825'],
legend: {
align: 'left',
orient: 'vertical',
},
shape: [
{type: 'pie', radius: [20 * Number((screen.height / 800).toFixed(1)), 50 * Number((screen.height / 800).toFixed(1))], roseType: 'radius', center: ['65%', '70%']}
]
},
data: [ data: [
{name: '执业人员', value: 168}, {name: '执业人员', value: 168, color: '#535af1'},
{name: '乡村兽医', value: 1585}, {name: '乡村兽医', value: 1585, color: '#39d655'},
{name: '官方兽医', value: 23654}, {name: '官方兽医', value: 23654, color: '#ffd825'},
], ],
config2: { config2: {
colors: ['#00d2ff'], colors: ['#00d2ff'],
...@@ -101,9 +99,28 @@ export default { ...@@ -101,9 +99,28 @@ export default {
width 100% width 100%
height 100% height 100%
display flex display flex
flex-direction column
overflow hidden
>div >div
flex 1
&:first-child &:first-child
border-right .1rem solid #175d83 display flex
margin-right 1rem align-items center
justify-content space-around
border-bottom .1rem solid #175d83
line-height 2.5
&.chart-wrapper
flex 1
position relative
>div
width 100%
height calc(100% - 3rem)
p
text-align center
margin .5rem 0
font-weight bold
span
position absolute
top .5rem
left .5rem
font-size .9rem
</style> </style>
src/views/components/fishing-price/fishing-price-map.vue
View file @ 00df0431
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<h2><m-count class="count" :value="80" :decimal="0"/> 个</h2> <h2><m-count class="count" :value="80" :decimal="0"/> 个</h2>
</BorderBox> </BorderBox>
<div class="map" ref="map"/> <div class="map" ref="map"/>
<div class="visual-range"> <!-- <div class="visual-range">
<p> <p>
采集点数量<br/> 采集点数量<br/>
<span>（单位：个）</span> <span>（单位：个）</span>
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<m-count class="count" :value="0" :decimal="0"/> <m-count class="count" :value="0" :decimal="0"/>
<m-count class="count" :value="80" :decimal="0"/> <m-count class="count" :value="80" :decimal="0"/>
</div> </div>
</div> </div> -->
</div> </div>
</template> </template>
...@@ -162,7 +162,7 @@ export default { ...@@ -162,7 +162,7 @@ export default {
return ({data}) => { return ({data}) => {
if (data.name && data.address) { if (data.name && data.address) {
return ` return `
<div class="disease-map-tooltip-info"> <div class="map-tooltip-info">
<h3>${data.name}</h3> <h3>${data.name}</h3>
<p><span>地址：</span>${data.address}</p> <p><span>地址：</span>${data.address}</p>
<p><span>最新采集时间：</span>${data.newDate}</p> <p><span>最新采集时间：</span>${data.newDate}</p>
...@@ -349,6 +349,7 @@ export default { ...@@ -349,6 +349,7 @@ export default {
width 100% width 100%
height 100% height 100%
position relative position relative
padding-top 3rem
>.map >.map
position absolute position absolute
width 45% width 45%
...@@ -389,7 +390,7 @@ export default { ...@@ -389,7 +390,7 @@ export default {
right 0 right 0
</style> </style>
<style lang="stylus"> <style lang="stylus">
.disease-map-tooltip-info .map-tooltip-info
color $edgeColor color $edgeColor
padding 1rem padding 1rem
border .1rem solid $edgeColor border .1rem solid $edgeColor
......
src/views/components/fishing-price/price-analysis.vue
View file @ 00df0431
<template> <template>
<div class="price-analysis" v-if="showChart"> <div class="price-analysis" v-if="showChart">
<m-chart :config="config" :data="data"/> <m-chart :config="config" :data="data"/>
<Select v-model="type" class="custom-select" @on-change="setChartData" size="small" transfer> <Select :value="type" class="custom-select" multiple :max-tag-count="3" @on-change="handleChange" size="small" transfer>
<Option v-for="item in options" :key="item" :value="item">{{item}}</Option> <Option v-for="item in options" :key="item.name" :disabled="item.disabled" :value="item.name">{{item.name}}</Option>
</Select> </Select>
</div> </div>
</template> </template>
<script> <script>
const mock = [ const mock = [
{type: '青鱼', date: '2020-03', value: 23}, {type: '青鱼', date: '2020.08', value: 22},
{type: '青鱼', date: '2020-04', value: 21}, {type: '青鱼', date: '2020.09', value: 23},
{type: '青鱼', date: '2020-05', value: 23}, {type: '青鱼', date: '2020.10', value: 22},
{type: '青鱼', date: '2020-06', value: 22}, {type: '青鱼', date: '2020.11', value: 22},
{type: '青鱼', date: '2020-07', value: 22}, {type: '青鱼', date: '2020.12', value: 22},
{type: '青鱼', date: '2020-08', value: 22}, {type: '草鱼', date: '2020.08', value: 11},
{type: '青鱼', date: '2020-09', value: 23}, {type: '草鱼', date: '2020.09', value: 10},
{type: '青鱼', date: '2020-10', value: 22}, {type: '草鱼', date: '2020.10', value: 16},
{type: '青鱼', date: '2020-11', value: 22}, {type: '草鱼', date: '2020.11', value: 12},
{type: '草鱼', date: '2020-03', value: 18}, {type: '草鱼', date: '2020.12', value: 12},
{type: '草鱼', date: '2020-04', value: 16}, {type: '鲢', date: '2020.08', value: 7},
{type: '草鱼', date: '2020-05', value: 18}, {type: '鲢', date: '2020.09', value: 8},
{type: '草鱼', date: '2020-06', value: 10}, {type: '鲢', date: '2020.10', value: 7},
{type: '草鱼', date: '2020-07', value: 18}, {type: '鲢', date: '2020.11', value: 6},
{type: '草鱼', date: '2020-08', value: 11}, {type: '鲢', date: '2020.12', value: 6},
{type: '草鱼', date: '2020-09', value: 10}, {type: '鳙', date: '2020.08', value: 10},
{type: '草鱼', date: '2020-10', value: 16}, {type: '鳙', date: '2020.09', value: 15},
{type: '草鱼', date: '2020-11', value: 12}, {type: '鳙', date: '2020.10', value: 10},
{type: '鲢', date: '2020-03', value: 7}, {type: '鳙', date: '2020.11', value: 14},
{type: '鲢', date: '2020-04', value: 10}, {type: '鳙', date: '2020.12', value: 14},
{type: '鲢', date: '2020-05', value: 5}, {type: '南美白对虾', date: '2020.08', value: 51},
{type: '鲢', date: '2020-06', value: 6}, {type: '南美白对虾', date: '2020.09', value: 47},
{type: '鲢', date: '2020-07', value: 7}, {type: '南美白对虾', date: '2020.10', value: 97},
{type: '鲢', date: '2020-08', value: 7}, {type: '南美白对虾', date: '2020.11', value: 89},
{type: '鲢', date: '2020-09', value: 8}, {type: '南美白对虾', date: '2020.12', value: 89},
{type: '鲢', date: '2020-10', value: 7}, {type: '中华绒螯蟹', date: '2020.08', value: 162},
{type: '鲢', date: '2020-11', value: 6}, {type: '中华绒螯蟹', date: '2020.09', value: 168},
{type: '鳙', date: '2020-03', value: 10}, {type: '中华绒螯蟹', date: '2020.10', value: 145},
{type: '鳙', date: '2020-04', value: 18}, {type: '中华绒螯蟹', date: '2020.11', value: 162},
{type: '鳙', date: '2020-05', value: 12}, {type: '中华绒螯蟹', date: '2020.12', value: 162},
{type: '鳙', date: '2020-06', value: 12}, {type: '克氏原螯虾', date: '2020.08', value: 33},
{type: '鳙', date: '2020-07', value: 16}, {type: '克氏原螯虾', date: '2020.09', value: 31},
{type: '鳙', date: '2020-08', value: 10}, {type: '克氏原螯虾', date: '2020.10', value: 43},
{type: '鳙', date: '2020-09', value: 15}, {type: '克氏原螯虾', date: '2020.11', value: 37},
{type: '鳙', date: '2020-10', value: 10}, {type: '克氏原螯虾', date: '2020.12', value: 37},
{type: '鳙', date: '2020-11', value: 14},
{type: '南美白对虾', date: '2020-03', value: 50},
{type: '南美白对虾', date: '2020-04', value: 46},
{type: '南美白对虾', date: '2020-05', value: 106},
{type: '南美白对虾', date: '2020-06', value: 95},
{type: '南美白对虾', date: '2020-07', value: 80},
{type: '南美白对虾', date: '2020-08', value: 51},
{type: '南美白对虾', date: '2020-09', value: 47},
{type: '南美白对虾', date: '2020-10', value: 97},
{type: '南美白对虾', date: '2020-11', value: 89},
{type: '中华绒螯蟹', date: '2020-03', value: 60},
{type: '中华绒螯蟹', date: '2020-04', value: 89},
{type: '中华绒螯蟹', date: '2020-05', value: 112},
{type: '中华绒螯蟹', date: '2020-06', value: 128},
{type: '中华绒螯蟹', date: '2020-07', value: 65},
{type: '中华绒螯蟹', date: '2020-08', value: 162},
{type: '中华绒螯蟹', date: '2020-09', value: 168},
{type: '中华绒螯蟹', date: '2020-10', value: 145},
{type: '中华绒螯蟹', date: '2020-11', value: 162},
{type: '克氏原螯虾', date: '2020-03', value: 42},
{type: '克氏原螯虾', date: '2020-04', value: 31},
{type: '克氏原螯虾', date: '2020-05', value: 38},
{type: '克氏原螯虾', date: '2020-06', value: 43},
{type: '克氏原螯虾', date: '2020-07', value: 34},
{type: '克氏原螯虾', date: '2020-08', value: 33},
{type: '克氏原螯虾', date: '2020-09', value: 31},
{type: '克氏原螯虾', date: '2020-10', value: 43},
{type: '克氏原螯虾', date: '2020-11', value: 37},
] ]
export default { export default {
name: 'PriceAnalysis', name: 'PriceAnalysis',
data() { data() {
return { return {
type: '青鱼', type: ['青鱼'],
options: [ options: [
'青鱼', {name: '青鱼', disabled: false},
'草鱼', {name: '草鱼', disabled: false},
'鲢', {name: '鲢', disabled: false},
'鳙', {name: '鳙', disabled: false},
'南美白对虾', {name: '南美白对虾', disabled: false},
'中华绒螯蟹', {name: '中华绒螯蟹', disabled: false},
'克氏原螯虾' {name: '克氏原螯虾', disabled: false},
], ],
showChart: false, showChart: false,
config: { config: {
colors: ['#eeb514', '#5eec67', '#01adfe'], colors: ['#eeb514', '#5eec67', '#01adfe'],
legend: {align: 'right'}, legend: {align: 'right'},
shape: [ shape: [
{key: 'value', type: 'line'}, // {key: 'value', type: 'line'},
// {key: 'fish2', name: '鲫鱼', type: 'line'}, // {key: 'fish2', name: '鲫鱼', type: 'line'},
// {key: 'fish3', name: '南美白对虾', type: 'line'}, // {key: 'fish3', name: '南美白对虾', type: 'line'},
], ],
yAxis: { yAxis: {
name: '元', name: '单位：元',
// max: 50, // max: 50,
}, },
xAxis: { xAxis: {
...@@ -120,8 +92,34 @@ export default { ...@@ -120,8 +92,34 @@ export default {
this.setChartData(this.type) this.setChartData(this.type)
}, },
methods: { methods: {
handleChange(type) {
this.type = type
this.setChartData(type)
this.options.forEach(item => item.disabled = (type.length >= 3 && type.indexOf(item.name) < 0))
},
setChartData(type) { setChartData(type) {
this.data = mock.filter(item => item.type === type) let result = []
const totalNumbers = []
this.config.shape = type.map((item, i) => {
if (result.length === 0) {
result = mock.filter(e => e.type === item).map(e => {
totalNumbers.push(e.value)
return {date: e.date, [`fish${i+1}`]: e.value, }
})
} else {
const list = mock.filter(e => e.type === item)
result.forEach(e => {
const {value} = list.find(f => f.date === e.date)
totalNumbers.push(value || 0)
e[`fish${i+1}`] = value || 0
})
}
return {key: `fish${i+1}`, name: item, type: 'line'}
})
// this.config.yAxis.max = Math.max(...totalNumbers) + 1
this.config.yAxis.min = Math.min(...totalNumbers) - 1
this.data = result
console.log(this.data, this.config.shape)
}, },
} }
} }
...@@ -131,4 +129,5 @@ export default { ...@@ -131,4 +129,5 @@ export default {
.price-analysis .price-analysis
width 100% width 100%
height 100% height 100%
overflow hidden
</style> </style>
src/views/components/fishing-price/price-trend.vue
View file @ 00df0431
...@@ -11,7 +11,8 @@ const mock = [ ...@@ -11,7 +11,8 @@ const mock = [
{date: '2020年3月', val1: 0.9725, val2: 0.9674, val3: 0.9746, val4: 0.9639, val5: 0.9697, val6: 0.9718}, {date: '2020年3月', val1: 0.9725, val2: 0.9674, val3: 0.9746, val4: 0.9639, val5: 0.9697, val6: 0.9718},
{date: '2020年2月', val1: 0.9889, val2: 0.9814, val3: 0.9564, val4: 0.9603, val5: 1.03, val6: 1.008}, {date: '2020年2月', val1: 0.9889, val2: 0.9814, val3: 0.9564, val4: 0.9603, val5: 1.03, val6: 1.008},
{date: '2020年1月', val1: 1.0154, val2: 1.015, val3: 1.1018, val4: 1.0952, val5: 0.906, val6: 0.9134}, {date: '2020年1月', val1: 1.0154, val2: 1.015, val3: 1.1018, val4: 1.0952, val5: 0.906, val6: 0.9134},
{date: '2019年12月', val1: 1.309, val2: 1.1943, val3: 1.0447, val4: 1.0434, val5: 1.6439, val6: 1.3855}, {date: '2019年12月', val1: 1.109, val2: 1.1943, val3: 1.0447, val4: 1.0434, val5: 1.1439, val6: 1.1855},
// {date: '2019年12月', val1: 1.309, val2: 1.1943, val3: 1.0447, val4: 1.0434, val5: 1.6439, val6: 1.3855},
{date: '2019年11月', val1: 0.9906, val2: 0.9933, val3: 1.0069, val4: 1.0062, val5: 0.9699, val6: 0.977}, {date: '2019年11月', val1: 0.9906, val2: 0.9933, val3: 1.0069, val4: 1.0062, val5: 0.9699, val6: 0.977},
{date: '2019年10月', val1: 0.9848, val2: 0.9826, val3: 0.9895, val4: 0.9882, val5: 0.9789, val6: 0.9755}, {date: '2019年10月', val1: 0.9848, val2: 0.9826, val3: 0.9895, val4: 0.9882, val5: 0.9789, val6: 0.9755},
{date: '2019年9月', val1: 0.9864, val2: 0.9825, val3: 0.9718, val4: 0.9731, val5: 1.0049, val6: 0.9943}, {date: '2019年9月', val1: 0.9864, val2: 0.9825, val3: 0.9718, val4: 0.9731, val5: 1.0049, val6: 0.9943},
...@@ -63,8 +64,8 @@ export default { ...@@ -63,8 +64,8 @@ export default {
}, },
grid: { grid: {
top: '30%', top: '30%',
left: '5%', left: '3%',
right: '1%', right: '3%',
bottom: 'auto', bottom: 'auto',
width: 'auto', width: 'auto',
height: '60%', height: '60%',
...@@ -90,8 +91,8 @@ export default { ...@@ -90,8 +91,8 @@ export default {
{ {
type: 'value', type: 'value',
// name: '单位：个', // name: '单位：个',
max: 1.8, max: 1.2,
min: 0.8, min: 0.9,
// interval: 0.05, // interval: 0.05,
axisLine: { axisLine: {
show: false, show: false,
......
src/views/components/fishing-price/trade-situation.vue
View file @ 00df0431
...@@ -59,7 +59,7 @@ export default { ...@@ -59,7 +59,7 @@ export default {
return { return {
showChart: false, showChart: false,
config: { config: {
colors: ['#3967fc', '#38fd8d', '#f3ff33', '#ffb529', '#ff4747'], colors: ['#38fd8d', '#8c7eee', '#f3ff33', '#ffb529', '#ff4747', '#47B3FF'],
legend: { legend: {
hide: true, hide: true,
}, },
......
src/views/components/quality-safety/company-rate.vue
View file @ 00df0431
<template> <template>
<div class="company-rate"> <div class="company-rate" v-if="showChart">
<m-chart :data="data" :config="config"/> <m-chart :data="data" :config="config" :options="{legend: {top: '15%'}}"/>
</div> </div>
</template> </template>
...@@ -8,11 +8,35 @@ ...@@ -8,11 +8,35 @@
export default { export default {
name: 'CompanyRate', name: 'CompanyRate',
data() { data() {
return {} return {
showChart: false,
config: {
colors: ['#0f4aff', '#ff9e45', '#edfe63', '#8f45ee', '#05f8e8'],
legend: {
align: 'right',
orient: 'vertical',
}, },
shape: [
{type: 'pie', radius: [20 * Number((screen.height / 800).toFixed(1)), 80 * Number((screen.height / 800).toFixed(1))], roseType: 'radius', center: ['30%', '50%']}
]
},
data: [
{name: '江苏', value: 900},
{name: '湖北', value: 847},
{name: '江西', value: 400},
{name: '海南', value: 300},
{name: '河南', value: 200},
],
}
},
mounted() {
setTimeout(() => this.showChart = true, 0)
}
} }
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.company .company-rate
width 100%
height 100%
</style> </style>
src/views/components/quality-safety/forecast.vue 0 → 100644
View file @ 00df0431
<template>
<div class="forecast">
<div class="chart" ref="chart" />
</div>
</template>
<script>
const mock = [
{name: '2019.10', value: 102},
{name: '2019.11', value: 280},
{name: '2019.12', value: 266},
{name: '2020.01', value: 256},
{name: '2020.02', value: 231},
{name: '2020.03', value: 337},
{name: '2020.04', value: 292},
{name: '2020.05', value: 266},
{name: '2020.06', value: 240},
{name: '2020.07', value: 142},
]
import echarts from 'echarts'
export default {
name: 'Forecast',
data() {
return {
chart: null,
option: {
tooltip: {
trigger: 'axis',
},
grid: {
top: '16%',
left: '5%',
right: '5%',
bottom: '10%',
width: 'auto',
height: 'auto',
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: 'rgba(91,213,255,0.1)'
}
},
axisLabel: {
textStyle: {
color: '#5bd5ff',
},
fontSize: this.fontSize,
},
data: mock.map(item => item.name)
},
yAxis: {
type: 'value',
name: '单位：次',
max: 500,
min: 0,
// interval: 100,
axisLine: {
show: false,
},
axisLabel: {
textStyle: {
color: '#fff',
},
fontSize: this.fontSize,
},
nameTextStyle: {
color: '#fff',
fontSize: this.fontSize,
},
splitLine: {
lineStyle: {
color: 'rgba(91,213,255,0.1)'
}
},
},
series: [],
dataZoom: [{
start: 0,
end: 100,
backgroundColor: '#105179',
fillerColor: '#46b9ef',
borderColor: 'transparent',
bottom: '2%',
height: 10,
borderRadius: 10,
handleSize: '200%',
handleStyle: {
color: '#fff',
},
textStyle: {
color: '#fff',
},
}],
}
}
},
mounted() {
// this.$nextTick(this.init)
setTimeout(this.init, 0)
},
computed: {
fontSize() {
return Math.floor(screen.height * 1.48 / 100)
},
},
methods: {
init() {
this.chart = this.$echarts.init(this.$refs.chart)
this.setChartData()
},
setChartData() {
const list = mock.map(item => item.value)
this.option.series = [
{
itemStyle: {color: 'gold'}, areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: 'rgba(255,215,0,0.8)'},
{offset: 1, color: 'rgba(255,215,0,0.1)'}
])},
smooth: true, type: 'line', data: list
},
]
this.option.yAxis = Object.assign(this.option.yAxis, {max: Math.max(...list)})
this.chart.setOption(this.option)
},
}
}
</script>
<style lang="stylus" scoped>
.forecast
width 100%
height 100%
>.chart
width 100%
height 95%
</style>
src/views/components/quality-safety/medicine-flow.vue 0 → 100644
View file @ 00df0431
<template>
<div class="medicine-flow" v-if="showChart">
<m-chart :data="data" :config="config" :options="{legend: {top: '10%'}}"/>
<Select v-model="type" class="custom-select" size="small" transfer>
<Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
</Select>
</div>
</template>
<script>
export default {
name: 'MedicineFlow',
data() {
return {
showChart: false,
type: '杀虫药',
options: ['杀虫药'],
config: {
colors: ['#8c7eee', '#57e8ed', '#feb301', '#f49a8f', '#fda4bd', '#f3729b', '#f87be2', '#e95dc1'],
legend: {
align: 'right',
orient: 'vertical',
},
shape: [
{type: 'pie', radius: [40 * Number((screen.height / 800).toFixed(1)), 70 * Number((screen.height / 800).toFixed(1))], center: ['30%', '50%']}
]
},
data: [
{name: '江苏省', value: 24.2},
{name: '四川省', value: 24},
{name: '贵州省', value: 14},
{name: '山东省', value: 14},
{name: '安徽省', value: 14},
{name: '浙江省', value: 10},
{name: '陕西省', value: 10},
{name: '辽宁省', value: 10},
],
}
},
mounted() {
setTimeout(() => this.showChart = true, 0)
}
}
</script>
<style lang="stylus" scoped>
.medicine-flow
width 100%
height 100%
</style>
src/views/components/quality-safety/medicine-frequency.vue 0 → 100644
View file @ 00df0431
<template>
<div class="medicine-frequency">
<Select v-model="type" class="custom-select" size="small" transfer>
<Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
</Select>
<p class="custom-select" style="color:#d04e4b;left:0.5rem;">安全值：15次</p>
<Row class="row row-title">
<i-col class="col" v-for="col in layout" :key="col.key" :span="col.width" :offset="col.offset || 0">
<div :style="`text-align: ${col.align || 'left'};width:100%;`">{{col.title}}</div>
</i-col>
</Row>
<m-scroll :length="model.length" :limit="5">
<Row class="row" v-for="(row, rowIndex) in model" :key="rowIndex" :style="`${row.count >= 15 ? 'color:#d04e4b': ''}`">
<i-col class="col" v-for="col in layout" :key="col.key" :span="col.width" :offset="col.offset || 0">
<div :style="`text-align: ${col.align || 'left'};color: ${col.color};width:100%;`">{{row[col.key]}}</div>
</i-col>
</Row>
</m-scroll>
</div>
</template>
<script>
const mock = [
{name: '张恒', date: '2020年7月购买杀虫药', count: 10},
{name: '张恒', date: '2020年7月购买杀虫药', count: 13},
{name: '张恒', date: '2020年7月购买杀虫药', count: 10},
{name: '张恒', date: '2020年7月购买杀虫药', count: 18},
{name: '张恒', date: '2020年7月购买杀虫药', count: 20},
{name: '张恒', date: '2020年7月购买杀虫药', count: 11},
]
export default {
name: 'MedicineFrequency',
data() {
return {
type: '杀虫药',
options: ['杀虫药'],
layout: [
{
title: '姓名',
key: 'name',
width: 6,
align: 'center',
},
{
title: '时间',
key: 'date',
width: 12,
align: 'center',
},
{
title: '次数',
key: 'count',
width: 6,
align: 'center',
},
],
model: mock,
}
},
}
</script>
<style lang="stylus" scoped>
.medicine-frequency
width 100%
height 100%
overflow hidden
.row
display flex
align-items center
// line-height 2.4rem
line-height 2.5
&.row-title
font-weight bold
background-color $color-map()
font-size 1rem
&:nth-child(2n)
background-color $color-map(0.15)
.col
padding 0 .5rem
display flex
align-items center
flex-wrap wrap
font-size .9rem
</style>
src/views/components/quality-safety/online.vue 0 → 100644
View file @ 00df0431
<template>
<div class="online">
<m-scroll :length="list.length" :limit="6">
<div class="item" v-for="(item, i) in list" :key="i">
<p>{{i+1}}. {{item.question}}</p>
<span :style="`color:${getColor(item.status)}`">{{item.date}} {{item.status ? '已处理' : '未处理'}}</span>
</div>
</m-scroll>
</div>
</template>
<script>
export default {
name: 'Online',
data() {
return {
list: [
{date: '2020-08-23', question: '病鱼上颚、眼眶出血、腹腔有淡黄色液体…………', status: 0},
{date: '2020-08-23', question: '病鱼上颚、眼眶出血、腹腔有淡黄色液体…………', status: 0},
{date: '2020-08-23', question: '病鱼上颚、眼眶出血、腹腔有淡黄色液体…………', status: 0},
{date: '2020-08-23', question: '病鱼上颚、眼眶出血、腹腔有淡黄色液体…………', status: 0},
{date: '2020-08-23', question: '病鱼上颚、眼眶出血、腹腔有淡黄色液体…………', status: 0},
{date: '2020-08-23', question: '病鱼上颚、眼眶出血、腹腔有淡黄色液体…………', status: 1},
{date: '2020-08-23', question: '病鱼上颚、眼眶出血、腹腔有淡黄色液体…………', status: 1},
],
}
},
methods: {
getColor(status) {
return status ? '#3897b5' : '#d04e4b'
}
}
}
</script>
<style lang="stylus" scoped>
.online
width 100%
height 100%
overflow hidden
.item
display flex
align-items center
justify-content space-between
line-height 2.5
border-bottom .1rem solid $color-map(.6)
>p
width 66%
overflow hidden
white-space nowrap
text-overflow ellipsis
>span
font-size .9rem
</style>
src/views/components/quality-safety/qualified-rate.vue 0 → 100644
View file @ 00df0431
<template>
<div class="qualified-rate">
<div v-for="item in list" :key="item.name">
<i-circle
:percent="item.value"
:size="80 * sizeRate"
:trail-width="6 * sizeRate"
:stroke-color="item.color"
trail-color="rgba(255,255,255,0.1)">
<span :style="`color:${item.color};font-size:1.5rem;font-weight:bold;`">{{item.value}}%</span>
</i-circle>
<p :style="`color:${item.color}`">{{item.name}}</p>
</div>
</div>
</template>
<script>
export default {
name: 'QualifiedRate',
data() {
return {
list: [
{name: '孔雀石绿', value: 80, color: '#4ec6fd'},
{name: '硝基呋喃', value: 72, color: '#40fdfc'},
{name: '氯霉素', value: 20, color: '#fdd80a'},
]
}
},
computed: {
sizeRate() {
return Number((screen.height / 800).toFixed(1))
},
}
}
</script>
<style lang="stylus" scoped>
.qualified-rate
width 100%
height 100%
display flex
align-items center
justify-content space-around
>div
p
font-size 1.2rem
text-align center
font-weight bold
margin-top 1rem
</style>
src/views/components/quality-safety/quality-map.vue 0 → 100644
View file @ 00df0431
<template>
<div class="map-wrapper">
<BorderBox class="sum">
<div>
<p>查询量</p>
<h2><m-count class="count" :value="5441" :decimal="0"/>万</h2>
</div>
<div>
<p>追溯码打印量</p>
<h2><m-count class="count" :value="365" :decimal="0"/>万</h2>
</div>
</BorderBox>
<div class="map" ref="map"/>
</div>
</template>
<script>
import china from 'echarts/map/json/china.json'
import BorderBox from '../border-box'
const provinceData = [
{ name: '北京', value: 177 },
{ name: '天津', value: 42 },
{ name: '河北', value: 102 },
{ name: '山西', value: 81 },
{ name: '内蒙古', value: 17 },
{ name: '辽宁', value: 67 },
{ name: '吉林', value: 182 },
{ name: '黑龙江', value: 100 },
{ name: '上海', value: 24 },
{ name: '江苏', value: 299 },
{ name: '浙江', value: 114 },
{ name: '安徽', value: 29 },
{ name: '福建', value: 316 },
{ name: '江西', value: 91 },
{ name: '山东', value: 19 },
{ name: '河南', value: 137 },
{ name: '湖北', value: 26 },
{ name: '湖南', value: 114 },
{ name: '重庆', value: 91 },
{ name: '四川', value: 25 },
{ name: '贵州', value: 62 },
{ name: '云南', value: 83 },
{ name: '西藏', value: 9 },
{ name: '陕西', value: 80 },
{ name: '甘肃', value: 256 },
{ name: '青海', value: 10 },
{ name: '宁夏', value: 18 },
{ name: '新疆', value: 67 },
{ name: '广东', value: 123 },
{ name: '广西', value: 59 },
{ name: '海南', value: 14 }
]
export default {
name: 'QualityMap',
components: {
BorderBox,
},
props: {
data: {
type: Array,
default() {
return []
}
},
visualLabel: {
type: Array,
default() {
return ['高', '低']
}
},
visualFormatter: {
type: [String, Function],
default() {
return ({data}) => {
return `
<div class="map-tooltip-info">
<h3>${data.name}</h3>
<p><span>追溯企业数量：</span>${data.value} 个</p>
</div>
`
}
}
},
visualConfig: {
type: Object,
default() {
return {}
}
},
},
data() {
return {
range: [0, 80],
map: null,
mapName: 'china',
config: {
geo: {
map: 'china',
left: '1%',
right: '1%',
// top: 'auto',
// bottom: '10%',
zoom: 1, //当前视角的缩放比例
// roam: true, //是否开启平游或缩放
// scaleLimit: { //滚轮缩放的极限控制
// min: 0.8,
// max: 2,
// },
label: {
normal: {
show: true,
color: '#fff',
fontSize: 12 * this.sizeRate,
},
emphasis: {
color: '#fff',
fontSize: 15 * this.sizeRate,
// fontFamily: 'Pangmenzhengdao',
}
},
itemStyle: {
normal: {
// areaColor: 'rgba(91, 213, 255, 0.2)',
borderColor: 'rgba(91, 213, 255, 0.9)',
borderWidth: 0.5,
},
emphasis: {
areaColor: '#069ae1',
}
},
regions: [],
},
series: []
},
curProvince: null,
}
},
mounted() {
this.$nextTick(this.initMap)
},
computed: {
sizeRate() {
return Number((screen.height / 800).toFixed(1))
},
},
methods: {
initMap() {
// 初始化echarts
this.$echarts.registerMap(this.mapName, china)
this.map = this.$echarts.init(this.$refs.map)
// this.addEvent()
this.config.series.push({
type: 'map',
map: this.mapName,
geoIndex: 0,
data: provinceData,
})
this.config.tooltip = {
trigger: 'item',
formatter: this.visualFormatter,
// extraCssText: `background-image:url(${require('@/assets/images/tooltip.png')});background-size:cover;`,
}
this.config.visualMap = Object.assign({
show: false,
inRange: {
// opacity: 1,
color: ['rgba(140,228,252,0.1)', '#0ed7e1', '#069ae1']
// color: ['rgba(91, 213, 255, 0.1)', 'rgba(91, 213, 255, 0.8)']
}
}, this.visualConfig)
this.map.setOption(this.config)
},
// addEvent() {
// // 监听地图点击事件
// this.map.on('click', (ev) => {
// const {name} = ev.data
// console.log(name)
// this.setRegions(name)
// this.curProvince = name
// this.$emit('select', name)
// })
// // 点击空白处则取消选中状态
// this.map.getZr().on('click', e => {
// if (!e.target && this.curProvince) {
// const name = this.curProvince
// this.setRegions(null)
// this.$emit('select', name)
// }
// })
// },
// setRegions(name) {
// this.curProvince = name
// if (!name) {
// this.config.geo.regions = []
// this.map.setOption(this.config)
// return
// }
// let regions = [{
// name,
// selected: true,
// itemStyle: {
// areaColor: '#5ad4ff',
// shadowColor: 'rgba(0, 0, 0, 1)',
// shadowBlur: 10,
// shadowOffsetY: 10,
// shadowOffsetX: -5,
// }
// }]
// if (this.config.geo.regions.length > 0 && this.config.geo.regions[0].name == name) {
// regions = []
// }
// this.config.geo.regions = regions
// this.map.setOption(this.config)
// },
},
}
</script>
<style lang="stylus" scoped>
.map-wrapper
width 100%
height 100%
position relative
>.map
position absolute
width 45%
height 300%
z-index 99
top 5%
>.sum
display flex
width 40%
margin 1rem auto 0
justify-content space-between
>div
text-align center
font-weight bold
h2,.count
color $edgeColor !important
font-family $font-pang !important
font-size 1.5rem !important
</style>
<style lang="stylus">
.map-tooltip-info
color $edgeColor
padding 1rem
border .1rem solid $edgeColor
span
color #fff
</style>
src/views/components/quality-safety/quality-warning.vue
View file @ 00df0431
...@@ -81,127 +81,127 @@ export default { ...@@ -81,127 +81,127 @@ export default {
computed: { computed: {
diseaseWarning() { diseaseWarning() {
return [ return [
{"type": "草鱼", "province": "北京市", "value": 10}, {'type': '草鱼', 'province': '北京市', 'value': 10},
{"type": "草鱼", "province": "天津市", "value": 70}, {'type': '草鱼', 'province': '天津市', 'value': 70},
{"type": "草鱼", "province": "河北省", "value": 16}, {'type': '草鱼', 'province': '河北省', 'value': 16},
{"type": "草鱼", "province": "辽宁省", "value": 30}, {'type': '草鱼', 'province': '辽宁省', 'value': 30},
{"type": "草鱼", "province": "吉林省", "value": 9}, {'type': '草鱼', 'province': '吉林省', 'value': 9},
{"type": "草鱼", "province": "黑龙江省", "value": 10}, {'type': '草鱼', 'province': '黑龙江省', 'value': 10},
{"type": "草鱼", "province": "上海市", "value": 19}, {'type': '草鱼', 'province': '上海市', 'value': 19},
{"type": "草鱼", "province": "江苏省", "value": 318}, {'type': '草鱼', 'province': '江苏省', 'value': 318},
{"type": "草鱼", "province": "浙江省", "value": 33}, {'type': '草鱼', 'province': '浙江省', 'value': 33},
{"type": "草鱼", "province": "安徽省", "value": 140}, {'type': '草鱼', 'province': '安徽省', 'value': 140},
{"type": "草鱼", "province": "福建省", "value": 242}, {'type': '草鱼', 'province': '福建省', 'value': 242},
{"type": "草鱼", "province": "江西省", "value": 212}, {'type': '草鱼', 'province': '江西省', 'value': 212},
{"type": "草鱼", "province": "山东省", "value": 84}, {'type': '草鱼', 'province': '山东省', 'value': 84},
{"type": "草鱼", "province": "河南省", "value": 141}, {'type': '草鱼', 'province': '河南省', 'value': 141},
{"type": "草鱼", "province": "湖北省", "value": 165}, {'type': '草鱼', 'province': '湖北省', 'value': 165},
{"type": "草鱼", "province": "湖南省", "value": 240}, {'type': '草鱼', 'province': '湖南省', 'value': 240},
{"type": "草鱼", "province": "广东省", "value": 294}, {'type': '草鱼', 'province': '广东省', 'value': 294},
{"type": "草鱼", "province": "广西", "value": 280}, {'type': '草鱼', 'province': '广西', 'value': 280},
{"type": "草鱼", "province": "重庆市", "value": 59}, {'type': '草鱼', 'province': '重庆市', 'value': 59},
{"type": "草鱼", "province": "四川省", "value": 125}, {'type': '草鱼', 'province': '四川省', 'value': 125},
{"type": "草鱼", "province": "贵州省", "value": 7}, {'type': '草鱼', 'province': '贵州省', 'value': 7},
{"type": "草鱼", "province": "云南省", "value": 17}, {'type': '草鱼', 'province': '云南省', 'value': 17},
{"type": "草鱼", "province": "陕西省", "value": 72}, {'type': '草鱼', 'province': '陕西省', 'value': 72},
{"type": "草鱼", "province": "甘肃省", "value": 7}, {'type': '草鱼', 'province': '甘肃省', 'value': 7},
{"type": "草鱼", "province": "宁夏", "value": 72}, {'type': '草鱼', 'province': '宁夏', 'value': 72},
{"type": "草鱼", "province": "新疆", "value": 4}, {'type': '草鱼', 'province': '新疆', 'value': 4},
{"type": "黄颡鱼", "province": "河北省", "value": 1}, {'type': '黄颡鱼', 'province': '河北省', 'value': 1},
{"type": "黄颡鱼", "province": "江苏省", "value": 3}, {'type': '黄颡鱼', 'province': '江苏省', 'value': 3},
{"type": "黄颡鱼", "province": "浙江省", "value": 11}, {'type': '黄颡鱼', 'province': '浙江省', 'value': 11},
{"type": "黄颡鱼", "province": "安徽省", "value": 2}, {'type': '黄颡鱼', 'province': '安徽省', 'value': 2},
{"type": "黄颡鱼", "province": "江西省", "value": 8}, {'type': '黄颡鱼', 'province': '江西省', 'value': 8},
{"type": "黄颡鱼", "province": "湖北省", "value": 11}, {'type': '黄颡鱼', 'province': '湖北省', 'value': 11},
{"type": "黄颡鱼", "province": "湖南省", "value": 4}, {'type': '黄颡鱼', 'province': '湖南省', 'value': 4},
{"type": "黄颡鱼", "province": "广东省", "value": 48}, {'type': '黄颡鱼', 'province': '广东省', 'value': 48},
{"type": "黄颡鱼", "province": "广西", "value": 33}, {'type': '黄颡鱼', 'province': '广西', 'value': 33},
{"type": "黄颡鱼", "province": "重庆市", "value": 2}, {'type': '黄颡鱼', 'province': '重庆市', 'value': 2},
{"type": "黄颡鱼", "province": "四川省", "value": 16}, {'type': '黄颡鱼', 'province': '四川省', 'value': 16},
{"type": "克氏原螯虾", "province": "江苏省", "value": 41}, {'type': '克氏原螯虾', 'province': '江苏省', 'value': 41},
{"type": "克氏原螯虾", "province": "安徽省", "value": 18}, {'type': '克氏原螯虾', 'province': '安徽省', 'value': 18},
{"type": "克氏原螯虾", "province": "湖北省", "value": 15}, {'type': '克氏原螯虾', 'province': '湖北省', 'value': 15},
{"type": "克氏原螯虾", "province": "四川省", "value": 1}, {'type': '克氏原螯虾', 'province': '四川省', 'value': 1},
{"type": "克氏原螯虾", "province": "贵州省", "value": 3}, {'type': '克氏原螯虾', 'province': '贵州省', 'value': 3},
{"type": "鲤", "province": "北京市", "value": 12}, {'type': '鲤', 'province': '北京市', 'value': 12},
{"type": "鲤", "province": "天津市", "value": 72}, {'type': '鲤', 'province': '天津市', 'value': 72},
{"type": "鲤", "province": "河北省", "value": 15}, {'type': '鲤', 'province': '河北省', 'value': 15},
{"type": "鲤", "province": "内蒙古", "value": 13}, {'type': '鲤', 'province': '内蒙古', 'value': 13},
{"type": "鲤", "province": "辽宁省", "value": 38}, {'type': '鲤', 'province': '辽宁省', 'value': 38},
{"type": "鲤", "province": "吉林省", "value": 26}, {'type': '鲤', 'province': '吉林省', 'value': 26},
{"type": "鲤", "province": "黑龙江省", "value": 60}, {'type': '鲤', 'province': '黑龙江省', 'value': 60},
{"type": "鲤", "province": "江苏省", "value": 38}, {'type': '鲤', 'province': '江苏省', 'value': 38},
{"type": "鲤", "province": "浙江省", "value": 28}, {'type': '鲤', 'province': '浙江省', 'value': 28},
{"type": "鲤", "province": "安徽省", "value": 3}, {'type': '鲤', 'province': '安徽省', 'value': 3},
{"type": "鲤", "province": "山东省", "value": 39}, {'type': '鲤', 'province': '山东省', 'value': 39},
{"type": "鲤", "province": "河南省", "value": 193}, {'type': '鲤', 'province': '河南省', 'value': 193},
{"type": "鲤", "province": "湖南省", "value": 8}, {'type': '鲤', 'province': '湖南省', 'value': 8},
{"type": "鲤", "province": "广东省", "value": 9}, {'type': '鲤', 'province': '广东省', 'value': 9},
{"type": "鲤", "province": "广西", "value": 56}, {'type': '鲤', 'province': '广西', 'value': 56},
{"type": "鲤", "province": "重庆市", "value": 2}, {'type': '鲤', 'province': '重庆市', 'value': 2},
{"type": "鲤", "province": "四川省", "value": 44}, {'type': '鲤', 'province': '四川省', 'value': 44},
{"type": "鲤", "province": "贵州省", "value": 6}, {'type': '鲤', 'province': '贵州省', 'value': 6},
{"type": "鲤", "province": "云南省", "value": 5}, {'type': '鲤', 'province': '云南省', 'value': 5},
{"type": "鲤", "province": "陕西省", "value": 47}, {'type': '鲤', 'province': '陕西省', 'value': 47},
{"type": "鲤", "province": "甘肃省", "value": 7}, {'type': '鲤', 'province': '甘肃省', 'value': 7},
{"type": "鲤", "province": "宁夏", "value": 49}, {'type': '鲤', 'province': '宁夏', 'value': 49},
{"type": "鲤", "province": "新疆", "value": 1}, {'type': '鲤', 'province': '新疆', 'value': 1},
{"type": "鲢", "province": "天津市", "value": 51}, {'type': '鲢', 'province': '天津市', 'value': 51},
{"type": "鲢", "province": "河北省", "value": 2}, {'type': '鲢', 'province': '河北省', 'value': 2},
{"type": "鲢", "province": "辽宁省", "value": 1}, {'type': '鲢', 'province': '辽宁省', 'value': 1},
{"type": "鲢", "province": "吉林省", "value": 22}, {'type': '鲢', 'province': '吉林省', 'value': 22},
{"type": "鲢", "province": "黑龙江省", "value": 20}, {'type': '鲢', 'province': '黑龙江省', 'value': 20},
{"type": "鲢", "province": "上海市", "value": 8}, {'type': '鲢', 'province': '上海市', 'value': 8},
{"type": "鲢", "province": "江苏省", "value": 128}, {'type': '鲢', 'province': '江苏省', 'value': 128},
{"type": "鲢", "province": "安徽省", "value": 94}, {'type': '鲢', 'province': '安徽省', 'value': 94},
{"type": "鲢", "province": "江西省", "value": 13}, {'type': '鲢', 'province': '江西省', 'value': 13},
{"type": "鲢", "province": "山东省", "value": 7}, {'type': '鲢', 'province': '山东省', 'value': 7},
{"type": "鲢", "province": "河南省", "value": 54}, {'type': '鲢', 'province': '河南省', 'value': 54},
{"type": "鲢", "province": "湖北省", "value": 89}, {'type': '鲢', 'province': '湖北省', 'value': 89},
{"type": "鲢", "province": "湖南省", "value": 90}, {'type': '鲢', 'province': '湖南省', 'value': 90},
{"type": "鲢", "province": "广东省", "value": 21}, {'type': '鲢', 'province': '广东省', 'value': 21},
{"type": "鲢", "province": "广西", "value": 28}, {'type': '鲢', 'province': '广西', 'value': 28},
{"type": "鲢", "province": "重庆市", "value": 23}, {'type': '鲢', 'province': '重庆市', 'value': 23},
{"type": "鲢", "province": "四川省", "value": 23}, {'type': '鲢', 'province': '四川省', 'value': 23},
{"type": "鲢", "province": "贵州省", "value": 1}, {'type': '鲢', 'province': '贵州省', 'value': 1},
{"type": "鲢", "province": "云南省", "value": 4}, {'type': '鲢', 'province': '云南省', 'value': 4},
{"type": "鲢", "province": "陕西省", "value": 7}, {'type': '鲢', 'province': '陕西省', 'value': 7},
{"type": "鲢", "province": "甘肃省", "value": 1}, {'type': '鲢', 'province': '甘肃省', 'value': 1},
{"type": "鲢", "province": "宁夏", "value": 15}, {'type': '鲢', 'province': '宁夏', 'value': 15},
{"type": "南美白对虾", "province": "广东省", "value": 5}, {'type': '南美白对虾', 'province': '广东省', 'value': 5},
{"type": "南美白对虾", "province": "海南省", "value": 4}, {'type': '南美白对虾', 'province': '海南省', 'value': 4},
{"type": "青鱼", "province": "江苏省", "value": 15}, {'type': '青鱼', 'province': '江苏省', 'value': 15},
{"type": "青鱼", "province": "浙江省", "value": 18}, {'type': '青鱼', 'province': '浙江省', 'value': 18},
{"type": "青鱼", "province": "安徽省", "value": 5}, {'type': '青鱼', 'province': '安徽省', 'value': 5},
{"type": "青鱼", "province": "湖北省", "value": 1}, {'type': '青鱼', 'province': '湖北省', 'value': 1},
{"type": "青鱼", "province": "湖南省", "value": 15}, {'type': '青鱼', 'province': '湖南省', 'value': 15},
{"type": "青鱼", "province": "广东省", "value": 5}, {'type': '青鱼', 'province': '广东省', 'value': 5},
{"type": "青鱼", "province": "广西", "value": 7}, {'type': '青鱼', 'province': '广西', 'value': 7},
{"type": "乌鳢", "province": "江苏省", "value": 7}, {'type': '乌鳢', 'province': '江苏省', 'value': 7},
{"type": "乌鳢", "province": "湖北省", "value": 1}, {'type': '乌鳢', 'province': '湖北省', 'value': 1},
{"type": "乌鳢", "province": "湖南省", "value": 8}, {'type': '乌鳢', 'province': '湖南省', 'value': 8},
{"type": "乌鳢", "province": "广东省", "value": 66}, {'type': '乌鳢', 'province': '广东省', 'value': 66},
{"type": "乌鳢", "province": "广西", "value": 1}, {'type': '乌鳢', 'province': '广西', 'value': 1},
{"type": "鳙", "province": "天津市", "value": 42}, {'type': '鳙', 'province': '天津市', 'value': 42},
{"type": "鳙", "province": "河北省", "value": 1}, {'type': '鳙', 'province': '河北省', 'value': 1},
{"type": "鳙", "province": "吉林省", "value": 12}, {'type': '鳙', 'province': '吉林省', 'value': 12},
{"type": "鳙", "province": "黑龙江省", "value": 13}, {'type': '鳙', 'province': '黑龙江省', 'value': 13},
{"type": "鳙", "province": "上海市", "value": 4}, {'type': '鳙', 'province': '上海市', 'value': 4},
{"type": "鳙", "province": "江苏省", "value": 74}, {'type': '鳙', 'province': '江苏省', 'value': 74},
{"type": "鳙", "province": "安徽省", "value": 25}, {'type': '鳙', 'province': '安徽省', 'value': 25},
{"type": "鳙", "province": "江西省", "value": 19}, {'type': '鳙', 'province': '江西省', 'value': 19},
{"type": "鳙", "province": "山东省", "value": 2}, {'type': '鳙', 'province': '山东省', 'value': 2},
{"type": "鳙", "province": "河南省", "value": 23}, {'type': '鳙', 'province': '河南省', 'value': 23},
{"type": "鳙", "province": "湖北省", "value": 54}, {'type': '鳙', 'province': '湖北省', 'value': 54},
{"type": "鳙", "province": "湖南省", "value": 79}, {'type': '鳙', 'province': '湖南省', 'value': 79},
{"type": "鳙", "province": "广东省", "value": 11}, {'type': '鳙', 'province': '广东省', 'value': 11},
{"type": "鳙", "province": "广西", "value": 15}, {'type': '鳙', 'province': '广西', 'value': 15},
{"type": "鳙", "province": "重庆市", "value": 10}, {'type': '鳙', 'province': '重庆市', 'value': 10},
{"type": "鳙", "province": "四川省", "value": 4}, {'type': '鳙', 'province': '四川省', 'value': 4},
{"type": "鳙", "province": "贵州省", "value": 2}, {'type': '鳙', 'province': '贵州省', 'value': 2},
{"type": "鳙", "province": "云南省", "value": 1}, {'type': '鳙', 'province': '云南省', 'value': 1},
{"type": "鳙", "province": "陕西省", "value": 3}, {'type': '鳙', 'province': '陕西省', 'value': 3},
{"type": "鳙", "province": "宁夏", "value": 8} {'type': '鳙', 'province': '宁夏', 'value': 8}
] ]
}, },
}, },
......
src/views/quality-safety.vue
View file @ 00df0431
...@@ -9,30 +9,51 @@ ...@@ -9,30 +9,51 @@
rows="1fr 1fr 1fr" rows="1fr 1fr 1fr"
gap="0.5rem" gap="0.5rem"
> >
<QualityMap area="map"/>
<m-card area="box1" title="质量预警"> <m-card area="box1" title="质量预警">
<QualityWarning /> <QualityWarning />
</m-card> </m-card>
<m-card area="box2" title="企业占比"> <m-card area="box2" title="企业占比">
<CompanyRate />
</m-card> </m-card>
<m-card area="box3" title="检测合格率"> <m-card area="box3" title="检测合格率">
<QualifiedRate />
</m-card> </m-card>
<m-card area="box4" title="在线会诊"> <m-card area="box4" title="在线会诊">
<Online />
</m-card> </m-card>
<m-card area="box5" title="药品流通去向"> <m-card area="box5" title="药品流通去向">
<MedicineFlow />
</m-card> </m-card>
<m-card area="box6" title="药品购买频次分析"> <m-card area="box6" title="药品购买频次分析">
<MedicineFrequency />
</m-card> </m-card>
<m-card area="box7" title="病害测报"> <m-card area="box7" title="病害测报">
<Forecast />
</m-card> </m-card>
</m-grid> </m-grid>
</template> </template>
<script> <script>
import QualityWarning from './components/quality-safety/quality-warning' import QualityWarning from './components/quality-safety/quality-warning'
import CompanyRate from './components/quality-safety/company-rate'
import QualifiedRate from './components/quality-safety/qualified-rate'
import Online from './components/quality-safety/online'
import MedicineFlow from './components/quality-safety/medicine-flow'
import MedicineFrequency from './components/quality-safety/medicine-frequency'
import Forecast from './components/quality-safety/forecast'
import QualityMap from './components/quality-safety/quality-map'
export default { export default {
name: 'QualitySafety', name: 'QualitySafety',
components: { components: {
QualityWarning, QualityWarning,
CompanyRate,
QualifiedRate,
Online,
MedicineFlow,
MedicineFrequency,
Forecast,
QualityMap,
}, },
data() { data() {
return {} return {}
......
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