Skip to content

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

test

parent 74a0df86
Show whitespace changes
Inline Side-by-side
Showing with 276 additions and 0 deletions
src/views/components/quality-safety/company-rate.vue 0 → 100644
View file @ e22bc3ea
<template>
<div class="company-rate">
<m-chart :data="data" :config="config"/>
</div>
</template>
<script>
export default {
name: 'CompanyRate',
data() {
return {}
},
}
</script>
<style lang="stylus" scoped>
.company
</style>
src/views/components/quality-safety/quality-warning.vue 0 → 100644
View file @ e22bc3ea
<template>
<div class="quality-warning">
<p>预警指标：良种使用、病害问诊、抽检结果</p>
<Select v-model="type" class="custom-select" @on-change="setMapData" size="small" transfer>
<Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
</Select>
<div class="map" ref="map" />
</div>
</template>
<script>
import china from 'echarts/map/json/china.json'
export default {
name: 'DiseaseWarning',
data() {
return {
mapName: 'china',
map: null,
config: {
geo: {
map: 'china',
left: 0,
top: 0,
bottom: 0,
right: '15%',
zoom: 1,
itemStyle: {
areaColor: 'rgba(0, 191, 255, 0.1)',
borderColor: 'rgba(0, 191, 255, 0.9)',
// borderWidth: 0.1,
}
},
tooltip: {
trigger: 'item',
// formatter: '{b}：{c}'
formatter: ({data}) => {
if (data && data.value) {
return `<div>${data.name}：${data.value}</div>`
}
return null
}
},
toolbox: {
show: false,
},
visualMap: {
min: 0,
max: 200,
itemWidth: 10,
left: 'auto',
right: 0,
realtime: false,
calculable: true,
textStyle: {
color: '#fff',
},
inRange: {
color: ['green', 'yellow', 'red']
}
},
series: [],
},
options: [
'草鱼',
'黄颡鱼',
'克氏原螯虾',
'鲤',
'鲢',
'南美白对虾',
'青鱼',
'乌鳢',
'鳙',
],
type: '草鱼',
}
},
mounted() {
// this.$nextTick(this.init)
setTimeout(this.init, 0)
},
computed: {
diseaseWarning() {
return [
{"type": "草鱼", "province": "北京市", "value": 10},
{"type": "草鱼", "province": "天津市", "value": 70},
{"type": "草鱼", "province": "河北省", "value": 16},
{"type": "草鱼", "province": "辽宁省", "value": 30},
{"type": "草鱼", "province": "吉林省", "value": 9},
{"type": "草鱼", "province": "黑龙江省", "value": 10},
{"type": "草鱼", "province": "上海市", "value": 19},
{"type": "草鱼", "province": "江苏省", "value": 318},
{"type": "草鱼", "province": "浙江省", "value": 33},
{"type": "草鱼", "province": "安徽省", "value": 140},
{"type": "草鱼", "province": "福建省", "value": 242},
{"type": "草鱼", "province": "江西省", "value": 212},
{"type": "草鱼", "province": "山东省", "value": 84},
{"type": "草鱼", "province": "河南省", "value": 141},
{"type": "草鱼", "province": "湖北省", "value": 165},
{"type": "草鱼", "province": "湖南省", "value": 240},
{"type": "草鱼", "province": "广东省", "value": 294},
{"type": "草鱼", "province": "广西", "value": 280},
{"type": "草鱼", "province": "重庆市", "value": 59},
{"type": "草鱼", "province": "四川省", "value": 125},
{"type": "草鱼", "province": "贵州省", "value": 7},
{"type": "草鱼", "province": "云南省", "value": 17},
{"type": "草鱼", "province": "陕西省", "value": 72},
{"type": "草鱼", "province": "甘肃省", "value": 7},
{"type": "草鱼", "province": "宁夏", "value": 72},
{"type": "草鱼", "province": "新疆", "value": 4},
{"type": "黄颡鱼", "province": "河北省", "value": 1},
{"type": "黄颡鱼", "province": "江苏省", "value": 3},
{"type": "黄颡鱼", "province": "浙江省", "value": 11},
{"type": "黄颡鱼", "province": "安徽省", "value": 2},
{"type": "黄颡鱼", "province": "江西省", "value": 8},
{"type": "黄颡鱼", "province": "湖北省", "value": 11},
{"type": "黄颡鱼", "province": "湖南省", "value": 4},
{"type": "黄颡鱼", "province": "广东省", "value": 48},
{"type": "黄颡鱼", "province": "广西", "value": 33},
{"type": "黄颡鱼", "province": "重庆市", "value": 2},
{"type": "黄颡鱼", "province": "四川省", "value": 16},
{"type": "克氏原螯虾", "province": "江苏省", "value": 41},
{"type": "克氏原螯虾", "province": "安徽省", "value": 18},
{"type": "克氏原螯虾", "province": "湖北省", "value": 15},
{"type": "克氏原螯虾", "province": "四川省", "value": 1},
{"type": "克氏原螯虾", "province": "贵州省", "value": 3},
{"type": "鲤", "province": "北京市", "value": 12},
{"type": "鲤", "province": "天津市", "value": 72},
{"type": "鲤", "province": "河北省", "value": 15},
{"type": "鲤", "province": "内蒙古", "value": 13},
{"type": "鲤", "province": "辽宁省", "value": 38},
{"type": "鲤", "province": "吉林省", "value": 26},
{"type": "鲤", "province": "黑龙江省", "value": 60},
{"type": "鲤", "province": "江苏省", "value": 38},
{"type": "鲤", "province": "浙江省", "value": 28},
{"type": "鲤", "province": "安徽省", "value": 3},
{"type": "鲤", "province": "山东省", "value": 39},
{"type": "鲤", "province": "河南省", "value": 193},
{"type": "鲤", "province": "湖南省", "value": 8},
{"type": "鲤", "province": "广东省", "value": 9},
{"type": "鲤", "province": "广西", "value": 56},
{"type": "鲤", "province": "重庆市", "value": 2},
{"type": "鲤", "province": "四川省", "value": 44},
{"type": "鲤", "province": "贵州省", "value": 6},
{"type": "鲤", "province": "云南省", "value": 5},
{"type": "鲤", "province": "陕西省", "value": 47},
{"type": "鲤", "province": "甘肃省", "value": 7},
{"type": "鲤", "province": "宁夏", "value": 49},
{"type": "鲤", "province": "新疆", "value": 1},
{"type": "鲢", "province": "天津市", "value": 51},
{"type": "鲢", "province": "河北省", "value": 2},
{"type": "鲢", "province": "辽宁省", "value": 1},
{"type": "鲢", "province": "吉林省", "value": 22},
{"type": "鲢", "province": "黑龙江省", "value": 20},
{"type": "鲢", "province": "上海市", "value": 8},
{"type": "鲢", "province": "江苏省", "value": 128},
{"type": "鲢", "province": "安徽省", "value": 94},
{"type": "鲢", "province": "江西省", "value": 13},
{"type": "鲢", "province": "山东省", "value": 7},
{"type": "鲢", "province": "河南省", "value": 54},
{"type": "鲢", "province": "湖北省", "value": 89},
{"type": "鲢", "province": "湖南省", "value": 90},
{"type": "鲢", "province": "广东省", "value": 21},
{"type": "鲢", "province": "广西", "value": 28},
{"type": "鲢", "province": "重庆市", "value": 23},
{"type": "鲢", "province": "四川省", "value": 23},
{"type": "鲢", "province": "贵州省", "value": 1},
{"type": "鲢", "province": "云南省", "value": 4},
{"type": "鲢", "province": "陕西省", "value": 7},
{"type": "鲢", "province": "甘肃省", "value": 1},
{"type": "鲢", "province": "宁夏", "value": 15},
{"type": "南美白对虾", "province": "广东省", "value": 5},
{"type": "南美白对虾", "province": "海南省", "value": 4},
{"type": "青鱼", "province": "江苏省", "value": 15},
{"type": "青鱼", "province": "浙江省", "value": 18},
{"type": "青鱼", "province": "安徽省", "value": 5},
{"type": "青鱼", "province": "湖北省", "value": 1},
{"type": "青鱼", "province": "湖南省", "value": 15},
{"type": "青鱼", "province": "广东省", "value": 5},
{"type": "青鱼", "province": "广西", "value": 7},
{"type": "乌鳢", "province": "江苏省", "value": 7},
{"type": "乌鳢", "province": "湖北省", "value": 1},
{"type": "乌鳢", "province": "湖南省", "value": 8},
{"type": "乌鳢", "province": "广东省", "value": 66},
{"type": "乌鳢", "province": "广西", "value": 1},
{"type": "鳙", "province": "天津市", "value": 42},
{"type": "鳙", "province": "河北省", "value": 1},
{"type": "鳙", "province": "吉林省", "value": 12},
{"type": "鳙", "province": "黑龙江省", "value": 13},
{"type": "鳙", "province": "上海市", "value": 4},
{"type": "鳙", "province": "江苏省", "value": 74},
{"type": "鳙", "province": "安徽省", "value": 25},
{"type": "鳙", "province": "江西省", "value": 19},
{"type": "鳙", "province": "山东省", "value": 2},
{"type": "鳙", "province": "河南省", "value": 23},
{"type": "鳙", "province": "湖北省", "value": 54},
{"type": "鳙", "province": "湖南省", "value": 79},
{"type": "鳙", "province": "广东省", "value": 11},
{"type": "鳙", "province": "广西", "value": 15},
{"type": "鳙", "province": "重庆市", "value": 10},
{"type": "鳙", "province": "四川省", "value": 4},
{"type": "鳙", "province": "贵州省", "value": 2},
{"type": "鳙", "province": "云南省", "value": 1},
{"type": "鳙", "province": "陕西省", "value": 3},
{"type": "鳙", "province": "宁夏", "value": 8}
]
},
},
methods: {
init() {
this.$echarts.registerMap(this.mapName, china)
this.map = this.$echarts.init(this.$refs.map)
this.map.setOption(this.config)
},
setMapData(type) {
const list = this.diseaseWarning.filter(item => item.type === type).map(item => {
return {
name: item.province.replace('省', '').replace('市', ''),
value: item.value,
}
})
this.config.series = [{
type: 'map',
geoIndex: 0,
map: this.mapName,
data: list,
}]
this.config.visualMap = Object.assign(this.config.visualMap, {max: Math.max(...list.map(item => item.value))})
this.map && this.map.setOption(this.config)
},
},
watch: {
diseaseWarning: {
handler(cur, past) {
if (cur && cur !== past && cur.length > 0) {
this.setMapData(this.type)
}
},
immediate: true
}
}
}
</script>
<style lang="stylus" scoped>
.quality-warning
width 100%
height 100%
.map
width 100%
height 90%
p
text-align center
</style>
src/views/quality-safety.vue
View file @ e22bc3ea
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
gap="0.5rem" gap="0.5rem"
> >
<m-card area="box1" title="质量预警"> <m-card area="box1" title="质量预警">
<QualityWarning />
</m-card> </m-card>
<m-card area="box2" title="企业占比"> <m-card area="box2" title="企业占比">
</m-card> </m-card>
...@@ -27,8 +28,12 @@ ...@@ -27,8 +28,12 @@
</template> </template>
<script> <script>
import QualityWarning from './components/quality-safety/quality-warning'
export default { export default {
name: 'QualitySafety', name: 'QualitySafety',
components: {
QualityWarning,
},
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