with st.form("my_form"):
    st.write("Inside the form")
    slider_val = st.slider("Form slider")
    checkbox_val = st.checkbox("Form checkbox")

    # 每一个form必须有一个 submit 按钮.
    submitted = st.form_submit_button("Submit")
    if submitted:
        st.write("slider", slider_val, "checkbox", checkbox_val)

st.write("己通退了表单j")

form23 = st.form("my_form")
form23.slider("Inside the form")
st.slider("在此表单外面了")

# 增加一个submit按钮到此表单:
form23.form_submit_button("Submit")

#coding:utf8
from flask import Flask
from flask import request,render_template
import pandas as pd
import numpy as np
# from werkzeug import secure_filename
import os

app=Flask(__name__)

# 以下函数把一个excel表格读出，然后把数据转换成luckysheet的celldata，以便采用luckysheet显示在网页上
def pands_to_luckysheet(file_name):
	sheet_data=[] # 定义一个空列表

	data_f = pd.read_excel(file_name)

	none_nan=(data_f.isnull()) | (data_f.apply(lambda x: str(x).isspace())) # 找到所有的None
	data_f=data_f[~none_nan] # 把所有的None替换为nan
	# print("data_f2=",data_f)
	data_f=data_f.fillna("")  # 把所有的nan替换为空字符
	# print("data_f3=",data_f)	
	row=len(data_f) # 行数
	col=len(data_f.columns)  #列数
	# 打算把数据转换为luckysheet的celldata数据
	for i in range(row):
		for j in range(col):
			# sheet_data[k]=[{"r":i,"c":j,"v":{"v":data_f.iloc[i,j]}}]
			# k=k+1
			sheet_data.append({"r":i,"c":j,"v":{"v":data_f.iloc[i,j],"m":data_f.iloc[i,j]}}) # 添加列表项
	return sheet_data
	# print("测试luckckyshee数据转换")  
	# print(sheet_data)	

@app.route("/table_channel")
def table_channel():
	sheet_data=pands_to_luckysheet("/home/mywork/2021/汇总.xlsx")
	# print("sheet_data=",sheet_data)
	return render_template("index.html" ,lucky_data=sheet_data)

import streamlit as st
import streamlit.components.v1 as components

# bootstrap 4 collapse example

   html_data= """
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <div id="accordion">
      <div class="card">
        <div class="card-header" id="headingOne">
          <h5 class="mb-0">
            <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            Collapsible Group Item #1
            </button>
          </h5>
        </div>
        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
          <div class="card-body">
            Collapsible Group Item #1 content
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header" id="headingTwo">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            Collapsible Group Item #2
            </button>
          </h5>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
          <div class="card-body">
            Collapsible Group Item #2 content
          </div>
        </div>
      </div>
    </div>
    """
    components.html(html_data, width=None, height=300,scrolling=False)
)

import streamlit as st
import pandas as pd
import numpy as np
import streamlit.components.v1 as components

st.set_page_config( page_title="Streamlit 练习 ",   layout="wide" )

page_html_luckysheet = """ 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <div id="accordion">
      <div class="card">
        <div class="card-header" id="headingOne">
          <h5 class="mb-0">
            <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            Collapsible Group Item #1
            </button>
          </h5>
        </div>
        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
          <div class="card-body">
            Collapsible Group Item #1 content
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header" id="headingTwo">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            Collapsible Group Item #2
            </button>
          </h5>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
          <div class="card-body">
            Collapsible Group Item #2 content
          </div>
        </div>
      </div>
    </div>
"""
# st.markdown( page_html_head, unsafe_allow_html=True)
container_top = st.container()
container_body = st.container()

# Top
with container_top:
    st.markdown(" [新浪网](https://www.sina.com.cn) /[我的笔记](https://superigbt_superigbt.gitee.io) ")
    st.image("/home/frankli/temp/建站/banner/mybanner4-1.jpg",caption='my banner', use_column_width=True)


# Body
with container_body:
    # components.iframe( "https://superigbt_superigbt.gitee.io/")
    left_side, right_side = st.columns([1,6])
    # 左边，注意with语句的下一行缩进
    with left_side: 
                    left_side.subheader(" 左边的窄列，预留菜单树 ")
    # 右边,注意缩进。
    with right_side: 
                    components.html( page_html_luckysheet )
                    components.iframe("https://superigbt_superigbt.gitee.io",width=None, height=600, scrolling=True)

""" 
## 一 streamlit.beta_container()
通过with st.beta_container():，可以Book一个组件模块
将一个不可见的容器插入到你的应用程序中，可以用来保存多个元素。
"""

st.markdown(" - with写法 ")
with st.beta_container():
   st.write("with写法，此句放在这个没有命名的容器中，注意通过缩进来表示范围")
   # You can call any Streamlit command, including custom components:
   st.bar_chart(np.random.randn(50, 3))

st.write("此句放在没有命名的容器外")

st.markdown(" - 常规写法 ")
container_one = st.beta_container()
container_one.write(" 此句写在一个名叫container_one的容器内 ")
st.write(" 没有加容器前缀，所以就只写在容器外了 ")

st.markdown(" - 在另外的地方给一个容器内插一句话 ")
container_one.write("要想在另外的地方给容器内插一句话，容器必须命名，当然这个不符合程序规则，程序结构一塌糊涂 ")

st.markdown(" --- ")
#-------------------------------------------------------------------------------------------------------------
"""
## 二 分列展示
streamlit.beta_columns(spec)

以并排列的形式插入容器。插入多个并排放置的多元素容器，并返回容器对象列表。

要向返回的容器添加元素，可以使用“with”表示法(首选)，或者直接调用返回对象的方法。

"""
st.subheader(" 请参见下面的例子。")

col1, col2, col3 = st.beta_columns(3)

with col1:
   st.header("猫头")
   st.image("/home/frankli/Pictures/cat.jpg", use_column_width=True)

with col2:
   st.header("侧滑手机")
   st.image("/home/frankli/Pictures/cehua3.jpeg", use_column_width=True)

with col3:
   st.header("金色庄园")
   st.image("/home/frankli/Pictures/金色庄园.jpg", use_column_width=True)

st.markdown(" --- ")
#-------------------------------------------------------------------------------------------------------------
"""
## 三 按照比例分列展示
"""

col1, col2 = st.beta_columns([3, 1])
data = np.random.randn(10, 1)

col1.subheader(" 宽列展示图表 ")
col1.line_chart(data)

col2.subheader("  窄列展示数据 ")
col2.write(data)

st.markdown(" --- ")
#-------------------------------------------------------------------------------------------------------------
"""
 ## 4 折叠/展开 
streamlit.beta_expander(label=None, expanded=False)
"""


with st.beta_expander("See explanation"):
    st.write("""
        在这里进行折叠与展开。
    """)
    st.line_chart({"data": [1, 5, 2, 6, 2, 1]})