diff --git a/src/widerscreen/components/systemRiskComponent.vue b/src/widerscreen/components/systemRiskComponent.vue
new file mode 100644
index 0000000..f175537
--- /dev/null
+++ b/src/widerscreen/components/systemRiskComponent.vue
@@ -0,0 +1,368 @@
+<template>
+<div style="height: 85%;">
+  <div style="display: flex;height: 100%;">
+    <div  ref="whole risk"  style=" float: left;width: 98%; height: 100%;margin-left: 15px;margin-top: 0px;margin-right: 0px"></div>
+    <div  ref="future"  style=" float: left; width: 2%; height: 100%;margin-left: -168px;margin-top: 0px;"></div>
+  </div>
+  <!-- <div class="warning-component">
+    <div class="warning-dates">
+      <div class="date-item">前日：<span>{{ prevDayRisk }}</span></div>
+      <div class="date-item">昨日：<span>{{ yesterdayRisk }}</span></div>
+      <div class="date-item">今日：<span>{{ todayRisk }}</span></div>
+      <div class="date-item">明日：<span>{{ tomorrowRisk }}</span></div>
+      <div class="warning-recent">
+        最近预警：<span>{{ warningRisk }}</span>
+      </div>
+    </div>
+  </div> -->
+</div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import http from "@/utils/request";
+import { color } from "d3";
+
+export default {
+
+  data(){
+    return {
+      yMax:2,
+      yMin:0,
+      prevDayRisk:'',
+      yesterdayRisk:'',
+      todayRisk:'',
+      tomorrowRisk:'',
+      warningRisk:'',
+      riskData:[],
+      markLine: [],
+      markPoint: [],
+      markArea:[],
+      future:[],
+      datazoom:[]
+    }
+  },
+props:{
+    zoom:{
+      type:Array,
+      default: function () {
+        return []
+      }
+    }
+},
+  watch:{
+    zoom(newVal){
+      this.datazoom=newVal
+    },
+    yMax(newVal){
+      console.log(newVal)
+    }
+
+  },
+  mounted() {
+    
+
+  },
+
+  methods:{
+    getData(){
+      http.get('/risk/whole/').then((res)=>{
+      this.riskData=res.data.wholerisk
+      this.markPoint=res.data.markpoint
+      this.markLine=res.data.markline
+      this.markArea=res.data.markarea
+      this.prevDayRisk=res.data.detail[0]
+      this.yesterdayRisk=res.data.detail[1]
+      this.todayRisk=res.data.detail[2]
+      this.tomorrowRisk=res.data.detail[3]
+      this.warningRisk=res.data.detail[4]
+      this.future=res.data.future
+      // console.log(this.riskData,this.markLine,this.markPoint[0])
+      this.initChart()
+    })
+
+    // this.initChart(this.dat)
+    },
+    initChart(){
+      /*
+      示例参考如下
+      * https://echarts.apache.org/v4/examples/zh/editor.html?c=line-aqi
+      *
+      * https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/aqi-beijing.json
+      *
+      * */
+      let data=this.riskData
+      const future=this.future
+      var myChart = echarts.init(this.$refs["whole risk"])
+      var myChartFuture= echarts.init(this.$refs["future"])
+      let option = {
+        title: {
+          text: '系统性风险指数',
+          left: 'center',
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: {
+          axisLabel:{
+            fontSize:5,
+            color: '#fff'
+          },
+          axisLine: {
+            lineStyle:{
+              color: '#fff'
+            }
+          },
+          data: data.map(function (item) {
+            return item[0];
+          })
+        },
+        yAxis: {
+          axisLabel:{
+            color: '#fff'
+          },
+          axisLine: {
+            lineStyle:{
+              color: '#fff'
+            }
+          },
+          scale:true,
+          splitLine: {
+            show: false
+          }
+        },
+        //以下是时间轴
+        dataZoom: [{
+          //也应该是动态的
+          startValue: '2022-07-01',
+          type: 'slider',
+          dataBackground:{
+            lineStyle:{
+              color: '#fff'
+            },
+            areaStyle:{
+              color: '#fff'
+            }
+          },
+          textStyle:{
+            color: '#fff'
+          },
+          maxSpan:30
+        }],
+        // 根据阈值映射不同颜色
+        visualMap: {
+          top: 10,
+          right: 0,
+          precision:2,
+          pieces: [
+            {
+              gt: 0,
+              lte: parseFloat(this.markLine[0]),
+              color: '#096'
+            },
+            {
+              gt: parseFloat(this.markLine[0]),
+              lte: parseFloat(this.markLine[1]),
+              color: '#ffde33'
+            },
+          ],
+          outOfRange: {
+            color: '#fa0744'
+          },
+          textStyle:{
+            color:'#fff'
+          }
+        },
+        series: {
+          name: '系统性风险指数',
+          type: 'line',
+          data: data.map(function (item) {
+            return item[1];
+          }),
+          //标记极端值
+          markPoint:{
+            symbol:'circle',
+            symbolSize:10,
+            data: [{
+              itemStyle:{
+                //标注的颜色
+                color: {
+                  type: 'radial',
+                  x: 0.5,
+                  y: 0.5,
+                  r: 0.5,
+                  colorStops: [{
+                    offset: 0, color: 'purple' // 0% 处的颜色
+                  }, {
+                    offset: 1, color: '#258ddc' // 100% 处的颜色
+                  }],
+                  global: false // 缺省为 false
+                }
+              },
+              //x轴的index和y值
+              coord: this.markPoint[0] // 其中 5 表示 xAxis.data[5]，即 '33' 这个元素。
+              // coord: ['5', 33.4] // 其中 '5' 表示 xAxis.data中的 '5' 这个元素。
+              // 注意，使用这种方式时，xAxis.data 不能写成 [number, number, ...]
+              // 而只能写成 [string, string, ...]
+            }]
+
+          },
+          markLine: {
+            //阈值标记线  这里应该是动态的
+            silent: true,
+            symbol:'none',
+            label:{ position:'middle',},
+            lineStyle:{
+              color:'#fff'
+            },
+            data: [{
+              yAxis: this.markLine[0]
+            }, {
+              yAxis:this.markLine[1]
+            },
+            ]
+          },
+          markArea:{
+            label: { // 分界线上的文字标签
+              // position: 'end',
+              formatter: '预测值'
+            },
+            data:[[{
+              xAxis:this.markArea[0]},
+              {
+                xAxis:this.markArea[1]
+                // x:'100%'
+              },
+            ]]
+
+          }
+        }
+      }
+      let opt2={
+        tooltip: {
+          trigger: 'item',
+        },
+        grid:
+
+          {backgroundColor: '#eeb0ae',
+            left:'0%',
+            show:true,
+            zlevel:0,
+          }
+        ,
+        xAxis:
+          {
+            data:[{value:'未来一个月'}],
+            axisLabel:{
+              fontSize:5
+            }
+            // gridIndex: 0,
+          },
+        yAxis: {
+          min:0.8,
+          max:2,
+          type: 'value',
+          show:false,
+          // boundaryGap: false,
+          // gridIndex: 1
+        },
+        series: {
+          type: 'boxplot',
+          boxWidth : [2, 10],
+          itemStyle: {
+            clip: true
+          },
+          data:[{value: this.future,} ],
+          // 确保箱型图显示在折线图之后
+          // zlevel: 3,
+          // 箱型图的x轴数据应对应未来一个月的日期，由于这些日期没有具体值，我们使用null，ECharts会自动处
+          // ... 箱型图其他配置，如颜色、样式等
+          markArea:{
+            label: { // 分界线上的文字标签
+              // position: 'end',
+              formatter: '预测值'
+            },
+            itemStyle:{
+              color:'yellow'
+            }
+            // data: [[  {
+            //   name: '平均值到最大值',
+            //   type: 'average'
+            // },
+            //   {
+            //     type: 'max'
+            //   }]]
+          },
+          tooltip: {
+            formatter: function (param) {
+              return [
+                // 'Experiment ' + param.name + ': ',
+                '最大值: ' + future[4],
+                '均值+标准差: ' + future[3],
+                '中位数: ' +future[2],
+                '均值-标准差: ' + future[1],
+                '最小值: ' + future[0]
+              ].join('<br/>');
+            }
+          }
+        }
+      }
+      myChart.setOption(option);
+      myChartFuture.setOption(opt2)
+      const that=this
+      myChart.on('datazoom', function (params) {
+        // Y轴最大值
+        this.yMax = myChart.getModel().getComponent('yAxis').axis.scale._extent[1];
+        // Y轴最小值
+        this.yMin = myChart.getModel().getComponent('yAxis').axis.scale._extent[0];
+
+        that.$nextTick(() => {
+          // 设置 myChartFuture 的 y 轴值
+          myChartFuture.setOption({
+            yAxis: {
+              min: this.yMin,
+              max: this.yMax
+            }
+          });
+        });
+      });
+    }
+
+  },
+
+}
+</script>
+
+<style scoped>
+.warning-component {
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  max-width: 100%;
+  text-align: center;
+
+  margin: auto;
+}
+
+.warning-dates {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.date-item {
+  margin: 0 10px;
+  font-weight: bold;
+}
+
+.warning-recent {
+  color: #ff4d4f;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/widerscreen/index1.vue b/src/widerscreen/index1.vue
index ad8a006..a8e9db0 100644
--- a/src/widerscreen/index1.vue
+++ b/src/widerscreen/index1.vue
@@ -240,27 +240,18 @@
       <div class="box">
         <div class="box-header" style="">
           <span style=""></span>
-          板块1
+          板块3
         </div>
         <div class=" box-body">
           <!-- 第一行 -->
           <div class="charts-row" style="">
-            <div style="flex:0 1 33%">
+            <div style="flex:0 1 100%">
               <dv-border-box-13 style="width:100%;height:300px;">
                 <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">类型统计</h3>
-                <div style="display: flex;justify-content: center;align-items: center;">
-                  <dv-decoration-9 style="width:120px;height:120px;margin-right:30px;" dur=5><h1 style="color: rgba(255,215,0);">48</h1></dv-decoration-9>
-                  <dv-decoration-9 style="width:120px;height:120px;margin-left: 30px;" dur=5><h1 style="color: rgba(255,215,0);">38</h1></dv-decoration-9>
-              </div> 
-              <div style="display: flex;justify-content: center;align-items: center;">
-                <span style="padding-right: 50px;">节点类型总数</span>
-                <span style="padding-left: 50px;">边类型总数</span>
-              </div>  
-
-              
+                <systemRiskComponent :zoom="datazoom" @datazoom="changeComp" ref="systemRisk"></systemRiskComponent>
               </dv-border-box-13>
             </div>
-            <div style="flex:0 1 34%">
+            <!-- <div style="flex:0 1 34%">
               <dv-border-box-13 style="width:100%;height:300px;">
                 <h3 style="padding-top: 15px;padding-left: 15px;padding-right: 15px">类型统计</h3>
                 <div style="display: flex;justify-content: center;align-items: center;">
@@ -287,7 +278,7 @@
                 <span style="padding-left: 50px;">边类型总数</span>
               </div>  
               </dv-border-box-13>
-            </div>
+            </div> -->
           </div>
 
           <!-- 第二行 -->
@@ -360,16 +351,22 @@ import LineChart from './components/LineChart.vue'
 import http from "@/utils/request";
 import * as echarts from "echarts";
 import { color } from 'd3';
+import systemRiskComponent from './components/systemRiskComponent';// 系统风险折线大图
+import dimensionComponent from "@/components/dimensionComponent";
 export default {
   name: 'App',
   components: {
     Map,
     RadarChart,
     CapsuleChart,
-    LineChart
+    LineChart,
+    systemRiskComponent,
+    dimensionComponent
   },
   data() {
     return {
+      compName:'systemRiskComponent',
+      datazoom:[],
       scale: 0,
       width: 5760,
       height: 1080,
@@ -669,6 +666,13 @@ export default {
         }, delays);
       };
     },
+    changeComp(mesg){
+        this.datazoom=mesg
+        console.log(mesg)
+    },
+  },
+  created() {
+    
   },
   mounted() {
     // 大屏自适应部分
@@ -676,7 +680,26 @@ export default {
     window.removeEventListener("resize",this.debounce(this.setScale))
     window.addEventListener("resize", this.debounce(this.setScale));
 
-    // 获取股票风险 圆圈类饼图部分
+    // 自动登录
+    const params = new URLSearchParams();
+    params.append('username', 'gongdragon');
+    params.append('password', 'gwl123');
+    http.post('/users/login/', params)
+    .then((res)=>{
+      if (res.data.message===1){
+        this.loading = false
+        let user={token:res.data.data,name:'gongdragon',stats:res.data.stats}
+        this.$store.commit('login',user)
+      } else {
+        this.$message({
+          showClose: true,
+          message: res.data.data,
+          type: 'warning'
+        });
+        this.loading = false
+      }
+    }).then(()=>{
+      // 获取股票风险 圆圈类饼图部分
     http.get('/warning/get_warning_count/').then((res)=> {
         // console.log('get_warning_count',res);
         
@@ -780,11 +803,19 @@ export default {
                 name: '上海纳尔实业股份有限公司',//公司名
                 date: '2024-01',//时间（年份+季度）
     }}).then(response => {
+      console.log('Response',response);
+      
+      // let radarDatas// 存放所有数据项
+      // radarDatas = response.data.data.map(item => {
+      //   // 单个数据项 转化为echarts格式
+      //   let radarData = [item.投资关系,item.操盘模式,item.财务状态,item.运行状态,item.规模扩张,item.声誉风险,item.外部环境]
+      //   return radarData
+      // })
+      // console.log('radarDatas',radarDatas)
       let radarData = []
       for (let i in response.data.data) {
         if (i !== '健康指数' && i !== '等级' && typeof response.data.data[i] === 'number') radarData.push(response.data.data[i])
       }
-      // console.log('radarData',radarData)
       const echarts3 = echarts.init(this.$refs.echarts_3)
       const option_3 = {
         title: {
@@ -948,6 +979,11 @@ export default {
     //     }
     //     echarts1.setOption(option_1,true)
     //   })
+
+    // 系统性风险
+    this.$refs.systemRisk.getData()
+    }
+    )
   }
 }
 </script>