修改

src/api/system/index.js

@@ -8,4 +8,11 @@ export function topStatistics(query) {
         method: 'get',
         params: query
     })
-}
+}
+export function signPatientCount(query) {
+    return request({
+        url: '/system/homePage/signPatientCount',
+        method: 'get',
+        params: query
+    })
+}

src/views/index.vue

@@ -56,7 +56,7 @@
     </div>
     <div class="appbottom">
       <div class="appbottomone">
-        <div class="word">随访覆盖情况</div>
+        <div class="word">本月签约患者情况</div>
         <div id="main1" style="height: 80%"></div>
       </div>
       <div class="appbottomtwo">
@@ -68,7 +68,7 @@
 </template>
 
 <script>
-import { topStatistics } from "@/api/system/index";
+import { topStatistics, signPatientCount } from "@/api/system/index";
 import * as echarts from "echarts";
 
 export default {
@@ -86,16 +86,14 @@ export default {
     this.getlist();
   },
   methods: {
-    goback(){
+    goback() {
       this.$router.push({
         path: "/task/manualReview",
-    
       });
     },
-    gofollowup(){
+    gofollowup() {
       this.$router.push({
         path: "/task/followup",
-    
       });
     },
     // 上部分
@@ -105,110 +103,108 @@ export default {
         this.list = res.data;
       });
     },
-    goTarget(href) {
-      window.open(href, "_blank");
-    },
     getlist() {
       // 基于准备好的dom，初始化echarts实例
-      var chartDoms = document.getElementById("main1");
+      signPatientCount().then((res) => {
-      var myChart1 = echarts.init(chartDoms);
+        console.log(res, "res");
-      var optionone;
+        var countydata = [];
-      optionone = {
+        res.data.forEach((e) => {
-        tooltip: {
+          countydata.push(e.time);
-          trigger: "axis",
+        });
-          axisPointer: {
+        var countydatay = [];
-            type: "cross",
+        res.data.forEach((e) => {
-            crossStyle: {
+          countydatay.push(e.signPatientCount);
-              color: "#999",
+        });
-            },
+        var proportionlist = [];
-          },
+        res.data.forEach((e) => {
-        },
+          proportionlist.push(e.proportion);
-        // toolbox: {
+        });
-        //   feature: {
+        // return
-        //     dataView: { show: true, readOnly: false },
+        var chartDoms = document.getElementById("main1");
-        //     magicType: { show: true, type: ["line", "bar"] },
+        var myChart1 = echarts.init(chartDoms);
-        //     restore: { show: true },
+        var optionone;
-        //     // saveAsImage: { show: true },
+        optionone = {
-        //   },
+          tooltip: {
-        // },
+            trigger: "axis",
-        legend: {
-          data: ["Evaporation", "Precipitation", "Temperature"],
-        },
-        color: ["#91ED93", "#68B4FF"],
-        xAxis: [
-          {
-            type: "category",
-            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
             axisPointer: {
-              type: "shadow",
+              type: "cross",
-            },
+              crossStyle: {
-          },
+                color: "#999",
-        ],
-        yAxis: [
-          {
-            type: "value",
-            name: "Precipitation",
-            min: 0,
-            max: 250,
-            interval: 50,
-            axisLabel: {
-              formatter: "{value} ml",
-            },
-          },
-          {
-            type: "value",
-            name: "Temperature",
-            min: 0,
-            max: 25,
-            interval: 5,
-            axisLabel: {
-              formatter: "{value} °C",
-            },
-          },
-        ],
-        series: [
-          {
-            name: "Evaporation",
-            type: "bar",
-            tooltip: {
-              valueFormatter: function (value) {
-                return value + " ml";
               },
             },
-            data: [
-              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
-              3.3,
-            ],
           },
-          // {
+          legend: {
-          //   name: "Precipitation",
+            data: ["签约数量", "签约率(%)"],
-          //   type: "bar",
+          },
-          //   tooltip: {
+          color: ["#2BBD2E", "#68B4FF"],
-          //     valueFormatter: function (value) {
+          xAxis: [
-          //       return value + " ml";
+            {
-          //     },
+              axisLabel: {
-          //   },
+                interval: 0,
-          //   data: [
+                // show: true,
-          //     2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
+                // rotate: 35,//35度角倾斜显示
-          //     2.3,
+                textStyle: {
-          //   ],
+                  color: "#000",
-          // },
+                  fontSize: 12,
-          {
+                },
-            name: "Temperature",
+              },
-            type: "line",
+              type: "category",
-            yAxisIndex: 1,
+              data: countydata,
-            tooltip: {
+              axisPointer: {
-              valueFormatter: function (value) {
+                type: "shadow",
-                return value + " °C";
               },
             },
-            data: [
+          ],
-              2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
+          yAxis: [
-            ],
+            {
-          },
+              type: "value",
-        ],
+              name: "签约数量",
-      };
+              // min: 0,
-      optionone && myChart1.setOption(optionone);
+              // max: 20,
+              // interval: 4,
+              axisLabel: {
+                formatter: "{value}",
+              },
+            },
+            {
+              type: "value",
+              name: "签约率(%)",
+              min: 0,
+              max: 100,
+              interval: 20,
+              axisLabel: {
+                formatter: "{value}%",
+              },
+            },
+          ],
+          series: [
+            {
+              name: "签约数量",
+              type: "bar",
+              tooltip: {
+                valueFormatter: function (value) {
+                  return value + " ml";
+                },
+              },
+              data: countydatay,
+              barWidth: "20%",
+            },
+
+            {
+              name: "签约率(%)",
+              type: "line",
+              yAxisIndex: 1,
+              tooltip: {
+                valueFormatter: function (value) {
+                  return value + " %";
+                },
+              },
+              data: proportionlist,
+            },
+          ],
+        };
+        optionone && myChart1.setOption(optionone);
+      });
     },
     info() {
       var chartDom = document.getElementById("main");
@@ -251,12 +247,10 @@ export default {
 <style scoped lang="scss">
 .app-container {
   background: #f1f3f5;
-  // display: flex;
   width: 100%;
-  // height: 100%;
+  padding: 20px 20px 20px 20px;
 }
 .app {
-  // width: 99%;
   height: 150px;
   display: flex;
 
@@ -323,10 +317,10 @@ export default {
   }
 }
 .appright {
-  width: 16%;
+  width: 17%;
   background: #fff;
   border-radius: 5px;
-  height: calc(100vh - 400px);
+  height: calc(100vh - 450px);
   .wait {
     // padding: 20px;
     font-weight: 600;