| | |
|---|
| | | <script setup lang='ts'>
|
|---|
| | | <script setup lang="ts">
|
|---|
| | | import {ref, reactive, onMounted} from "vue";
|
|---|
| | | import CapsuleChart from "@/components/datav/capsule-chart";
|
|---|
| | | import { currentGET } from "@/api";
|
|---|
| | |
|
|---|
| | | const config = ref({
|
|---|
| | | showValue: true,
|
|---|
| | | unit: "次",
|
|---|
| | | });
|
|---|
| | | const data= ref([])
|
|---|
| | | const getData = () => {
|
|---|
| | | currentGET("rightCenter").then((res) => {
|
|---|
| | | console.log("报警排名", res);
|
|---|
| | | if (res.success) {
|
|---|
| | | data.value =res.data;
|
|---|
| | | console.log("data", res.data)
|
|---|
| | | } else {
|
|---|
| | | window["$message"]({
|
|---|
| | | text: res.msg,
|
|---|
| | | type: "warning",
|
|---|
| | | });
|
|---|
| | | }
|
|---|
| | | });
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | onMounted(() =>{
|
|---|
| | | // getData();
|
|---|
| | | let obj=[
|
|---|
| | | {
|
|---|
| | | "value": 942,
|
|---|
| | | "name": "常德市"
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | "value": 889,
|
|---|
| | | "name": "张家口市"
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | "value": 691,
|
|---|
| | | "name": "周口市"
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | "value": 621,
|
|---|
| | | "name": "澳门半岛"
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | "value": 520,
|
|---|
| | | "name": "包头市"
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | "value": 207,
|
|---|
| | | "name": "乌海市"
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | "value": 157,
|
|---|
| | | "name": "青岛市"
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | "value": 86,
|
|---|
| | | "name": "营口市"
|
|---|
| | | }
|
|---|
| | | ]
|
|---|
| | | data.value = obj
|
|---|
| | | })
|
|---|
| | | </script>
|
|---|
| | |
|
|---|
| | | <template>
|
|---|
| | | <div class=''>
|
|---|
| | |
|
|---|
| | | <div class="right_bottom">
|
|---|
| | | <CapsuleChart :config="config" style="width: 100%; height: 260px" :data="data"/>
|
|---|
| | | </div>
|
|---|
| | | </template>
|
|---|
| | |
|
|---|
| | | <style scoped lang='scss'>
|
|---|
| | | <style scoped lang="scss">
|
|---|
| | |
|
|---|
| | | </style> |
|---|
| | | .right_bottom {
|
|---|
| | | box-sizing: border-box;
|
|---|
| | | padding: 0 16px;
|
|---|
| | | height: 100%;
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
